@wheelhouse/ui 0.1.6 → 0.2.0

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '../text';
+import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from '.';
+const meta = {
+    title: 'UI/ContextMenu',
+    component: ContextMenu,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+function ContextTarget(props) {
+    return (_jsx(ContextMenuTrigger, { className: "flex min-h-24 min-w-64 cursor-context-menu items-center justify-center rounded-lg border border-dashed border-border bg-muted/30 px-4", children: props.children }));
+}
+export const Default = {
+    render: () => (_jsxs(ContextMenu, { children: [_jsx(ContextTarget, { children: _jsx(Text, { size: "sm", tone: "muted", children: "Right-click or long-press" }) }), _jsxs(ContextMenuContent, { className: "min-w-48", children: [_jsxs(ContextMenuGroup, { children: [_jsx(ContextMenuLabel, { children: "Actions" }), _jsx(ContextMenuItem, { children: "New file" }), _jsx(ContextMenuItem, { children: "New folder" })] }), _jsx(ContextMenuSeparator, {}), _jsx(ContextMenuItem, { variant: "destructive", children: "Delete" })] })] })),
+};
+export const WithShortcuts = {
+    render: () => (_jsxs(ContextMenu, { children: [_jsx(ContextTarget, { children: _jsx(Text, { size: "sm", tone: "muted", children: "Right-click for shortcuts" }) }), _jsxs(ContextMenuContent, { className: "min-w-52", children: [_jsxs(ContextMenuItem, { children: ["Save ", _jsx(ContextMenuShortcut, { children: "\u2318S" })] }), _jsxs(ContextMenuItem, { children: ["Duplicate ", _jsx(ContextMenuShortcut, { children: "\u2318D" })] }), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuItem, { variant: "destructive", children: ["Delete ", _jsx(ContextMenuShortcut, { children: "\u232B" })] })] })] })),
+};
+export const WithCheckboxAndRadio = {
+    render: () => (_jsxs(ContextMenu, { children: [_jsx(ContextTarget, { children: _jsx(Text, { size: "sm", tone: "muted", children: "Right-click for view options" }) }), _jsxs(ContextMenuContent, { className: "min-w-48", children: [_jsxs(ContextMenuGroup, { children: [_jsx(ContextMenuLabel, { children: "Appearance" }), _jsx(ContextMenuCheckboxItem, { defaultChecked: true, children: "Show sidebar" }), _jsx(ContextMenuCheckboxItem, { children: "Show status bar" })] }), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuRadioGroup, { defaultValue: "comfortable", children: [_jsx(ContextMenuLabel, { inset: true, children: "Density" }), _jsx(ContextMenuRadioItem, { value: "compact", inset: true, children: "Compact" }), _jsx(ContextMenuRadioItem, { value: "comfortable", inset: true, children: "Comfortable" })] })] })] })),
+};
+export const WithSubmenu = {
+    render: () => (_jsxs(ContextMenu, { children: [_jsx(ContextTarget, { children: _jsx(Text, { size: "sm", tone: "muted", children: "Right-click for nested actions" }) }), _jsxs(ContextMenuContent, { className: "min-w-44", children: [_jsx(ContextMenuItem, { children: "Back" }), _jsxs(ContextMenuSub, { children: [_jsx(ContextMenuSubTrigger, { children: "Share" }), _jsxs(ContextMenuSubContent, { children: [_jsx(ContextMenuItem, { children: "Copy link" }), _jsx(ContextMenuItem, { children: "Email" })] })] }), _jsx(ContextMenuSeparator, {}), _jsx(ContextMenuItem, { variant: "destructive", children: "Remove" })] })] })),
+};

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

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

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

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

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

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

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+/** Props for the dialog root. See [Base UI Dialog](https://base-ui.com/react/components/dialog). */
+export type DialogProps = DialogPrimitive.Root.Props;
+declare function Dialog({ ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the element that opens the dialog (typically a button). */
+export type DialogTriggerProps = DialogPrimitive.Trigger.Props;
+declare function DialogTrigger({ ...props }: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the portal that renders the overlay and popup into `document.body` (or a custom container). */
+export type DialogPortalProps = DialogPrimitive.Portal.Props;
+declare function DialogPortal({ ...props }: DialogPortalProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the close control (button or custom `render`). */
+export type DialogCloseProps = DialogPrimitive.Close.Props;
+declare function DialogClose({ ...props }: DialogCloseProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the dimmed backdrop behind the popup. */
+export type DialogOverlayProps = DialogPrimitive.Backdrop.Props;
+declare function DialogOverlay({ className, ...props }: DialogOverlayProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the dialog surface; extends the Base UI popup with `showCloseButton`. */
+export type DialogContentProps = DialogPrimitive.Popup.Props & {
+    /** When `true` (default), renders a ghost icon button in the top-right that closes the dialog. */
+    showCloseButton?: boolean;
+};
+declare function DialogContent({ className, children, showCloseButton, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
+/** Layout wrapper for title and description at the top of the dialog. */
+export type DialogHeaderProps = React.ComponentProps<'div'>;
+declare function DialogHeader({ className, ...props }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+/** Footer row for actions; optionally appends a default “Close” button. */
+export type DialogFooterProps = React.ComponentProps<'div'> & {
+    /** When `true`, appends a `DialogClose` styled as an outline `Button` after `children`. */
+    showCloseButton?: boolean;
+};
+declare function DialogFooter({ className, showCloseButton, children, ...props }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
+/** Accessible dialog title; renders an `h2`. */
+export type DialogTitleProps = DialogPrimitive.Title.Props;
+declare function DialogTitle({ className, ...props }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
+/** Supporting text below the title. */
+export type DialogDescriptionProps = DialogPrimitive.Description.Props;
+declare function DialogDescription({ className, ...props }: DialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
+//# sourceMappingURL=dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAMlE,oGAAoG;AACpG,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC;AAErD,iBAAS,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAExC;AAED,wEAAwE;AACxE,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC;AAE/D,iBAAS,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAEtD;AAED,4GAA4G;AAC5G,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC;AAE7D,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAEpD;AAED,+DAA+D;AAC/D,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC;AAE3D,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAElD;AAED,sDAAsD;AACtD,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC;AAEhE,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAWjE;AAED,sFAAsF;AACtF,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,GAAG;IAC3D,kGAAkG;IAClG,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAsB,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAsBnG;AAED,yEAAyE;AACzE,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE5D,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAE/D;AAED,2EAA2E;AAC3E,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC1D,2FAA2F;IAC3F,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,eAAuB,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAWlG;AAED,gDAAgD;AAChD,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC;AAE3D,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAE7D;AAED,uCAAuC;AACvC,MAAM,MAAM,sBAAsB,GAAG,eAAe,CAAC,WAAW,CAAC,KAAK,CAAC;AAEvE,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAQzE;AAED,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,iBAAiB,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/dialog/dialog.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import { XIcon } from '@phosphor-icons/react/X';
+import { cn } from '../../lib/utils';
+import { Button } from '../button';
+function Dialog({ ...props }) {
+    return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+    return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+    return _jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+    return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", className: cn('fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0', className), ...props }));
+}
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn('fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm 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, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+}
+function DialogHeader({ className, ...props }) {
+    return _jsx("div", { "data-slot": "dialog-header", className: cn('flex flex-col gap-2', className), ...props });
+}
+function DialogFooter({ className, showCloseButton = false, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "dialog-footer", className: cn('-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end', className), ...props, children: [children, showCloseButton && _jsx(DialogPrimitive.Close, { render: _jsx(Button, { variant: "outline" }), children: "Close" })] }));
+}
+function DialogTitle({ className, ...props }) {
+    return _jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn('font-heading text-base leading-none font-medium', className), ...props });
+}
+function DialogDescription({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn('text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground', className), ...props }));
+}
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Dialog } from './dialog';
+declare const meta: Meta<typeof Dialog>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithoutBuiltInClose: Story;
+export declare const Gallery: Story;
+//# sourceMappingURL=dialog.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,MAAM,EAA4F,MAAM,UAAU,CAAC;AAE5H,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAO7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAajC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC"}

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from './dialog';
+const meta = {
+    title: 'UI/Dialog',
+    component: Dialog,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Open dialog" }), _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Dialog title" }), _jsx(DialogDescription, { children: "This is a short description of what happens in this dialog." })] }), _jsx(DialogFooter, { showCloseButton: true })] })] })),
+};
+export const WithoutBuiltInClose = {
+    render: () => (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Open" }), _jsxs(DialogContent, { showCloseButton: false, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "No header close" }), _jsx(DialogDescription, { children: "Use the footer action or Escape to dismiss." })] }), _jsx(DialogFooter, { showCloseButton: true })] })] })),
+};
+export const Gallery = {
+    parameters: { layout: 'padded', controls: { disable: true } },
+    render: () => (_jsx("div", { className: "flex flex-wrap gap-4", children: _jsxs(Dialog, { children: [_jsx(DialogTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Simple" }), _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Confirm" }), _jsx(DialogDescription, { children: "Proceed with this action?" })] }), _jsx(DialogFooter, { showCloseButton: true })] })] }) })),
+};

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

