banhaten 0.1.1 → 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/select-demo.tsx

@@ -38,7 +38,7 @@ export function SelectDemo() {
 
       <Select
         dir="rtl"
-        helperText="هذا نص تلميح."
+        helperText="نص توضيحي"
         label="ملصق"
         placeholder="اختر مستخدمًا"
         state="filled"

package/registry/examples/skeleton-demo.tsx

@@ -0,0 +1,56 @@
+import {
+  Skeleton,
+  SkeletonAvatar,
+  SkeletonButton,
+  SkeletonCard,
+  SkeletonForm,
+  SkeletonInput,
+  SkeletonList,
+  SkeletonTable,
+  SkeletonText,
+} from "@/components/ui/skeleton"
+
+export function SkeletonDemo() {
+  return (
+    <div className="grid w-full max-w-5xl gap-[var(--bh-space-5xl-24)]">
+      <div className="grid gap-[var(--bh-space-4xl-20)] lg:grid-cols-2">
+        <div className="grid gap-[var(--bh-space-4xl-20)] rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-default)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-5xl-24)]">
+          <div className="flex items-start gap-[var(--bh-space-xl-12)]">
+            <SkeletonAvatar />
+            <SkeletonText
+              className="flex-1"
+              lineCount={3}
+              widths={["76%", "92%", "52%"]}
+            />
+          </div>
+          <div className="flex flex-wrap gap-[var(--bh-space-md-8)]">
+            <SkeletonButton size="sm" />
+            <SkeletonButton size="icon" />
+          </div>
+        </div>
+
+        <SkeletonForm fields={3} />
+      </div>
+
+      <div className="grid gap-[var(--bh-space-4xl-20)] xl:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)]">
+        <SkeletonCard />
+        <SkeletonTable columns={4} rows={4} />
+      </div>
+
+      <div className="grid gap-[var(--bh-space-4xl-20)] lg:grid-cols-2">
+        <SkeletonList rows={4} />
+        <div
+          dir="rtl"
+          className="grid gap-[var(--bh-space-4xl-20)] rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-default)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-5xl-24)]"
+        >
+          <SkeletonInput />
+          <div className="flex flex-wrap gap-[var(--bh-space-md-8)]">
+            <SkeletonButton />
+            <SkeletonButton size="sm" tone="brand" />
+          </div>
+          <Skeleton className="rounded-[var(--bh-radius-full)]" tone="brand" />
+        </div>
+      </div>
+    </div>
+  )
+}

package/registry/examples/spinner-demo.tsx

@@ -1,6 +1,6 @@
 import type * as React from "react"
 
-import { Spinner } from "@/components/ui/spinner"
+import { DynamicSpinner, Spinner } from "@/components/ui/spinner"
 
 export function SpinnerDemo() {
   return (
@@ -18,6 +18,18 @@ export function SpinnerDemo() {
           className="text-danger"
           style={{ "--bh-spinner-size": "24px" } as React.CSSProperties}
         />
+        <DynamicSpinner
+          className="text-primary"
+          style={{ "--bh-spinner-size": "16px" } as React.CSSProperties}
+        />
+        <DynamicSpinner
+          className="text-success"
+          style={{ "--bh-spinner-size": "20px" } as React.CSSProperties}
+        />
+        <DynamicSpinner
+          className="text-danger"
+          style={{ "--bh-spinner-size": "24px" } as React.CSSProperties}
+        />
       </div>
 
       <div className="flex flex-wrap items-center gap-3">
@@ -31,6 +43,16 @@ export function SpinnerDemo() {
           />
           Loading
         </div>
+        <div
+          className="inline-flex items-center gap-2 text-sm text-muted-foreground"
+          role="status"
+        >
+          <DynamicSpinner
+            className="text-current"
+            style={{ "--bh-spinner-size": "18px" } as React.CSSProperties}
+          />
+          Syncing
+        </div>
       </div>
     </div>
   )

package/registry/examples/textarea-demo.tsx

@@ -24,7 +24,7 @@ const demoRtlTextareaProps = {
     "\u062a\u0648\u0641\u0631 \u0628\u0646\u064a\u062a\u0646\u0627 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0627\u0644\u0645\u062a\u0642\u062f\u0645\u0629 \u0644\u0644\u0625\u0633\u062a\u062f\u0644\u0627\u0644 \u0623\u0648\u0642\u0627\u062a \u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0642\u0635\u064a\u0631\u0629 \u0644\u0644\u063a\u0627\u064a\u0629.",
   errorMessage: "\u0631\u0633\u0627\u0644\u0629 \u062e\u0637\u0623",
   label: "\u0645\u0644\u0635\u0642",
-  message: "\u0647\u0630\u0647 \u0646\u0635 \u062a\u0644\u0645\u064a\u062d.",
+  message: "\u0646\u0635 \u062a\u0648\u0636\u064a\u062d\u064a",
   optionalText: "(\u062e\u064a\u0627\u0631\u064a)",
   tagInputText: "\u0628\u0631\u0627\u0646\u062f\u0648...",
 }