@wheelhouse/ui 0.1.6 → 0.2.0

package/dist/components/label/label.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/** Props for `Label`. */
+export type LabelProps = React.ComponentProps<'label'>;
+declare function Label({ className, ...props }: React.ComponentProps<'label'>): import("react/jsx-runtime").JSX.Element;
+export { Label };
+//# sourceMappingURL=label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/components/label/label.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,yBAAyB;AACzB,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAEvD,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAYpE;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/label/label.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+function Label({ className, ...props }) {
+    return (
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
+    _jsx("label", { "data-slot": "label", className: cn('flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50', className), ...props }));
+}
+export { Label };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.stories.d.ts","sourceRoot":"","sources":["../../../src/components/label/label.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIhC,QAAA,MAAM,IAAI;;;;;;;CAOoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KA8CrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC"}

package/dist/components/label/label.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label } from './label';
+import { Checkbox } from '../checkbox';
+import { Switch } from '../switch';
+const meta = {
+    title: 'UI/Label',
+    component: Label,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "email", ...args, children: "Email address" }), _jsx("input", { id: "email", type: "email", placeholder: "you@example.com", className: "rounded-md border border-input bg-background px-3 py-1.5 text-sm outline-none focus:border-ring" })] })),
+};
+export const Gallery = {
+    parameters: { layout: 'padded' },
+    render: () => (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With input" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "g-email", children: "Email address" }), _jsx("input", { id: "g-email", type: "email", placeholder: "you@example.com", className: "rounded-md border border-input bg-background px-3 py-1.5 text-sm outline-none focus:border-ring" })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With checkbox" }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "g-terms" }), _jsx(Label, { htmlFor: "g-terms", children: "Accept terms and conditions" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "g-disabled-cb", disabled: true }), _jsx(Label, { htmlFor: "g-disabled-cb", children: "Unavailable option" })] })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With switch" }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "g-notif" }), _jsx(Label, { htmlFor: "g-notif", children: "Enable notifications" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "g-disabled-sw", disabled: true }), _jsx(Label, { htmlFor: "g-disabled-sw", children: "Disabled setting" })] })] })] })] })),
+};
+export const WithCheckbox = {
+    render: (args) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "terms" }), _jsx(Label, { htmlFor: "terms", ...args, children: "Accept terms and conditions" })] })),
+};
+export const WithSwitch = {
+    render: (args) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "notifications" }), _jsx(Label, { htmlFor: "notifications", ...args, children: "Enable notifications" })] })),
+};
+export const Disabled = {
+    render: (args) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "disabled-cb", disabled: true }), _jsx(Label, { htmlFor: "disabled-cb", ...args, children: "Unavailable option" })] })),
+};

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

@@ -0,0 +1,3 @@
+export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, } from './menubar';
+export type { MenubarProps, MenubarMenuProps, MenubarGroupProps, MenubarPortalProps, MenubarTriggerProps, MenubarContentProps, MenubarItemProps, MenubarCheckboxItemProps, MenubarRadioGroupProps, MenubarRadioItemProps, MenubarLabelProps, MenubarSeparatorProps, MenubarShortcutProps, MenubarSubProps, MenubarSubTriggerProps, MenubarSubContentProps, } from './menubar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/menubar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,OAAO,EACP,aAAa,EACb,WAAW,EACX,cAAc,EACd,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,iBAAiB,GACpB,MAAM,WAAW,CAAC;AAEnB,YAAY,EACR,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,wBAAwB,EACxB,sBAAsB,EACtB,qBAAqB,EACrB,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,GACzB,MAAM,WAAW,CAAC"}

package/dist/components/menubar/index.js

@@ -0,0 +1 @@
+export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, } from './menubar';

package/dist/components/menubar/menubar.d.ts