@@ -0,0 +1,3 @@
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from './dialog';
+export type { DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogOverlayProps, DialogPortalProps, DialogProps, DialogTitleProps, DialogTriggerProps, } from './dialog';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GAChB,MAAM,UAAU,CAAC;AAClB,YAAY,EACR,gBAAgB,EAChB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,kBAAkB,GACrB,MAAM,UAAU,CAAC"}

package/dist/components/dialog/index.js

@@ -0,0 +1 @@
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from './dialog';

package/dist/components/direction/direction.d.ts

@@ -0,0 +1,7 @@
+/**
+ * RTL/LTR context for Base UI–aligned components. Re-exports
+ * [Base UI Direction Provider](https://base-ui.com/react/components/direction-provider).
+ */
+export { DirectionProvider, useDirection, type TextDirection } from '@base-ui/react/direction-provider';
+export type { DirectionProviderProps } from '@base-ui/react/direction-provider';
+//# sourceMappingURL=direction.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"direction.d.ts","sourceRoot":"","sources":["../../../src/components/direction/direction.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,mCAAmC,CAAC;AACxG,YAAY,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC"}

package/dist/components/direction/direction.js

@@ -0,0 +1,5 @@
+/**
+ * RTL/LTR context for Base UI–aligned components. Re-exports
+ * [Base UI Direction Provider](https://base-ui.com/react/components/direction-provider).
+ */
+export { DirectionProvider, useDirection } from '@base-ui/react/direction-provider';

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DirectionProvider } from './direction';
+declare const meta: Meta<typeof DirectionProvider>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LTR: Story;
+export declare const RTL: Story;
+//# sourceMappingURL=direction.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"direction.stories.d.ts","sourceRoot":"","sources":["../../../src/components/direction/direction.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,iBAAiB,CAOC,CAAC;AAE3C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,GAAG,EAAE,KASjB,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,KASjB,CAAC"}

