@wheelhouse/ui 0.2.0 → 0.2.1

package/dist/blocks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './navigation';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/blocks/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/blocks/index.js

@@ -0,0 +1 @@
+export * from './navigation';

package/dist/blocks/navigation/index.d.ts

@@ -0,0 +1,2 @@
+export * from './pattern-1';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/blocks/navigation/index.js

@@ -0,0 +1 @@
+export * from './pattern-1';

package/dist/blocks/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/blocks/navigation/pattern-1/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/blocks/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/blocks/navigation/pattern-1/index.js

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

package/dist/blocks/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/blocks/navigation/pattern-1/pattern-1.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pattern-1.config.d.ts","sourceRoot":"","sources":["../../../../src/blocks/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/blocks/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/blocks/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/blocks/navigation/pattern-1/pattern-1.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pattern-1.d.ts","sourceRoot":"","sources":["../../../../src/blocks/navigation/pattern-1/pattern-1.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/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,2CAoJlF"}

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

@@ -0,0 +1,50 @@
+'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 '../../../components/avatar';
+import { Badge } from '../../../components/badge';
+import { Button } from '../../../components/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../../components/collapsible';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '../../../components/dropdown-menu';
+import { Separator } from '../../../components/separator';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../../../components/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);
+    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, { 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, { 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, { 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/blocks/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/blocks/navigation/pattern-1/pattern-1.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pattern-1.stories.d.ts","sourceRoot":"","sources":["../../../../src/blocks/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/blocks/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: 'Blocks/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/accordion/accordion.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
 import { cn } from '../../lib/utils';
-import { CaretDownIcon, CaretUpIcon } from '@phosphor-icons/react/dist/ssr';
+import { ChevronDown, ChevronUp } from 'lucide-react';
 function Accordion({ className, ...props }) {
     return _jsx(AccordionPrimitive.Root, { "data-slot": "accordion", className: cn('flex w-full flex-col', className), ...props });
 }
@@ -10,7 +10,7 @@ function AccordionItem({ className, ...props }) {
     return _jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn('not-last:border-b', className), ...props });
 }
 function AccordionTrigger({ className, children, ...props }) {
-    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn('group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground', className), ...props, children: [children, _jsx(CaretDownIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" }), _jsx(CaretUpIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" })] }) }));
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn('group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground', className), ...props, children: [children, _jsx(ChevronDown, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" }), _jsx(ChevronUp, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" })] }) }));
 }
 function AccordionContent({ className, children, ...props }) {
     return (_jsx(AccordionPrimitive.Panel, { "data-slot": "accordion-content", className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up", ...props, children: _jsx("div", { className: cn('h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4', className), children: children }) }));

package/dist/components/alert/alert.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Alert, AlertAction, AlertDescription, AlertTitle } from './alert';
 import { Button } from '../button';
-import { InfoIcon, WarningIcon } from '@phosphor-icons/react/dist/ssr';
+import { AlertTriangle, Info } from 'lucide-react';
 const meta = {
     title: 'UI/Alert',
     component: Alert,
@@ -22,13 +22,13 @@ export const Gallery = {
         layout: 'padded',
         controls: { disable: true },
     },
-    render: () => (_jsxs("div", { className: "flex max-w-[min(100vw-2rem,42rem)] flex-col gap-10", children: [_jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Default" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Alert, { children: [_jsx(AlertTitle, { children: "Heads up!" }), _jsx(AlertDescription, { children: "You can add components to your app using the CLI." })] }), _jsxs(Alert, { children: [_jsx(InfoIcon, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Information" }), _jsx(AlertDescription, { children: "Your subscription renews on the 1st of next month." })] })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Destructive" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Alert, { variant: "destructive", children: [_jsx(AlertTitle, { children: "Something went wrong" }), _jsx(AlertDescription, { children: "Your session has expired. Please sign in again to continue." })] }), _jsxs(Alert, { variant: "destructive", children: [_jsx(WarningIcon, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Something went wrong" }), _jsx(AlertDescription, { children: "Your session has expired. Please sign in again to continue." })] })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With Action" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Alert, { children: [_jsx(AlertTitle, { children: "Update available" }), _jsx(AlertDescription, { children: "A new version of the application is ready to install." }), _jsx(AlertAction, { children: _jsx(Button, { size: "xs", variant: "outline", children: "Update" }) })] }), _jsxs(Alert, { variant: "destructive", children: [_jsx(WarningIcon, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Payment failed" }), _jsx(AlertDescription, { children: "We could not process your payment. Please update your billing details." }), _jsx(AlertAction, { children: _jsx(Button, { size: "xs", variant: "outline", children: "Fix now" }) })] })] })] })] })),
+    render: () => (_jsxs("div", { className: "flex max-w-[min(100vw-2rem,42rem)] flex-col gap-10", children: [_jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Default" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Alert, { children: [_jsx(AlertTitle, { children: "Heads up!" }), _jsx(AlertDescription, { children: "You can add components to your app using the CLI." })] }), _jsxs(Alert, { children: [_jsx(Info, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Information" }), _jsx(AlertDescription, { children: "Your subscription renews on the 1st of next month." })] })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Destructive" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Alert, { variant: "destructive", children: [_jsx(AlertTitle, { children: "Something went wrong" }), _jsx(AlertDescription, { children: "Your session has expired. Please sign in again to continue." })] }), _jsxs(Alert, { variant: "destructive", children: [_jsx(AlertTriangle, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Something went wrong" }), _jsx(AlertDescription, { children: "Your session has expired. Please sign in again to continue." })] })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With Action" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Alert, { children: [_jsx(AlertTitle, { children: "Update available" }), _jsx(AlertDescription, { children: "A new version of the application is ready to install." }), _jsx(AlertAction, { children: _jsx(Button, { size: "xs", variant: "outline", children: "Update" }) })] }), _jsxs(Alert, { variant: "destructive", children: [_jsx(AlertTriangle, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Payment failed" }), _jsx(AlertDescription, { children: "We could not process your payment. Please update your billing details." }), _jsx(AlertAction, { children: _jsx(Button, { size: "xs", variant: "outline", children: "Fix now" }) })] })] })] })] })),
 };
 export const WithIcon = {
-    render: (args) => (_jsxs(Alert, { ...args, children: [_jsx(InfoIcon, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Information" }), _jsx(AlertDescription, { children: "Your subscription renews on the 1st of next month." })] })),
+    render: (args) => (_jsxs(Alert, { ...args, children: [_jsx(Info, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Information" }), _jsx(AlertDescription, { children: "Your subscription renews on the 1st of next month." })] })),
 };
 export const Destructive = {
-    render: (args) => (_jsxs(Alert, { ...args, variant: "destructive", children: [_jsx(WarningIcon, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Something went wrong" }), _jsx(AlertDescription, { children: "Your session has expired. Please sign in again to continue." })] })),
+    render: (args) => (_jsxs(Alert, { ...args, variant: "destructive", children: [_jsx(AlertTriangle, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Something went wrong" }), _jsx(AlertDescription, { children: "Your session has expired. Please sign in again to continue." })] })),
 };
 export const WithAction = {
     render: (args) => (_jsxs(Alert, { ...args, children: [_jsx(AlertTitle, { children: "Update available" }), _jsx(AlertDescription, { children: "A new version of the application is ready to install." }), _jsx(AlertAction, { children: _jsx(Button, { size: "xs", variant: "outline", children: "Update" }) })] })),

package/dist/components/alert-dialog/alert-dialog.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { WarningCircleIcon } from '@phosphor-icons/react/WarningCircle';
+import { AlertCircle } from 'lucide-react';
 import { Button } from '../button';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger, } from './alert-dialog';
 const meta = {
@@ -15,7 +15,7 @@ export const Default = {
     render: () => (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Delete item" }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Delete this item?" }), _jsx(AlertDialogDescription, { children: "This action cannot be undone. The item will be removed permanently." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", children: "Delete" })] })] })] })),
 };
 export const WithMedia = {
-    render: () => (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Unsaved changes" }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogMedia, { children: _jsx(WarningCircleIcon, { "aria-hidden": true }) }), _jsx(AlertDialogTitle, { children: "Discard changes?" }), _jsx(AlertDialogDescription, { children: "You have unsaved edits. If you leave now, they will be lost." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Keep editing" }), _jsx(AlertDialogAction, { variant: "destructive", children: "Discard" })] })] })] })),
+    render: () => (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Unsaved changes" }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogMedia, { children: _jsx(AlertCircle, { "aria-hidden": true }) }), _jsx(AlertDialogTitle, { children: "Discard changes?" }), _jsx(AlertDialogDescription, { children: "You have unsaved edits. If you leave now, they will be lost." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Keep editing" }), _jsx(AlertDialogAction, { variant: "destructive", children: "Discard" })] })] })] })),
 };
 export const SizeSm = {
     render: () => (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Compact layout" }), _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Sign out?" }), _jsx(AlertDialogDescription, { children: "You will need to sign in again to access your account." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { children: "Sign out" })] })] })] })),

