banhaten 0.1.1 → 0.1.3

package/registry/examples/menu-demo.tsx

@@ -1,109 +1,122 @@
-import { ChevronRightIcon, PlusIcon } from "lucide-react"
+import {
+  ArchiveIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CopyIcon,
+  DownloadIcon,
+  FilePlusIcon,
+  FolderIcon,
+  PencilIcon,
+  PanelRightIcon,
+  PlusIcon,
+} from "lucide-react"
 
+import { Button } from "@/components/ui/button"
 import {
-  Menu,
-  MenuCaption,
+  MenuContent,
   MenuItem,
-  MenuItemAction,
-  MenuItemAvatar,
-  MenuItemBadge,
-  MenuItemDescription,
   MenuItemIcon,
   MenuItemMeta,
   MenuItemSwitch,
   MenuItemText,
   MenuItemTitle,
   MenuLabel,
-  MenuProgress,
+  MenuPortal,
+  MenuRoot,
   MenuSeparator,
+  MenuSub,
+  MenuSubContent,
+  MenuSubTrigger,
+  MenuTrigger,
 } from "@/components/ui/menu"
 
 export function MenuDemo() {
   return (
-    <div className="flex flex-wrap items-start gap-8">
-      <Menu aria-label="Menu">
-        {Array.from({ length: 5 }).map((_, index) => (
-          <MenuItem key={index}>
-            <MenuItemIcon>
-              <PlusIcon />
-            </MenuItemIcon>
-            Text item
-            <MenuItemIcon position="trailing">
-              <ChevronRightIcon data-rtl-flip="true" />
-            </MenuItemIcon>
-          </MenuItem>
-        ))}
-      </Menu>
-
-      <Menu aria-label="Rich menu" width="default">
-        <MenuItem>
-          <MenuItemIcon>
-            <PlusIcon />
-          </MenuItemIcon>
-          <MenuItemAvatar>AG</MenuItemAvatar>
-          <MenuItemText>
-            <MenuItemTitle>Text item</MenuItemTitle>
-          </MenuItemText>
-          <MenuItemSwitch />
-          <MenuItemBadge>Badge</MenuItemBadge>
-          <MenuItemMeta>Text Right</MenuItemMeta>
-          <MenuItemIcon position="trailing">
-            <ChevronRightIcon data-rtl-flip="true" />
-          </MenuItemIcon>
-        </MenuItem>
-
-        <MenuItem kind="multiline">
-          <MenuItemIcon>
-            <PlusIcon />
-          </MenuItemIcon>
-          <MenuItemAvatar size="lg">AG</MenuItemAvatar>
-          <MenuItemText>
-            <MenuItemTitle>Text item</MenuItemTitle>
-            <MenuItemDescription>Supporting text</MenuItemDescription>
-          </MenuItemText>
-          <MenuItemSwitch active />
-          <MenuItemBadge>Badge</MenuItemBadge>
-          <MenuItemMeta>Text Right</MenuItemMeta>
-          <MenuItemIcon position="trailing">
-            <ChevronRightIcon data-rtl-flip="true" />
-          </MenuItemIcon>
-        </MenuItem>
-
-        <MenuItem kind="action">
-          <MenuItemIcon>
-            <PlusIcon />
-          </MenuItemIcon>
-          <MenuItemText>
-            <MenuItemTitle>Text item</MenuItemTitle>
-            <MenuItemDescription>Supporting text</MenuItemDescription>
-          </MenuItemText>
-          <MenuItemAction>Button</MenuItemAction>
-        </MenuItem>
-
-        <MenuItem kind="progress">
-          <MenuProgress indicator="40%" label="Label" optional="(Optional)" />
-        </MenuItem>
-        <MenuSeparator />
-        <MenuItem kind="button">Button</MenuItem>
-        <MenuLabel caption="Caption" label="Label" />
-        <MenuCaption>Lorem ipsum dolor sit amet</MenuCaption>
-      </Menu>
-
-      <div dir="rtl">
-        <Menu aria-label="Arabic menu">
-          {Array.from({ length: 5 }).map((_, index) => (
-            <MenuItem key={index}>
+    <div className="flex min-h-[var(--bh-space-16xl-256)] items-start justify-center p-6">
+      <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>
-                <PlusIcon />
+                <PanelRightIcon aria-hidden="true" />
               </MenuItemIcon>
-              {"\u0639\u0646\u0635\u0631 \u0646\u0635\u064a"}
-              <MenuItemIcon position="trailing">
-                <ChevronRightIcon data-rtl-flip="true" />
+              <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>
-          ))}
-        </Menu>
-      </div>
+          </MenuContent>
+        </MenuPortal>
+      </MenuRoot>
     </div>
   )
 }

package/registry/examples/menubar-demo.tsx

@@ -0,0 +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>
+  )
+}

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

@@ -0,0 +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" },
+      ]}
+    />
+  )
+}

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

@@ -0,0 +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-2">
+              <NavigationMenuLink href="#">Components</NavigationMenuLink>
+              <NavigationMenuLink href="#">Tokens</NavigationMenuLink>
+              <NavigationMenuLink href="#">Patterns</NavigationMenuLink>
+            </div>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+      <NavigationMenuViewport />
+    </NavigationMenu>
+  )
+}