package/dist/components/direction/direction.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DirectionProvider } from './direction';
+const meta = {
+    title: 'UI/Direction',
+    component: DirectionProvider,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const LTR = {
+    args: {
+        direction: 'ltr',
+    },
+    render: (args) => (_jsx(DirectionProvider, { ...args, children: _jsx("p", { className: "text-sm", children: "Left-to-right layout (default)." }) })),
+};
+export const RTL = {
+    args: {
+        direction: 'rtl',
+    },
+    render: (args) => (_jsx(DirectionProvider, { ...args, children: _jsx("p", { className: "text-sm", children: "Right-to-left layout for Arabic, Hebrew, and similar locales." }) })),
+};

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

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

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

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

package/dist/components/direction/index.js

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

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+/** Props for the drawer root. See [Vaul](https://github.com/emilkowalski/vaul). */
+export type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;
+declare function Drawer({ ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export type DrawerTriggerProps = React.ComponentProps<typeof DrawerPrimitive.Trigger>;
+declare function DrawerTrigger({ ...props }: DrawerTriggerProps): import("react/jsx-runtime").JSX.Element;
+export type DrawerPortalProps = React.ComponentProps<typeof DrawerPrimitive.Portal>;
+declare function DrawerPortal({ ...props }: DrawerPortalProps): import("react/jsx-runtime").JSX.Element;
+export type DrawerCloseProps = React.ComponentProps<typeof DrawerPrimitive.Close>;
+declare function DrawerClose({ ...props }: DrawerCloseProps): import("react/jsx-runtime").JSX.Element;
+export type DrawerOverlayProps = React.ComponentProps<typeof DrawerPrimitive.Overlay>;
+declare function DrawerOverlay({ className, ...props }: DrawerOverlayProps): import("react/jsx-runtime").JSX.Element;
+export type DrawerContentProps = React.ComponentProps<typeof DrawerPrimitive.Content>;
+declare function DrawerContent({ className, children, ...props }: DrawerContentProps): import("react/jsx-runtime").JSX.Element;
+export type DrawerHeaderProps = React.ComponentProps<'div'>;
+declare function DrawerHeader({ className, ...props }: DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;
+export type DrawerFooterProps = React.ComponentProps<'div'>;
+declare function DrawerFooter({ className, ...props }: DrawerFooterProps): import("react/jsx-runtime").JSX.Element;
+export type DrawerTitleProps = React.ComponentProps<typeof DrawerPrimitive.Title>;
+declare function DrawerTitle({ className, ...props }: DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
+export type DrawerDescriptionProps = React.ComponentProps<typeof DrawerPrimitive.Description>;
+declare function DrawerDescription({ className, ...props }: DrawerDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription };
+//# sourceMappingURL=drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAC;AAIjD,mFAAmF;AACnF,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,CAAC;AAE5E,iBAAS,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAExC;AAED,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;AAEtF,iBAAS,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAEtD;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,CAAC;AAEpF,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAEpD;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;AAElF,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAElD;AAED,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;AAEtF,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAWjE;AAED,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;AAEtF,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAiB3E;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE5D,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAW/D;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE5D,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAE/D;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;AAElF,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAE7D;AAED,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,CAAC;AAE9F,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAEzE;AAED,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/drawer/drawer.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+import { cn } from '../../lib/utils';
+function Drawer({ ...props }) {
+    return _jsx(DrawerPrimitive.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerTrigger({ ...props }) {
+    return _jsx(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({ ...props }) {
+    return _jsx(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({ ...props }) {
+    return _jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Overlay, { "data-slot": "drawer-overlay", className: cn('fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0', className), ...props }));
+}
+function DrawerContent({ className, children, ...props }) {
+    return (_jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerPrimitive.Content, { "data-slot": "drawer-content", className: cn('group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm', className), ...props, children: [_jsx("div", { className: "mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children] })] }));
+}
+function DrawerHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-header", className: cn('flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left', className), ...props }));
+}
+function DrawerFooter({ className, ...props }) {
+    return _jsx("div", { "data-slot": "drawer-footer", className: cn('mt-auto flex flex-col gap-2 p-4', className), ...props });
+}
+function DrawerTitle({ className, ...props }) {
+    return _jsx(DrawerPrimitive.Title, { "data-slot": "drawer-title", className: cn('font-heading text-base font-medium text-foreground', className), ...props });
+}
+function DrawerDescription({ className, ...props }) {
+    return _jsx(DrawerPrimitive.Description, { "data-slot": "drawer-description", className: cn('text-sm text-muted-foreground', className), ...props });
+}
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription };

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const FromRight: Story;
+//# sourceMappingURL=drawer.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.stories.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/drawer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,QAAA,MAAM,IAAI,EAAE,IAMX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC"}

package/dist/components/drawer/drawer.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button';
+import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from './drawer';
+const meta = {
+    title: 'UI/Drawer',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(Drawer, { children: [_jsx(DrawerTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "sm", children: "Open drawer" }) }), _jsx(DrawerContent, { children: _jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "Drawer title" }), _jsx(DrawerDescription, { children: "Drag the handle or tap outside to close." })] }) })] })),
+};
+export const FromRight = {
+    render: () => (_jsxs(Drawer, { direction: "right", children: [_jsx(DrawerTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "sm", children: "From right" }) }), _jsx(DrawerContent, { children: _jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "Side drawer" }), _jsx(DrawerDescription, { children: "Good for navigation on small screens." })] }) })] })),
+};

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

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

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

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