@@ -0,0 +1,64 @@
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
+import type { DropdownMenuContentProps, DropdownMenuGroupProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuPortalProps, DropdownMenuProps, DropdownMenuRadioGroupProps, DropdownMenuSeparatorProps, DropdownMenuShortcutProps, DropdownMenuSubContentProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuTriggerProps } from '../dropdown-menu';
+/**
+ * Props for `Menubar`. Horizontal bar container for nested menus; built on
+ * [Base UI Menubar](https://base-ui.com/react/components/menubar).
+ */
+type MenubarProps = MenubarPrimitive.Props;
+/**
+ * Props for `MenubarMenu` — menu root for one top-level section (same behaviour as
+ * `DropdownMenu`).
+ */
+type MenubarMenuProps = DropdownMenuProps;
+/** Props for `MenubarGroup`. */
+type MenubarGroupProps = DropdownMenuGroupProps;
+/** Props for `MenubarPortal`. */
+type MenubarPortalProps = DropdownMenuPortalProps;
+/** Props for `MenubarTrigger`. */
+type MenubarTriggerProps = DropdownMenuTriggerProps;
+/** Props for `MenubarContent`. */
+type MenubarContentProps = DropdownMenuContentProps;
+/** Props for `MenubarItem`. */
+type MenubarItemProps = DropdownMenuItemProps;
+/** Props for `MenubarCheckboxItem`. */
+type MenubarCheckboxItemProps = MenuPrimitive.CheckboxItem.Props & {
+    inset?: boolean;
+};
+/** Props for `MenubarRadioGroup`. */
+type MenubarRadioGroupProps = DropdownMenuRadioGroupProps;
+/** Props for `MenubarRadioItem`. */
+type MenubarRadioItemProps = MenuPrimitive.RadioItem.Props & {
+    inset?: boolean;
+};
+/** Props for `MenubarLabel`. */
+type MenubarLabelProps = DropdownMenuLabelProps;
+/** Props for `MenubarSeparator`. */
+type MenubarSeparatorProps = DropdownMenuSeparatorProps;
+/** Props for `MenubarShortcut`. */
+type MenubarShortcutProps = DropdownMenuShortcutProps;
+/** Props for `MenubarSub`. */
+type MenubarSubProps = DropdownMenuSubProps;
+/** Props for `MenubarSubTrigger`. */
+type MenubarSubTriggerProps = DropdownMenuSubTriggerProps;
+/** Props for `MenubarSubContent`. */
+type MenubarSubContentProps = DropdownMenuSubContentProps;
+declare function Menubar({ className, ...props }: MenubarProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarMenu({ ...props }: MenubarMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarGroup({ ...props }: MenubarGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarPortal({ ...props }: MenubarPortalProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarTrigger({ className, ...props }: MenubarTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarContent({ className, align, alignOffset, sideOffset, ...props }: MenubarContentProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarItem({ className, inset, variant, ...props }: MenubarItemProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarCheckboxItem({ className, children, checked, inset, ...props }: MenubarCheckboxItemProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarRadioGroup({ ...props }: MenubarRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarRadioItem({ className, children, inset, ...props }: MenubarRadioItemProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarLabel({ className, inset, ...props }: MenubarLabelProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarSeparator({ className, ...props }: MenubarSeparatorProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarShortcut({ className, ...props }: MenubarShortcutProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarSub({ ...props }: MenubarSubProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarSubTrigger({ className, inset, ...props }: MenubarSubTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function MenubarSubContent({ className, ...props }: MenubarSubContentProps): import("react/jsx-runtime").JSX.Element;
+export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, };
+export type { MenubarProps, MenubarMenuProps, MenubarGroupProps, MenubarPortalProps, MenubarTriggerProps, MenubarContentProps, MenubarItemProps, MenubarCheckboxItemProps, MenubarRadioGroupProps, MenubarRadioItemProps, MenubarLabelProps, MenubarSeparatorProps, MenubarShortcutProps, MenubarSubProps, MenubarSubTriggerProps, MenubarSubContentProps, };
+//# sourceMappingURL=menubar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../../src/components/menubar/menubar.tsx"],"names":[],"mappings":"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"}

package/dist/components/menubar/menubar.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
+import { cn } from '../../lib/utils';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '../dropdown-menu';
+import { CheckIcon } from '@phosphor-icons/react/dist/ssr';
+function Menubar({ className, ...props }) {
+    return _jsx(MenubarPrimitive, { "data-slot": "menubar", className: cn('flex h-8 items-center gap-0.5 rounded-lg border p-[3px]', className), ...props });
+}
+function MenubarMenu({ ...props }) {
+    return _jsx(DropdownMenu, { "data-slot": "menubar-menu", ...props });
+}
+function MenubarGroup({ ...props }) {
+    return _jsx(DropdownMenuGroup, { "data-slot": "menubar-group", ...props });
+}
+function MenubarPortal({ ...props }) {
+    return _jsx(DropdownMenuPortal, { "data-slot": "menubar-portal", ...props });
+}
+function MenubarTrigger({ className, ...props }) {
+    return (_jsx(DropdownMenuTrigger, { "data-slot": "menubar-trigger", className: cn('flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted', className), ...props }));
+}
+function MenubarContent({ className, align = 'start', alignOffset = -4, sideOffset = 8, ...props }) {
+    return (_jsx(DropdownMenuContent, { "data-slot": "menubar-content", align: align, alignOffset: alignOffset, sideOffset: sideOffset, className: cn('min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95', className), ...props }));
+}
+function MenubarItem({ className, inset, variant = 'default', ...props }) {
+    return (_jsx(DropdownMenuItem, { "data-slot": "menubar-item", "data-inset": inset, "data-variant": variant, className: cn("group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!", className), ...props }));
+}
+function MenubarCheckboxItem({ className, children, checked, inset, ...props }) {
+    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "menubar-checkbox-item", "data-inset": inset, className: cn('relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0', className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+}
+function MenubarRadioGroup({ ...props }) {
+    return _jsx(DropdownMenuRadioGroup, { "data-slot": "menubar-radio-group", ...props });
+}
+function MenubarRadioItem({ className, children, inset, ...props }) {
+    return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "menubar-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+}
+function MenubarLabel({ className, inset, ...props }) {
+    return (_jsx(DropdownMenuLabel, { "data-slot": "menubar-label", "data-inset": inset, className: cn('px-1.5 py-1 text-sm font-medium data-inset:pl-7', className), ...props }));
+}
+function MenubarSeparator({ className, ...props }) {
+    return _jsx(DropdownMenuSeparator, { "data-slot": "menubar-separator", className: cn('-mx-1 my-1 h-px bg-border', className), ...props });
+}
+function MenubarShortcut({ className, ...props }) {
+    return (_jsx(DropdownMenuShortcut, { "data-slot": "menubar-shortcut", className: cn('ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground', className), ...props }));
+}
+function MenubarSub({ ...props }) {
+    return _jsx(DropdownMenuSub, { "data-slot": "menubar-sub", ...props });
+}
+function MenubarSubTrigger({ className, inset, ...props }) {
+    return (_jsx(DropdownMenuSubTrigger, { "data-slot": "menubar-sub-trigger", "data-inset": inset, className: cn("gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+function MenubarSubContent({ className, ...props }) {
+    return (_jsx(DropdownMenuSubContent, { "data-slot": "menubar-sub-content", className: cn('min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', className), ...props }));
+}
+export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/menubar/menubar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EACH,OAAO,EAUV,MAAM,WAAW,CAAC;AAEnB,QAAA,MAAM,IAAI;;;;;;;CAOsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAyBrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAmBzB,CAAC"}

package/dist/components/menubar/menubar.stories.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button';
+import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, } from './menubar';
+const meta = {
+    title: 'UI/Menubar',
+    component: Menubar,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(Menubar, { className: "min-w-48", children: [_jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { render: _jsx(Button, { variant: "ghost", size: "sm", className: "h-7 px-2" }), children: "File" }), _jsxs(MenubarContent, { className: "min-w-40", children: [_jsx(MenubarItem, { children: "New tab" }), _jsx(MenubarItem, { children: "New window" }), _jsx(MenubarSeparator, {}), _jsx(MenubarItem, { variant: "destructive", children: "Close" })] })] }), _jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { render: _jsx(Button, { variant: "ghost", size: "sm", className: "h-7 px-2" }), children: "Edit" }), _jsxs(MenubarContent, { className: "min-w-44", children: [_jsxs(MenubarItem, { children: ["Undo ", _jsx(MenubarShortcut, { children: "\u2318Z" })] }), _jsxs(MenubarItem, { children: ["Redo ", _jsx(MenubarShortcut, { children: "\u21E7\u2318Z" })] })] })] })] })),
+};
+export const WithSubmenu = {
+    render: () => (_jsx(Menubar, { children: _jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { render: _jsx(Button, { variant: "ghost", size: "sm", className: "h-7 px-2" }), children: "View" }), _jsxs(MenubarContent, { className: "min-w-44", children: [_jsxs(MenubarSub, { children: [_jsx(MenubarSubTrigger, { children: "Zoom" }), _jsxs(MenubarSubContent, { children: [_jsx(MenubarItem, { children: "100%" }), _jsx(MenubarItem, { children: "125%" })] })] }), _jsx(MenubarSeparator, {}), _jsx(MenubarItem, { children: "Full screen" })] })] }) })),
+};

package/dist/components/native-select/index.d.ts

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

package/dist/components/native-select/index.d.ts.map

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

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

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

package/dist/components/native-select/native-select.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export type NativeSelectProps = Omit<React.ComponentProps<'select'>, 'size'> & {
+    /** Control height; maps to `data-size` on the wrapper and inner `select`. */
+    size?: 'sm' | 'default';
+};
+declare function NativeSelect({ className, size, ...props }: NativeSelectProps): import("react/jsx-runtime").JSX.Element;
+export type NativeSelectOptionProps = React.ComponentProps<'option'>;
+declare function NativeSelectOption({ className, ...props }: NativeSelectOptionProps): import("react/jsx-runtime").JSX.Element;
+export type NativeSelectOptGroupProps = React.ComponentProps<'optgroup'>;
+declare function NativeSelectOptGroup({ className, ...props }: NativeSelectOptGroupProps): import("react/jsx-runtime").JSX.Element;
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };
+//# sourceMappingURL=native-select.d.ts.map

package/dist/components/native-select/native-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../../src/components/native-select/native-select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IAC3E,6EAA6E;IAC7E,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CAC3B,CAAC;AAEF,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,IAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAoBjF;AAED,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAErE,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAE3E;AAED,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;AAEzE,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,yBAAyB,2CAE/E;AAED,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAC"}

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

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

package/dist/components/native-select/native-select.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const WithGroups: Story;
+//# sourceMappingURL=native-select.stories.d.ts.map

package/dist/components/native-select/native-select.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/native-select/native-select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,QAAA,MAAM,IAAI,EAAE,IAMX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC"}

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from './native-select';
+const meta = {
+    title: 'UI/Native select',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(NativeSelect, { defaultValue: "next", "aria-label": "Framework", children: [_jsx(NativeSelectOption, { value: "next", children: "Next.js" }), _jsx(NativeSelectOption, { value: "vite", children: "Vite" }), _jsx(NativeSelectOption, { value: "astro", children: "Astro" })] })),
+};
+export const Small = {
+    render: () => (_jsxs(NativeSelect, { size: "sm", defaultValue: "a", "aria-label": "Size sm", children: [_jsx(NativeSelectOption, { value: "a", children: "Option A" }), _jsx(NativeSelectOption, { value: "b", children: "Option B" })] })),
+};
+export const WithGroups = {
+    render: () => (_jsxs(NativeSelect, { defaultValue: "us", "aria-label": "Region", children: [_jsxs(NativeSelectOptGroup, { label: "North America", children: [_jsx(NativeSelectOption, { value: "us", children: "United States" }), _jsx(NativeSelectOption, { value: "ca", children: "Canada" })] }), _jsxs(NativeSelectOptGroup, { label: "Europe", children: [_jsx(NativeSelectOption, { value: "de", children: "Germany" }), _jsx(NativeSelectOption, { value: "fr", children: "France" })] })] })),
+};

package/dist/components/navigation-menu/index.d.ts

@@ -0,0 +1,3 @@
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuPositioner, } from './navigation-menu';
+export type { NavigationMenuProps, NavigationMenuListProps, NavigationMenuItemProps, NavigationMenuTriggerProps, NavigationMenuContentProps, NavigationMenuPositionerProps, NavigationMenuLinkProps, NavigationMenuIndicatorProps, } from './navigation-menu';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,cAAc,EACd,qBAAqB,EACrB,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,0BAA0B,EAC1B,wBAAwB,GAC3B,MAAM,mBAAmB,CAAC;AAE3B,YAAY,EACR,mBAAmB,EACnB,uBAAuB,EACvB,uBAAuB,EACvB,0BAA0B,EAC1B,0BAA0B,EAC1B,6BAA6B,EAC7B,uBAAuB,EACvB,4BAA4B,GAC/B,MAAM,mBAAmB,CAAC"}

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

@@ -0,0 +1 @@
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuPositioner, } from './navigation-menu';

package/dist/components/navigation-menu/navigation-menu.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
+/**
+ * Props for `NavigationMenu`. Root with optional popup alignment; built on
+ * [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu).
+ */
+type NavigationMenuProps = NavigationMenuPrimitive.Root.Props & Pick<NavigationMenuPrimitive.Positioner.Props, 'align'>;
+/** Props for `NavigationMenuList`. */
+type NavigationMenuListProps = React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>;
+/** Props for `NavigationMenuItem`. */
+type NavigationMenuItemProps = React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>;
+/** Props for `NavigationMenuTrigger`. */
+type NavigationMenuTriggerProps = NavigationMenuPrimitive.Trigger.Props;
+/** Props for `NavigationMenuContent`. */
+type NavigationMenuContentProps = NavigationMenuPrimitive.Content.Props;
+/** Props for `NavigationMenuPositioner` (portal + anchor positioning). */
+type NavigationMenuPositionerProps = NavigationMenuPrimitive.Positioner.Props;
+/** Props for `NavigationMenuLink`. */
+type NavigationMenuLinkProps = NavigationMenuPrimitive.Link.Props;
+/** Props for `NavigationMenuIndicator`. */
+type NavigationMenuIndicatorProps = React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>;
+declare function NavigationMenu({ align, className, children, ...props }: NavigationMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuList({ className, ...props }: NavigationMenuListProps): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuItem({ className, ...props }: NavigationMenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare function NavigationMenuTrigger({ className, children, ...props }: NavigationMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuContent({ className, ...props }: NavigationMenuContentProps): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuPositioner({ className, side, sideOffset, align, alignOffset, ...props }: NavigationMenuPositionerProps): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuLink({ className, ...props }: NavigationMenuLinkProps): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuIndicator({ className, ...props }: NavigationMenuIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuPositioner, };
+export type { NavigationMenuProps, NavigationMenuListProps, NavigationMenuItemProps, NavigationMenuTriggerProps, NavigationMenuContentProps, NavigationMenuPositionerProps, NavigationMenuLinkProps, NavigationMenuIndicatorProps, };
+//# sourceMappingURL=navigation-menu.d.ts.map

package/dist/components/navigation-menu/navigation-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-menu/navigation-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,IAAI,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAM3F;;;GAGG;AACH,KAAK,mBAAmB,GAAG,uBAAuB,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,uBAAuB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAExH,sCAAsC;AACtC,KAAK,uBAAuB,GAAG,KAAK,CAAC,qBAAqB,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,CAAC;AAEhG,sCAAsC;AACtC,KAAK,uBAAuB,GAAG,KAAK,CAAC,qBAAqB,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,CAAC;AAEhG,yCAAyC;AACzC,KAAK,0BAA0B,GAAG,uBAAuB,CAAC,OAAO,CAAC,KAAK,CAAC;AAExE,yCAAyC;AACzC,KAAK,0BAA0B,GAAG,uBAAuB,CAAC,OAAO,CAAC,KAAK,CAAC;AAExE,0EAA0E;AAC1E,KAAK,6BAA6B,GAAG,uBAAuB,CAAC,UAAU,CAAC,KAAK,CAAC;AAE9E,sCAAsC;AACtC,KAAK,uBAAuB,GAAG,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC;AAElE,2CAA2C;AAC3C,KAAK,4BAA4B,GAAG,KAAK,CAAC,qBAAqB,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,CAAC;AAErG,iBAAS,cAAc,CAAC,EAAE,KAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAW9F;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAQ3E;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAE3E;AAED,QAAA,MAAM,0BAA0B,oFAE/B,CAAC;AAEF,iBAAS,qBAAqB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,0BAA0B,2CAU3F;AAED,iBAAS,qBAAqB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,0BAA0B,2CAWjF;AAED,iBAAS,wBAAwB,CAAC,EAAE,SAAS,EAAE,IAAe,EAAE,UAAc,EAAE,KAAe,EAAE,WAAe,EAAE,GAAG,KAAK,EAAE,EAAE,6BAA6B,2CAoB1J;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAW3E;AAED,iBAAS,uBAAuB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,4BAA4B,2CAarF;AAED,OAAO,EACH,cAAc,EACd,qBAAqB,EACrB,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,0BAA0B,EAC1B,wBAAwB,GAC3B,CAAC;AAEF,YAAY,EACR,mBAAmB,EACnB,uBAAuB,EACvB,uBAAuB,EACvB,0BAA0B,EAC1B,0BAA0B,EAC1B,6BAA6B,EAC7B,uBAAuB,EACvB,4BAA4B,GAC/B,CAAC"}

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

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+import { CaretDownIcon } from '@phosphor-icons/react/dist/ssr';
+function NavigationMenu({ align = 'start', className, children, ...props }) {
+    return (_jsxs(NavigationMenuPrimitive.Root, { "data-slot": "navigation-menu", className: cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', className), ...props, children: [children, _jsx(NavigationMenuPositioner, { align: align })] }));
+}
+function NavigationMenuList({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.List, { "data-slot": "navigation-menu-list", className: cn('group flex flex-1 list-none items-center justify-center gap-0', className), ...props }));
+}
+function NavigationMenuItem({ className, ...props }) {
+    return _jsx(NavigationMenuPrimitive.Item, { "data-slot": "navigation-menu-item", className: cn('relative', className), ...props });
+}
+const navigationMenuTriggerStyle = cva('group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted');
+function NavigationMenuTrigger({ className, children, ...props }) {
+    return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), 'group', className), ...props, children: [children, ' ', _jsx(CaretDownIcon, { className: "relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180", "aria-hidden": "true" })] }));
+}
+function NavigationMenuContent({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn('data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95', className), ...props }));
+}
+function NavigationMenuPositioner({ className, side = 'bottom', sideOffset = 8, align = 'start', alignOffset = 0, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Portal, { children: _jsx(NavigationMenuPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, className: cn('isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0', className), ...props, children: _jsx(NavigationMenuPrimitive.Popup, { className: "data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0", children: _jsx(NavigationMenuPrimitive.Viewport, { className: "relative size-full overflow-hidden" }) }) }) }));
+}
+function NavigationMenuLink({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Link, { "data-slot": "navigation-menu-link", className: cn("flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+function NavigationMenuIndicator({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Icon, { "data-slot": "navigation-menu-indicator", className: cn('top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in', className), ...props, children: _jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" }) }));
+}
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuPositioner, };

