banhaten 0.3.0 → 0.5.0

package/registry/examples/menu-demo.tsx

@@ -1,122 +1,122 @@
-import {
-  ArchiveIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-  CopyIcon,
-  DownloadIcon,
-  FilePlusIcon,
-  FolderIcon,
-  PencilIcon,
-  PanelRightIcon,
-  PlusIcon,
-} from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import {
-  MenuContent,
-  MenuItem,
-  MenuItemIcon,
-  MenuItemMeta,
-  MenuItemSwitch,
-  MenuItemText,
-  MenuItemTitle,
-  MenuLabel,
-  MenuPortal,
-  MenuRoot,
-  MenuSeparator,
-  MenuSub,
-  MenuSubContent,
-  MenuSubTrigger,
-  MenuTrigger,
-} from "@/components/ui/menu"
-
-export function MenuDemo() {
-  return (
-    <div className="flex min-h-[var(--bh-space-16xl-256)] items-start justify-center p-[var(--bh-space-5xl-24)]">
-      <MenuRoot>
-        <MenuTrigger asChild>
-          <Button size="sm" variant="outline">
-            <PlusIcon aria-hidden="true" data-icon="inline-start" />
-            Actions
-            <ChevronDownIcon aria-hidden="true" data-icon="inline-end" />
-          </Button>
-        </MenuTrigger>
-        <MenuPortal>
-          <MenuContent align="start" aria-label="Actions menu" sideOffset={6}>
-            <MenuLabel label="Actions" />
-            <MenuItem>
-              <MenuItemIcon>
-                <FilePlusIcon aria-hidden="true" />
-              </MenuItemIcon>
-              <MenuItemText>
-                <MenuItemTitle>New file</MenuItemTitle>
-              </MenuItemText>
-              <MenuItemMeta>N</MenuItemMeta>
-            </MenuItem>
-            <MenuItem>
-              <MenuItemIcon>
-                <PencilIcon aria-hidden="true" />
-              </MenuItemIcon>
-              <MenuItemText>
-                <MenuItemTitle>Rename</MenuItemTitle>
-              </MenuItemText>
-              <MenuItemMeta>R</MenuItemMeta>
-            </MenuItem>
-            <MenuItem>
-              <MenuItemIcon>
-                <CopyIcon aria-hidden="true" />
-              </MenuItemIcon>
-              <MenuItemText>
-                <MenuItemTitle>Duplicate</MenuItemTitle>
-              </MenuItemText>
-            </MenuItem>
-            <MenuSub>
-              <MenuSubTrigger>
-                <MenuItemIcon>
-                  <FolderIcon aria-hidden="true" />
-                </MenuItemIcon>
-                <MenuItemText>
-                  <MenuItemTitle>Move to</MenuItemTitle>
-                </MenuItemText>
-                <MenuItemIcon position="trailing">
-                  <ChevronRightIcon aria-hidden="true" data-rtl-flip="true" />
-                </MenuItemIcon>
-              </MenuSubTrigger>
-              <MenuSubContent aria-label="Move destination menu">
-                <MenuItem>Design system</MenuItem>
-                <MenuItem>Templates</MenuItem>
-                <MenuItem>Archive</MenuItem>
-              </MenuSubContent>
-            </MenuSub>
-            <MenuSeparator />
-            <MenuItem>
-              <MenuItemIcon>
-                <PanelRightIcon aria-hidden="true" />
-              </MenuItemIcon>
-              <MenuItemText>
-                <MenuItemTitle>Show sidebar</MenuItemTitle>
-              </MenuItemText>
-              <MenuItemSwitch active />
-            </MenuItem>
-            <MenuItem>
-              <MenuItemIcon>
-                <DownloadIcon aria-hidden="true" />
-              </MenuItemIcon>
-              <MenuItemText>
-                <MenuItemTitle>Export</MenuItemTitle>
-              </MenuItemText>
-            </MenuItem>
-            <MenuItem disabled>
-              <MenuItemIcon>
-                <ArchiveIcon aria-hidden="true" />
-              </MenuItemIcon>
-              <MenuItemText>
-                <MenuItemTitle>Archive</MenuItemTitle>
-              </MenuItemText>
-            </MenuItem>
-          </MenuContent>
-        </MenuPortal>
-      </MenuRoot>
-    </div>
-  )
-}
+import {
+  ArchiveIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CopyIcon,
+  DownloadIcon,
+  FilePlusIcon,
+  FolderIcon,
+  PencilIcon,
+  PanelRightIcon,
+  PlusIcon,
+} from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  MenuContent,
+  MenuItem,
+  MenuItemIcon,
+  MenuItemMeta,
+  MenuItemSwitch,
+  MenuItemText,
+  MenuItemTitle,
+  MenuLabel,
+  MenuPortal,
+  MenuRoot,
+  MenuSeparator,
+  MenuSub,
+  MenuSubContent,
+  MenuSubTrigger,
+  MenuTrigger,
+} from "@/components/ui/menu"
+
+export function MenuDemo() {
+  return (
+    <div className="flex min-h-[var(--bh-space-16xl-256)] items-start justify-center p-[var(--bh-space-5xl-24)]">
+      <MenuRoot>
+        <MenuTrigger asChild>
+          <Button size="sm" variant="outline">
+            <PlusIcon aria-hidden="true" data-icon="inline-start" />
+            Actions
+            <ChevronDownIcon aria-hidden="true" data-icon="inline-end" />
+          </Button>
+        </MenuTrigger>
+        <MenuPortal>
+          <MenuContent align="start" aria-label="Actions menu" sideOffset={6}>
+            <MenuLabel label="Actions" />
+            <MenuItem>
+              <MenuItemIcon>
+                <FilePlusIcon aria-hidden="true" />
+              </MenuItemIcon>
+              <MenuItemText>
+                <MenuItemTitle>New file</MenuItemTitle>
+              </MenuItemText>
+              <MenuItemMeta>N</MenuItemMeta>
+            </MenuItem>
+            <MenuItem>
+              <MenuItemIcon>
+                <PencilIcon aria-hidden="true" />
+              </MenuItemIcon>
+              <MenuItemText>
+                <MenuItemTitle>Rename</MenuItemTitle>
+              </MenuItemText>
+              <MenuItemMeta>R</MenuItemMeta>
+            </MenuItem>
+            <MenuItem>
+              <MenuItemIcon>
+                <CopyIcon aria-hidden="true" />
+              </MenuItemIcon>
+              <MenuItemText>
+                <MenuItemTitle>Duplicate</MenuItemTitle>
+              </MenuItemText>
+            </MenuItem>
+            <MenuSub>
+              <MenuSubTrigger>
+                <MenuItemIcon>
+                  <FolderIcon aria-hidden="true" />
+                </MenuItemIcon>
+                <MenuItemText>
+                  <MenuItemTitle>Move to</MenuItemTitle>
+                </MenuItemText>
+                <MenuItemIcon position="trailing">
+                  <ChevronRightIcon aria-hidden="true" data-rtl-flip="true" />
+                </MenuItemIcon>
+              </MenuSubTrigger>
+              <MenuSubContent aria-label="Move destination menu">
+                <MenuItem>Design system</MenuItem>
+                <MenuItem>Templates</MenuItem>
+                <MenuItem>Archive</MenuItem>
+              </MenuSubContent>
+            </MenuSub>
+            <MenuSeparator />
+            <MenuItem onSelect={(event: Event) => event.preventDefault()}>
+              <MenuItemIcon>
+                <PanelRightIcon aria-hidden="true" />
+              </MenuItemIcon>
+              <MenuItemText>
+                <MenuItemTitle>Show sidebar</MenuItemTitle>
+              </MenuItemText>
+              <MenuItemSwitch active />
+            </MenuItem>
+            <MenuItem>
+              <MenuItemIcon>
+                <DownloadIcon aria-hidden="true" />
+              </MenuItemIcon>
+              <MenuItemText>
+                <MenuItemTitle>Export</MenuItemTitle>
+              </MenuItemText>
+            </MenuItem>
+            <MenuItem disabled>
+              <MenuItemIcon>
+                <ArchiveIcon aria-hidden="true" />
+              </MenuItemIcon>
+              <MenuItemText>
+                <MenuItemTitle>Archive</MenuItemTitle>
+              </MenuItemText>
+            </MenuItem>
+          </MenuContent>
+        </MenuPortal>
+      </MenuRoot>
+    </div>
+  )
+}