package/dist/components/drawer/index.js

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

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

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+type DropdownMenuContentPositionProps = Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>;
+/**
+ * Props for `DropdownMenu`. Inherits behavior from
+ * [Base UI Menu](https://base-ui.com/react/components/menu).
+ */
+type DropdownMenuProps = MenuPrimitive.Root.Props;
+/** Props for `DropdownMenuPortal`. */
+type DropdownMenuPortalProps = MenuPrimitive.Portal.Props;
+/** Props for `DropdownMenuTrigger`. */
+type DropdownMenuTriggerProps = MenuPrimitive.Trigger.Props;
+/** Props for `DropdownMenuContent` (popup plus positioner alignment). */
+type DropdownMenuContentProps = MenuPrimitive.Popup.Props & DropdownMenuContentPositionProps;
+/** Props for `DropdownMenuSubContent` (same surface as content, tuned for nested menus). */
+type DropdownMenuSubContentProps = DropdownMenuContentProps;
+/** Props for `DropdownMenuGroup`. */
+type DropdownMenuGroupProps = MenuPrimitive.Group.Props;
+/** Props for `DropdownMenuLabel`. */
+type DropdownMenuLabelProps = React.ComponentProps<'div'> & {
+    inset?: boolean;
+};
+/** Props for `DropdownMenuItem`. */
+type DropdownMenuItemProps = MenuPrimitive.Item.Props & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+};
+/** Props for `DropdownMenuSub`. */
+type DropdownMenuSubProps = MenuPrimitive.SubmenuRoot.Props;
+/** Props for `DropdownMenuSubTrigger`. */
+type DropdownMenuSubTriggerProps = MenuPrimitive.SubmenuTrigger.Props & {
+    inset?: boolean;
+};
+/** Props for `DropdownMenuCheckboxItem`. */
+type DropdownMenuCheckboxItemProps = MenuPrimitive.CheckboxItem.Props & {
+    inset?: boolean;
+};
+/** Props for `DropdownMenuRadioGroup`. */
+type DropdownMenuRadioGroupProps = MenuPrimitive.RadioGroup.Props;
+/** Props for `DropdownMenuRadioItem`. */
+type DropdownMenuRadioItemProps = MenuPrimitive.RadioItem.Props & {
+    inset?: boolean;
+};
+/** Props for `DropdownMenuSeparator`. */
+type DropdownMenuSeparatorProps = MenuPrimitive.Separator.Props;
+/** Props for `DropdownMenuShortcut`. */
+type DropdownMenuShortcutProps = React.ComponentProps<'span'>;
+declare function DropdownMenu({ ...props }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuPortal({ ...props }: DropdownMenuPortalProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: DropdownMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, ...props }: DropdownMenuContentProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuGroup({ ...props }: DropdownMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: DropdownMenuLabelProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub({ ...props }: DropdownMenuSubProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: DropdownMenuSubTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: DropdownMenuSubContentProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: DropdownMenuCheckboxItemProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: DropdownMenuRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, inset, ...props }: DropdownMenuRadioItemProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: DropdownMenuShortcutProps): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
+export type { DropdownMenuProps, DropdownMenuPortalProps, DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuSubContentProps, DropdownMenuGroupProps, DropdownMenuLabelProps, DropdownMenuItemProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuSeparatorProps, DropdownMenuShortcutProps, };
+//# sourceMappingURL=dropdown-menu.d.ts.map

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

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

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

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { cn } from '../../lib/utils';
+import { CaretRightIcon } from '@phosphor-icons/react/CaretRight';
+import { CheckIcon } from '@phosphor-icons/react/Check';
+function DropdownMenu({ ...props }) {
+    return _jsx(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({ ...props }) {
+    return _jsx(MenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+    return _jsx(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({ align = 'start', alignOffset = 0, side = 'bottom', sideOffset = 4, className, ...props }) {
+    return (_jsx(MenuPrimitive.Portal, { children: _jsx(MenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(MenuPrimitive.Popup, { "data-slot": "dropdown-menu-content", className: cn('z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none 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 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95', className), ...props }) }) }));
+}
+function DropdownMenuGroup({ ...props }) {
+    return _jsx(MenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+    return (_jsx("div", { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn('px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7', className), ...props }));
+}
+function DropdownMenuItem({ className, inset, variant = 'default', ...props }) {
+    return (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive-foreground/10 data-[variant=destructive]:focus:text-destructive-foreground dark:data-[variant=destructive]:focus:bg-destructive-foreground/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive-foreground", className), ...props }));
+}
+function DropdownMenuSub({ ...props }) {
+    return _jsx(MenuPrimitive.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(CaretRightIcon, { className: "ml-auto" })] }));
+}
+function DropdownMenuSubContent({ align = 'start', alignOffset = -3, side = 'right', sideOffset = 0, className, ...props }) {
+    return (_jsx(DropdownMenuContent, { "data-slot": "dropdown-menu-sub-content", className: cn('w-auto min-w-[96px] 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), align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, ...props }));
+}
+function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+}
+function DropdownMenuRadioGroup({ ...props }) {
+    return (_jsx(MenuPrimitive.Group, { children: _jsx(MenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props }) }));
+}
+function DropdownMenuRadioItem({ className, children, inset, ...props }) {
+    return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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 right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return _jsx(MenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn('-mx-1 my-1 h-px bg-border', className), ...props });
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn('ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground', className), ...props }));
+}
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.stories.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/dropdown-menu.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EACH,YAAY,EAcf,MAAM,GAAG,CAAC;AAEX,QAAA,MAAM,IAAI;;;;;;;CAO2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAMnC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAuBlC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAkBzB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAqDrB,CAAC"}

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button';
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '.';
+const meta = {
+    title: 'UI/DropdownMenu',
+    component: DropdownMenu,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+function MenuTriggerButton(props) {
+    return _jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: props.children });
+}
+export const Default = {
+    render: () => (_jsxs(DropdownMenu, { children: [_jsx(MenuTriggerButton, { children: "Open menu" }), _jsxs(DropdownMenuContent, { className: "min-w-48", children: [_jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Actions" }), _jsx(DropdownMenuItem, { children: "New file" }), _jsx(DropdownMenuItem, { children: "New folder" })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { variant: "destructive", children: "Delete" })] })] })),
+};
+export const WithShortcuts = {
+    render: () => (_jsxs(DropdownMenu, { children: [_jsx(MenuTriggerButton, { children: "File" }), _jsxs(DropdownMenuContent, { className: "min-w-52", children: [_jsxs(DropdownMenuItem, { children: ["Save ", _jsx(DropdownMenuShortcut, { children: "\u2318S" })] }), _jsxs(DropdownMenuItem, { children: ["Duplicate ", _jsx(DropdownMenuShortcut, { children: "\u2318D" })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { variant: "destructive", children: ["Delete ", _jsx(DropdownMenuShortcut, { children: "\u232B" })] })] })] })),
+};
+export const WithCheckboxAndRadio = {
+    render: () => (_jsxs(DropdownMenu, { children: [_jsx(MenuTriggerButton, { children: "View options" }), _jsxs(DropdownMenuContent, { className: "min-w-48", children: [_jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Appearance" }), _jsx(DropdownMenuCheckboxItem, { defaultChecked: true, children: "Show sidebar" }), _jsx(DropdownMenuCheckboxItem, { children: "Show status bar" })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuRadioGroup, { defaultValue: "comfortable", children: [_jsx(DropdownMenuLabel, { inset: true, children: "Density" }), _jsx(DropdownMenuRadioItem, { value: "compact", inset: true, children: "Compact" }), _jsx(DropdownMenuRadioItem, { value: "comfortable", inset: true, children: "Comfortable" })] })] })] })),
+};
+export const WithSubmenu = {
+    render: () => (_jsxs(DropdownMenu, { children: [_jsx(MenuTriggerButton, { children: "More" }), _jsxs(DropdownMenuContent, { className: "min-w-44", children: [_jsx(DropdownMenuItem, { children: "Back" }), _jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: "Share" }), _jsxs(DropdownMenuSubContent, { children: [_jsx(DropdownMenuItem, { children: "Copy link" }), _jsx(DropdownMenuItem, { children: "Email" })] })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { variant: "destructive", children: "Remove" })] })] })),
+};
+export const Gallery = {
+    parameters: { layout: 'padded' },
+    render: () => (_jsxs("div", { className: "flex flex-col gap-10", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Default" }), _jsx("div", { className: "flex flex-wrap gap-4", children: _jsxs(DropdownMenu, { children: [_jsx(MenuTriggerButton, { children: "Menu" }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuItem, { children: "One" }), _jsx(DropdownMenuItem, { children: "Two" })] })] }) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Shortcuts & destructive" }), _jsx("div", { className: "flex flex-wrap gap-4", children: _jsxs(DropdownMenu, { children: [_jsx(MenuTriggerButton, { children: "Edit" }), _jsxs(DropdownMenuContent, { className: "min-w-52", children: [_jsxs(DropdownMenuItem, { children: ["Cut ", _jsx(DropdownMenuShortcut, { children: "\u2318X" })] }), _jsxs(DropdownMenuItem, { children: ["Copy ", _jsx(DropdownMenuShortcut, { children: "\u2318C" })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { variant: "destructive", children: "Delete" })] })] }) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Nested" }), _jsx("div", { className: "flex flex-wrap gap-4", children: _jsxs(DropdownMenu, { children: [_jsx(MenuTriggerButton, { children: "Export" }), _jsx(DropdownMenuContent, { children: _jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: "Download" }), _jsxs(DropdownMenuSubContent, { children: [_jsx(DropdownMenuItem, { children: "PNG" }), _jsx(DropdownMenuItem, { children: "SVG" })] })] }) })] }) })] })] })),
+};

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

@@ -0,0 +1,3 @@
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } from './dropdown-menu';
+export type { DropdownMenuProps, DropdownMenuPortalProps, DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuSubContentProps, DropdownMenuGroupProps, DropdownMenuLabelProps, DropdownMenuItemProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuSeparatorProps, DropdownMenuShortcutProps, } from './dropdown-menu';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,wBAAwB,EACxB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,GACzB,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EACR,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,EACxB,2BAA2B,EAC3B,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,oBAAoB,EACpB,2BAA2B,EAC3B,6BAA6B,EAC7B,2BAA2B,EAC3B,0BAA0B,EAC1B,0BAA0B,EAC1B,yBAAyB,GAC5B,MAAM,iBAAiB,CAAC"}

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

@@ -0,0 +1 @@
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } from './dropdown-menu';