package/dist/components/navigation-menu/navigation-menu.stories.d.ts

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

package/dist/components/navigation-menu/navigation-menu.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.stories.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-menu/navigation-menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,cAAc,EAA4G,MAAM,mBAAmB,CAAC;AAE7J,QAAA,MAAM,IAAI;;;;;;;CAO6B,CAAC;AAExC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAsBrB,CAAC"}

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from './navigation-menu';
+const meta = {
+    title: 'UI/NavigationMenu',
+    component: NavigationMenu,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => (_jsx(NavigationMenu, { children: _jsxs(NavigationMenuList, { children: [_jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: "Learn" }), _jsxs(NavigationMenuContent, { className: "min-w-[220px] gap-1 p-2", children: [_jsx(NavigationMenuLink, { href: "#", children: "Introduction" }), _jsx(NavigationMenuLink, { href: "#", children: "Installation" }), _jsx(NavigationMenuLink, { href: "#", children: "Theming" })] })] }), _jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: "Reference" }), _jsxs(NavigationMenuContent, { className: "min-w-[200px] gap-1 p-2", children: [_jsx(NavigationMenuLink, { href: "#", children: "Components" }), _jsx(NavigationMenuLink, { href: "#", children: "Hooks" })] })] })] }) })),
+};

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

@@ -0,0 +1,3 @@
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from './pagination';
+export type { PaginationProps, PaginationContentProps, PaginationItemProps, PaginationLinkProps, PaginationNavLinkProps, PaginationEllipsisProps, } from './pagination';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAErJ,YAAY,EACR,eAAe,EACf,sBAAsB,EACtB,mBAAmB,EACnB,mBAAmB,EACnB,sBAAsB,EACtB,uBAAuB,GAC1B,MAAM,cAAc,CAAC"}