package/dist/components/badge/badge.d.ts

@@ -27,7 +27,7 @@ export declare const badgeVariantKeys: (keyof typeof badgeVariantStyles)[];
 export declare const badgeSizeKeys: (keyof typeof badgeSizeStyles)[];
 declare const badgeVariants: (props?: ({
     size?: "default" | "sm" | "lg" | null | undefined;
-    variant?: "default" | "destructive" | "outline" | "secondary" | "destructive-outline" | "info" | "success" | "warning" | "warning-light" | "success-light" | "info-light" | "destructive-light" | "primary-outline" | "warning-outline" | "success-outline" | "info-outline" | null | undefined;
+    variant?: "default" | "outline" | "secondary" | "info" | "success" | "warning" | "destructive" | "warning-light" | "success-light" | "info-light" | "destructive-light" | "primary-outline" | "warning-outline" | "success-outline" | "info-outline" | "destructive-outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type BadgeVariantProps = VariantProps<typeof badgeVariants>;
 type BadgeVariant = BadgeVariantProps['variant'];

package/dist/components/breadcrumb/breadcrumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAMtD,8BAA8B;AAC9B,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC1D,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAC7D,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAC7D,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAChE,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC/D,uCAAuC;AACvC,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAClE,sCAAsC;AACtC,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAEnE,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAEvE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAQ1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAE1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,0EAcrF;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAW5E;AAED,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAMzF;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAahF;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAKtD,8BAA8B;AAC9B,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC1D,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAC7D,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAC7D,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAChE,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC/D,uCAAuC;AACvC,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAClE,sCAAsC;AACtC,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAEnE,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAEvE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAQ1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAE1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,0EAcrF;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAW5E;AAED,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAMzF;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAahF;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/breadcrumb/breadcrumb.js

@@ -4,8 +4,7 @@ import * as React from 'react';
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
 import { cn } from '../../lib/utils';
-import { CaretRightIcon } from '@phosphor-icons/react/CaretRight';
-import { DotsThreeIcon } from '@phosphor-icons/react/DotsThree';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
 function Breadcrumb({ className, ...props }) {
     return _jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", className: cn(className), ...props });
 }
@@ -31,9 +30,9 @@ function BreadcrumbPage({ className, ...props }) {
     return (_jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn('font-normal text-foreground', className), ...props }));
 }
 function BreadcrumbSeparator({ children, className, ...props }) {
-    return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn('[&>svg]:size-3.5', className), ...props, children: children ?? _jsx(CaretRightIcon, {}) }));
+    return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn('[&>svg]:size-3.5', className), ...props, children: children ?? _jsx(ChevronRight, {}) }));
 }
 function BreadcrumbEllipsis({ className, ...props }) {
-    return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn('flex size-5 items-center justify-center [&>svg]:size-4', className), ...props, children: [_jsx(DotsThreeIcon, {}), _jsx("span", { className: "sr-only", children: "More" })] }));
+    return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn('flex size-5 items-center justify-center [&>svg]:size-4', className), ...props, children: [_jsx(MoreHorizontal, {}), _jsx("span", { className: "sr-only", children: "More" })] }));
 }
 export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis };

