@wheelhouse/ui 0.2.2 → 0.2.4

package/dist/{components → blocks}/date-selector/use-date-selector.js

@@ -100,7 +100,8 @@ export function useDateSelector({ value, onChange, defaultPeriodType = 'day', de
         commit((prev) => ({
             ...prev,
             selectionMode: 'custom',
-            rollingDays: undefined,
+            rollingUnit: 'day',
+            rollingCount: undefined,
             selectedDate: undefined,
             selectedEndDate: undefined,
             selectedYear: undefined,
@@ -110,25 +111,27 @@ export function useDateSelector({ value, onChange, defaultPeriodType = 'day', de
             rangeEnd: undefined,
         }));
     }, [commit]);
-    const applyRollingPreset = useCallback((mode, days) => {
+    const applyRollingPreset = useCallback((mode, unit, count) => {
         commit((prev) => ({
             ...prev,
             periodType: 'day',
             selectionMode: mode,
-            rollingDays: days,
+            rollingUnit: unit,
+            rollingCount: count,
             selectedDate: undefined,
             selectedEndDate: undefined,
         }));
     }, [commit]);
     const enterCustomRange = useCallback(() => {
-        commit((prev) => ({ ...prev, selectionMode: 'custom', rollingDays: undefined }));
+        commit((prev) => ({ ...prev, selectionMode: 'custom', rollingCount: undefined }));
     }, [commit]);
     const handleDayClick = useCallback((day) => {
         commit((prev) => {
             const s = { ...prev };
             if (s.selectionMode === 'rolling-next' || s.selectionMode === 'rolling-last') {
                 s.selectionMode = 'custom';
-                s.rollingDays = undefined;
+                s.rollingUnit = 'day';
+                s.rollingCount = undefined;
             }
             const activeFilter = presetMode ?? s.filterType;
             if (activeFilter === 'between' && allowRange) {
@@ -228,7 +231,8 @@ export function useDateSelector({ value, onChange, defaultPeriodType = 'day', de
             ...prev,
             periodType: type,
             selectionMode: 'custom',
-            rollingDays: undefined,
+            rollingUnit: 'day',
+            rollingCount: undefined,
             selectedDate: undefined,
             selectedEndDate: undefined,
             selectedYear: undefined,
@@ -245,7 +249,8 @@ export function useDateSelector({ value, onChange, defaultPeriodType = 'day', de
             ...prev,
             filterType: type,
             selectionMode: 'custom',
-            rollingDays: undefined,
+            rollingUnit: 'day',
+            rollingCount: undefined,
             selectedDate: undefined,
             selectedEndDate: undefined,
             selectedYear: undefined,
@@ -285,7 +290,8 @@ export function useDateSelector({ value, onChange, defaultPeriodType = 'day', de
         currentValue,
         allowRange,
         selectionMode: internal.selectionMode,
-        rollingDays: internal.rollingDays,
+        rollingUnit: internal.rollingUnit,
+        rollingCount: internal.rollingCount,
         setPeriodType: handlePeriodTypeChange,
         setFilterType: handleFilterTypeChange,
         setSelectedDate,

package/dist/blocks/floating-menu-widget/floating-menu-widget.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { type PopoverTriggerProps } from '../../components/popover';
+export type FloatingMenuWidgetRenderTrigger = NonNullable<PopoverTriggerProps['render']>;
+export type FloatingMenuWidgetInset = {
+    right: number;
+    bottom: number;
+};
+export type FloatingMenuWidgetProps = Omit<React.ComponentProps<'div'>, 'children'> & {
+    children: React.ReactNode;
+    menuTitle: string;
+    menuDescription?: string;
+    triggerIcon?: React.ReactNode;
+    renderTrigger?: FloatingMenuWidgetRenderTrigger;
+    /** Set `false` when `renderTrigger` is not a native `<button>`. */
+    triggerNativeButton?: boolean;
+    defaultInset?: Partial<FloatingMenuWidgetInset>;
+    /** Unique key for persisting position in `localStorage`. */
+    positionStorageKey?: string;
+    /** Long-press to drag. */
+    draggable?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+declare function FloatingMenuWidget({ children, menuTitle, menuDescription, triggerIcon, renderTrigger, triggerNativeButton, defaultInset, positionStorageKey, draggable, open: openControlled, onOpenChange: onOpenChangeControlled, className, ...rest }: FloatingMenuWidgetProps): import("react/jsx-runtime").JSX.Element;
+export { FloatingMenuWidget };
+//# sourceMappingURL=floating-menu-widget.d.ts.map

package/dist/blocks/floating-menu-widget/floating-menu-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-menu-widget.d.ts","sourceRoot":"","sources":["../../../src/blocks/floating-menu-widget/floating-menu-widget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAA2C,KAAK,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAS7G,MAAM,MAAM,+BAA+B,GAAG,WAAW,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEzF,MAAM,MAAM,uBAAuB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAClF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,+BAA+B,CAAC;IAChD,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IAChD,4DAA4D;IAC5D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AA0BF,iBAAS,kBAAkB,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,eAAe,EACf,WAAyC,EACzC,aAAa,EACb,mBAA0B,EAC1B,YAAY,EACZ,kBAAkB,EAClB,SAAgB,EAChB,IAAI,EAAE,cAAc,EACpB,YAAY,EAAE,sBAAsB,EACpC,SAAS,EACT,GAAG,IAAI,EACV,EAAE,uBAAuB,2CAwOzB;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/blocks/floating-menu-widget/floating-menu-widget.js

@@ -0,0 +1,200 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Menu } from 'lucide-react';
+import { buttonVariants } from '../../components/button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../components/popover';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../../components/sheet';
+import { useIsMobile } from '../../hooks/use-mobile';
+import { cn } from '../../lib/utils';
+const DEFAULT_INSET = 24;
+const LONG_PRESS_MS = 160;
+const LONG_PRESS_MOVE_CANCEL_PX = 22;
+function clamp(n, min, max) {
+    return Math.min(max, Math.max(min, n));
+}
+function readStoredInset(key) {
+    if (typeof window === 'undefined')
+        return null;
+    try {
+        const raw = window.localStorage.getItem(key);
+        if (!raw)
+            return null;
+        const parsed = JSON.parse(raw);
+        if (!parsed || typeof parsed !== 'object')
+            return null;
+        const { right, bottom } = parsed;
+        if (typeof right !== 'number' || typeof bottom !== 'number')
+            return null;
+        return { right, bottom };
+    }
+    catch {
+        return null;
+    }
+}
+function FloatingMenuWidget({ children, menuTitle, menuDescription, triggerIcon = _jsx(Menu, { className: "size-4" }), renderTrigger, triggerNativeButton = true, defaultInset, positionStorageKey, draggable = true, open: openControlled, onOpenChange: onOpenChangeControlled, className, ...rest }) {
+    const isMobile = useIsMobile();
+    const anchorRef = React.useRef(null);
+    const planRef = React.useRef(null);
+    const longPressTimerRef = React.useRef(null);
+    const storageKeyFull = positionStorageKey ? `wheelhouse:floating-menu-widget:${positionStorageKey}` : null;
+    const [inset, setInset] = React.useState(() => {
+        const stored = storageKeyFull ? readStoredInset(storageKeyFull) : null;
+        if (stored)
+            return stored;
+        return {
+            right: defaultInset?.right ?? DEFAULT_INSET,
+            bottom: defaultInset?.bottom ?? DEFAULT_INSET,
+        };
+    });
+    const insetRef = React.useRef(inset);
+    React.useEffect(() => {
+        insetRef.current = inset;
+    }, [inset]);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+    const isControlled = openControlled !== undefined;
+    const open = isControlled ? openControlled : uncontrolledOpen;
+    const prevIsMobileRef = React.useRef(undefined);
+    const setOpen = React.useCallback((next) => {
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChangeControlled?.(next);
+    }, [isControlled, onOpenChangeControlled]);
+    React.useEffect(() => {
+        if (prevIsMobileRef.current !== undefined && prevIsMobileRef.current !== isMobile)
+            setOpen(false);
+        prevIsMobileRef.current = isMobile;
+    }, [isMobile, setOpen]);
+    React.useEffect(() => {
+        return () => {
+            if (longPressTimerRef.current != null) {
+                window.clearTimeout(longPressTimerRef.current);
+                longPressTimerRef.current = null;
+            }
+        };
+    }, []);
+    React.useEffect(() => {
+        if (!isDragging || typeof document === 'undefined')
+            return;
+        const prev = document.body.style.cursor;
+        document.body.style.cursor = 'grabbing';
+        return () => {
+            document.body.style.cursor = prev;
+        };
+    }, [isDragging]);
+    const clearLongPressTimer = React.useCallback(() => {
+        if (longPressTimerRef.current != null) {
+            window.clearTimeout(longPressTimerRef.current);
+            longPressTimerRef.current = null;
+        }
+    }, []);
+    const startDrag = React.useCallback((pointerId, startX, startY) => {
+        const shell = anchorRef.current;
+        if (!shell)
+            return;
+        try {
+            shell.setPointerCapture(pointerId);
+        }
+        catch {
+            return;
+        }
+        const { right, bottom } = insetRef.current;
+        planRef.current = { kind: 'drag', pointerId, startX, startY, originRight: right, originBottom: bottom };
+        setIsDragging(true);
+    }, []);
+    const onShellPointerDown = React.useCallback((event) => {
+        if (!draggable || event.button !== 0)
+            return;
+        if (!anchorRef.current?.contains(event.target))
+            return;
+        const pointerId = event.pointerId;
+        planRef.current = { kind: 'hold', pointerId, startX: event.clientX, startY: event.clientY };
+        clearLongPressTimer();
+        longPressTimerRef.current = window.setTimeout(() => {
+            longPressTimerRef.current = null;
+            const p = planRef.current;
+            if (!p || p.kind !== 'hold' || p.pointerId !== pointerId)
+                return;
+            startDrag(p.pointerId, p.startX, p.startY);
+        }, LONG_PRESS_MS);
+    }, [draggable, startDrag, clearLongPressTimer]);
+    const onShellPointerMove = React.useCallback((event) => {
+        const p = planRef.current;
+        if (!p || event.pointerId !== p.pointerId)
+            return;
+        if (p.kind === 'drag') {
+            const dx = event.clientX - p.startX;
+            const dy = event.clientY - p.startY;
+            const margin = 8;
+            const w = anchorRef.current?.offsetWidth ?? 48;
+            const h = anchorRef.current?.offsetHeight ?? 48;
+            const maxRight = Math.max(margin, window.innerWidth - w - margin);
+            const maxBottom = Math.max(margin, window.innerHeight - h - margin);
+            setInset({
+                right: clamp(p.originRight - dx, margin, maxRight),
+                bottom: clamp(p.originBottom - dy, margin, maxBottom),
+            });
+            return;
+        }
+        const dx = event.clientX - p.startX;
+        const dy = event.clientY - p.startY;
+        if (Math.hypot(dx, dy) > LONG_PRESS_MOVE_CANCEL_PX) {
+            clearLongPressTimer();
+            planRef.current = null;
+        }
+    }, [clearLongPressTimer]);
+    const onShellPointerUpOrCancel = React.useCallback((event) => {
+        clearLongPressTimer();
+        const p = planRef.current;
+        if (!p)
+            return;
+        if (p.kind === 'drag') {
+            if (event.pointerId !== p.pointerId)
+                return;
+            planRef.current = null;
+            setIsDragging(false);
+            try {
+                event.currentTarget.releasePointerCapture(event.pointerId);
+            }
+            catch {
+                /* released */
+            }
+            setInset((cur) => {
+                if (storageKeyFull && typeof window !== 'undefined') {
+                    try {
+                        window.localStorage.setItem(storageKeyFull, JSON.stringify(cur));
+                    }
+                    catch {
+                        /* quota / private mode */
+                    }
+                }
+                return cur;
+            });
+            const shell = anchorRef.current;
+            if (shell) {
+                shell.style.pointerEvents = 'none';
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        shell.style.pointerEvents = '';
+                    });
+                });
+            }
+            return;
+        }
+        planRef.current = null;
+    }, [clearLongPressTimer, storageKeyFull]);
+    const shellClass = cn('fixed z-50 flex touch-none items-center justify-center overflow-hidden rounded-full bg-background shadow-lg ring-1 ring-foreground/5', isDragging && 'cursor-grabbing', className);
+    const shellPointer = draggable
+        ? {
+            onPointerDown: onShellPointerDown,
+            onPointerMove: onShellPointerMove,
+            onPointerUp: onShellPointerUpOrCancel,
+            onPointerCancel: onShellPointerUpOrCancel,
+        }
+        : {};
+    const triggerClass = cn(buttonVariants({ variant: 'default', size: 'icon' }), 'size-8 rounded-full border-0 shadow-none [&_svg]:opacity-90');
+    const body = _jsx("div", { className: "flex flex-col gap-1", children: children });
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx("div", { ref: anchorRef, className: shellClass, style: { right: inset.right, bottom: inset.bottom }, title: "Click to open. Press and hold to move.", ...rest, ...shellPointer, children: renderTrigger ? (_jsx(PopoverTrigger, { nativeButton: triggerNativeButton, render: renderTrigger })) : (_jsxs(PopoverTrigger, { className: triggerClass, children: [triggerIcon, _jsxs("span", { className: "sr-only", children: ["Open ", menuTitle] })] })) }), !isMobile ? (_jsx(PopoverContent, { anchor: anchorRef, align: "end", className: "max-h-[inherit] w-[min(100vw-2rem,12rem)] overflow-y-auto", positionerClassName: "max-h-[min(100dvh-2rem,24rem)]", side: "top", sideOffset: 10, children: body })) : null, isMobile ? (_jsx(Sheet, { open: open, onOpenChange: setOpen, children: _jsxs(SheetContent, { side: "bottom", className: "max-h-[85dvh] overflow-y-auto p-0", children: [_jsxs(SheetHeader, { className: "border-b border-border p-4 text-left", children: [_jsx(SheetTitle, { children: menuTitle }), menuDescription ? _jsx(SheetDescription, { children: menuDescription }) : null] }), _jsx("div", { className: "p-4 pt-2", children: body })] }) })) : null] }));
+}
+export { FloatingMenuWidget };

package/dist/blocks/floating-menu-widget/floating-menu-widget.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+import { FloatingMenuWidget } from './floating-menu-widget';
+declare const meta: {
+    title: string;
+    component: typeof FloatingMenuWidget;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof FloatingMenuWidget>;
+export declare const Default: Story;
+export declare const NotDraggable: Story;
+//# sourceMappingURL=floating-menu-widget.stories.d.ts.map

package/dist/blocks/floating-menu-widget/floating-menu-widget.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-menu-widget.stories.d.ts","sourceRoot":"","sources":["../../../src/blocks/floating-menu-widget/floating-menu-widget.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,QAAA,MAAM,IAAI;;;;;;;CAOiC,CAAC;AAE5C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAqBjD,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC"}

package/dist/blocks/floating-menu-widget/floating-menu-widget.stories.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Circle } from 'lucide-react';
+import { Button } from '../../components/button';
+import { FloatingMenuWidget } from './floating-menu-widget';
+const meta = {
+    title: 'Blocks/Floating menu widget',
+    component: FloatingMenuWidget,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+function DemoLinks() {
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", className: "justify-start font-normal", type: "button", children: [_jsx(Circle, { className: "size-3 opacity-70" }), "Action 01"] }), _jsxs(Button, { variant: "ghost", className: "justify-start font-normal", type: "button", children: [_jsx(Circle, { className: "size-3 opacity-70" }), "Action 02"] }), _jsxs(Button, { variant: "ghost", className: "justify-start font-normal", type: "button", children: [_jsx(Circle, { className: "size-3 opacity-70" }), "Action 03"] })] }));
+}
+export const Default = {
+    render: () => (_jsxs("div", { className: "relative min-h-[100dvh] bg-muted/30 p-8", children: [_jsx("p", { className: "max-w-md text-sm text-muted-foreground", children: "Click the circular control to open a popover on wide viewports (bottom sheet on narrow ones). Press and hold the control to drag it. Resize the preview to compare." }), _jsx(FloatingMenuWidget, { menuTitle: "Quick actions", menuDescription: "Shortcuts for this preview", positionStorageKey: "storybook-demo", children: _jsx(DemoLinks, {}) })] })),
+};
+export const NotDraggable = {
+    render: () => (_jsx("div", { className: "relative min-h-[100dvh] bg-muted/30 p-8", children: _jsx(FloatingMenuWidget, { menuTitle: "Menu", draggable: false, defaultInset: { right: 32, bottom: 32 }, children: _jsx(DemoLinks, {}) }) })),
+};

package/dist/blocks/floating-menu-widget/index.d.ts

@@ -0,0 +1,3 @@
+export { FloatingMenuWidget } from './floating-menu-widget';
+export type { FloatingMenuWidgetInset, FloatingMenuWidgetProps, FloatingMenuWidgetRenderTrigger } from './floating-menu-widget';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/floating-menu-widget/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/floating-menu-widget/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,+BAA+B,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/blocks/floating-menu-widget/index.js

@@ -0,0 +1 @@
+export { FloatingMenuWidget } from './floating-menu-widget';

package/dist/blocks/index.d.ts

@@ -0,0 +1,5 @@
+export * from './columns';
+export * from './date-selector';
+export * from './floating-menu-widget';
+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,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC"}

package/dist/blocks/index.js

@@ -0,0 +1,4 @@
+export * from './columns';
+export * from './date-selector';
+export * from './floating-menu-widget';
+export * from './navigation';

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

@@ -0,0 +1,5 @@
+export { Navigation } from './navigation';
+export type { NavigationProps } from './navigation';
+export { navigationDemoModel } from './navigation.demo';
+export type { NavigationLink, NavigationModel, NavigationPrimaryItem, NavigationPrimaryLink, NavigationPrimarySubmenu, NavigationSecondaryAccount, NavigationSecondaryItem, NavigationSecondaryMenu, NavigationSecondaryNotifications, NavigationSecondarySearch, NavigationUser, } from './navigation-types';
+//# 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,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EACR,cAAc,EACd,eAAe,EACf,qBAAqB,EACrB,qBAAqB,EACrB,wBAAwB,EACxB,0BAA0B,EAC1B,uBAAuB,EACvB,uBAAuB,EACvB,gCAAgC,EAChC,yBAAyB,EACzB,cAAc,GACjB,MAAM,oBAAoB,CAAC"}

package/dist/blocks/navigation/index.js

@@ -0,0 +1,2 @@
+export { Navigation } from './navigation';
+export { navigationDemoModel } from './navigation.demo';

package/dist/blocks/navigation/navigation-types.d.ts

@@ -0,0 +1,60 @@
+import type { MouseEventHandler } from 'react';
+/** Single anchor row used in primary submenus, secondary menus, and account sections. */
+export type NavigationLink = {
+    href: string;
+    label: string;
+    external?: boolean;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+};
+export type NavigationPrimaryLink = {
+    kind: 'link';
+    label: string;
+    href: string;
+    active?: boolean;
+    badge?: {
+        label: string;
+    };
+    external?: boolean;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+};
+export type NavigationPrimarySubmenu = {
+    kind: 'submenu';
+    label: string;
+    items: readonly NavigationLink[];
+};
+export type NavigationPrimaryItem = NavigationPrimaryLink | NavigationPrimarySubmenu;
+export type NavigationSecondarySearch = {
+    kind: 'search';
+    ariaLabel?: string;
+    onClick?: () => void;
+};
+export type NavigationSecondaryNotifications = {
+    kind: 'notifications';
+    ariaLabel?: string;
+    onClick?: () => void;
+};
+export type NavigationSecondaryMenu = {
+    kind: 'menu';
+    triggerLabel: string;
+    items: readonly NavigationLink[];
+};
+export type NavigationUser = {
+    name: string;
+    email: string;
+    avatarSrc?: string;
+    avatarAlt?: string;
+    initials?: string;
+};
+export type NavigationSecondaryAccount = {
+    kind: 'account';
+    triggerLabel: string;
+    user: NavigationUser;
+    sections: readonly (readonly NavigationLink[])[];
+    logOut: NavigationLink;
+};
+export type NavigationSecondaryItem = NavigationSecondarySearch | NavigationSecondaryNotifications | NavigationSecondaryMenu | NavigationSecondaryAccount;
+export type NavigationModel = {
+    primary: readonly NavigationPrimaryItem[];
+    secondary: readonly NavigationSecondaryItem[];
+};
+//# sourceMappingURL=navigation-types.d.ts.map

package/dist/blocks/navigation/navigation-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-types.d.ts","sourceRoot":"","sources":["../../../src/blocks/navigation/navigation-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,yFAAyF;AACzF,MAAM,MAAM,cAAc,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACnC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,qBAAqB,GAAG,wBAAwB,CAAC;AAErF,MAAM,MAAM,yBAAyB,GAAG;IACpC,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG;IAC3C,IAAI,EAAE,eAAe,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC,SAAS,cAAc,EAAE,CAAC,EAAE,CAAC;IACjD,MAAM,EAAE,cAAc,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,yBAAyB,GAAG,gCAAgC,GAAG,uBAAuB,GAAG,0BAA0B,CAAC;AAE1J,MAAM,MAAM,eAAe,GAAG;IAC1B,OAAO,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC1C,SAAS,EAAE,SAAS,uBAAuB,EAAE,CAAC;CACjD,CAAC"}

package/dist/blocks/navigation/navigation-types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { NavigationModel } from './navigation-types';
+export type NavigationProps = React.ComponentProps<'div'> & NavigationModel;
+/**
+ * Responsive app header: **`primary`** routes beside the logo; **`secondary`** is an ordered list of search, notifications, menus, and account blocks.
+ * Omit **`search`** / **`notifications`** entries to hide those icon buttons.
+ */
+export declare function Navigation({ className, primary, secondary, ...props }: NavigationProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=navigation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/blocks/navigation/navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,OAAO,KAAK,EAER,eAAe,EAKlB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,eAAe,CAAC;AAyU5E;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CA8GtF"}

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

@@ -0,0 +1,4 @@
+import type { NavigationModel } from './navigation-types';
+/** Example `primary` / `secondary` data for Storybook and docs previews. */
+export declare const navigationDemoModel: NavigationModel;
+//# sourceMappingURL=navigation.demo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.demo.d.ts","sourceRoot":"","sources":["../../../src/blocks/navigation/navigation.demo.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,4EAA4E;AAC5E,eAAO,MAAM,mBAAmB,EAAE,eA4CjC,CAAC"}

package/dist/blocks/navigation/navigation.demo.js

@@ -0,0 +1,46 @@
+/** Example `primary` / `secondary` data for Storybook and docs previews. */
+export const navigationDemoModel = {
+    primary: [
+        { kind: 'link', label: 'Work', href: '#work', active: true },
+        { kind: 'link', label: 'Play', href: '#play' },
+        {
+            kind: 'submenu',
+            label: 'Portfolio',
+            items: [
+                { label: 'Stocks', href: '#stocks' },
+                { label: 'Bonds', href: '#bonds' },
+            ],
+        },
+    ],
+    secondary: [
+        { kind: 'search' },
+        { kind: 'notifications' },
+        {
+            kind: 'menu',
+            triggerLabel: 'Support',
+            items: [
+                { label: 'Docs', href: '#docs' },
+                { label: 'Contact', href: '#contact' },
+            ],
+        },
+        {
+            kind: 'account',
+            triggerLabel: 'Account',
+            user: {
+                name: 'shadcn',
+                email: 'm@example.com',
+                avatarSrc: 'https://github.com/shadcn.png',
+                avatarAlt: '@shadcn',
+                initials: 'CN',
+            },
+            sections: [
+                [
+                    { label: 'Profile', href: '#profile' },
+                    { label: 'Billing', href: '#billing' },
+                ],
+                [{ label: 'Team', href: '#team' }],
+            ],
+            logOut: { label: 'Log out', href: '#logout' },
+        },
+    ],
+};