package/dist/components/pagination/index.js

@@ -0,0 +1 @@
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from './pagination';

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Button } from '../button';
+/** Props for `Pagination` (`<nav>` wrapper). */
+export type PaginationProps = React.ComponentProps<'nav'>;
+/** Props for `PaginationContent` (the `<ul>` list). */
+export type PaginationContentProps = React.ComponentProps<'ul'>;
+/** Props for `PaginationItem` (a `<li>`). */
+export type PaginationItemProps = React.ComponentProps<'li'>;
+/**
+ * Props for `PaginationLink`. Renders a `Button` as an anchor; supports active page styling
+ * via `isActive`.
+ */
+export type PaginationLinkProps = {
+    isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, 'size'> & React.ComponentProps<'a'>;
+/** Props for `PaginationPrevious` and `PaginationNext` (link buttons with icons). */
+export type PaginationNavLinkProps = PaginationLinkProps & {
+    /** Visible label (hidden on small screens except for screen readers via `aria-label`). */
+    text?: string;
+};
+/** Props for `PaginationEllipsis` (non-interactive gap indicator). */
+export type PaginationEllipsisProps = React.ComponentProps<'span'>;
+declare function Pagination({ className, ...props }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+declare function PaginationContent({ className, ...props }: PaginationContentProps): import("react/jsx-runtime").JSX.Element;
+declare function PaginationItem({ ...props }: PaginationItemProps): import("react/jsx-runtime").JSX.Element;
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
+declare function PaginationPrevious({ className, text, ...props }: PaginationNavLinkProps): import("react/jsx-runtime").JSX.Element;
+declare function PaginationNext({ className, text, ...props }: PaginationNavLinkProps): import("react/jsx-runtime").JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: PaginationEllipsisProps): import("react/jsx-runtime").JSX.Element;
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
+//# sourceMappingURL=pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAGnC,gDAAgD;AAChD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE1D,uDAAuD;AACvD,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAEhE,6CAA6C;AAC7C,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAE7D;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,GACjD,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAE9B,qFAAqF;AACrF,MAAM,MAAM,sBAAsB,GAAG,mBAAmB,GAAG;IACvD,0FAA0F;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,sEAAsE;AACtE,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAEnE,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAE3D;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAEzE;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAExD;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAa,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAa5F;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,IAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAO7F;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,IAAa,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAOrF;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAY3E;AAED,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/pagination/pagination.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { Button } from '../button';
+import { CaretLeftIcon, CaretRightIcon, DotsThreeIcon } from '@phosphor-icons/react/dist/ssr';
+function Pagination({ className, ...props }) {
+    return _jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn('mx-auto flex w-full justify-center', className), ...props });
+}
+function PaginationContent({ className, ...props }) {
+    return _jsx("ul", { "data-slot": "pagination-content", className: cn('flex items-center gap-0.5', className), ...props });
+}
+function PaginationItem({ ...props }) {
+    return _jsx("li", { "data-slot": "pagination-item", ...props });
+}
+function PaginationLink({ className, isActive, size = 'icon', ...props }) {
+    return (_jsx(Button, { variant: isActive ? 'outline' : 'ghost', size: size, className: cn(className), nativeButton: false, render: 
+        // eslint-disable-next-line jsx-a11y/anchor-has-content -- children provided by Button
+        _jsx("a", { "aria-current": isActive ? 'page' : undefined, "data-slot": "pagination-link", "data-active": isActive, ...props }) }));
+}
+function PaginationPrevious({ className, text = 'Previous', ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn('pl-1.5!', className), ...props, children: [_jsx(CaretLeftIcon, { "data-icon": "inline-start" }), _jsx("span", { className: "hidden sm:block", children: text })] }));
+}
+function PaginationNext({ className, text = 'Next', ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn('pr-1.5!', className), ...props, children: [_jsx("span", { className: "hidden sm:block", children: text }), _jsx(CaretRightIcon, { "data-icon": "inline-end" })] }));
+}
+function PaginationEllipsis({ className, ...props }) {
+    return (_jsxs("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx(DotsThreeIcon, {}), _jsx("span", { className: "sr-only", children: "More pages" })] }));
+}
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,UAAU,EAA6G,MAAM,cAAc,CAAC;AAErJ,QAAA,MAAM,IAAI;;;;;;;CAOyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA+BrB,CAAC"}