پاپ‌اور (Popover)

import { Popover, PopoverContent, PopoverTrigger, Button, Separator } from '@parto-system-design/ui'
;<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">فیلترها</Button>
  </PopoverTrigger>
  <PopoverContent className="w-64" align="start">
    <div className="space-y-2">
      <h4 className="font-medium">محدوده تاریخ</h4>
      <p className="text-sm text-muted-foreground">یک بازه زمانی انتخاب کنید.</p>
    </div>
    <Separator className="my-3" />
    <div className="grid grid-cols-2 gap-2 text-sm">
      <Button variant="outline" size="sm">
        امروز
      </Button>
      <Button variant="outline" size="sm">
        این هفته
      </Button>
      <Button variant="outline" size="sm">
        این ماه
      </Button>
      <Button variant="outline" size="sm">
        امسال
      </Button>
    </div>
  </PopoverContent>
</Popover>

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">تنظیمات</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <div className="space-y-4" dir="rtl">
      <h4 className="font-medium">تنظیمات نمایش</h4>
      <div className="space-y-2">
        <Label>عرض</Label>
        <Input defaultValue="۱۰۰٪" />
      </div>
    </div>
  </PopoverContent>
</Popover>

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">تنظیمات</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <div className="grid gap-4">
      <div className="space-y-2">
        <h4 className="font-medium">ابعاد</h4>
        <p className="text-sm text-muted-foreground">تنظیم عرض و ارتفاع</p>
      </div>
      <div className="grid gap-2">
        <div className="grid grid-cols-3 items-center gap-4">
          <label htmlFor="width">عرض</label>
          <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
        </div>
        <div className="grid grid-cols-3 items-center gap-4">
          <label htmlFor="height">ارتفاع</label>
          <Input id="height" defaultValue="25px" className="col-span-2 h-8" />
        </div>
      </div>
    </div>
  </PopoverContent>
</Popover>

const [open, setOpen] = React.useState(false)

;<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger asChild>
    <Button variant="outline">منو</Button>
  </PopoverTrigger>
  <PopoverContent>
    <div className="space-y-2">
      <p>محتوای کنترل شده</p>
      <Button onClick={() => setOpen(false)}>بستن</Button>
    </div>
  </PopoverContent>
</Popover>

<Popover>
  <PopoverTrigger>باز کردن</PopoverTrigger>
  <PopoverContent side="bottom" align="start">
    <p>نمایش در پایین، تراز راست</p>
  </PopoverContent>
</Popover>

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">گزینه‌ها</Button>
  </PopoverTrigger>
  <PopoverContent className="w-56">
    <div className="space-y-1">
      <Button variant="ghost" className="w-full justify-start">
        گزینه ۱
      </Button>
      <Button variant="ghost" className="w-full justify-start">
        گزینه ۲
      </Button>
      <Button variant="ghost" className="w-full justify-start">
        گزینه ۳
      </Button>
    </div>
  </PopoverContent>
</Popover>