Separator

import { Separator } from "@araf-ds/core"

export default function Example() {
  return (
    <div>
      <p>Section A</p>
      <Separator />
      <p>Section B</p>
    </div>
  )
}

<div>
  <div>
    <h4>Typography</h4>
    <p>A collection of font styles used across the design system.</p>
  </div>
  <Separator />
  <div>
    <h4>Spacing</h4>
    <p>Base-4 spacing scale from 4px to 96px.</p>
  </div>
</div>

<div className="flex items-center gap-4 h-5">
  <span>Blog</span>
  <Separator orientation="vertical" />
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>Source</span>
</div>

<div className="flex flex-col gap-4">
  <Button>Continue with Google</Button>
  <div className="flex items-center gap-3">
    <Separator className="flex-1" />
    <span className="text-xs text-muted-foreground font-medium">OR</span>
    <Separator className="flex-1" />
  </div>
  <Button variant="outline">Sign in with email</Button>
</div>