banhaten 0.3.0 → 0.5.0

package/registry/examples/autocomplete-demo.tsx

@@ -1,109 +1,109 @@
-import { Autocomplete } from "@/components/ui/autocomplete"
-
-const peopleOptions = [
-  {
-    value: "ahmed",
-    label: "Ahmed Galal",
-    addonText: "Design system",
-    itemType: "avatar" as const,
-    keywords: ["foundations", "tokens"],
-  },
-  {
-    value: "nora",
-    label: "Nora Ali",
-    addonText: "Product",
-    itemType: "avatar" as const,
-    keywords: ["roadmap", "research"],
-  },
-  {
-    value: "layla",
-    label: "Layla Hassan",
-    addonText: "Engineering",
-    itemType: "avatar" as const,
-    keywords: ["frontend", "platform"],
-  },
-  {
-    value: "omar",
-    label: "Omar Saleh",
-    addonText: "Unavailable",
-    itemType: "avatar" as const,
-    disabled: true,
-  },
-]
-
-const projectOptions = [
-  { value: "tokens", label: "Token audit", addonText: "In review", itemType: "dot" as const },
-  { value: "inputs", label: "Input system", addonText: "Ready", itemType: "dot" as const },
-  { value: "tables", label: "Table promotion", addonText: "Planned", itemType: "dot" as const },
-  { value: "forms", label: "Form patterns", addonText: "Discovery", itemType: "dot" as const },
-]
-
-const rtlOptions = [
-  {
-    value: "ahmed",
-    label: "أحمد جلال",
-    addonText: "النظام",
-    itemType: "avatar" as const,
-  },
-  {
-    value: "nora",
-    label: "نورا علي",
-    addonText: "المنتج",
-    itemType: "avatar" as const,
-  },
-  {
-    value: "layla",
-    label: "ليلى حسن",
-    addonText: "الهندسة",
-    itemType: "avatar" as const,
-  },
-]
-
-export function AutocompleteDemo() {
-  return (
-    <div className="grid w-full gap-[var(--bh-space-4xl-20)] lg:grid-cols-2">
-      <div className="grid min-w-0 content-start gap-[var(--bh-space-4xl-20)]">
-        <Autocomplete
-          className="mb-[var(--bh-space-13xl-160)]"
-          defaultOpen
-          defaultValue="ahmed"
-          helperText="Search by name, team, or keyword."
-          label="Owner"
-          options={peopleOptions}
-          placeholder="Search people"
-        />
-
-        <Autocomplete
-          defaultValue={["tokens", "inputs"]}
-          helperText="Selected values render with the Tag component."
-          label="Related work"
-          options={projectOptions}
-          placeholder="Add projects"
-          selectionMode="multiple"
-        />
-      </div>
-
-      <div className="grid min-w-0 content-start gap-[var(--bh-space-4xl-20)]">
-        <Autocomplete
-          label="Project"
-          options={projectOptions}
-          placeholder="Search projects"
-          variant="soft"
-        />
-
-        <div dir="rtl" className="min-w-0">
-          <Autocomplete
-            className="pb-[var(--bh-space-13xl-160)] lg:pb-0"
-            defaultOpen
-            defaultValue="nora"
-            dir="rtl"
-            helperText="ابحث بالاسم أو الفريق."
-            label="المالك"
-            options={rtlOptions}
-            placeholder="ابحث عن شخص"
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
+import { Autocomplete } from "@/components/ui/autocomplete"
+
+const peopleOptions = [
+  {
+    value: "ahmed",
+    label: "Ahmed Galal",
+    addonText: "Design system",
+    itemType: "avatar" as const,
+    keywords: ["foundations", "tokens"],
+  },
+  {
+    value: "nora",
+    label: "Nora Ali",
+    addonText: "Product",
+    itemType: "avatar" as const,
+    keywords: ["roadmap", "research"],
+  },
+  {
+    value: "layla",
+    label: "Layla Hassan",
+    addonText: "Engineering",
+    itemType: "avatar" as const,
+    keywords: ["frontend", "platform"],
+  },
+  {
+    value: "omar",
+    label: "Omar Saleh",
+    addonText: "Unavailable",
+    itemType: "avatar" as const,
+    disabled: true,
+  },
+]
+
+const projectOptions = [
+  { value: "tokens", label: "Token audit", addonText: "In review", itemType: "dot" as const },
+  { value: "inputs", label: "Input system", addonText: "Ready", itemType: "dot" as const },
+  { value: "tables", label: "Table promotion", addonText: "Planned", itemType: "dot" as const },
+  { value: "forms", label: "Form patterns", addonText: "Discovery", itemType: "dot" as const },
+]
+
+const rtlOptions = [
+  {
+    value: "ahmed",
+    label: "أحمد جلال",
+    addonText: "النظام",
+    itemType: "avatar" as const,
+  },
+  {
+    value: "nora",
+    label: "نورا علي",
+    addonText: "المنتج",
+    itemType: "avatar" as const,
+  },
+  {
+    value: "layla",
+    label: "ليلى حسن",
+    addonText: "الهندسة",
+    itemType: "avatar" as const,
+  },
+]
+
+export function AutocompleteDemo() {
+  return (
+    <div className="grid w-full gap-[var(--bh-space-4xl-20)] lg:grid-cols-2">
+      <div className="grid min-w-0 content-start gap-[var(--bh-space-4xl-20)]">
+        <Autocomplete
+          className="mb-[var(--bh-space-13xl-160)]"
+          defaultOpen
+          defaultValue="ahmed"
+          helperText="Search by name, team, or keyword."
+          label="Owner"
+          options={peopleOptions}
+          placeholder="Search people"
+        />
+
+        <Autocomplete
+          defaultValue={["tokens", "inputs"]}
+          helperText="Selected values render with the Tag component."
+          label="Related work"
+          options={projectOptions}
+          placeholder="Add projects"
+          selectionMode="multiple"
+        />
+      </div>
+
+      <div className="grid min-w-0 content-start gap-[var(--bh-space-4xl-20)]">
+        <Autocomplete
+          label="Project"
+          options={projectOptions}
+          placeholder="Search projects"
+          variant="soft"
+        />
+
+        <div dir="rtl" className="min-w-0">
+          <Autocomplete
+            className="pb-[var(--bh-space-13xl-160)] lg:pb-0"
+            defaultOpen
+            defaultValue="nora"
+            dir="rtl"
+            helperText="ابحث بالاسم أو الفريق."
+            label="المالك"
+            options={rtlOptions}
+            placeholder="ابحث عن شخص"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/registry/examples/avatar-demo.tsx

@@ -1,132 +1,132 @@
-import {
-  Avatar,
-  AvatarAction,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarGroupCount,
-  AvatarIcon,
-  AvatarImage,
-  AvatarStatus,
-} from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
-import { PlusIcon } from "lucide-react"
-
-const avatarUrl = new URL("../assets/avatars/avatar-01.jpg", import.meta.url).href
-
-const statusColumns = [
-  "available",
-  "available",
-  "busy",
-  "away",
-  "blocked",
-] as const
-
-const secondaryStatusColumns = [
-  "offline",
-  "available",
-  "busy",
-  "away",
-  "blocked",
-] as const
-
-export function AvatarDemo() {
-  return (
-    <div className="flex flex-col gap-[calc(var(--bh-space-5xl-24)_+_var(--bh-space-xs-4))]">
-      <div className="grid w-fit grid-cols-5 gap-x-[var(--bh-space-3xl-16)] gap-y-[var(--bh-space-3xl-16)]">
-        {statusColumns.map((status, index) => (
-          <Avatar key={`icon-${status}-${index}`} size="2xl">
-            <AvatarIcon />
-            {index === 0 ? <AvatarAction type="edit" size="medium" /> : null}
-            <AvatarStatus status={status} size="small" />
-          </Avatar>
-        ))}
-
-        {secondaryStatusColumns.map((status) => (
-          <Avatar key={`initials-${status}`} size="2xl">
-            <AvatarFallback>AG</AvatarFallback>
-            <AvatarStatus status={status} size="small" />
-          </Avatar>
-        ))}
-
-        {secondaryStatusColumns.map((status) => (
-          <Avatar key={`image-${status}`} size="2xl">
-            <AvatarImage src={avatarUrl} alt="Profile portrait" />
-            <AvatarFallback>AG</AvatarFallback>
-            <AvatarStatus status={status} size="small" />
-          </Avatar>
-        ))}
-      </div>
-
-      <div className="flex flex-wrap items-center gap-[var(--bh-space-4xl-20)] ps-[calc(var(--bh-space-5xl-24)_+_var(--bh-space-xs-4))]">
-        <Avatar size="2xl">
-          <AvatarImage src={avatarUrl} alt="Profile portrait" />
-          <AvatarFallback>AG</AvatarFallback>
-          <AvatarAction type="edit" size="medium" />
-        </Avatar>
-        <Avatar size="2xl">
-          <AvatarImage src={avatarUrl} alt="Profile portrait" />
-          <AvatarFallback>AG</AvatarFallback>
-          <AvatarAction type="remove" size="medium" />
-        </Avatar>
-        <Avatar size="2xl">
-          <AvatarImage src={avatarUrl} alt="Profile portrait" />
-          <AvatarFallback>AG</AvatarFallback>
-          <AvatarAction type="verified" size="medium" />
-        </Avatar>
-      </div>
-
-      <div className="flex items-center gap-[var(--bh-space-xl-12)]">
-        <AvatarGroup>
-          {Array.from({ length: 7 }).map((_, index) => (
-            <Avatar key={index} size="md">
-              <AvatarImage src={avatarUrl} alt="" />
-              <AvatarFallback>AG</AvatarFallback>
-            </Avatar>
-          ))}
-          <AvatarGroupCount size="md">+10</AvatarGroupCount>
-        </AvatarGroup>
-        <Button
-          aria-label="Add member"
-          className="size-[var(--bh-avatar-size-md)] rounded-[var(--bh-radius-full)] border-dashed"
-          size="icon-sm"
-          type="button"
-          variant="outline"
-        >
-          <PlusIcon aria-hidden="true" className="size-[var(--bh-space-3xl-16)]" />
-        </Button>
-      </div>
-
-      <div className="flex items-center gap-[var(--bh-space-xl-12)]">
-        <Avatar size="xl">
-          <AvatarImage src={avatarUrl} alt="John Doe" />
-          <AvatarFallback>JD</AvatarFallback>
-          <AvatarStatus status="available" size="small" />
-        </Avatar>
-        <div className="min-w-0">
-          <p className="text-sm font-semibold text-[var(--bh-content-default)]">
-            John Doe
-          </p>
-          <p className="text-sm text-[var(--bh-content-subtle)]">
-            johndoe@example.com
-          </p>
-        </div>
-      </div>
-
-      <div className="flex items-center gap-[var(--bh-space-xl-12)]">
-        <Avatar size="md">
-          <AvatarImage src={avatarUrl} alt="John Doe" />
-          <AvatarFallback>JD</AvatarFallback>
-          <AvatarStatus status="available" size="tiny" />
-        </Avatar>
-        <div className="min-w-0">
-          <p className="text-sm font-semibold text-[var(--bh-content-default)]">
-            John Doe
-          </p>
-          <p className="text-xs text-[var(--bh-content-subtle)]">
-            johndoe@example.com
-          </p>
-        </div>
-      </div>
-    </div>
-  )
-}
+import {
+  Avatar,
+  AvatarAction,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarIcon,
+  AvatarImage,
+  AvatarStatus,
+} from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { PlusIcon } from "lucide-react"
+
+const avatarUrl = new URL("../assets/avatars/avatar-01.jpg", import.meta.url).href
+
+const statusColumns = [
+  "available",
+  "available",
+  "busy",
+  "away",
+  "blocked",
+] as const
+
+const secondaryStatusColumns = [
+  "offline",
+  "available",
+  "busy",
+  "away",
+  "blocked",
+] as const
+
+export function AvatarDemo() {
+  return (
+    <div className="flex flex-col gap-[calc(var(--bh-space-5xl-24)_+_var(--bh-space-xs-4))]">
+      <div className="grid w-fit grid-cols-5 gap-x-[var(--bh-space-3xl-16)] gap-y-[var(--bh-space-3xl-16)]">
+        {statusColumns.map((status, index) => (
+          <Avatar key={`icon-${status}-${index}`} size="2xl">
+            <AvatarIcon />
+            {index === 0 ? <AvatarAction type="edit" size="medium" /> : null}
+            <AvatarStatus status={status} size="small" />
+          </Avatar>
+        ))}
+
+        {secondaryStatusColumns.map((status) => (
+          <Avatar key={`initials-${status}`} size="2xl">
+            <AvatarFallback>AG</AvatarFallback>
+            <AvatarStatus status={status} size="small" />
+          </Avatar>
+        ))}
+
+        {secondaryStatusColumns.map((status) => (
+          <Avatar key={`image-${status}`} size="2xl">
+            <AvatarImage src={avatarUrl} alt="Profile portrait" />
+            <AvatarFallback>AG</AvatarFallback>
+            <AvatarStatus status={status} size="small" />
+          </Avatar>
+        ))}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-[var(--bh-space-4xl-20)] ps-[calc(var(--bh-space-5xl-24)_+_var(--bh-space-xs-4))]">
+        <Avatar size="2xl">
+          <AvatarImage src={avatarUrl} alt="Profile portrait" />
+          <AvatarFallback>AG</AvatarFallback>
+          <AvatarAction type="edit" size="medium" />
+        </Avatar>
+        <Avatar size="2xl">
+          <AvatarImage src={avatarUrl} alt="Profile portrait" />
+          <AvatarFallback>AG</AvatarFallback>
+          <AvatarAction type="remove" size="medium" />
+        </Avatar>
+        <Avatar size="2xl">
+          <AvatarImage src={avatarUrl} alt="Profile portrait" />
+          <AvatarFallback>AG</AvatarFallback>
+          <AvatarAction type="verified" size="medium" />
+        </Avatar>
+      </div>
+
+      <div className="flex items-center gap-[var(--bh-space-xl-12)]">
+        <AvatarGroup>
+          {Array.from({ length: 7 }).map((_, index) => (
+            <Avatar key={index} size="md">
+              <AvatarImage src={avatarUrl} alt="" />
+              <AvatarFallback>AG</AvatarFallback>
+            </Avatar>
+          ))}
+          <AvatarGroupCount size="md">+10</AvatarGroupCount>
+        </AvatarGroup>
+        <Button
+          aria-label="Add member"
+          className="size-[var(--bh-avatar-size-md)] rounded-[var(--bh-radius-full)] border-dashed"
+          size="icon-sm"
+          type="button"
+          variant="outline"
+        >
+          <PlusIcon aria-hidden="true" className="size-[var(--bh-space-3xl-16)]" />
+        </Button>
+      </div>
+
+      <div className="flex items-center gap-[var(--bh-space-xl-12)]">
+        <Avatar size="xl">
+          <AvatarImage src={avatarUrl} alt="John Doe" />
+          <AvatarFallback>JD</AvatarFallback>
+          <AvatarStatus status="available" size="small" />
+        </Avatar>
+        <div className="min-w-0">
+          <p className="text-sm font-semibold text-[var(--bh-content-default)]">
+            John Doe
+          </p>
+          <p className="text-sm text-[var(--bh-content-subtle)]">
+            johndoe@example.com
+          </p>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-[var(--bh-space-xl-12)]">
+        <Avatar size="md">
+          <AvatarImage src={avatarUrl} alt="John Doe" />
+          <AvatarFallback>JD</AvatarFallback>
+          <AvatarStatus status="available" size="tiny" />
+        </Avatar>
+        <div className="min-w-0">
+          <p className="text-sm font-semibold text-[var(--bh-content-default)]">
+            John Doe
+          </p>
+          <p className="text-xs text-[var(--bh-content-subtle)]">
+            johndoe@example.com
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

package/registry/examples/badge-demo.tsx

@@ -1,69 +1,69 @@
-import {
-  ArrowUpRightIcon,
-  BadgeCheckIcon,
-  BookmarkIcon,
-  ChevronRightIcon,
-} from "lucide-react"
-
-import { Badge } from "@/components/ui/badge"
-import { Spinner } from "@/components/ui/spinner"
-
-export function BadgeDemo() {
-  return (
-    <div className="flex flex-wrap items-center gap-[var(--bh-space-md-8)]">
-      <Badge>Badge</Badge>
-      <Badge badgeStyle="outline">Outline</Badge>
-      <Badge badgeStyle="solid" color="blue">
-        Blue
-      </Badge>
-      <Badge badgeStyle="solid" color="green">
-        Approved
-      </Badge>
-      <Badge badgeStyle="solid" color="amber">
-        Warning
-      </Badge>
-      <Badge badgeStyle="solid" color="danger">
-        Danger
-      </Badge>
-      <Badge color="purple" type="dot">
-        Live
-      </Badge>
-      <Badge color="rose" showNumber>
-        2
-      </Badge>
-      <Badge color="green" type="leading-icon">
-        <BadgeCheckIcon data-icon="inline-start" />
-        Verified
-      </Badge>
-      <Badge badgeStyle="outline" color="neutral" type="trailing-icon">
-        Bookmark
-        <BookmarkIcon data-icon="inline-end" />
-      </Badge>
-      <Badge color="sky" type="leading-icon">
-        <Spinner data-icon="inline-start" />
-        Syncing
-      </Badge>
-      <Badge asChild badgeStyle="outline" color="blue" type="trailing-icon">
-        <a href="#badge">
-          Open
-          <ArrowUpRightIcon data-icon="inline-end" data-rtl-flip="true" />
-        </a>
-      </Badge>
-      <Badge
-        asChild
-        color="blue"
-        splitAction
-        type="trailing-icon"
-      >
-        <a href="#badge">
-          In progress
-          <ChevronRightIcon
-            aria-hidden="true"
-            data-icon="inline-end"
-            data-rtl-flip="true"
-          />
-        </a>
-      </Badge>
-    </div>
-  )
-}
+import {
+  ArrowUpRightIcon,
+  BadgeCheckIcon,
+  BookmarkIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Spinner } from "@/components/ui/spinner"
+
+export function BadgeDemo() {
+  return (
+    <div className="flex flex-wrap items-center gap-[var(--bh-space-md-8)]">
+      <Badge>Badge</Badge>
+      <Badge badgeStyle="outline">Outline</Badge>
+      <Badge badgeStyle="solid" color="blue">
+        Blue
+      </Badge>
+      <Badge badgeStyle="solid" color="green">
+        Approved
+      </Badge>
+      <Badge badgeStyle="solid" color="amber">
+        Warning
+      </Badge>
+      <Badge badgeStyle="solid" color="danger">
+        Danger
+      </Badge>
+      <Badge color="purple" type="dot">
+        Live
+      </Badge>
+      <Badge color="rose" showNumber>
+        2
+      </Badge>
+      <Badge color="green" type="leading-icon">
+        <BadgeCheckIcon data-icon="inline-start" />
+        Verified
+      </Badge>
+      <Badge badgeStyle="outline" color="neutral" type="trailing-icon">
+        Bookmark
+        <BookmarkIcon data-icon="inline-end" />
+      </Badge>
+      <Badge color="sky" type="leading-icon">
+        <Spinner data-icon="inline-start" />
+        Syncing
+      </Badge>
+      <Badge asChild badgeStyle="outline" color="blue" type="trailing-icon">
+        <a href="#badge">
+          Open
+          <ArrowUpRightIcon data-icon="inline-end" data-rtl-flip="true" />
+        </a>
+      </Badge>
+      <Badge
+        asChild
+        color="blue"
+        splitAction
+        type="trailing-icon"
+      >
+        <a href="#badge">
+          In progress
+          <ChevronRightIcon
+            aria-hidden="true"
+            data-icon="inline-end"
+            data-rtl-flip="true"
+          />
+        </a>
+      </Badge>
+    </div>
+  )
+}