package/registry/examples/menubar-demo.tsx

@@ -1,34 +1,34 @@
-import {
-  Menubar,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarTrigger,
-} from "@/components/ui/menubar"
-
-export function MenubarDemo() {
-  return (
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger>File</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            New
-            <MenubarShortcut>⌘N</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>Open</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>Export</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>View</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>Toggle sidebar</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  )
-}
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from "@/components/ui/menubar"
+
+export function MenubarDemo() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New
+            <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>Open</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Export</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>Toggle sidebar</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}

package/registry/examples/modal-demo.tsx

@@ -1,74 +1,74 @@
-import * as React from "react"
-
-import { Button } from "@/components/ui/button"
-import {
-  arabicModalMessages,
-  Modal,
-  ModalActionButton,
-  ModalActions,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalDescription,
-  ModalDivider,
-  ModalFooter,
-  ModalHeader,
-  ModalHeaderIcon,
-  ModalRoot,
-  ModalTitle,
-  ModalTrigger,
-} from "@/components/ui/modal"
-
-export function ModalDemo() {
-  // The Modal shorthand builds the whole structure from props, so it is driven
-  // by open state rather than a trigger child.
-  const [confirmOpen, setConfirmOpen] = React.useState(false)
-
-  return (
-    <div className="grid gap-[var(--bh-space-5xl-24)]">
-      {/* Compose the primitives when a control in the page opens the modal. */}
-      <ModalRoot>
-        <ModalTrigger asChild>
-          <Button variant="outline">Publish release</Button>
-        </ModalTrigger>
-        <ModalContent size="default">
-          <ModalHeader>
-            <ModalHeaderIcon />
-            <ModalTitle>Publish this release?</ModalTitle>
-            <ModalCloseButton />
-          </ModalHeader>
-          <ModalBody>
-            <ModalDescription>
-              Everyone on the team will see the new version immediately. You can
-              roll it back from the releases page.
-            </ModalDescription>
-          </ModalBody>
-          <ModalDivider />
-          <ModalFooter>
-            <ModalActions>
-              <ModalActionButton variant="soft">Cancel</ModalActionButton>
-              <ModalActionButton>Publish</ModalActionButton>
-            </ModalActions>
-          </ModalFooter>
-        </ModalContent>
-      </ModalRoot>
-
-      {/* `messages` localizes the chrome; `title` and `description` are your
-          content, so the caller always supplies them. */}
-      <div dir="rtl">
-        <Button onClick={() => setConfirmOpen(true)} variant="outline">
-          نشر الإصدار
-        </Button>
-        <Modal
-          description="راجع التفاصيل قبل المتابعة. يمكنك التراجع لاحقًا من صفحة الإصدارات."
-          dir="rtl"
-          messages={arabicModalMessages}
-          onOpenChange={setConfirmOpen}
-          open={confirmOpen}
-          size="default"
-          title="هل تريد نشر هذا الإصدار؟"
-        />
-      </div>
-    </div>
-  )
-}
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import {
+  arabicModalMessages,
+  Modal,
+  ModalActionButton,
+  ModalActions,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalDescription,
+  ModalDivider,
+  ModalFooter,
+  ModalHeader,
+  ModalHeaderIcon,
+  ModalRoot,
+  ModalTitle,
+  ModalTrigger,
+} from "@/components/ui/modal"
+
+export function ModalDemo() {
+  // The Modal shorthand builds the whole structure from props, so it is driven
+  // by open state rather than a trigger child.
+  const [confirmOpen, setConfirmOpen] = React.useState(false)
+
+  return (
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      {/* Compose the primitives when a control in the page opens the modal. */}
+      <ModalRoot>
+        <ModalTrigger asChild>
+          <Button variant="outline">Publish release</Button>
+        </ModalTrigger>
+        <ModalContent size="default">
+          <ModalHeader>
+            <ModalHeaderIcon />
+            <ModalTitle>Publish this release?</ModalTitle>
+            <ModalCloseButton />
+          </ModalHeader>
+          <ModalBody>
+            <ModalDescription>
+              Everyone on the team will see the new version immediately. You can
+              roll it back from the releases page.
+            </ModalDescription>
+          </ModalBody>
+          <ModalDivider />
+          <ModalFooter>
+            <ModalActions>
+              <ModalActionButton variant="soft">Cancel</ModalActionButton>
+              <ModalActionButton>Publish</ModalActionButton>
+            </ModalActions>
+          </ModalFooter>
+        </ModalContent>
+      </ModalRoot>
+
+      {/* `messages` localizes the chrome; `title` and `description` are your
+          content, so the caller always supplies them. */}
+      <div dir="rtl">
+        <Button onClick={() => setConfirmOpen(true)} variant="outline">
+          نشر الإصدار
+        </Button>
+        <Modal
+          description="راجع التفاصيل قبل المتابعة. يمكنك التراجع لاحقًا من صفحة الإصدارات."
+          dir="rtl"
+          messages={arabicModalMessages}
+          onOpenChange={setConfirmOpen}
+          open={confirmOpen}
+          size="default"
+          title="هل تريد نشر هذا الإصدار؟"
+        />
+      </div>
+    </div>
+  )
+}