package/dist/components/button/button.d.ts

@@ -22,8 +22,8 @@ declare const buttonSizeStyles: {
 export declare const buttonVariantKeys: (keyof typeof buttonVariantStyles)[];
 export declare const buttonSizeKeys: (keyof typeof buttonSizeStyles)[];
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "destructive-outline" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "default" | "link" | "outline" | "secondary" | "destructive" | "destructive-outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Props for `Button`. Inherits additional behavior from

package/dist/components/calendar/calendar.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { type DayButton, DayPicker, type Locale } from 'react-day-picker';
+import { Button } from '../button';
+/**
+ * Props for {@link Calendar}. Includes all [react-day-picker `DayPicker` props](https://daypicker.dev/api/interfaces/DayPickerProps)
+ * plus Wheelhouse styling options.
+ */
+export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+    /**
+     * Visual variant for the previous/next month controls; matches {@link Button} `variant` values.
+     * @default "ghost"
+     */
+    buttonVariant?: React.ComponentProps<typeof Button>['variant'];
+};
+/**
+ * Month grid for picking dates, ranges, or multiple days. Wraps [react-day-picker](https://react-day-picker.js.org/) `DayPicker`
+ * with design-token class names, Lucide chevrons, and {@link Button}-based day cells (`data-slot="calendar"` on the root).
+ */
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for {@link CalendarDayButton}. Mirrors the `DayButton` component from react-day-picker with an optional `locale`
+ * for `data-day` formatting.
+ */
+export type CalendarDayButtonProps = React.ComponentProps<typeof DayButton> & {
+    /** Passed from the parent `DayPicker` for locale-aware day labels. */
+    locale?: Partial<Locale>;
+};
+/**
+ * Individual day cell button used inside {@link Calendar}. Focus management for keyboard navigation is handled here.
+ * Override via `components.DayButton` on {@link Calendar} only when you need custom day rendering.
+ */
+declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: CalendarDayButtonProps): import("react/jsx-runtime").JSX.Element;
+export { Calendar, CalendarDayButton };
+//# sourceMappingURL=calendar.d.ts.map

