جداکننده (Separator)

import { Separator } from '@parto/ui';

<div className="space-y-6">
  <div className="flex items-center gap-4">
    <span>بخش اول</span>
    <Separator orientation="vertical" className="h-6" />
    <span>بخش دوم</span>
    <Separator orientation="vertical" className="h-6" />
    <span>بخش سوم</span>
  </div>

  <div className="flex items-center gap-3">
    <Separator className="flex-1" />
    <span className="text-muted-foreground text-sm">یا</span>
    <Separator className="flex-1" />
  </div>
</div>

<div className="space-y-4">
  <h4>بخش اول</h4>
  <Separator />
  <h4>بخش دوم</h4>
  <Separator />
  <h4>بخش سوم</h4>
</div>

<div className="flex h-20 items-center space-x-4">
  <div>اولین</div>
  <Separator orientation="vertical" />
  <div>دومین</div>
  <Separator orientation="vertical" />
  <div>سومین</div>
</div>

<div className="space-y-1">
  <Button variant="ghost" className="w-full justify-start">
    گزینه ۱
  </Button>
  <Button variant="ghost" className="w-full justify-start">
    گزینه ۲
  </Button>
  <Separator className="my-2" />
  <Button variant="ghost" className="w-full justify-start text-destructive">
    حذف
  </Button>
</div>

<div className="flex items-center gap-4">
  <Separator className="flex-1" />
  <span className="text-sm text-muted-foreground">یا</span>
  <Separator className="flex-1" />
</div>

<Card>
  <CardHeader>
    <CardTitle>عنوان کارت</CardTitle>
    <CardDescription>توضیحات کارت</CardDescription>
  </CardHeader>
  <Separator />
  <CardContent className="pt-6">
    <p>محتوای کارت</p>
  </CardContent>
  <Separator />
  <CardFooter className="pt-6">
    <Button>عملیات</Button>
  </CardFooter>
</Card>

// خط ضخیم‌تر
<Separator className="h-1" />

// رنگ سفارشی
<Separator className="bg-primary" />

// خط نقطه‌چین
<Separator className="border-dashed" />

// با Gradient
<Separator className="bg-gradient-to-r from-transparent via-foreground to-transparent" />

// با Dialog
<DialogHeader>
  <DialogTitle>عنوان</DialogTitle>
  <DialogDescription>توضیحات</DialogDescription>
</DialogHeader>
<Separator className="my-4" />
<div>محتوا</div>

// با Navigation
<nav className="flex items-center">
  <Link>خانه</Link>
  <Separator orientation="vertical" className="mx-2 h-4" />
  <Link>درباره</Link>
  <Separator orientation="vertical" className="mx-2 h-4" />
  <Link>تماس</Link>
</nav>