package/registry/examples/native-select-demo.tsx

@@ -1,16 +1,16 @@
-import { NativeSelect } from "@/components/ui/native-select"
-
-export function NativeSelectDemo() {
-  return (
-    <NativeSelect
-      label="Workspace"
-      defaultValue="design"
-      helperText="Native select for platform forms."
-      options={[
-        { label: "Design", value: "design" },
-        { label: "Engineering", value: "engineering" },
-        { label: "Operations", value: "operations" },
-      ]}
-    />
-  )
-}
+import { NativeSelect } from "@/components/ui/native-select"
+
+export function NativeSelectDemo() {
+  return (
+    <NativeSelect
+      label="Workspace"
+      defaultValue="design"
+      helperText="Native select for platform forms."
+      options={[
+        { label: "Design", value: "design" },
+        { label: "Engineering", value: "engineering" },
+        { label: "Operations", value: "operations" },
+      ]}
+    />
+  )
+}

package/registry/examples/navigation-menu-demo.tsx

@@ -1,29 +1,29 @@
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  NavigationMenuViewport,
-} from "@/components/ui/navigation-menu"
-
-export function NavigationMenuDemo() {
-  return (
-    <NavigationMenu>
-      <NavigationMenuList>
-        <NavigationMenuItem>
-          <NavigationMenuTrigger>Product</NavigationMenuTrigger>
-          <NavigationMenuContent>
-            <div className="grid gap-[var(--bh-space-md-8)]">
-              <NavigationMenuLink href="#">Components</NavigationMenuLink>
-              <NavigationMenuLink href="#">Tokens</NavigationMenuLink>
-              <NavigationMenuLink href="#">Patterns</NavigationMenuLink>
-            </div>
-          </NavigationMenuContent>
-        </NavigationMenuItem>
-      </NavigationMenuList>
-      <NavigationMenuViewport />
-    </NavigationMenu>
-  )
-}
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+} from "@/components/ui/navigation-menu"
+
+export function NavigationMenuDemo() {
+  return (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Product</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <div className="grid gap-[var(--bh-space-md-8)]">
+              <NavigationMenuLink href="#">Components</NavigationMenuLink>
+              <NavigationMenuLink href="#">Tokens</NavigationMenuLink>
+              <NavigationMenuLink href="#">Patterns</NavigationMenuLink>
+            </div>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+      <NavigationMenuViewport />
+    </NavigationMenu>
+  )
+}

