banhaten 0.4.0 → 0.5.0

package/registry/examples/popover-demo.tsx

@@ -1,546 +1,547 @@
-import {
-  BellIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-  DownloadIcon,
-  InfoIcon,
-  MoreVerticalIcon,
-  PrinterIcon,
-  SearchIcon,
-  SettingsIcon,
-  Share2Icon,
-  SlidersHorizontalIcon,
-  Trash2Icon,
-} from "lucide-react"
-
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
-import { Input } from "@/components/ui/input"
-import { cn } from "@/lib/utils"
-import {
-  MenuPreview,
-  MenuItem,
-  MenuItemIcon,
-  MenuItemText,
-  MenuItemTitle,
-  MenuSeparator,
-} from "@/components/ui/menu"
-import {
-  Popover,
-  PopoverBody,
-  PopoverClose,
-  PopoverContent,
-  PopoverDescription,
-  PopoverFooter,
-  PopoverHeader,
-  PopoverTitle,
-  PopoverTrigger,
-} from "@/components/ui/popover"
-import { Select } from "@/components/ui/select"
-import { ToggleField } from "@/components/ui/toggle"
-
-const filterOptions = ["All", "Active", "Paused", "Archived"]
-const rtlTitle = "عنوان المنبثق"
-const rtlDescription = "يظهر هذا المحتوى في الاتجاه من اليمين إلى اليسار."
-
-export function PopoverDemo() {
-  return (
-    <div className="grid min-w-0 gap-[var(--bh-space-3xl-16)]">
-      <div className="grid gap-[var(--bh-space-3xl-16)] xl:grid-cols-2 2xl:grid-cols-3">
-        <PopoverExample title="Basic Bottom">
-          <Popover defaultOpen>
-            <PopoverTrigger asChild>
-              <Button size="sm" variant="outline">
-                Open popover
-                <InfoIcon aria-hidden="true" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent align="center" size="sm">
-              <BasicPopoverContent />
-            </PopoverContent>
-          </Popover>
-        </PopoverExample>
-
-        <PopoverExample placement="top" title="Top">
-          <Popover defaultOpen>
-            <PopoverTrigger asChild>
-              <Button size="sm" variant="outline">
-                Open popover
-                <InfoIcon aria-hidden="true" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent align="center" side="top" size="sm">
-              <BasicPopoverContent />
-            </PopoverContent>
-          </Popover>
-        </PopoverExample>
-
-        <PopoverExample placement="left" title="Left">
-          <Popover defaultOpen>
-            <PopoverTrigger asChild>
-              <Button size="sm" variant="outline">
-                Open popover
-                <InfoIcon aria-hidden="true" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent align="center" side="left" size="sm">
-              <BasicPopoverContent />
-            </PopoverContent>
-          </Popover>
-        </PopoverExample>
-
-        <PopoverExample placement="right" title="Right">
-          <Popover defaultOpen>
-            <PopoverTrigger asChild>
-              <Button size="sm" variant="outline">
-                Open popover
-                <InfoIcon aria-hidden="true" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent align="center" side="right" size="sm">
-              <BasicPopoverContent />
-            </PopoverContent>
-          </Popover>
-        </PopoverExample>
-
-        <PopoverExample title="Focus Trigger">
-          <Popover defaultOpen>
-            <PopoverTrigger asChild openOnFocus>
-              <Button size="sm" variant="secondary">
-                Focus me
-                <InfoIcon aria-hidden="true" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent align="center" size="sm">
-              <PopoverTitle>Focused trigger</PopoverTitle>
-              <PopoverDescription>
-                Opens when keyboard focus reaches the trigger.
-              </PopoverDescription>
-            </PopoverContent>
-          </Popover>
-        </PopoverExample>
-      </div>
-
-      <div className="grid gap-[var(--bh-space-3xl-16)] xl:grid-cols-2 2xl:grid-cols-3">
-        <PopoverExample title="Icon Button Trigger">
-          <Popover defaultOpen>
-            <PopoverTrigger asChild>
-              <Button aria-label="Open actions" size="icon-sm" variant="outline">
-                <MoreVerticalIcon aria-hidden="true" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent align="center" size="auto">
-              <ActionsContent />
-            </PopoverContent>
-          </Popover>
-        </PopoverExample>
-
-        <PopoverExample title="Text Link Trigger">
-          <Popover defaultOpen>
-            <PopoverTrigger className="text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-brand-default)] hover:text-[var(--bh-content-brand-strong)]">
-              Learn more
-              <ChevronDownIcon aria-hidden="true" />
-            </PopoverTrigger>
-            <PopoverContent size="sm">
-              <PopoverTitle>Text link trigger</PopoverTitle>
-              <PopoverDescription>
-                Use a text trigger when the popover adds contextual detail.
-              </PopoverDescription>
-            </PopoverContent>
-          </Popover>
-        </PopoverExample>
-
-        <PopoverExample title="Disabled Trigger">
-          <Popover>
-            <PopoverTrigger asChild disabled>
-              <Button disabled size="sm" variant="secondary">
-                Disabled
-                <InfoIcon aria-hidden="true" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent size="sm">
-              <BasicPopoverContent />
-            </PopoverContent>
-          </Popover>
-        </PopoverExample>
-
-        <PopoverExample title="Small Content">
-          <Popover defaultOpen>
-            <PopoverTrigger asChild>
-              <Button aria-label="Info" size="icon-sm" variant="secondary">
-                <InfoIcon aria-hidden="true" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent align="center" size="sm">
-              <PopoverTitle>Info</PopoverTitle>
-              <PopoverDescription>
-                Small popover with brief information.
-              </PopoverDescription>
-            </PopoverContent>
-          </Popover>
-        </PopoverExample>
-
-        <PopoverExample title="No Arrow">
-          <Popover defaultOpen>
-            <PopoverTrigger asChild>
-              <Button size="sm" variant="outline">
-                Open popover
-                <InfoIcon aria-hidden="true" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent align="center" showArrow={false} size="sm">
-              <PopoverTitle>No arrow</PopoverTitle>
-              <PopoverDescription>
-                Use a clean edge when the trigger relationship is obvious.
-              </PopoverDescription>
-            </PopoverContent>
-          </Popover>
-        </PopoverExample>
-      </div>
-
-      <div className="grid gap-[var(--bh-space-3xl-16)] 2xl:grid-cols-2">
-        <PopoverExample density="large" title="Large Content">
-          <Popover defaultOpen>
-            <PopoverTrigger asChild>
-              <Button aria-label="Open details" size="icon-sm" variant="outline">
-                <InfoIcon aria-hidden="true" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent align="center" size="lg">
-              <LargeContent />
-            </PopoverContent>
-          </Popover>
-        </PopoverExample>
-
-        <PopoverExample density="large" title="Filter Popover">
-          <Popover defaultOpen>
-            <PopoverTrigger asChild>
-              <Button size="sm" variant="outline">
-                <SlidersHorizontalIcon aria-hidden="true" />
-                Filters
-                <ChevronDownIcon aria-hidden="true" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent align="center" size="md">
-              <FilterContent />
-            </PopoverContent>
-          </Popover>
-        </PopoverExample>
-
-        <PopoverExample density="large" title="Settings Popover">
-          <Popover defaultOpen>
-            <PopoverTrigger asChild>
-              <Button aria-label="Open settings" size="icon-sm" variant="outline">
-                <SettingsIcon aria-hidden="true" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent align="center" size="md">
-              <SettingsContent />
-            </PopoverContent>
-          </Popover>
-        </PopoverExample>
-
-        <PopoverExample density="large" title="Actions Popover">
-          <Popover defaultOpen>
-            <PopoverTrigger asChild>
-              <Button size="sm" variant="secondary">
-                More actions
-                <ChevronDownIcon aria-hidden="true" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent align="center" size="auto">
-              <ActionsContent />
-            </PopoverContent>
-          </Popover>
-        </PopoverExample>
-      </div>
-
-      <div className="grid gap-[var(--bh-space-3xl-16)] 2xl:grid-cols-2">
-        <PopoverExample density="matrix" title="Arrow Alignment">
-          <div className="grid min-w-[calc(var(--bh-popover-sm-width)+var(--bh-popover-sm-width)+var(--bh-popover-sm-width)+var(--bh-space-18xl-320))] grid-cols-3 place-items-start gap-[var(--bh-space-6xl-32)]">
-            {(["start", "center", "end"] as const).map((align) => (
-              <Popover defaultOpen key={align}>
-                <PopoverTrigger asChild>
-                  <Button size="xs" variant="outline">
-                    {align}
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent align={align} size="sm">
-                  <PopoverTitle>{align}</PopoverTitle>
-                  <PopoverDescription>Arrow follows alignment.</PopoverDescription>
-                </PopoverContent>
-              </Popover>
-            ))}
-          </div>
-        </PopoverExample>
-
-        <PopoverExample density="matrix" title="Offset / Spacing">
-          <div className="grid min-w-[calc(var(--bh-popover-sm-width)+var(--bh-popover-sm-width)+var(--bh-popover-sm-width)+var(--bh-space-18xl-320))] grid-cols-3 place-items-start gap-[var(--bh-space-6xl-32)]">
-            {(["tight", "default", "loose"] as const).map((offset) => (
-              <Popover defaultOpen key={offset}>
-                <PopoverTrigger asChild>
-                  <Button size="xs" variant="outline">
-                    {offset}
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent align="center" offset={offset} size="sm">
-                  <PopoverTitle>{offset}</PopoverTitle>
-                  <PopoverDescription>Spacing uses popover tokens.</PopoverDescription>
-                </PopoverContent>
-              </Popover>
-            ))}
-          </div>
-        </PopoverExample>
-
-        <PopoverExample density="large" placement="right" title="RTL">
-          <div dir="ltr">
-            <Popover defaultOpen>
-              <PopoverTrigger asChild>
-                <Button dir="rtl" size="sm" variant="outline">
-                  افتح المنبثق
-                  <InfoIcon aria-hidden="true" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent align="start" dir="rtl" side="right" size="md">
-                <PopoverHeader>
-                  <div className="grid min-w-0 gap-[var(--bh-space-xs-4)]">
-                    <PopoverTitle>{rtlTitle}</PopoverTitle>
-                    <PopoverDescription>{rtlDescription}</PopoverDescription>
-                  </div>
-                  <PopoverClose />
-                </PopoverHeader>
-              </PopoverContent>
-            </Popover>
-          </div>
-        </PopoverExample>
-      </div>
-    </div>
-  )
-}
-
-type PopoverExampleDensity = "standard" | "large" | "matrix"
-type PopoverExamplePlacement = "bottom" | "top" | "left" | "right" | "center"
-
-function PopoverExample({
-  children,
-  density = "standard",
-  placement = "bottom",
-  title,
-}: {
-  children: React.ReactNode
-  density?: PopoverExampleDensity
-  placement?: PopoverExamplePlacement
-  title: string
-}) {
-  return (
-    <div
-      data-popover-example={title}
-      className={cn(
-        "rounded-md border border-border bg-background p-[var(--bh-space-3xl-16)]",
-        popoverExampleWidthClasses[density]
-      )}
-    >
-      <p className="text-xs font-semibold text-muted-foreground">{title}</p>
-      <div
-        className={cn(
-          "mt-[var(--bh-space-3xl-16)] flex overflow-visible",
-          popoverExampleStageHeightClasses[density],
-          popoverExamplePlacementClasses[placement]
-        )}
-      >
-        {children}
-      </div>
-    </div>
-  )
-}
-
-const popoverExampleWidthClasses: Record<PopoverExampleDensity, string> = {
-  standard: "min-w-[calc(var(--bh-space-18xl-320)+var(--bh-popover-sm-width))]",
-  large: "min-w-[calc(var(--bh-popover-lg-width)+var(--bh-space-19xl-384))]",
-  matrix:
-    "min-w-[calc(var(--bh-popover-sm-width)+var(--bh-popover-sm-width)+var(--bh-popover-sm-width)+var(--bh-space-18xl-320))]",
-}
-
-const popoverExampleStageHeightClasses: Record<PopoverExampleDensity, string> = {
-  standard: "min-h-[calc(var(--bh-popover-sm-width)+var(--bh-space-13xl-160))]",
-  large: "min-h-[calc(var(--bh-popover-lg-width)+var(--bh-space-13xl-160))]",
-  matrix: "min-h-[calc(var(--bh-popover-sm-width)+var(--bh-space-13xl-160))]",
-}
-
-const popoverExamplePlacementClasses: Record<PopoverExamplePlacement, string> = {
-  bottom: "items-start justify-center pt-[var(--bh-space-6xl-32)]",
-  center: "items-center justify-center",
-  left: "items-center justify-end",
-  right: "items-center justify-start",
-  top: "items-end justify-center pb-[var(--bh-space-6xl-32)]",
-}
-
-function BasicPopoverContent() {
-  return (
-    <>
-      <PopoverTitle>Popover title</PopoverTitle>
-      <PopoverDescription>
-        This is a popover with some helpful content.
-      </PopoverDescription>
-    </>
-  )
-}
-
-function LargeContent() {
-  return (
-    <>
-      <PopoverHeader>
-        <div className="grid min-w-0 gap-[var(--bh-space-xs-4)]">
-          <PopoverTitle>Details</PopoverTitle>
-          <PopoverDescription>
-            Larger content can hold explanations, lists, images, and actions.
-          </PopoverDescription>
-        </div>
-        <PopoverClose />
-      </PopoverHeader>
-      <PopoverBody>
-        <div className="grid gap-[var(--bh-space-xl-12)] rounded-[var(--bh-radius-lg-8)] bg-[var(--bh-bg-neutral-subtle)] p-[var(--bh-space-xl-12)]">
-          <div className="h-[var(--bh-space-9xl-64)] rounded-[var(--bh-radius-md-6)] bg-[var(--bh-bg-raised)]" />
-          <div className="flex flex-wrap gap-[var(--bh-space-md-8)]">
-            <Badge color="green" type="dot">
-              Ready
-            </Badge>
-            <Badge color="blue">Analytics</Badge>
-          </div>
-        </div>
-      </PopoverBody>
-      <PopoverFooter>
-        <Button size="xs" variant="ghost">
-          Dismiss
-        </Button>
-        <Button size="xs">Review</Button>
-      </PopoverFooter>
-    </>
-  )
-}
-
-function FilterContent() {
-  return (
-    <>
-      <PopoverHeader>
-        <div className="grid min-w-0 gap-[var(--bh-space-xs-4)]">
-          <PopoverTitle>Status</PopoverTitle>
-          <PopoverDescription>Narrow the table results.</PopoverDescription>
-        </div>
-        <PopoverClose />
-      </PopoverHeader>
-      <PopoverBody>
-        <Input
-          className="[--bh-input-width:100%]"
-          hasInformationIcon={false}
-          leadingIcon={<SearchIcon aria-hidden="true" />}
-          placeholder="Search filters"
-          size="md"
-        />
-        <div className="grid gap-[var(--bh-space-md-8)]">
-          {filterOptions.map((option, index) => (
-            <label
-              className="flex items-center gap-[var(--bh-space-md-8)] text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-default)]"
-              key={option}
-            >
-              <Checkbox defaultChecked={index === 0} />
-              <span>{option}</span>
-            </label>
-          ))}
-        </div>
-        <Select
-          className="[--bh-select-width:100%]"
-          expandIcon={<ChevronDownIcon aria-hidden="true" />}
-          hasLabel={false}
-          leadingIcon={<BellIcon aria-hidden="true" />}
-          size="md"
-          value="Last 30 days"
-        />
-      </PopoverBody>
-      <PopoverFooter>
-        <Button size="xs" variant="ghost">
-          Reset
-        </Button>
-        <Button size="xs">Apply</Button>
-      </PopoverFooter>
-    </>
-  )
-}
-
-function SettingsContent() {
-  return (
-    <>
-      <PopoverHeader>
-        <div className="grid min-w-0 gap-[var(--bh-space-xs-4)]">
-          <PopoverTitle>Settings</PopoverTitle>
-          <PopoverDescription>Update notification preferences.</PopoverDescription>
-        </div>
-        <PopoverClose />
-      </PopoverHeader>
-      <PopoverBody>
-        <ToggleField controlPosition="end" defaultChecked label="Email notifications" />
-        <ToggleField controlPosition="end" defaultChecked label="Push notifications" />
-        <ToggleField controlPosition="end" label="Dark mode" />
-        <Select
-          className="[--bh-select-width:100%]"
-          expandIcon={<ChevronDownIcon aria-hidden="true" />}
-          hasLabel
-          label="Language"
-          size="md"
-          value="English"
-        />
-        <Button className="justify-between" size="sm" variant="ghost">
-          Preferences
-          <ChevronRightIcon aria-hidden="true" data-rtl-flip="true" />
-        </Button>
-      </PopoverBody>
-    </>
-  )
-}
-
-function ActionsContent() {
-  return (
-    <MenuPreview
-      aria-label="Popover actions"
-      className="w-[var(--bh-popover-action-width,var(--bh-menu-width))] bg-transparent py-0 shadow-none"
-      width="auto"
-    >
-      <MenuItem>
-        <MenuItemIcon>
-          <Share2Icon aria-hidden="true" />
-        </MenuItemIcon>
-        <MenuItemText>
-          <MenuItemTitle>Share</MenuItemTitle>
-        </MenuItemText>
-      </MenuItem>
-      <MenuItem>
-        <MenuItemIcon>
-          <DownloadIcon aria-hidden="true" />
-        </MenuItemIcon>
-        <MenuItemText>
-          <MenuItemTitle>Export</MenuItemTitle>
-        </MenuItemText>
-      </MenuItem>
-      <MenuItem>
-        <MenuItemIcon>
-          <PrinterIcon aria-hidden="true" />
-        </MenuItemIcon>
-        <MenuItemText>
-          <MenuItemTitle>Print</MenuItemTitle>
-        </MenuItemText>
-      </MenuItem>
-      <MenuSeparator />
-      <MenuItem>
-        <MenuItemIcon className="text-[var(--bh-content-danger-default)]">
-          <Trash2Icon aria-hidden="true" />
-        </MenuItemIcon>
-        <MenuItemText>
-          <MenuItemTitle className="text-[var(--bh-content-danger-default)]">
-            Delete
-          </MenuItemTitle>
-        </MenuItemText>
-      </MenuItem>
-    </MenuPreview>
-  )
-}
+import {
+  BellIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  DownloadIcon,
+  InfoIcon,
+  MoreVerticalIcon,
+  PrinterIcon,
+  SearchIcon,
+  SettingsIcon,
+  Share2Icon,
+  SlidersHorizontalIcon,
+  Trash2Icon,
+} from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+import {
+  MenuPreview,
+  MenuItem,
+  MenuItemIcon,
+  MenuItemText,
+  MenuItemTitle,
+  MenuSeparator,
+} from "@/components/ui/menu"
+import {
+  Popover,
+  PopoverBody,
+  PopoverClose,
+  PopoverContent,
+  PopoverDescription,
+  PopoverFooter,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { Select } from "@/components/ui/select"
+import { ToggleField } from "@/components/ui/toggle"
+
+const filterOptions = ["All", "Active", "Paused", "Archived"]
+const rtlTitle = "عنوان المنبثق"
+const rtlDescription = "يظهر هذا المحتوى في الاتجاه من اليمين إلى اليسار."
+
+export function PopoverDemo() {
+  return (
+    <div className="grid min-w-0 gap-[var(--bh-space-3xl-16)]">
+      <div className="grid gap-[var(--bh-space-3xl-16)] xl:grid-cols-2 2xl:grid-cols-3">
+        <PopoverExample title="Basic Bottom">
+          <Popover defaultOpen>
+            <PopoverTrigger asChild>
+              <Button size="sm" variant="outline">
+                Open popover
+                <InfoIcon aria-hidden="true" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="center" size="sm">
+              <BasicPopoverContent />
+            </PopoverContent>
+          </Popover>
+        </PopoverExample>
+
+        <PopoverExample placement="top" title="Top">
+          <Popover defaultOpen>
+            <PopoverTrigger asChild>
+              <Button size="sm" variant="outline">
+                Open popover
+                <InfoIcon aria-hidden="true" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="center" side="top" size="sm">
+              <BasicPopoverContent />
+            </PopoverContent>
+          </Popover>
+        </PopoverExample>
+
+        <PopoverExample placement="left" title="Left">
+          <Popover defaultOpen>
+            <PopoverTrigger asChild>
+              <Button size="sm" variant="outline">
+                Open popover
+                <InfoIcon aria-hidden="true" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="center" side="left" size="sm">
+              <BasicPopoverContent />
+            </PopoverContent>
+          </Popover>
+        </PopoverExample>
+
+        <PopoverExample placement="right" title="Right">
+          <Popover defaultOpen>
+            <PopoverTrigger asChild>
+              <Button size="sm" variant="outline">
+                Open popover
+                <InfoIcon aria-hidden="true" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="center" side="right" size="sm">
+              <BasicPopoverContent />
+            </PopoverContent>
+          </Popover>
+        </PopoverExample>
+
+        <PopoverExample title="Focus Trigger">
+          <Popover defaultOpen>
+            <PopoverTrigger asChild openOnFocus>
+              <Button size="sm" variant="secondary">
+                Focus me
+                <InfoIcon aria-hidden="true" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="center" size="sm">
+              <PopoverTitle>Focused trigger</PopoverTitle>
+              <PopoverDescription>
+                Opens when keyboard focus reaches the trigger.
+              </PopoverDescription>
+            </PopoverContent>
+          </Popover>
+        </PopoverExample>
+      </div>
+
+      <div className="grid gap-[var(--bh-space-3xl-16)] xl:grid-cols-2 2xl:grid-cols-3">
+        <PopoverExample title="Icon Button Trigger">
+          <Popover defaultOpen>
+            <PopoverTrigger asChild>
+              <Button aria-label="Open actions" size="icon-sm" variant="outline">
+                <MoreVerticalIcon aria-hidden="true" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="center" size="auto">
+              <ActionsContent />
+            </PopoverContent>
+          </Popover>
+        </PopoverExample>
+
+        <PopoverExample title="Text Link Trigger">
+          <Popover defaultOpen>
+            <PopoverTrigger className="text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-brand-default)] hover:text-[var(--bh-content-brand-strong)]">
+              Learn more
+              <ChevronDownIcon aria-hidden="true" />
+            </PopoverTrigger>
+            <PopoverContent size="sm">
+              <PopoverTitle>Text link trigger</PopoverTitle>
+              <PopoverDescription>
+                Use a text trigger when the popover adds contextual detail.
+              </PopoverDescription>
+            </PopoverContent>
+          </Popover>
+        </PopoverExample>
+
+        <PopoverExample title="Disabled Trigger">
+          <Popover>
+            <PopoverTrigger asChild disabled>
+              <Button disabled size="sm" variant="secondary">
+                Disabled
+                <InfoIcon aria-hidden="true" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent size="sm">
+              <BasicPopoverContent />
+            </PopoverContent>
+          </Popover>
+        </PopoverExample>
+
+        <PopoverExample title="Small Content">
+          <Popover defaultOpen>
+            <PopoverTrigger asChild>
+              <Button aria-label="Info" size="icon-sm" variant="secondary">
+                <InfoIcon aria-hidden="true" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="center" size="sm">
+              <PopoverTitle>Info</PopoverTitle>
+              <PopoverDescription>
+                Small popover with brief information.
+              </PopoverDescription>
+            </PopoverContent>
+          </Popover>
+        </PopoverExample>
+
+        <PopoverExample title="No Arrow">
+          <Popover defaultOpen>
+            <PopoverTrigger asChild>
+              <Button size="sm" variant="outline">
+                Open popover
+                <InfoIcon aria-hidden="true" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="center" showArrow={false} size="sm">
+              <PopoverTitle>No arrow</PopoverTitle>
+              <PopoverDescription>
+                Use a clean edge when the trigger relationship is obvious.
+              </PopoverDescription>
+            </PopoverContent>
+          </Popover>
+        </PopoverExample>
+      </div>
+
+      <div className="grid gap-[var(--bh-space-3xl-16)] 2xl:grid-cols-2">
+        <PopoverExample density="large" title="Large Content">
+          <Popover defaultOpen>
+            <PopoverTrigger asChild>
+              <Button aria-label="Open details" size="icon-sm" variant="outline">
+                <InfoIcon aria-hidden="true" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="center" size="lg">
+              <LargeContent />
+            </PopoverContent>
+          </Popover>
+        </PopoverExample>
+
+        <PopoverExample density="large" title="Filter Popover">
+          <Popover defaultOpen>
+            <PopoverTrigger asChild>
+              <Button size="sm" variant="outline">
+                <SlidersHorizontalIcon aria-hidden="true" />
+                Filters
+                <ChevronDownIcon aria-hidden="true" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="center" size="md">
+              <FilterContent />
+            </PopoverContent>
+          </Popover>
+        </PopoverExample>
+
+        <PopoverExample density="large" title="Settings Popover">
+          <Popover defaultOpen>
+            <PopoverTrigger asChild>
+              <Button aria-label="Open settings" size="icon-sm" variant="outline">
+                <SettingsIcon aria-hidden="true" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="center" size="md">
+              <SettingsContent />
+            </PopoverContent>
+          </Popover>
+        </PopoverExample>
+
+        <PopoverExample density="large" title="Actions Popover">
+          <Popover defaultOpen>
+            <PopoverTrigger asChild>
+              <Button size="sm" variant="secondary">
+                More actions
+                <ChevronDownIcon aria-hidden="true" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="center" size="auto">
+              <ActionsContent />
+            </PopoverContent>
+          </Popover>
+        </PopoverExample>
+      </div>
+
+      <div className="grid gap-[var(--bh-space-3xl-16)] 2xl:grid-cols-2">
+        <PopoverExample density="matrix" title="Arrow Alignment">
+          <div className="grid min-w-[calc(var(--bh-popover-sm-width)+var(--bh-popover-sm-width)+var(--bh-popover-sm-width)+var(--bh-space-18xl-320))] grid-cols-3 place-items-start gap-[var(--bh-space-6xl-32)]">
+            {(["start", "center", "end"] as const).map((align) => (
+              <Popover defaultOpen key={align}>
+                <PopoverTrigger asChild>
+                  <Button size="xs" variant="outline">
+                    {align}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent align={align} size="sm">
+                  <PopoverTitle>{align}</PopoverTitle>
+                  <PopoverDescription>Arrow follows alignment.</PopoverDescription>
+                </PopoverContent>
+              </Popover>
+            ))}
+          </div>
+        </PopoverExample>
+
+        <PopoverExample density="matrix" title="Offset / Spacing">
+          <div className="grid min-w-[calc(var(--bh-popover-sm-width)+var(--bh-popover-sm-width)+var(--bh-popover-sm-width)+var(--bh-space-18xl-320))] grid-cols-3 place-items-start gap-[var(--bh-space-6xl-32)]">
+            {(["tight", "default", "loose"] as const).map((offset) => (
+              <Popover defaultOpen key={offset}>
+                <PopoverTrigger asChild>
+                  <Button size="xs" variant="outline">
+                    {offset}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent align="center" offset={offset} size="sm">
+                  <PopoverTitle>{offset}</PopoverTitle>
+                  <PopoverDescription>Spacing uses popover tokens.</PopoverDescription>
+                </PopoverContent>
+              </Popover>
+            ))}
+          </div>
+        </PopoverExample>
+
+        <PopoverExample density="large" placement="right" title="RTL">
+          <div dir="ltr">
+            <Popover defaultOpen>
+              <PopoverTrigger asChild>
+                <Button dir="rtl" size="sm" variant="outline">
+                  افتح المنبثق
+                  <InfoIcon aria-hidden="true" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent align="start" dir="rtl" side="right" size="md">
+                <PopoverHeader>
+                  <div className="grid min-w-0 gap-[var(--bh-space-xs-4)]">
+                    <PopoverTitle>{rtlTitle}</PopoverTitle>
+                    <PopoverDescription>{rtlDescription}</PopoverDescription>
+                  </div>
+                  <PopoverClose />
+                </PopoverHeader>
+              </PopoverContent>
+            </Popover>
+          </div>
+        </PopoverExample>
+      </div>
+    </div>
+  )
+}
+
+type PopoverExampleDensity = "standard" | "large" | "matrix"
+type PopoverExamplePlacement = "bottom" | "top" | "left" | "right" | "center"
+
+function PopoverExample({
+  children,
+  density = "standard",
+  placement = "bottom",
+  title,
+}: {
+  children: React.ReactNode
+  density?: PopoverExampleDensity
+  placement?: PopoverExamplePlacement
+  title: string
+}) {
+  return (
+    <div
+      data-popover-example={title}
+      className={cn(
+        "rounded-md border border-border bg-background p-[var(--bh-space-3xl-16)]",
+        popoverExampleWidthClasses[density]
+      )}
+    >
+      <p className="text-xs font-semibold text-muted-foreground">{title}</p>
+      <div
+        className={cn(
+          "mt-[var(--bh-space-3xl-16)] flex overflow-visible",
+          popoverExampleStageHeightClasses[density],
+          popoverExamplePlacementClasses[placement]
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+const popoverExampleWidthClasses: Record<PopoverExampleDensity, string> = {
+  standard: "min-w-[calc(var(--bh-space-18xl-320)+var(--bh-popover-sm-width))]",
+  large: "min-w-[calc(var(--bh-popover-lg-width)+var(--bh-space-19xl-384))]",
+  matrix:
+    "min-w-[calc(var(--bh-popover-sm-width)+var(--bh-popover-sm-width)+var(--bh-popover-sm-width)+var(--bh-space-18xl-320))]",
+}
+
+const popoverExampleStageHeightClasses: Record<PopoverExampleDensity, string> = {
+  standard: "min-h-[calc(var(--bh-popover-sm-width)+var(--bh-space-13xl-160))]",
+  large: "min-h-[calc(var(--bh-popover-lg-width)+var(--bh-space-13xl-160))]",
+  matrix: "min-h-[calc(var(--bh-popover-sm-width)+var(--bh-space-13xl-160))]",
+}
+
+const popoverExamplePlacementClasses: Record<PopoverExamplePlacement, string> = {
+  bottom: "items-start justify-center pt-[var(--bh-space-6xl-32)]",
+  center: "items-center justify-center",
+  left: "items-center justify-end",
+  right: "items-center justify-start",
+  top: "items-end justify-center pb-[var(--bh-space-6xl-32)]",
+}
+
+function BasicPopoverContent() {
+  return (
+    <>
+      <PopoverTitle>Popover title</PopoverTitle>
+      <PopoverDescription>
+        This is a popover with some helpful content.
+      </PopoverDescription>
+    </>
+  )
+}
+
+function LargeContent() {
+  return (
+    <>
+      <PopoverHeader>
+        <div className="grid min-w-0 gap-[var(--bh-space-xs-4)]">
+          <PopoverTitle>Details</PopoverTitle>
+          <PopoverDescription>
+            Larger content can hold explanations, lists, images, and actions.
+          </PopoverDescription>
+        </div>
+        <PopoverClose />
+      </PopoverHeader>
+      <PopoverBody>
+        <div className="grid gap-[var(--bh-space-xl-12)] rounded-[var(--bh-radius-lg-8)] bg-[var(--bh-bg-neutral-subtle)] p-[var(--bh-space-xl-12)]">
+          <div className="h-[var(--bh-space-9xl-64)] rounded-[var(--bh-radius-md-6)] bg-[var(--bh-bg-raised)]" />
+          <div className="flex flex-wrap gap-[var(--bh-space-md-8)]">
+            <Badge color="green" type="dot">
+              Ready
+            </Badge>
+            <Badge color="blue">Analytics</Badge>
+          </div>
+        </div>
+      </PopoverBody>
+      <PopoverFooter>
+        <Button size="xs" variant="ghost">
+          Dismiss
+        </Button>
+        <Button size="xs">Review</Button>
+      </PopoverFooter>
+    </>
+  )
+}
+
+function FilterContent() {
+  return (
+    <>
+      <PopoverHeader>
+        <div className="grid min-w-0 gap-[var(--bh-space-xs-4)]">
+          <PopoverTitle>Status</PopoverTitle>
+          <PopoverDescription>Narrow the table results.</PopoverDescription>
+        </div>
+        <PopoverClose />
+      </PopoverHeader>
+      <PopoverBody>
+        <Input
+          className="[--bh-input-width:100%]"
+          hasInformationIcon={false}
+          leadingIcon={<SearchIcon aria-hidden="true" />}
+          placeholder="Search filters"
+          size="md"
+        />
+        <div className="grid gap-[var(--bh-space-md-8)]">
+          {filterOptions.map((option, index) => (
+            <label
+              className="flex items-center gap-[var(--bh-space-md-8)] text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-default)]"
+              key={option}
+            >
+              <Checkbox defaultChecked={index === 0} />
+              <span>{option}</span>
+            </label>
+          ))}
+        </div>
+        <Select
+          aria-label="Date range"
+          className="[--bh-select-width:100%]"
+          expandIcon={<ChevronDownIcon aria-hidden="true" />}
+          hasLabel={false}
+          leadingIcon={<BellIcon aria-hidden="true" />}
+          size="md"
+          value="Last 30 days"
+        />
+      </PopoverBody>
+      <PopoverFooter>
+        <Button size="xs" variant="ghost">
+          Reset
+        </Button>
+        <Button size="xs">Apply</Button>
+      </PopoverFooter>
+    </>
+  )
+}
+
+function SettingsContent() {
+  return (
+    <>
+      <PopoverHeader>
+        <div className="grid min-w-0 gap-[var(--bh-space-xs-4)]">
+          <PopoverTitle>Settings</PopoverTitle>
+          <PopoverDescription>Update notification preferences.</PopoverDescription>
+        </div>
+        <PopoverClose />
+      </PopoverHeader>
+      <PopoverBody>
+        <ToggleField controlPosition="end" defaultChecked label="Email notifications" />
+        <ToggleField controlPosition="end" defaultChecked label="Push notifications" />
+        <ToggleField controlPosition="end" label="Dark mode" />
+        <Select
+          className="[--bh-select-width:100%]"
+          expandIcon={<ChevronDownIcon aria-hidden="true" />}
+          hasLabel
+          label="Language"
+          size="md"
+          value="English"
+        />
+        <Button className="justify-between" size="sm" variant="ghost">
+          Preferences
+          <ChevronRightIcon aria-hidden="true" data-rtl-flip="true" />
+        </Button>
+      </PopoverBody>
+    </>
+  )
+}
+
+function ActionsContent() {
+  return (
+    <MenuPreview
+      aria-label="Popover actions"
+      className="w-[var(--bh-popover-action-width,var(--bh-menu-width))] bg-transparent py-0 shadow-none"
+      width="auto"
+    >
+      <MenuItem>
+        <MenuItemIcon>
+          <Share2Icon aria-hidden="true" />
+        </MenuItemIcon>
+        <MenuItemText>
+          <MenuItemTitle>Share</MenuItemTitle>
+        </MenuItemText>
+      </MenuItem>
+      <MenuItem>
+        <MenuItemIcon>
+          <DownloadIcon aria-hidden="true" />
+        </MenuItemIcon>
+        <MenuItemText>
+          <MenuItemTitle>Export</MenuItemTitle>
+        </MenuItemText>
+      </MenuItem>
+      <MenuItem>
+        <MenuItemIcon>
+          <PrinterIcon aria-hidden="true" />
+        </MenuItemIcon>
+        <MenuItemText>
+          <MenuItemTitle>Print</MenuItemTitle>
+        </MenuItemText>
+      </MenuItem>
+      <MenuSeparator />
+      <MenuItem>
+        <MenuItemIcon className="text-[var(--bh-content-danger-default)]">
+          <Trash2Icon aria-hidden="true" />
+        </MenuItemIcon>
+        <MenuItemText>
+          <MenuItemTitle className="text-[var(--bh-content-danger-default)]">
+            Delete
+          </MenuItemTitle>
+        </MenuItemText>
+      </MenuItem>
+    </MenuPreview>
+  )
+}