@wheelhouse/ui 0.2.2 → 0.2.3

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/index.d.ts

@@ -0,0 +1,4 @@
+export * from './columns';
+export * from './date-selector';
+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,cAAc,CAAC"}

package/dist/blocks/index.js

@@ -0,0 +1,3 @@
+export * from './columns';
+export * from './date-selector';
+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' },
+        },
+    ],
+};

package/dist/blocks/navigation/navigation.js

@@ -0,0 +1,98 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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, DropdownMenuLabel, DropdownMenuLinkItem, 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';
+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}`;
+}
+function externalAnchorProps(external) {
+    if (!external)
+        return {};
+    return { target: '_blank', rel: 'noopener noreferrer' };
+}
+function composeNavAnchorClick(closeMobile, userOnClick) {
+    if (!closeMobile)
+        return userOnClick;
+    if (!userOnClick)
+        return () => closeMobile();
+    return (e) => {
+        userOnClick(e);
+        closeMobile();
+    };
+}
+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 MobileToolbarActions({ secondary }) {
+    const iconItems = secondary.filter((s) => s.kind === 'search' || s.kind === 'notifications');
+    if (iconItems.length === 0)
+        return null;
+    return (_jsx("div", { className: "flex shrink-0 items-center gap-3", children: iconItems.map((item, i) => {
+            if (item.kind === 'search') {
+                return (_jsx(Button, { type: "button", variant: "ghost", className: "size-9 p-0 [&_svg]:size-5", "aria-label": item.ariaLabel ?? 'Search', onClick: item.onClick, children: _jsx(Search, { className: "text-muted-foreground" }) }, `toolbar-search-${i}`));
+            }
+            return (_jsx(Button, { type: "button", variant: "ghost", className: "size-9 p-0 [&_svg]:size-5", "aria-label": item.ariaLabel ?? 'Notifications', onClick: item.onClick, children: _jsx(Bell, { className: "text-muted-foreground" }) }, `toolbar-bell-${i}`));
+        }) }));
+}
+function MobileSheetMenuSection({ menu, onNavigate }) {
+    return (_jsxs(_Fragment, { children: [_jsx("p", { className: "px-3 pb-1 text-xs font-medium tracking-wide text-muted-foreground uppercase", children: menu.triggerLabel }), menu.items.map((item) => (_jsx("a", { className: sheetNavLinkClass, href: item.href, ...externalAnchorProps(item.external), onClick: composeNavAnchorClick(onNavigate, item.onClick), children: item.label }, item.href)))] }));
+}
+function MobileSheetAccountSection({ account, onNavigate }) {
+    const { user } = account;
+    const initials = user.initials ??
+        user.name
+            .split(/\s+/)
+            .map((p) => p[0])
+            .join('')
+            .slice(0, 2)
+            .toUpperCase();
+    return (_jsxs(_Fragment, { children: [_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: [user.avatarSrc ? _jsx(AvatarImage, { src: user.avatarSrc, alt: user.avatarAlt ?? user.name }) : null, _jsx(AvatarFallback, { children: initials })] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium text-foreground", children: user.name }), _jsx("p", { className: "truncate text-xs text-muted-foreground", children: user.email })] })] }), account.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, ...externalAnchorProps(item.external), onClick: composeNavAnchorClick(onNavigate, item.onClick), children: item.label }, `${item.href}-${item.label}`)))] }, `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: account.logOut.href, ...externalAnchorProps(account.logOut.external), onClick: composeNavAnchorClick(onNavigate, account.logOut.onClick), children: account.logOut.label })] }));
+}
+function MobileNavLinks({ primary, secondary, onNavigate }) {
+    const sheetMenus = secondary.filter((s) => s.kind === 'menu');
+    const sheetAccounts = secondary.filter((s) => s.kind === 'account');
+    return (_jsxs("div", { className: "flex flex-col gap-0.5 p-4 pt-2", children: [primary.map((entry, i) => {
+                if (entry.kind === 'link') {
+                    return (_jsxs("a", { className: cn(sheetNavLinkClass, entry.active && 'text-primary'), href: entry.href, ...externalAnchorProps(entry.external), onClick: composeNavAnchorClick(onNavigate, entry.onClick), 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, ...externalAnchorProps(sub.external), onClick: composeNavAnchorClick(onNavigate, sub.onClick), children: sub.label }, sub.href))) })] }, primaryNavKey(entry, i)));
+            }), (sheetMenus.length > 0 || sheetAccounts.length > 0) && primary.length > 0 ? _jsx(Separator, { className: "my-3" }) : null, sheetMenus.map((menu, mi) => (_jsxs(React.Fragment, { children: [mi > 0 ? _jsx(Separator, { className: "my-3" }) : null, _jsx(MobileSheetMenuSection, { menu: menu, onNavigate: onNavigate })] }, `sheet-menu-${menu.triggerLabel}-${mi}`))), sheetAccounts.map((account, ai) => (_jsxs(React.Fragment, { children: [ai > 0 || sheetMenus.length > 0 ? _jsx(Separator, { className: "my-3" }) : null, _jsx(MobileSheetAccountSection, { account: account, onNavigate: onNavigate })] }, `sheet-account-${account.triggerLabel}-${ai}`)))] }));
+}
+function DesktopSecondaryCluster({ secondary }) {
+    return (_jsx("div", { className: "flex items-center gap-2", children: secondary.map((item, i) => {
+            if (item.kind === 'search') {
+                return (_jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": item.ariaLabel ?? 'Search', onClick: item.onClick, children: _jsx(Search, { className: "size-4 text-muted-foreground" }) }, `ds-search-${i}`));
+            }
+            if (item.kind === 'notifications') {
+                return (_jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": item.ariaLabel ?? 'Notifications', onClick: item.onClick, children: _jsx(Bell, { className: "size-4 text-muted-foreground" }) }, `ds-bell-${i}`));
+            }
+            if (item.kind === 'menu') {
+                return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { className: cn(navLinkClass, 'inline-flex cursor-default items-center gap-0 border-0 bg-transparent'), children: [item.triggerLabel, _jsx(ChevronDown, { className: "ml-1 size-4 opacity-80" })] }), _jsx(DropdownMenuContent, { align: "start", className: "min-w-48", children: item.items.map((link) => (_jsx(DropdownMenuLinkItem, { href: link.href, ...externalAnchorProps(link.external), onClick: link.onClick, children: link.label }, link.href))) })] }, `ds-menu-${item.triggerLabel}-${i}`));
+            }
+            return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { className: cn(navLinkClass, 'inline-flex cursor-default items-center gap-0 border-0 bg-transparent'), children: [item.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: item.user.name }), _jsx("span", { className: "block text-xs text-muted-foreground", children: item.user.email })] }), _jsx(DropdownMenuSeparator, {}), item.sections.map((section, si) => (_jsxs(React.Fragment, { children: [si > 0 ? _jsx(DropdownMenuSeparator, {}) : null, section.map((link) => (_jsx(DropdownMenuLinkItem, { href: link.href, ...externalAnchorProps(link.external), onClick: link.onClick, children: link.label }, `${link.href}-${link.label}`)))] }, `user-dd-${i}-${si}`))), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLinkItem, { variant: "destructive", href: item.logOut.href, ...externalAnchorProps(item.logOut.external), onClick: item.logOut.onClick, children: item.logOut.label })] })] }, `ds-account-${item.triggerLabel}-${i}`));
+        }) }));
+}
+/**
+ * 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 function Navigation({ className, primary, secondary, ...props }) {
+    const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
+    const sheetId = React.useId().replace(/:/g, '');
+    return (_jsxs("div", { "data-slot": "navigation", 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-mobile-sheet-${sheetId}`, "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" }) }), _jsx(MobileToolbarActions, { secondary: secondary })] }) }), _jsx(Sheet, { open: mobileMenuOpen, onOpenChange: setMobileMenuOpen, children: _jsxs(SheetContent, { id: `navigation-mobile-sheet-${sheetId}`, 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, { primary: primary, secondary: secondary, 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: primary.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, ...externalAnchorProps(entry.external), onClick: entry.onClick, 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(DropdownMenuLinkItem, { href: sub.href, ...externalAnchorProps(sub.external), onClick: sub.onClick, children: sub.label }, sub.href))) })] }, primaryNavKey(entry, i)));
+                                    }) })] }), _jsx(DesktopSecondaryCluster, { secondary: secondary })] }) })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/blocks/navigation/navigation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAA,MAAM,IAAI;;;;;;;CAOyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}

package/dist/blocks/navigation/navigation.stories.js

@@ -0,0 +1,16 @@
+import { navigationDemoModel } from './navigation.demo';
+import { Navigation } from './navigation';
+const meta = {
+    title: 'Blocks/Navigation',
+    component: Navigation,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        ...navigationDemoModel,
+    },
+};

package/dist/components/accordion/accordion.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';
 const meta = {
-    title: 'UI/Accordion',
+    title: 'Components/Accordion',
     component: Accordion,
     tags: ['autodocs'],
     parameters: {

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

@@ -3,7 +3,7 @@ import { Alert, AlertAction, AlertDescription, AlertTitle } from './alert';
 import { Button } from '../button';
 import { AlertTriangle, Info } from 'lucide-react';
 const meta = {
-    title: 'UI/Alert',
+    title: 'Components/Alert',
     component: Alert,
     tags: ['autodocs'],
     parameters: {

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

@@ -3,7 +3,7 @@ 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 = {
-    title: 'UI/Alert Dialog',
+    title: 'Components/Alert Dialog',
     component: AlertDialog,
     tags: ['autodocs'],
     parameters: {

package/dist/components/aspect-ratio/aspect-ratio.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AspectRatio } from './aspect-ratio';
 const meta = {
-    title: 'UI/AspectRatio',
+    title: 'Components/AspectRatio',
     component: AspectRatio,
     tags: ['autodocs'],
     parameters: {

package/dist/components/avatar/avatar.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from '.';
 const meta = {
-    title: 'UI/Avatar',
+    title: 'Components/Avatar',
     component: Avatar,
     tags: ['autodocs'],
     parameters: {

package/dist/components/badge/badge.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge, badgeSizeKeys, badgeVariantKeys } from './badge';
 const meta = {
-    title: 'UI/Badge',
+    title: 'Components/Badge',
     component: Badge,
     parameters: {
         layout: 'centered',

package/dist/components/breadcrumb/breadcrumb.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '.';
 const meta = {
-    title: 'UI/Breadcrumb',
+    title: 'Components/Breadcrumb',
     component: Breadcrumb,
     tags: ['autodocs'],
     parameters: {

package/dist/components/button/button.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, buttonSizeKeys, buttonVariantKeys } from './button';
 const meta = {
-    title: 'UI/Button',
+    title: 'Components/Button',
     component: Button,
     parameters: {
         layout: 'centered',

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

@@ -1,13 +1,19 @@
+import type { ComponentProps } from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import { type VariantProps } from 'class-variance-authority';
 import { Separator } from '../separator';
+declare const buttonGroupTextVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const buttonGroupVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** Props for `ButtonGroup`. */
-export type ButtonGroupProps = React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>;
+export type ButtonGroupProps = ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>;
 declare function ButtonGroup({ className, orientation, ...props }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
-declare function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
+/** Props for `ButtonGroupText`. */
+export type ButtonGroupTextProps = useRender.ComponentProps<'div'> & VariantProps<typeof buttonGroupTextVariants>;
+declare function ButtonGroupText({ className, size, render, ...props }: ButtonGroupTextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupTextVariants, buttonGroupVariants };
 //# sourceMappingURL=button-group.d.ts.map

package/dist/components/button-group/button-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/button-group.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,QAAA,MAAM,mBAAmB;;8EAexB,CAAC;AAEF,+BAA+B;AAC/B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEtG,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAIzF;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,8FAiBxF;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,WAAwB,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CAStH;AAED,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,eAAe,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,QAAA,MAAM,uBAAuB;;8EAW3B,CAAC;AAEH,QAAA,MAAM,mBAAmB;;8EAexB,CAAC;AAEF,+BAA+B;AAC/B,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEhG,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAIzF;AAED,mCAAmC;AACnC,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAElH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,8FAcnF;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,WAAwB,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,2CAShH;AAED,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,eAAe,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/components/button-group/button-group.js

@@ -4,6 +4,18 @@ import { useRender } from '@base-ui/react/use-render';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../lib/utils';
 import { Separator } from '../separator';
+const buttonGroupTextVariants = cva('flex shrink-0 items-center gap-2 rounded-lg border bg-muted font-medium [&_svg]:pointer-events-none', {
+    variants: {
+        size: {
+            sm: "h-7 px-2 text-[0.8rem] leading-none [&_svg:not([class*='size-'])]:size-3.5",
+            default: "min-h-8 px-2.5 text-sm [&_svg:not([class*='size-'])]:size-4",
+            lg: "h-9 px-3 text-base [&_svg:not([class*='size-'])]:size-4",
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
 const buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
     variants: {
         orientation: {
@@ -18,11 +30,11 @@ const buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relati
 function ButtonGroup({ className, orientation = 'horizontal', ...props }) {
     return (_jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation, className: cn(buttonGroupVariants({ orientation }), className), ...props }));
 }
-function ButtonGroupText({ className, render, ...props }) {
+function ButtonGroupText({ className, size, render, ...props }) {
     return useRender({
         defaultTagName: 'div',
         props: mergeProps({
-            className: cn("flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+            className: cn(buttonGroupTextVariants({ size }), className),
         }, props),
         render,
         state: {
@@ -33,4 +45,4 @@ function ButtonGroupText({ className, render, ...props }) {
 function ButtonGroupSeparator({ className, orientation = 'vertical', ...props }) {
     return (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn('relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto', className), ...props }));
 }
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupTextVariants, buttonGroupVariants };

package/dist/components/button-group/button-group.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../button';
 import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from './button-group';
 const meta = {
-    title: 'UI/ButtonGroup',
+    title: 'Components/ButtonGroup',
     component: ButtonGroup,
     parameters: {
         layout: 'centered',

package/dist/components/button-group/index.d.ts

@@ -1,3 +1,3 @@
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from './button-group';
-export type { ButtonGroupProps } from './button-group';
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupTextVariants, buttonGroupVariants } from './button-group';
+export type { ButtonGroupProps, ButtonGroupTextProps } from './button-group';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/button-group/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACzG,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,eAAe,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAClI,YAAY,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/button-group/index.js

@@ -1 +1 @@
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from './button-group';
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupTextVariants, buttonGroupVariants } from './button-group';

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Calendar } from '.';
 const meta = {
-    title: 'UI/Calendar',
+    title: 'Components/Calendar',
     component: Calendar,
     tags: ['autodocs'],
     parameters: {

package/dist/components/card/card.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '.';
 import { Button } from '../button';
 const meta = {
-    title: 'UI/Card',
+    title: 'Components/Card',
     component: Card,
     tags: ['autodocs'],
     parameters: {

package/dist/components/checkbox/checkbox.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox } from '.';
 import { Label } from '../label/index';
 const meta = {
-    title: 'UI/Checkbox',
+    title: 'Components/Checkbox',
     component: Checkbox,
     tags: ['autodocs'],
     parameters: {

package/dist/components/collapsible/collapsible.stories.js

@@ -4,7 +4,7 @@ import { Button } from '../button';
 import { Text } from '../text';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '.';
 const meta = {
-    title: 'UI/Collapsible',
+    title: 'Components/Collapsible',
     component: Collapsible,
     tags: ['autodocs'],
     parameters: {