package/registry/examples/pagination-demo.tsx

@@ -1,20 +1,20 @@
-import {
-  arabicPaginationMessages,
-  Pagination,
-} from "@/components/ui/pagination"
-
-export function PaginationDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-5xl-24)]">
-      <Pagination aria-label="Soft numeric pagination" />
-      <Pagination aria-label="Ghost numeric pagination" variant="ghost" />
-
-      <Pagination aria-label="Simple pagination" type="simple" />
-      <Pagination aria-label="Summary pagination" type="summary" />
-
-      <div dir="rtl">
-        <Pagination aria-label="ترقيم الصفحات العربية" dir="rtl" messages={arabicPaginationMessages} />
-      </div>
-    </div>
-  )
-}
+import {
+  arabicPaginationMessages,
+  Pagination,
+} from "@/components/ui/pagination"
+
+export function PaginationDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-5xl-24)]">
+      <Pagination aria-label="Soft numeric pagination" />
+      <Pagination aria-label="Ghost numeric pagination" variant="ghost" />
+
+      <Pagination aria-label="Simple pagination" type="simple" />
+      <Pagination aria-label="Summary pagination" type="summary" />
+
+      <div dir="rtl">
+        <Pagination aria-label="ترقيم الصفحات العربية" dir="rtl" messages={arabicPaginationMessages} />
+      </div>
+    </div>
+  )
+}