package/dist/components/calendar/calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/calendar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,SAAS,EAAE,SAAS,EAAwB,KAAK,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAGhG,OAAO,EAAE,MAAM,EAAkB,MAAM,WAAW,CAAC;AAGnD;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IACjE;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CAClE,CAAC;AAEF;;;GAGG;AACH,iBAAS,QAAQ,CAAC,EACd,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,MAAM,EACN,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACX,EAAE,aAAa,2CAqGf;AAED;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1E,sEAAsE;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;CAC5B,CAAC;AAEF;;;GAGG;AACH,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAyBjG;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/calendar/calendar.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { DayPicker, getDefaultClassNames } from 'react-day-picker';
+import { cn } from '../../lib/utils';
+import { Button, buttonVariants } from '../button';
+import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
+/**
+ * Month grid for picking dates, ranges, or multiple days. Wraps [react-day-picker](https://react-day-picker.js.org/) `DayPicker`
+ * with design-token class names, Lucide chevrons, and {@link Button}-based day cells (`data-slot="calendar"` on the root).
+ */
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', locale, formatters, components, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn('group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent', String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, locale: locale, formatters: {
+            formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: 'short' }),
+            ...formatters,
+        }, classNames: {
+            root: cn('w-fit', defaultClassNames.root),
+            months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),
+            month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
+            nav: cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', defaultClassNames.nav),
+            button_previous: cn(buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) p-0 select-none aria-disabled:opacity-50', defaultClassNames.button_previous),
+            button_next: cn(buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) p-0 select-none aria-disabled:opacity-50', defaultClassNames.button_next),
+            month_caption: cn('flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)', defaultClassNames.month_caption),
+            dropdowns: cn('flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium', defaultClassNames.dropdowns),
+            dropdown_root: cn('relative rounded-(--cell-radius)', defaultClassNames.dropdown_root),
+            dropdown: cn('absolute inset-0 bg-popover opacity-0', defaultClassNames.dropdown),
+            caption_label: cn('font-medium select-none', captionLayout === 'label'
+                ? 'text-sm'
+                : 'flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground', defaultClassNames.caption_label),
+            /** RDP v9: the day grid `<table>` uses the `month_grid` class key (not `table`). */
+            month_grid: cn('w-full border-collapse', defaultClassNames.month_grid),
+            weekdays: cn('flex', defaultClassNames.weekdays),
+            weekday: cn('flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none', defaultClassNames.weekday),
+            week: cn('mt-2 flex w-full', defaultClassNames.week),
+            week_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),
+            week_number: cn('text-[0.8rem] text-muted-foreground select-none', defaultClassNames.week_number),
+            day: cn('group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)', props.showWeekNumber
+                ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'
+                : '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)', defaultClassNames.day),
+            range_start: cn('relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted', defaultClassNames.range_start),
+            range_middle: cn('rounded-none', defaultClassNames.range_middle),
+            range_end: cn('relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted', defaultClassNames.range_end),
+            today: cn('rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none', defaultClassNames.today),
+            outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
+            disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
+            hidden: cn('invisible', defaultClassNames.hidden),
+            ...classNames,
+        }, components: {
+            Root: ({ className, rootRef, ...props }) => {
+                return _jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props });
+            },
+            Chevron: ({ className, orientation, ...props }) => {
+                if (orientation === 'left') {
+                    return _jsx(ChevronLeft, { className: cn('size-4', className), ...props });
+                }
+                if (orientation === 'right') {
+                    return _jsx(ChevronRight, { className: cn('size-4', className), ...props });
+                }
+                return _jsx(ChevronDown, { className: cn('size-4', className), ...props });
+            },
+            DayButton: ({ ...props }) => _jsx(CalendarDayButton, { locale: locale, ...props }),
+            WeekNumber: ({ children, ...props }) => {
+                return (_jsx("td", { ...props, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) }));
+            },
+            ...components,
+        }, ...props }));
+}
+/**
+ * Individual day cell button used inside {@link Calendar}. Focus management for keyboard navigation is handled here.
+ * Override via `components.DayButton` on {@link Calendar} only when you need custom day rendering.
+ */
+function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (modifiers.focused)
+            ref.current?.focus();
+    }, [modifiers.focused]);
+    return (_jsx(Button, { variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(locale?.code), "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn('relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70', defaultClassNames.day, className), ...props }));
+}
+export { Calendar, CalendarDayButton };

package/dist/components/calendar/calendar.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import { Calendar } from '.';
+declare const meta: {
+    title: string;
+    component: typeof Calendar;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Single: Story;
+export declare const Range: Story;
+export declare const DropdownCaption: Story;
+//# sourceMappingURL=calendar.stories.d.ts.map

package/dist/components/calendar/calendar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/calendar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAE7B,QAAA,MAAM,IAAI;;;;;;;CAOuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAgB7B,CAAC"}

package/dist/components/calendar/calendar.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Calendar } from '.';
+const meta = {
+    title: 'UI/Calendar',
+    component: Calendar,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Single = {
+    render: function SingleCalendar() {
+        const [selected, setSelected] = useState(new Date(2026, 3, 13));
+        return _jsx(Calendar, { mode: "single", selected: selected, onSelect: setSelected, defaultMonth: selected, className: "rounded-md border" });
+    },
+};
+export const Range = {
+    render: function RangeCalendar() {
+        const [range, setRange] = useState({
+            from: new Date(2026, 3, 10),
+            to: new Date(2026, 3, 18),
+        });
+        return _jsx(Calendar, { mode: "range", selected: range, onSelect: setRange, defaultMonth: range?.from, numberOfMonths: 2, className: "rounded-md border" });
+    },
+};
+export const DropdownCaption = {
+    render: function DropdownCaptionCalendar() {
+        const [selected, setSelected] = useState(new Date(2026, 3, 13));
+        return (_jsx(Calendar, { mode: "single", captionLayout: "dropdown", selected: selected, onSelect: setSelected, defaultMonth: selected, fromYear: 2020, toYear: 2030, className: "rounded-md border" }));
+    },
+};

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

@@ -0,0 +1,3 @@
+export { Calendar, CalendarDayButton } from './calendar';
+export type { CalendarProps, CalendarDayButtonProps } from './calendar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACzD,YAAY,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/calendar/index.js

@@ -0,0 +1 @@
+export { Calendar, CalendarDayButton } from './calendar';