@wheelhouse/ui 0.1.6 → 0.2.1

package/dist/components/date-selector/use-date-selector.js

@@ -0,0 +1,305 @@
+'use client';
+import { useCallback, useMemo, useState } from 'react';
+import { isBefore } from 'date-fns';
+import { buildCurrentValueFromInternal, computeStateSyncKey, createInitialInternalState, dateSelectorDataKey, } from './date-selector-value';
+/**
+ * Headless state and handlers for the date selector: period, filter operator, selected dates/ranges, and year lists.
+ * Use when building a custom layout; otherwise prefer {@link DateSelector}.
+ *
+ * **`syncInternalFromParsedValue`:** When the UI parses free text into a {@link DateSelectorValue} and `value` is
+ * undefined (uncontrolled), call this so internal state matches the parsed value. Controlled flows should rely on
+ * `value` + `onChange` only.
+ */
+export function useDateSelector({ value, onChange, defaultPeriodType = 'day', defaultFilterType = 'is', presetMode, allowRange = true, yearRange = 11, baseYear, minYear, maxYear, yearOptions, periodTypes, }) {
+    const currentYear = baseYear ?? new Date().getFullYear();
+    const validDefaultPeriodType = useMemo(() => {
+        if (!periodTypes || periodTypes.length === 0)
+            return defaultPeriodType;
+        if (periodTypes.includes(defaultPeriodType))
+            return defaultPeriodType;
+        return periodTypes[0];
+    }, [periodTypes, defaultPeriodType]);
+    const syncKey = computeStateSyncKey(value, presetMode, defaultFilterType, validDefaultPeriodType);
+    const [storedSyncKey, setStoredSyncKey] = useState(syncKey);
+    const [bundle, setBundle] = useState(() => {
+        const internal = createInitialInternalState(value, validDefaultPeriodType, defaultFilterType, presetMode);
+        return {
+            internal,
+            lastEmittedDataKey: dateSelectorDataKey(buildCurrentValueFromInternal(internal, presetMode)),
+        };
+    });
+    if (syncKey !== storedSyncKey) {
+        setStoredSyncKey(syncKey);
+        const nextInitial = createInitialInternalState(value, validDefaultPeriodType, defaultFilterType, presetMode);
+        setBundle({
+            internal: nextInitial,
+            lastEmittedDataKey: dateSelectorDataKey(buildCurrentValueFromInternal(nextInitial, presetMode)),
+        });
+    }
+    const internal = bundle.internal;
+    const commit = useCallback((updater) => {
+        setBundle((prevBundle) => {
+            const next = updater(prevBundle.internal);
+            const cv = buildCurrentValueFromInternal(next, presetMode);
+            const sig = dateSelectorDataKey(cv);
+            if (sig !== prevBundle.lastEmittedDataKey) {
+                onChange?.(cv);
+                return { internal: next, lastEmittedDataKey: sig };
+            }
+            return { internal: next, lastEmittedDataKey: prevBundle.lastEmittedDataKey };
+        });
+    }, [onChange, presetMode]);
+    const syncInternalFromParsedValue = useCallback((parsed) => {
+        const nextInternal = createInitialInternalState(parsed, validDefaultPeriodType, defaultFilterType, presetMode);
+        setBundle({
+            internal: nextInternal,
+            lastEmittedDataKey: dateSelectorDataKey(buildCurrentValueFromInternal(nextInternal, presetMode)),
+        });
+    }, [validDefaultPeriodType, defaultFilterType, presetMode]);
+    const setCalendarMonth = useCallback((action) => {
+        setBundle((prev) => ({
+            ...prev,
+            internal: {
+                ...prev.internal,
+                calendarMonth: typeof action === 'function' ? action(prev.internal.calendarMonth) : action,
+            },
+        }));
+    }, []);
+    const setHoverDate = useCallback((action) => {
+        setBundle((prev) => ({
+            ...prev,
+            internal: {
+                ...prev.internal,
+                hoverDate: typeof action === 'function' ? action(prev.internal.hoverDate) : action,
+            },
+        }));
+    }, []);
+    const setSelectedDate = useCallback((action) => {
+        commit((prev) => ({
+            ...prev,
+            selectedDate: typeof action === 'function' ? action(prev.selectedDate) : action,
+        }));
+    }, [commit]);
+    const setSelectedEndDate = useCallback((action) => {
+        commit((prev) => ({
+            ...prev,
+            selectedEndDate: typeof action === 'function' ? action(prev.selectedEndDate) : action,
+        }));
+    }, [commit]);
+    const years = useMemo(() => {
+        if (yearOptions !== undefined && yearOptions.length > 0) {
+            return [...new Set(yearOptions)].sort((a, b) => a - b);
+        }
+        if (minYear !== undefined && maxYear !== undefined) {
+            return Array.from({ length: maxYear - minYear + 1 }, (_, i) => minYear + i);
+        }
+        return Array.from({ length: yearRange }, (_, i) => currentYear - Math.floor(yearRange / 2) + i);
+    }, [currentYear, yearRange, minYear, maxYear, yearOptions]);
+    const currentValue = useMemo(() => buildCurrentValueFromInternal(internal, presetMode), [internal, presetMode]);
+    const clearSelection = useCallback(() => {
+        commit((prev) => ({
+            ...prev,
+            selectionMode: 'custom',
+            rollingDays: undefined,
+            selectedDate: undefined,
+            selectedEndDate: undefined,
+            selectedYear: undefined,
+            selectedMonth: undefined,
+            selectedQuarter: undefined,
+            rangeStart: undefined,
+            rangeEnd: undefined,
+        }));
+    }, [commit]);
+    const applyRollingPreset = useCallback((mode, days) => {
+        commit((prev) => ({
+            ...prev,
+            periodType: 'day',
+            selectionMode: mode,
+            rollingDays: days,
+            selectedDate: undefined,
+            selectedEndDate: undefined,
+        }));
+    }, [commit]);
+    const enterCustomRange = useCallback(() => {
+        commit((prev) => ({ ...prev, selectionMode: 'custom', rollingDays: undefined }));
+    }, [commit]);
+    const handleDayClick = useCallback((day) => {
+        commit((prev) => {
+            const s = { ...prev };
+            if (s.selectionMode === 'rolling-next' || s.selectionMode === 'rolling-last') {
+                s.selectionMode = 'custom';
+                s.rollingDays = undefined;
+            }
+            const activeFilter = presetMode ?? s.filterType;
+            if (activeFilter === 'between' && allowRange) {
+                if (!s.selectedDate || (s.selectedDate && s.selectedEndDate)) {
+                    s.selectedDate = day;
+                    s.selectedEndDate = undefined;
+                }
+                else {
+                    if (isBefore(day, s.selectedDate)) {
+                        s.selectedEndDate = s.selectedDate;
+                        s.selectedDate = day;
+                    }
+                    else {
+                        s.selectedEndDate = day;
+                    }
+                }
+            }
+            else {
+                s.selectedDate = day;
+                s.selectedEndDate = undefined;
+            }
+            return s;
+        });
+    }, [commit, presetMode, allowRange]);
+    const handlePeriodSelect = useCallback((year, periodValue) => {
+        commit((prev) => {
+            const activeFilter = presetMode ?? prev.filterType;
+            if (activeFilter === 'between' && allowRange) {
+                if (!prev.rangeStart || (prev.rangeStart && prev.rangeEnd)) {
+                    return {
+                        ...prev,
+                        rangeStart: { year, value: periodValue },
+                        rangeEnd: undefined,
+                        selectedYear: year,
+                        selectedMonth: prev.periodType === 'month' ? periodValue : prev.selectedMonth,
+                        selectedQuarter: prev.periodType === 'quarter' ? periodValue : prev.selectedQuarter,
+                    };
+                }
+                const startKey = prev.rangeStart.year * 100 + prev.rangeStart.value;
+                const endKey = year * 100 + periodValue;
+                if (endKey < startKey) {
+                    return {
+                        ...prev,
+                        rangeEnd: prev.rangeStart,
+                        rangeStart: { year, value: periodValue },
+                    };
+                }
+                return {
+                    ...prev,
+                    rangeEnd: { year, value: periodValue },
+                };
+            }
+            return {
+                ...prev,
+                selectedYear: year,
+                selectedMonth: prev.periodType === 'month' ? periodValue : prev.selectedMonth,
+                selectedQuarter: prev.periodType === 'quarter' ? periodValue : prev.selectedQuarter,
+                rangeStart: undefined,
+                rangeEnd: undefined,
+            };
+        });
+    }, [commit, presetMode, allowRange]);
+    const handleYearSelect = useCallback((year) => {
+        commit((prev) => {
+            const activeFilter = presetMode ?? prev.filterType;
+            if (activeFilter === 'between' && allowRange) {
+                if (!prev.rangeStart || (prev.rangeStart && prev.rangeEnd)) {
+                    return {
+                        ...prev,
+                        rangeStart: { year, value: 0 },
+                        rangeEnd: undefined,
+                        selectedYear: year,
+                    };
+                }
+                if (year < prev.rangeStart.year) {
+                    return {
+                        ...prev,
+                        rangeEnd: prev.rangeStart,
+                        rangeStart: { year, value: 0 },
+                    };
+                }
+                return {
+                    ...prev,
+                    rangeEnd: { year, value: 0 },
+                };
+            }
+            return {
+                ...prev,
+                selectedYear: year,
+                rangeStart: undefined,
+                rangeEnd: undefined,
+            };
+        });
+    }, [commit, presetMode, allowRange]);
+    const handlePeriodTypeChange = useCallback((type) => {
+        commit((prev) => ({
+            ...prev,
+            periodType: type,
+            selectionMode: 'custom',
+            rollingDays: undefined,
+            selectedDate: undefined,
+            selectedEndDate: undefined,
+            selectedYear: undefined,
+            selectedMonth: undefined,
+            selectedQuarter: undefined,
+            rangeStart: undefined,
+            rangeEnd: undefined,
+        }));
+    }, [commit]);
+    const handleFilterTypeChange = useCallback((type) => {
+        if (presetMode !== undefined)
+            return;
+        commit((prev) => ({
+            ...prev,
+            filterType: type,
+            selectionMode: 'custom',
+            rollingDays: undefined,
+            selectedDate: undefined,
+            selectedEndDate: undefined,
+            selectedYear: undefined,
+            selectedMonth: undefined,
+            selectedQuarter: undefined,
+            rangeStart: undefined,
+            rangeEnd: undefined,
+        }));
+    }, [commit, presetMode]);
+    const isInRange = useCallback((year, periodValue) => {
+        if (!internal.rangeStart || !internal.rangeEnd)
+            return false;
+        const key = year * 100 + periodValue;
+        const startKey = internal.rangeStart.year * 100 + internal.rangeStart.value;
+        const endKey = internal.rangeEnd.year * 100 + internal.rangeEnd.value;
+        return key >= startKey && key <= endKey;
+    }, [internal.rangeStart, internal.rangeEnd]);
+    const isYearInRange = useCallback((year) => {
+        if (!internal.rangeStart || !internal.rangeEnd)
+            return false;
+        return year >= internal.rangeStart.year && year <= internal.rangeEnd.year;
+    }, [internal.rangeStart, internal.rangeEnd]);
+    const filterType = presetMode ?? internal.filterType;
+    return {
+        periodType: internal.periodType,
+        filterType,
+        selectedDate: internal.selectedDate,
+        selectedEndDate: internal.selectedEndDate,
+        calendarMonth: internal.calendarMonth,
+        selectedYear: internal.selectedYear,
+        selectedMonth: internal.selectedMonth,
+        selectedQuarter: internal.selectedQuarter,
+        rangeStart: internal.rangeStart,
+        rangeEnd: internal.rangeEnd,
+        hoverDate: internal.hoverDate,
+        years,
+        currentValue,
+        allowRange,
+        selectionMode: internal.selectionMode,
+        rollingDays: internal.rollingDays,
+        setPeriodType: handlePeriodTypeChange,
+        setFilterType: handleFilterTypeChange,
+        setSelectedDate,
+        setSelectedEndDate,
+        setCalendarMonth,
+        setHoverDate,
+        clearSelection,
+        handleDayClick,
+        handlePeriodSelect,
+        handleYearSelect,
+        isInRange,
+        isYearInRange,
+        applyRollingPreset,
+        enterCustomRange,
+        syncInternalFromParsedValue,
+    };
+}

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 { X } from 'lucide-react';
+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(X, {}), _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';