banhaten 0.1.0 → 0.1.2

package/registry/examples/popover-demo.tsx

@@ -0,0 +1,546 @@
+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 {
+  Menu,
+  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-4">
+      <div className="grid gap-4 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-4 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-4 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-4 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-1">
+                    <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-4",
+        popoverExampleWidthClasses[density]
+      )}
+    >
+      <p className="text-xs font-semibold text-muted-foreground">{title}</p>
+      <div
+        className={cn(
+          "mt-4 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-1">
+          <PopoverTitle>Details</PopoverTitle>
+          <PopoverDescription>
+            Larger content can hold explanations, lists, images, and actions.
+          </PopoverDescription>
+        </div>
+        <PopoverClose />
+      </PopoverHeader>
+      <PopoverBody>
+        <div className="grid gap-3 rounded-[var(--bh-radius-lg-8)] bg-[var(--bh-bg-neutral-subtle)] p-3">
+          <div className="h-16 rounded-[var(--bh-radius-md-6)] bg-[var(--bh-bg-raised)]" />
+          <div className="flex flex-wrap gap-2">
+            <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-1">
+          <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-2">
+          {filterOptions.map((option, index) => (
+            <label
+              className="flex items-center gap-2 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-1">
+          <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 (
+    <Menu
+      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>
+    </Menu>
+  )
+}

package/registry/examples/progress-demo.tsx

@@ -24,8 +24,8 @@ export function ProgressDemo() {
         <Progress
           aria-label="Arabic upload progress"
           indicator="40%"
-          label="\u0639\u0646\u0648\u0627\u0646"
-          optional="\u0028\u0627\u062e\u062a\u064a\u0627\u0631\u064a\u0029"
+          label={"\u0639\u0646\u0648\u0627\u0646"}
+          optional={"\u0028\u0627\u062e\u062a\u064a\u0627\u0631\u064a\u0029"}
           showInfo
           showSpinner
           size="sm"

package/registry/examples/select-demo.tsx

@@ -1,10 +1,7 @@
 import {
   Select,
-  SelectItemAvatar,
   SelectItemCompanyLogo,
-  SelectItemFlag,
   SelectItemPaymentIcon,
-  SelectItemStatusDot,
   SelectMenuItem,
 } from "@/components/ui/select"
 
@@ -14,14 +11,13 @@ export function SelectDemo() {
       <Select
         helperText="This is a hint text"
         label="Label"
-        open
         placeholder="Select User"
         state="filled"
         value="Username"
       >
         <SelectMenuItem itemType="default" label="Text option" addonText="Meta" />
+        <SelectMenuItem itemType="icon" label="Add item" addonText="Action" />
         <SelectMenuItem itemType="avatar" label="User" addonText="Active" />
-        <SelectMenuItem itemType="flag" label="Egypt" addonText="+20" />
         <SelectMenuItem itemType="company" label="Company" addonText="Workspace" />
         <SelectMenuItem itemType="payment" label="Visa ending 2048" addonText="Default" />
         <SelectMenuItem itemType="dot" label="Active status" addonText="Online" selected />
@@ -40,32 +36,50 @@ export function SelectDemo() {
         />
       </Select>
 
-      <Select dir="rtl" label="ملصق" helperText="هذه نص تلميح.">
+      <Select
+        dir="rtl"
+        helperText="نص توضيحي"
+        label="ملصق"
+        placeholder="اختر مستخدمًا"
+        state="filled"
+        value="اسم المستخدم"
+      >
         <SelectMenuItem
           dir="rtl"
-          label="حدد"
-          addonText="إضافة نص"
-          selected
+          itemType="default"
+          label="خيار نصي"
+          addonText="بيانات"
+        />
+        <SelectMenuItem
+          dir="rtl"
+          itemType="icon"
+          label="إضافة"
+          addonText="إجراء"
         />
         <SelectMenuItem
           dir="rtl"
+          itemType="avatar"
           label="مستخدم"
           addonText="نشط"
-          media={<SelectItemAvatar fallback="م" />}
-          selectionType="checkbox"
-          selected
         />
         <SelectMenuItem
           dir="rtl"
-          label="الحالة"
-          addonText="متصل"
-          media={<SelectItemStatusDot />}
+          itemType="company"
+          label="شركة"
+          addonText="مساحة عمل"
         />
         <SelectMenuItem
           dir="rtl"
-          label="دولة"
-          addonText="+20"
-          media={<SelectItemFlag />}
+          itemType="payment"
+          label="بطاقة تنتهي بـ 2048"
+          addonText="افتراضي"
+        />
+        <SelectMenuItem
+          dir="rtl"
+          itemType="dot"
+          label="حالة نشطة"
+          addonText="متصل"
+          selected
         />
       </Select>
     </div>