@wheelhouse/ui 0.2.0 → 0.2.2

package/dist/components/item/item.stories.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BellIcon } from '@phosphor-icons/react/Bell';
-import { UserIcon } from '@phosphor-icons/react/User';
+import { Bell, User } from 'lucide-react';
 import { Button } from '../button';
 import { Switch } from '../switch';
 import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, itemMediaVariantKeys, ItemSeparator, itemSizeKeys, ItemTitle, itemVariantKeys, } from '.';
@@ -23,19 +22,19 @@ const meta = {
 };
 export default meta;
 export const Default = {
-    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsxs(Item, { ...args, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(BellIcon, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Notifications" }), _jsx(ItemDescription, { children: "Email, push, and in-app alerts." })] }), _jsx(ItemActions, { children: _jsx(Switch, { "aria-label": "Enable notifications", defaultChecked: true }) })] }) })),
+    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsxs(Item, { ...args, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(Bell, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Notifications" }), _jsx(ItemDescription, { children: "Email, push, and in-app alerts." })] }), _jsx(ItemActions, { children: _jsx(Switch, { "aria-label": "Enable notifications", defaultChecked: true }) })] }) })),
 };
 export const Outline = {
     args: { variant: 'outline' },
-    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsxs(Item, { ...args, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(UserIcon, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Profile" }), _jsx(ItemDescription, { children: "Manage your public name and avatar." })] }), _jsx(ItemActions, { children: _jsx(Button, { size: "sm", variant: "outline", children: "Edit" }) })] }) })),
+    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsxs(Item, { ...args, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(User, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Profile" }), _jsx(ItemDescription, { children: "Manage your public name and avatar." })] }), _jsx(ItemActions, { children: _jsx(Button, { size: "sm", variant: "outline", children: "Edit" }) })] }) })),
 };
 export const AsLink = {
     render: () => (_jsx("div", { className: "w-full max-w-md", children: _jsxs(Item, { render: 
             // Children are merged from `Item` by useRender; ESLint cannot see them on this JSX node.
             // eslint-disable-next-line jsx-a11y/anchor-has-content -- runtime children from Item
-            _jsx("a", { href: "https://example.org", className: "cursor-pointer", rel: "noreferrer", target: "_blank" }), children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(BellIcon, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Open settings" }), _jsxs(ItemDescription, { children: ["Entire row is a link when using ", _jsx("code", { className: "rounded bg-muted px-1", children: "render" }), "."] })] })] }) })),
+            _jsx("a", { href: "https://example.org", className: "cursor-pointer", rel: "noreferrer", target: "_blank" }), children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(Bell, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Open settings" }), _jsxs(ItemDescription, { children: ["Entire row is a link when using ", _jsx("code", { className: "rounded bg-muted px-1", children: "render" }), "."] })] })] }) })),
 };
 export const Gallery = {
     parameters: { layout: 'padded' },
-    render: () => (_jsxs("div", { className: "flex max-w-lg flex-col gap-10", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Variants" }), _jsx(ItemGroup, { children: itemVariantKeys.map((variant) => (_jsxs(Item, { variant: variant, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(BellIcon, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { className: "capitalize", children: variant }), _jsx(ItemDescription, { children: "Variant preset for list rows." })] })] }, variant))) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Sizes" }), _jsx(ItemGroup, { children: itemSizeKeys.map((size) => (_jsxs(Item, { size: size, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(UserIcon, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { className: "capitalize", children: size }), _jsx(ItemDescription, { children: "Spacing for dense menus or roomy panels." })] })] }, size))) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With header & footer" }), _jsxs(Item, { variant: "outline", children: [_jsxs(ItemHeader, { children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase", children: "Section" }), _jsx(Button, { size: "xs", variant: "ghost", children: "More" })] }), _jsx(ItemMedia, { variant: "icon", children: _jsx(BellIcon, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Grouped layout" }), _jsx(ItemDescription, { children: "Header and footer span the full width of the item." })] }), _jsx(ItemFooter, { children: _jsx("span", { className: "text-xs text-muted-foreground", children: "Updated today" }) })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Media variants" }), _jsx("div", { className: "flex flex-col gap-2", children: itemMediaVariantKeys.map((mv) => (_jsxs(Item, { children: [_jsx(ItemMedia, { variant: mv, children: mv === 'image' ? (_jsx("img", { src: "https://avatars.githubusercontent.com/u/1406596?v=4", alt: "" })) : mv === 'icon' ? (_jsx(BellIcon, {})) : null }), _jsxs(ItemContent, { children: [_jsxs(ItemTitle, { className: "capitalize", children: [mv, " media"] }), _jsx(ItemDescription, { children: "Leading visual treatment." })] })] }, mv))) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Separated list" }), _jsxs(ItemGroup, { children: [_jsx(Item, { size: "sm", children: _jsx(ItemContent, { children: _jsx(ItemTitle, { children: "First" }) }) }), _jsx(ItemSeparator, {}), _jsx(Item, { size: "sm", children: _jsx(ItemContent, { children: _jsx(ItemTitle, { children: "Second" }) }) })] })] })] })),
+    render: () => (_jsxs("div", { className: "flex max-w-lg flex-col gap-10", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Variants" }), _jsx(ItemGroup, { children: itemVariantKeys.map((variant) => (_jsxs(Item, { variant: variant, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(Bell, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { className: "capitalize", children: variant }), _jsx(ItemDescription, { children: "Variant preset for list rows." })] })] }, variant))) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Sizes" }), _jsx(ItemGroup, { children: itemSizeKeys.map((size) => (_jsxs(Item, { size: size, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(User, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { className: "capitalize", children: size }), _jsx(ItemDescription, { children: "Spacing for dense menus or roomy panels." })] })] }, size))) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With header & footer" }), _jsxs(Item, { variant: "outline", children: [_jsxs(ItemHeader, { children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase", children: "Section" }), _jsx(Button, { size: "xs", variant: "ghost", children: "More" })] }), _jsx(ItemMedia, { variant: "icon", children: _jsx(Bell, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Grouped layout" }), _jsx(ItemDescription, { children: "Header and footer span the full width of the item." })] }), _jsx(ItemFooter, { children: _jsx("span", { className: "text-xs text-muted-foreground", children: "Updated today" }) })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Media variants" }), _jsx("div", { className: "flex flex-col gap-2", children: itemMediaVariantKeys.map((mv) => (_jsxs(Item, { children: [_jsx(ItemMedia, { variant: mv, children: mv === 'image' ? _jsx("img", { src: "https://avatars.githubusercontent.com/u/1406596?v=4", alt: "" }) : mv === 'icon' ? _jsx(Bell, {}) : null }), _jsxs(ItemContent, { children: [_jsxs(ItemTitle, { className: "capitalize", children: [mv, " media"] }), _jsx(ItemDescription, { children: "Leading visual treatment." })] })] }, mv))) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Separated list" }), _jsxs(ItemGroup, { children: [_jsx(Item, { size: "sm", children: _jsx(ItemContent, { children: _jsx(ItemTitle, { children: "First" }) }) }), _jsx(ItemSeparator, {}), _jsx(Item, { size: "sm", children: _jsx(ItemContent, { children: _jsx(ItemTitle, { children: "Second" }) }) })] })] })] })),
 };

package/dist/components/kbd/kbd.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CommandIcon } from '@phosphor-icons/react/Command';
+import { Command } from 'lucide-react';
 import { Kbd, KbdGroup } from '.';
 const meta = {
     title: 'UI/Kbd',
@@ -17,7 +17,7 @@ export const Chord = {
     render: () => (_jsxs(KbdGroup, { children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "K" })] })),
 };
 export const WithIcon = {
-    render: () => (_jsxs(KbdGroup, { children: [_jsx(Kbd, { "aria-label": "Command", children: _jsx(CommandIcon, { className: "size-3", weight: "bold" }) }), _jsx(Kbd, { children: "\u21E7" }), _jsx(Kbd, { children: "P" })] })),
+    render: () => (_jsxs(KbdGroup, { children: [_jsx(Kbd, { "aria-label": "Command", children: _jsx(Command, { className: "size-3", strokeWidth: 2.5 }) }), _jsx(Kbd, { children: "\u21E7" }), _jsx(Kbd, { children: "P" })] })),
 };
 export const Gallery = {
     parameters: { layout: 'padded' },

package/dist/components/menubar/menubar.js

@@ -4,7 +4,7 @@ import { Menu as MenuPrimitive } from '@base-ui/react/menu';
 import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
 import { cn } from '../../lib/utils';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '../dropdown-menu';
-import { CheckIcon } from '@phosphor-icons/react/dist/ssr';
+import { Check } from 'lucide-react';
 function Menubar({ className, ...props }) {
     return _jsx(MenubarPrimitive, { "data-slot": "menubar", className: cn('flex h-8 items-center gap-0.5 rounded-lg border p-[3px]', className), ...props });
 }
@@ -27,13 +27,13 @@ function MenubarItem({ className, inset, variant = 'default', ...props }) {
     return (_jsx(DropdownMenuItem, { "data-slot": "menubar-item", "data-inset": inset, "data-variant": variant, className: cn("group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!", className), ...props }));
 }
 function MenubarCheckboxItem({ className, children, checked, inset, ...props }) {
-    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "menubar-checkbox-item", "data-inset": inset, className: cn('relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0', className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "menubar-checkbox-item", "data-inset": inset, className: cn('relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0', className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(Check, {}) }) }), children] }));
 }
 function MenubarRadioGroup({ ...props }) {
     return _jsx(DropdownMenuRadioGroup, { "data-slot": "menubar-radio-group", ...props });
 }
 function MenubarRadioItem({ className, children, inset, ...props }) {
-    return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "menubar-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+    return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "menubar-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(Check, {}) }) }), children] }));
 }
 function MenubarLabel({ className, inset, ...props }) {
     return (_jsx(DropdownMenuLabel, { "data-slot": "menubar-label", "data-inset": inset, className: cn('px-1.5 py-1 text-sm font-medium data-inset:pl-7', className), ...props }));

package/dist/components/native-select/native-select.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { CaretDownIcon } from '@phosphor-icons/react/ssr';
+import { ChevronDown } from 'lucide-react';
 import { cn } from '../../lib/utils';
 function NativeSelect({ className, size = 'default', ...props }) {
-    return (_jsxs("div", { className: cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className), "data-slot": "native-select-wrapper", "data-size": size, children: [_jsx("select", { "data-slot": "native-select", "data-size": size, className: "h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", ...props }), _jsx(CaretDownIcon, { className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none", "aria-hidden": "true", "data-slot": "native-select-icon" })] }));
+    return (_jsxs("div", { className: cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className), "data-slot": "native-select-wrapper", "data-size": size, children: [_jsx("select", { "data-slot": "native-select", "data-size": size, className: "h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", ...props }), _jsx(ChevronDown, { className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none", "aria-hidden": "true", "data-slot": "native-select-icon" })] }));
 }
 function NativeSelectOption({ className, ...props }) {
     return _jsx("option", { "data-slot": "native-select-option", className: cn('bg-[Canvas] text-[CanvasText]', className), ...props });

package/dist/components/navigation-menu/navigation-menu.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../lib/utils';
-import { CaretDownIcon } from '@phosphor-icons/react/dist/ssr';
+import { ChevronDown } from 'lucide-react';
 function NavigationMenu({ align = 'start', className, children, ...props }) {
     return (_jsxs(NavigationMenuPrimitive.Root, { "data-slot": "navigation-menu", className: cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', className), ...props, children: [children, _jsx(NavigationMenuPositioner, { align: align })] }));
 }
@@ -16,7 +16,7 @@ function NavigationMenuItem({ className, ...props }) {
 }
 const navigationMenuTriggerStyle = cva('group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted');
 function NavigationMenuTrigger({ className, children, ...props }) {
-    return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), 'group', className), ...props, children: [children, ' ', _jsx(CaretDownIcon, { className: "relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180", "aria-hidden": "true" })] }));
+    return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), 'group', className), ...props, children: [children, ' ', _jsx(ChevronDown, { className: "relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180", "aria-hidden": "true" })] }));
 }
 function NavigationMenuContent({ className, ...props }) {
     return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn('data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95', className), ...props }));

package/dist/components/navigation-pattern-1/index.d.ts

@@ -0,0 +1,3 @@
+export { NavigationPattern1 } from './pattern-1';
+export type { NavigationPattern1Props } from './pattern-1';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation-pattern-1/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-pattern-1/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/navigation-pattern-1/index.js

@@ -0,0 +1 @@
+export { NavigationPattern1 } from './pattern-1';

package/dist/components/navigation-pattern-1/pattern-1.config.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Navigation data for {@link NavigationPattern1}. Single source for desktop + mobile.
+ */
+export type NavBadge = {
+    label: string;
+};
+/** Simple top-level link (Dashboard, Performance, …). */
+export type Pattern1PrimaryLink = {
+    kind: 'link';
+    label: string;
+    href: string;
+    /** Current / highlighted item (e.g. Dashboard). */
+    active?: boolean;
+    badge?: NavBadge;
+};
+/** Expandable group (Portfolio + children). */
+export type Pattern1PrimarySubmenu = {
+    kind: 'submenu';
+    label: string;
+    items: readonly {
+        label: string;
+        href: string;
+    }[];
+};
+export type Pattern1PrimaryItem = Pattern1PrimaryLink | Pattern1PrimarySubmenu;
+/** Left cluster: primary app routes. */
+export declare const pattern1PrimaryNav: readonly Pattern1PrimaryItem[];
+export type Pattern1SupportItem = {
+    label: string;
+    href: string;
+};
+/** Right cluster: Help / Support menu. */
+export declare const pattern1SupportMenu: {
+    triggerLabel: string;
+    items: readonly Pattern1SupportItem[];
+};
+export type Pattern1UserLink = {
+    label: string;
+    href: string;
+};
+/** Right cluster: Account menu — grouped sections + log out. */
+export declare const pattern1UserMenu: {
+    triggerLabel: string;
+    sections: readonly (readonly Pattern1UserLink[])[];
+    logOut: Pattern1UserLink;
+};
+//# sourceMappingURL=pattern-1.config.d.ts.map

package/dist/components/navigation-pattern-1/pattern-1.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pattern-1.config.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-pattern-1/pattern-1.config.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,MAAM,QAAQ,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzC,yDAAyD;AACzD,MAAM,MAAM,mBAAmB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEF,+CAA+C;AAC/C,MAAM,MAAM,sBAAsB,GAAG;IACjC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,GAAG,sBAAsB,CAAC;AAE/E,wCAAwC;AACxC,eAAO,MAAM,kBAAkB,EAAE,SAAS,mBAAmB,EAiB5D,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAElE,0CAA0C;AAC1C,eAAO,MAAM,mBAAmB,EAAE;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,mBAAmB,EAAE,CAAA;CAO9F,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/D,gEAAgE;AAChE,eAAO,MAAM,gBAAgB,EAAE;IAC3B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC,SAAS,gBAAgB,EAAE,CAAC,EAAE,CAAC;IACnD,MAAM,EAAE,gBAAgB,CAAC;CAuB5B,CAAC"}

package/dist/components/navigation-pattern-1/pattern-1.config.js

@@ -0,0 +1,55 @@
+/**
+ * Navigation data for {@link NavigationPattern1}. Single source for desktop + mobile.
+ */
+/** Left cluster: primary app routes. */
+export const pattern1PrimaryNav = [
+    { kind: 'link', label: 'Dashboard', href: '/dashboard', active: true },
+    {
+        kind: 'submenu',
+        label: 'Portfolio',
+        items: [
+            { label: 'Settings', href: '/portfolio/settings' },
+            { label: 'Calendar', href: '/portfolio/calendar' },
+            { label: 'Performance', href: '/portfolio/performance' },
+            { label: 'Engine Version', href: '/portfolio/engine' },
+        ],
+    },
+    { kind: 'link', label: 'Performance', href: '/products' },
+    { kind: 'link', label: 'Reporting', href: '/customers', badge: { label: 'Beta' } },
+    { kind: 'link', label: 'Budgets', href: '/settings', badge: { label: 'Beta' } },
+    { kind: 'link', label: 'Sets', href: '/settings' },
+    { kind: 'link', label: 'Markets', href: '/settings' },
+];
+/** Right cluster: Help / Support menu. */
+export const pattern1SupportMenu = {
+    triggerLabel: 'Support',
+    items: [
+        { label: 'Live chat', href: '/support/chat' },
+        { label: 'Help center', href: '/help' },
+        { label: 'Changelog', href: '/changelog' },
+    ],
+};
+/** Right cluster: Account menu — grouped sections + log out. */
+export const pattern1UserMenu = {
+    triggerLabel: 'User',
+    sections: [
+        [
+            { label: 'Profile', href: '/account/profile' },
+            { label: 'Notifications', href: '/account/notifications' },
+            { label: 'Email preferences', href: '/account/email-preferences' },
+            { label: 'Your referrals', href: '/account/referrals' },
+            { label: 'Teams', href: '/account/teams' },
+        ],
+        [
+            { label: 'Connected channels', href: '/connections' },
+            { label: 'Add channel', href: '/connections/add' },
+            { label: 'API key', href: '/account/api-key' },
+        ],
+        [
+            { label: 'Payment method', href: '/billing/payment' },
+            { label: 'Subscriptions', href: '/billing/subscriptions' },
+            { label: 'Invoices', href: '/billing/invoices' },
+        ],
+    ],
+    logOut: { label: 'Log out', href: '/logout' },
+};

package/dist/components/navigation-pattern-1/pattern-1.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export type NavigationPattern1Props = React.ComponentProps<'div'>;
+/**
+ * Responsive app header: mobile bar (menu, brand, search, upgrade) plus desktop nav with account actions.
+ */
+export declare function NavigationPattern1({ className, ...props }: NavigationPattern1Props): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=pattern-1.d.ts.map

package/dist/components/navigation-pattern-1/pattern-1.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pattern-1.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-pattern-1/pattern-1.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AA4HlE;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAyLlF"}

package/dist/components/navigation-pattern-1/pattern-1.js

@@ -0,0 +1,83 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Bell, ChevronDown, Menu, Search, X } from 'lucide-react';
+import { Avatar, AvatarFallback, AvatarImage } from '../avatar';
+import { Badge } from '../badge';
+import { Button } from '../button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../collapsible';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '../dropdown-menu';
+import { Separator } from '../separator';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../sheet';
+import { cn } from '../../lib/utils';
+import { pattern1PrimaryNav, pattern1SupportMenu, pattern1UserMenu } from './pattern-1.config';
+/** Demo user — keep in sync between desktop account menu and mobile sheet. */
+const demoUser = {
+    name: 'shadcn',
+    email: 'm@example.com',
+    avatarSrc: 'https://github.com/shadcn.png',
+    avatarAlt: '@shadcn',
+    initials: 'CN',
+};
+const navLinkClass = 'rounded-md px-3 py-1 text-sm font-medium text-muted-foreground hover:bg-primary/5 outline-none focus-visible:ring-2 focus-visible:ring-ring';
+const sheetNavLinkClass = 'flex items-center gap-2 rounded-md px-3 py-2.5 text-sm font-normal text-muted-foreground hover:bg-accent hover:text-accent-foreground';
+function primaryNavKey(entry, index) {
+    return entry.kind === 'link' ? `link-${entry.label}-${entry.href}-${index}` : `submenu-${entry.label}`;
+}
+/** Wheelhouse icon mark — aligned with `marketing_site/public/svg/wh-logo-icon.svg`. */
+function BrandLogo({ className, ...props }) {
+    return (_jsxs("svg", { viewBox: "0 0 282 196", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, className: cn('h-5 w-auto shrink-0', className), ...props, children: [_jsx("path", { d: "M113.84 192.61L182.63 73.4702C201.1 41.4702 178.01 1.47021 141.07 1.47021H3.4999C3.149 1.47057 2.80437 1.56325 2.50062 1.73893C2.19687 1.91462 1.94468 2.16712 1.76939 2.4711C1.5941 2.77508 1.50186 3.11983 1.50195 3.47073C1.50204 3.82163 1.59445 4.16633 1.7699 4.47021L110.38 192.61C110.556 192.913 110.808 193.165 111.112 193.34C111.415 193.515 111.76 193.607 112.11 193.607C112.46 193.607 112.805 193.515 113.108 193.34C113.412 193.165 113.664 192.913 113.84 192.61Z", fill: "#AA1DA5" }), _jsx("path", { d: "M171.33 192.61L279.93 4.5C280.106 4.19611 280.198 3.85141 280.198 3.50051C280.198 3.14961 280.106 2.80487 279.931 2.50089C279.755 2.19691 279.503 1.9444 279.2 1.76872C278.896 1.59303 278.551 1.50036 278.2 1.5H140.74C103.74 1.5 80.6402 41.5 99.1302 73.57L167.86 192.57C168.032 192.877 168.282 193.134 168.584 193.314C168.887 193.494 169.232 193.591 169.584 193.595C169.936 193.599 170.283 193.51 170.589 193.337C170.896 193.164 171.152 192.913 171.33 192.61V192.61Z", fill: "#D926D2" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M142.811 1.5H140.74C103.74 1.5 80.6402 41.5 99.1302 73.57L140.858 145.817L182.63 73.4702C200.808 41.976 178.729 2.73259 142.811 1.5Z", fill: "#71146D" })] }));
+}
+function MobileNavLinks({ onNavigate }) {
+    return (_jsxs("div", { className: "flex flex-col gap-0.5 p-4 pt-2", children: [pattern1PrimaryNav.map((entry, i) => {
+                if (entry.kind === 'link') {
+                    return (_jsxs("a", { className: cn(sheetNavLinkClass, entry.active && 'text-primary'), href: entry.href, onClick: onNavigate, children: [entry.label, entry.badge ? _jsx(Badge, { size: "sm", children: entry.badge.label }) : null] }, primaryNavKey(entry, i)));
+                }
+                return (_jsxs(Collapsible, { className: "w-full", children: [_jsx(CollapsibleTrigger, { render: _jsxs("button", { type: "button", className: cn(sheetNavLinkClass, 'group flex w-full cursor-default justify-between font-normal text-muted-foreground hover:text-accent-foreground'), children: [_jsx("span", { children: entry.label }), _jsx(ChevronDown, { className: "size-4 shrink-0 opacity-80 transition-transform group-data-[panel-open]:rotate-180" })] }) }), _jsx(CollapsibleContent, { className: "flex flex-col gap-0.5 pt-0.5 pb-1", children: entry.items.map((sub) => (_jsx("a", { className: cn(sheetNavLinkClass, 'py-2 pl-8 text-sm'), href: sub.href, onClick: onNavigate, children: sub.label }, sub.href))) })] }, primaryNavKey(entry, i)));
+            }), _jsx(Separator, { className: "my-3" }), _jsxs("div", { className: "flex items-center gap-3 rounded-md px-3 py-2", children: [_jsxs(Avatar, { className: "size-8 border-0 after:hidden", children: [_jsx(AvatarImage, { src: demoUser.avatarSrc, alt: demoUser.avatarAlt }), _jsx(AvatarFallback, { children: demoUser.initials })] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium text-foreground", children: demoUser.name }), _jsx("p", { className: "truncate text-xs text-muted-foreground", children: demoUser.email })] })] }), pattern1UserMenu.sections.map((section, si) => (_jsxs(React.Fragment, { children: [si > 0 ? _jsx(Separator, { className: "my-2" }) : null, section.map((item) => (_jsx("a", { className: sheetNavLinkClass, href: item.href, onClick: onNavigate, children: item.label }, item.href)))] }, `user-section-${si}`))), _jsx(Separator, { className: "my-2" }), _jsx("a", { className: cn(sheetNavLinkClass, 'text-destructive-foreground hover:bg-destructive/10 hover:text-destructive-foreground'), href: pattern1UserMenu.logOut.href, onClick: onNavigate, children: pattern1UserMenu.logOut.label })] }));
+}
+/**
+ * Responsive app header: mobile bar (menu, brand, search, upgrade) plus desktop nav with account actions.
+ */
+export function NavigationPattern1({ className, ...props }) {
+    const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
+    // #region agent log
+    const agentDbg = React.useCallback((hypothesisId, message, data) => {
+        fetch('http://127.0.0.1:7669/ingest/d1992449-3e7e-4566-9281-d4bff7e38fe9', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', 'X-Debug-Session-Id': '8829e4' },
+            body: JSON.stringify({
+                sessionId: '8829e4',
+                runId: 'pre-fix',
+                hypothesisId,
+                location: 'pattern-1.tsx:NavigationPattern1',
+                message,
+                data,
+                timestamp: Date.now(),
+            }),
+        }).catch(() => { });
+    }, []);
+    React.useEffect(() => {
+        const mq = typeof window !== 'undefined' ? window.matchMedia('(min-width: 1024px)') : null;
+        agentDbg('A', 'viewport-lg', {
+            innerWidth: typeof window !== 'undefined' ? window.innerWidth : null,
+            lgMatches: mq?.matches ?? null,
+            desktopNavExpectedVisible: mq?.matches ?? null,
+        });
+        const onResize = () => {
+            agentDbg('A', 'viewport-lg-resize', {
+                innerWidth: window.innerWidth,
+                lgMatches: window.matchMedia('(min-width: 1024px)').matches,
+            });
+        };
+        window.addEventListener('resize', onResize);
+        return () => window.removeEventListener('resize', onResize);
+    }, [agentDbg]);
+    // #endregion
+    return (_jsxs("div", { "data-slot": "navigation-pattern-1", className: cn(className), ...props, children: [_jsx("nav", { className: "lg:hidden", "aria-label": "Main", children: _jsxs("div", { className: "relative flex h-14 items-center justify-between border-b border-border bg-background px-4", children: [_jsxs(Button, { type: "button", variant: "ghost", className: "relative -ml-2 h-9 w-9 shrink-0 px-0 [&_svg]:size-5", "aria-expanded": mobileMenuOpen, "aria-controls": "navigation-pattern-1-mobile-sheet", "aria-label": mobileMenuOpen ? 'Close menu' : 'Open menu', onClick: () => setMobileMenuOpen((open) => !open), children: [_jsx("span", { className: cn('absolute transition-all duration-300', mobileMenuOpen ? '-rotate-90 opacity-0' : 'rotate-0 opacity-100'), "aria-hidden": true, children: _jsx(Menu, {}) }), _jsx("span", { className: cn('absolute transition-all duration-300', mobileMenuOpen ? 'rotate-0 opacity-100' : '-rotate-90 opacity-0'), "aria-hidden": true, children: _jsx(X, {}) })] }), _jsx("div", { className: "pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", children: _jsx(BrandLogo, { className: "h-6 w-auto" }) }), _jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [_jsx(Button, { type: "button", variant: "ghost", className: "size-9 p-0 [&_svg]:size-5", "aria-label": "Search", children: _jsx(Search, { className: "text-muted-foreground" }) }), _jsx(Button, { type: "button", variant: "ghost", className: "size-9 p-0 [&_svg]:size-5", "aria-label": "Notifications", children: _jsx(Bell, { className: "text-muted-foreground" }) })] })] }) }), _jsx(Sheet, { open: mobileMenuOpen, onOpenChange: setMobileMenuOpen, children: _jsxs(SheetContent, { id: "navigation-pattern-1-mobile-sheet", side: "left", showCloseButton: false, className: "flex h-[100dvh] max-h-[100dvh] w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-sm", children: [_jsxs(SheetHeader, { className: "shrink-0 border-b border-border text-left", children: [_jsx(SheetTitle, { children: "Menu" }), _jsx(SheetDescription, { className: "sr-only", children: "Primary navigation links for the application." })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain", children: _jsx(MobileNavLinks, { onNavigate: () => setMobileMenuOpen(false) }) })] }) }), _jsx("nav", { className: "hidden h-12 border-b border-border bg-background lg:block", "aria-label": "Main", children: _jsxs("div", { className: "container flex h-full items-center justify-between px-6", children: [_jsxs("div", { className: "flex items-center gap-x-3", children: [_jsx(BrandLogo, {}), _jsx("div", { className: "flex items-center gap-x-1", children: pattern1PrimaryNav.map((entry, i) => {
+                                        if (entry.kind === 'link') {
+                                            return (_jsxs("a", { className: cn(navLinkClass, entry.active && 'text-primary', entry.badge && 'inline-flex items-center gap-1'), href: entry.href, children: [entry.label, entry.badge ? (_jsx(Badge, { variant: "outline", size: "sm", children: entry.badge.label })) : null] }, primaryNavKey(entry, i)));
+                                        }
+                                        return (_jsxs(DropdownMenu, { onOpenChange: (open) => agentDbg('D', 'menu-open-change', { menu: 'portfolio', open, label: entry.label }), children: [_jsxs(DropdownMenuTrigger, { className: cn(navLinkClass, 'inline-flex cursor-default items-center gap-0 border-0 bg-transparent'), children: [entry.label, _jsx(ChevronDown, { className: "ml-1 size-4 opacity-80" })] }), _jsx(DropdownMenuContent, { align: "start", className: "min-w-48", children: entry.items.map((sub) => (_jsx(DropdownMenuItem, { children: sub.label }, sub.href))) })] }, primaryNavKey(entry, i)));
+                                    }) })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": "Search", children: _jsx(Search, { className: "size-4 text-muted-foreground" }) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": "Search", children: _jsx(Bell, { className: "size-4 text-muted-foreground" }) }), _jsxs(DropdownMenu, { onOpenChange: (open) => agentDbg('D', 'menu-open-change', { menu: 'support', open }), children: [_jsxs(DropdownMenuTrigger, { className: cn(navLinkClass, 'inline-flex cursor-default items-center gap-0 border-0 bg-transparent'), children: [pattern1SupportMenu.triggerLabel, _jsx(ChevronDown, { className: "ml-1 size-4 opacity-80" })] }), _jsx(DropdownMenuContent, { align: "start", className: "min-w-48", children: pattern1SupportMenu.items.map((item) => (_jsx(DropdownMenuItem, { children: item.label }, item.href))) })] }), _jsxs(DropdownMenu, { onOpenChange: (open) => agentDbg('D', 'menu-open-change', { menu: 'user', open }), children: [_jsxs(DropdownMenuTrigger, { className: cn(navLinkClass, 'inline-flex cursor-default items-center gap-0 border-0 bg-transparent'), children: [pattern1UserMenu.triggerLabel, _jsx(ChevronDown, { className: "ml-1 size-4 opacity-80" })] }), _jsxs(DropdownMenuContent, { align: "end", className: "min-w-56", children: [_jsxs(DropdownMenuLabel, { className: "font-normal", children: [_jsx("span", { className: "block text-sm font-medium", children: demoUser.name }), _jsx("span", { className: "block text-xs text-muted-foreground", children: demoUser.email })] }), _jsx(DropdownMenuSeparator, {}), pattern1UserMenu.sections.map((section, si) => (_jsxs(React.Fragment, { children: [si > 0 ? _jsx(DropdownMenuSeparator, {}) : null, section.map((item) => (_jsx(DropdownMenuItem, { children: item.label }, `${item.href}-${item.label}`)))] }, `user-dd-${si}`))), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { variant: "destructive", children: pattern1UserMenu.logOut.label })] })] })] })] }) })] }));
+}

package/dist/components/navigation-pattern-1/pattern-1.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import { NavigationPattern1 } from './pattern-1';
+declare const meta: {
+    title: string;
+    component: typeof NavigationPattern1;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** Wide canvas: show the desktop bar only (`hidden lg:block` → forced visible). */
+export declare const Desktop: Story;
+/** Wide canvas: show the mobile bar and sheet trigger (`lg:hidden` → forced visible). */
+export declare const Mobile: Story;
+//# sourceMappingURL=pattern-1.stories.d.ts.map

package/dist/components/navigation-pattern-1/pattern-1.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pattern-1.stories.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-pattern-1/pattern-1.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,QAAA,MAAM,IAAI;;;;;;CAMiC,CAAC;AAE5C,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,mFAAmF;AACnF,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAC;AAEF,yFAAyF;AACzF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC"}

package/dist/components/navigation-pattern-1/pattern-1.stories.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NavigationPattern1 } from './pattern-1';
+const meta = {
+    title: 'UI/Navigation pattern 1',
+    component: NavigationPattern1,
+    parameters: {
+        layout: 'padded',
+    },
+};
+export default meta;
+/** Wide canvas: show the desktop bar only (`hidden lg:block` → forced visible). */
+export const Desktop = {
+    // className="[&>nav:first-of-type]:hidden [&>nav:last-of-type]:!block"
+    render: () => _jsx(NavigationPattern1, {}),
+};
+/** Wide canvas: show the mobile bar and sheet trigger (`lg:hidden` → forced visible). */
+export const Mobile = {
+    render: () => _jsx(NavigationPattern1, { className: "[&>nav:first-of-type]:!block [&>nav:last-of-type]:!hidden" }),
+};

package/dist/components/pagination/pagination.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { cn } from '../../lib/utils';
 import { Button } from '../button';
-import { CaretLeftIcon, CaretRightIcon, DotsThreeIcon } from '@phosphor-icons/react/dist/ssr';
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
 function Pagination({ className, ...props }) {
     return _jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn('mx-auto flex w-full justify-center', className), ...props });
 }
@@ -18,12 +18,12 @@ function PaginationLink({ className, isActive, size = 'icon', ...props }) {
         _jsx("a", { "aria-current": isActive ? 'page' : undefined, "data-slot": "pagination-link", "data-active": isActive, ...props }) }));
 }
 function PaginationPrevious({ className, text = 'Previous', ...props }) {
-    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn('pl-1.5!', className), ...props, children: [_jsx(CaretLeftIcon, { "data-icon": "inline-start" }), _jsx("span", { className: "hidden sm:block", children: text })] }));
+    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn('pl-1.5!', className), ...props, children: [_jsx(ChevronLeft, { "data-icon": "inline-start" }), _jsx("span", { className: "hidden sm:block", children: text })] }));
 }
 function PaginationNext({ className, text = 'Next', ...props }) {
-    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn('pr-1.5!', className), ...props, children: [_jsx("span", { className: "hidden sm:block", children: text }), _jsx(CaretRightIcon, { "data-icon": "inline-end" })] }));
+    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn('pr-1.5!', className), ...props, children: [_jsx("span", { className: "hidden sm:block", children: text }), _jsx(ChevronRight, { "data-icon": "inline-end" })] }));
 }
 function PaginationEllipsis({ className, ...props }) {
-    return (_jsxs("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx(DotsThreeIcon, {}), _jsx("span", { className: "sr-only", children: "More pages" })] }));
+    return (_jsxs("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx(MoreHorizontal, {}), _jsx("span", { className: "sr-only", children: "More pages" })] }));
 }
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/components/select/select.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Select as SelectPrimitive } from '@base-ui/react/select';
-import { CaretDownIcon, CaretUpIcon, CheckIcon } from '@phosphor-icons/react';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
 import { cn } from '../../lib/utils';
 /**
  * Root for a native-style select. Compose `SelectTrigger`, `SelectValue`, `SelectContent`,
@@ -21,7 +21,7 @@ function SelectValue({ className, ...props }) {
 }
 /** Button that opens the list popup; shows a chevron icon. */
 function SelectTrigger({ className, size = 'default', children, ...props }) {
-    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(CaretDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })] }));
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDown, { className: "pointer-events-none size-4 text-muted-foreground" }) })] }));
 }
 /** Portal, positioner, and scrollable list surface for options. */
 function SelectContent({ className, children, side = 'bottom', sideOffset = 4, align = 'center', alignOffset = 0, alignItemWithTrigger = true, ...props }) {
@@ -33,7 +33,7 @@ function SelectLabel({ className, ...props }) {
 }
 /** One selectable option; shows a check when selected. */
 function SelectItem({ className, children, ...props }) {
-    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx(SelectPrimitive.ItemText, { className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap", children: children }), _jsx(SelectPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(CheckIcon, { className: "pointer-events-none" }) })] }));
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx(SelectPrimitive.ItemText, { className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap", children: children }), _jsx(SelectPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(Check, { className: "pointer-events-none" }) })] }));
 }
 /** Horizontal rule between groups or items. */
 function SelectSeparator({ className, ...props }) {
@@ -41,10 +41,10 @@ function SelectSeparator({ className, ...props }) {
 }
 /** Scroll affordance at the top of a long list (pointer/hover). */
 function SelectScrollUpButton({ className, ...props }) {
-    return (_jsx(SelectPrimitive.ScrollUpArrow, { "data-slot": "select-scroll-up-button", className: cn("top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(CaretUpIcon, {}) }));
+    return (_jsx(SelectPrimitive.ScrollUpArrow, { "data-slot": "select-scroll-up-button", className: cn("top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronUp, {}) }));
 }
 /** Scroll affordance at the bottom of a long list (pointer/hover). */
 function SelectScrollDownButton({ className, ...props }) {
-    return (_jsx(SelectPrimitive.ScrollDownArrow, { "data-slot": "select-scroll-down-button", className: cn("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(CaretDownIcon, {}) }));
+    return (_jsx(SelectPrimitive.ScrollDownArrow, { "data-slot": "select-scroll-down-button", className: cn("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronDown, {}) }));
 }
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/components/sheet/sheet.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Dialog as SheetPrimitive } from '@base-ui/react/dialog';
-import { XIcon } from '@phosphor-icons/react/X';
+import { X } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import { Button } from '../button';
 function Sheet({ ...props }) {
@@ -21,7 +21,7 @@ function SheetOverlay({ className, ...props }) {
     return (_jsx(SheetPrimitive.Backdrop, { "data-slot": "sheet-overlay", className: cn('fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs', className), ...props }));
 }
 function SheetContent({ className, children, side = 'right', showCloseButton = true, ...props }) {
-    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Popup, { "data-slot": "sheet-content", "data-side": side, className: cn('fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm', className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { "data-slot": "sheet-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-3 right-3", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Popup, { "data-slot": "sheet-content", "data-side": side, className: cn('fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm', className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { "data-slot": "sheet-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-3 right-3", size: "icon-sm" }), children: [_jsx(X, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
 }
 function SheetHeader({ className, ...props }) {
     return _jsx("div", { "data-slot": "sheet-header", className: cn('flex flex-col gap-0.5 p-4', className), ...props });

package/dist/components/sonner/sonner.d.ts

@@ -1,6 +1,6 @@
 import { type ToasterProps } from 'sonner';
 /**
- * Opinionated [Sonner](https://sonner.emilkowal.ski/) toaster: Wheelhouse popover tokens, Phosphor icons,
+ * Opinionated [Sonner](https://sonner.emilkowal.ski/) toaster: Wheelhouse popover tokens, Lucide icons,
  * and `cn-toast` class for styling. Mount once near the app root.
  *
  * Defaults to **`theme="system"`** so light/dark follows the OS; in Next.js with `next-themes`, pass

package/dist/components/sonner/sonner.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Toaster as Sonner } from 'sonner';
-import { CheckCircleIcon, InfoIcon, SpinnerIcon, WarningIcon, XCircleIcon } from '@phosphor-icons/react';
+import { AlertTriangle, CheckCircle, Info, Loader2, XCircle } from 'lucide-react';
 /**
- * Opinionated [Sonner](https://sonner.emilkowal.ski/) toaster: Wheelhouse popover tokens, Phosphor icons,
+ * Opinionated [Sonner](https://sonner.emilkowal.ski/) toaster: Wheelhouse popover tokens, Lucide icons,
  * and `cn-toast` class for styling. Mount once near the app root.
  *
  * Defaults to **`theme="system"`** so light/dark follows the OS; in Next.js with `next-themes`, pass
@@ -13,11 +13,11 @@ import { CheckCircleIcon, InfoIcon, SpinnerIcon, WarningIcon, XCircleIcon } from
  */
 function Toaster({ theme = 'system', ...props }) {
     return (_jsx(Sonner, { theme: theme, className: "toaster group", icons: {
-            success: _jsx(CheckCircleIcon, { className: "size-4" }),
-            info: _jsx(InfoIcon, { className: "size-4" }),
-            warning: _jsx(WarningIcon, { className: "size-4" }),
-            error: _jsx(XCircleIcon, { className: "size-4" }),
-            loading: _jsx(SpinnerIcon, { className: "size-4 animate-spin" }),
+            success: _jsx(CheckCircle, { className: "size-4" }),
+            info: _jsx(Info, { className: "size-4" }),
+            warning: _jsx(AlertTriangle, { className: "size-4" }),
+            error: _jsx(XCircle, { className: "size-4" }),
+            loading: _jsx(Loader2, { className: "size-4 animate-spin" }),
         }, style: {
             '--normal-bg': 'var(--popover)',
             '--normal-text': 'var(--popover-foreground)',

package/dist/components/sortable/index.d.ts

@@ -0,0 +1,3 @@
+export { Sortable, SortableItem, SortableItemHandle, SortableOverlay } from './sortable';
+export type { SortableItemHandleProps, SortableItemProps, SortableOverlayProps, SortableRootProps } from './sortable';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/sortable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACzF,YAAY,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/sortable/index.js

@@ -0,0 +1 @@
+export { Sortable, SortableItem, SortableItemHandle, SortableOverlay } from './sortable';