@wheelhouse/ui 0.2.0 → 0.2.1

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

@@ -0,0 +1,144 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DateSelector } from '.';
+const PERIOD_TYPE_PRESETS = {
+    all: undefined,
+    day: ['day'],
+    'day-month': ['day', 'month'],
+    month: ['month'],
+    quarter: ['quarter'],
+    year: ['year'],
+};
+function storyArgsToProps(args) {
+    const { periodTypesPreset = 'all', presetMode, weekStartsOn, ...rest } = args;
+    return {
+        ...rest,
+        periodTypes: PERIOD_TYPE_PRESETS[periodTypesPreset],
+        presetMode: presetMode === 'unset' ? undefined : presetMode,
+        weekStartsOn: weekStartsOn === 'unset' ? undefined : weekStartsOn,
+    };
+}
+/** Storybook-only shell: maps story args to {@link DateSelector} and wires controlled state. */
+function DateSelectorStorybook(args) {
+    const [value, setValue] = useState();
+    const props = storyArgsToProps(args);
+    return _jsx(DateSelector, { ...props, value: value, onChange: setValue });
+}
+const meta = {
+    title: 'UI/DateSelector',
+    component: DateSelectorStorybook,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: {
+            story: {
+                height: '720px',
+            },
+        },
+    },
+    args: {
+        label: '',
+        showInput: true,
+        showOperators: true,
+        showTwoMonths: false,
+        allowRange: true,
+        showRollingPresets: false,
+        defaultPeriodType: 'day',
+        defaultFilterType: 'is',
+        presetMode: 'unset',
+        periodTypesPreset: 'all',
+        minYear: 2024,
+        maxYear: 2028,
+        yearRange: 10,
+        weekStartsOn: 'unset',
+        inputHint: '',
+        dayDateFormat: 'MM/dd/yyyy',
+    },
+    argTypes: {
+        label: { control: 'text' },
+        showInput: { control: 'boolean' },
+        showOperators: { control: 'boolean' },
+        showTwoMonths: { control: 'boolean' },
+        allowRange: { control: 'boolean' },
+        showRollingPresets: { control: 'boolean' },
+        defaultPeriodType: {
+            control: 'select',
+            options: ['day', 'month', 'quarter', 'year'],
+        },
+        defaultFilterType: {
+            control: 'select',
+            options: ['is', 'before', 'after', 'between'],
+        },
+        presetMode: {
+            control: 'select',
+            options: ['unset', 'is', 'before', 'after', 'between'],
+            description: 'Use “unset” to clear (same as leaving `presetMode` undefined).',
+        },
+        periodTypesPreset: {
+            control: 'select',
+            options: Object.keys(PERIOD_TYPE_PRESETS),
+            description: 'Maps to the `periodTypes` prop (which tabs are enabled).',
+        },
+        minYear: { control: 'number' },
+        maxYear: { control: 'number' },
+        yearRange: { control: 'number' },
+        baseYear: { control: 'number' },
+        weekStartsOn: {
+            control: 'select',
+            options: ['unset', 0, 1, 2, 3, 4, 5, 6],
+            description: 'Use “unset” for the default (Sunday in most locales).',
+        },
+        inputHint: { control: 'text' },
+        dayDateFormat: { control: 'text' },
+        className: { control: false },
+        i18n: { control: false },
+        yearOptions: { control: false },
+        dayDateFormats: { control: false },
+        rollingDayOptions: { control: false },
+    },
+};
+export default meta;
+export const Default = {};
+export const DayOnly = {
+    args: {
+        label: 'Date',
+        periodTypesPreset: 'day',
+        defaultPeriodType: 'day',
+    },
+    render: function DayOnlyStory(args) {
+        const [value, setValue] = useState({
+            period: 'day',
+            operator: 'is',
+            startDate: new Date(2026, 3, 13),
+        });
+        const props = storyArgsToProps(args);
+        return _jsx(DateSelector, { ...props, value: value, onChange: setValue });
+    },
+};
+export const PresetBetween = {
+    args: {
+        label: 'In range',
+        presetMode: 'between',
+        defaultFilterType: 'between',
+    },
+};
+export const NoInput = {
+    args: {
+        label: 'Pick in calendar',
+        showInput: false,
+    },
+};
+export const NoOperators = {
+    args: {
+        label: 'Period only (operator fixed to is)',
+        showOperators: false,
+        defaultFilterType: 'is',
+    },
+};
+export const RollingPresets = {
+    args: {
+        label: 'Rolling window',
+        showRollingPresets: true,
+        defaultFilterType: 'between',
+    },
+};

package/dist/components/date-selector/index.d.ts

@@ -0,0 +1,7 @@
+export { computeRollingDateRange, formatDateValue } from './date-selector-value';
+export { DATE_SELECTOR_ROLLING_DAY_OPTIONS, DEFAULT_DATE_SELECTOR_I18N } from './date-selector-types';
+export { DateSelector } from './date-selector';
+export { useDateSelector } from './use-date-selector';
+export { useDateSelectorContext } from './date-selector-context';
+export type { DateSelectorContextValue, DateSelectorFilterType, DateSelectorI18nConfig, DateSelectorPeriodType, DateSelectorProps, DateSelectorRollingDays, DateSelectorSelectionMode, DateSelectorValue, UseDateSelectorOptions, } from './date-selector-types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/date-selector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/date-selector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACjF,OAAO,EAAE,iCAAiC,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AACtG,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,YAAY,EACR,wBAAwB,EACxB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,EACjB,uBAAuB,EACvB,yBAAyB,EACzB,iBAAiB,EACjB,sBAAsB,GACzB,MAAM,uBAAuB,CAAC"}

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

@@ -0,0 +1,5 @@
+export { computeRollingDateRange, formatDateValue } from './date-selector-value';
+export { DATE_SELECTOR_ROLLING_DAY_OPTIONS, DEFAULT_DATE_SELECTOR_I18N } from './date-selector-types';
+export { DateSelector } from './date-selector';
+export { useDateSelector } from './use-date-selector';
+export { useDateSelectorContext } from './date-selector-context';

package/dist/components/date-selector/use-date-selector.d.ts

@@ -0,0 +1,50 @@
+import { type SetStateAction } from 'react';
+import type { DateSelectorFilterType, DateSelectorPeriodType, DateSelectorRollingDays, DateSelectorValue, UseDateSelectorOptions } from './date-selector-types';
+/**
+ * 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 declare function useDateSelector({ value, onChange, defaultPeriodType, defaultFilterType, presetMode, allowRange, yearRange, baseYear, minYear, maxYear, yearOptions, periodTypes, }: UseDateSelectorOptions): {
+    periodType: DateSelectorPeriodType;
+    filterType: DateSelectorFilterType;
+    selectedDate: Date | undefined;
+    selectedEndDate: Date | undefined;
+    calendarMonth: Date;
+    selectedYear: number | undefined;
+    selectedMonth: number | undefined;
+    selectedQuarter: number | undefined;
+    rangeStart: {
+        year: number;
+        value: number;
+    } | undefined;
+    rangeEnd: {
+        year: number;
+        value: number;
+    } | undefined;
+    hoverDate: Date | undefined;
+    years: number[];
+    currentValue: DateSelectorValue;
+    allowRange: boolean;
+    selectionMode: import("./date-selector-types").DateSelectorSelectionMode;
+    rollingDays: 3 | 7 | 14 | 30 | 60 | 90 | 180 | 365 | undefined;
+    setPeriodType: (type: DateSelectorPeriodType) => void;
+    setFilterType: (type: DateSelectorFilterType) => void;
+    setSelectedDate: (action: SetStateAction<Date | undefined>) => void;
+    setSelectedEndDate: (action: SetStateAction<Date | undefined>) => void;
+    setCalendarMonth: (action: SetStateAction<Date>) => void;
+    setHoverDate: (action: SetStateAction<Date | undefined>) => void;
+    clearSelection: () => void;
+    handleDayClick: (day: Date) => void;
+    handlePeriodSelect: (year: number, periodValue: number) => void;
+    handleYearSelect: (year: number) => void;
+    isInRange: (year: number, periodValue: number) => boolean;
+    isYearInRange: (year: number) => boolean;
+    applyRollingPreset: (mode: "rolling-next" | "rolling-last", days: DateSelectorRollingDays) => void;
+    enterCustomRange: () => void;
+    syncInternalFromParsedValue: (parsed: DateSelectorValue) => void;
+};
+//# sourceMappingURL=use-date-selector.d.ts.map

package/dist/components/date-selector/use-date-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-date-selector.d.ts","sourceRoot":"","sources":["../../../src/components/date-selector/use-date-selector.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAkC,MAAM,OAAO,CAAC;AAG5E,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAUhK;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,iBAAyB,EACzB,iBAAwB,EACxB,UAAU,EACV,UAAiB,EACjB,SAAc,EACd,QAAQ,EACR,OAAO,EACP,OAAO,EACP,WAAW,EACX,WAAW,GACd,EAAE,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;0BA4PV,sBAAsB;0BAmBtB,sBAAsB;8BAjMpB,cAAc,CAAC,IAAI,GAAG,SAAS,CAAC;iCAUhC,cAAc,CAAC,IAAI,GAAG,SAAS,CAAC;+BA/BC,cAAc,CAAC,IAAI,CAAC;2BAUxB,cAAc,CAAC,IAAI,GAAG,SAAS,CAAC;;0BA4EhE,IAAI;+BA+BH,MAAM,eAAe,MAAM;6BA0C3B,MAAM;sBA2EN,MAAM,eAAe,MAAM;0BAW3B,MAAM;+BAjLN,cAAc,GAAG,cAAc,QAAQ,uBAAuB;;0CA9E5D,iBAAiB;EA2SjC"}

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.js

@@ -2,7 +2,7 @@
 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 { X } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import { Button } from '../button';
 function Dialog({ ...props }) {
@@ -21,7 +21,7 @@ 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" })] }))] })] }));
+    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 });

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

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

@@ -3,8 +3,7 @@ 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';
+import { Check, ChevronRight } from 'lucide-react';
 function DropdownMenu({ ...props }) {
     return _jsx(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
@@ -21,7 +20,7 @@ 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 }));
+    return (_jsx("div", { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn('px-1.5 py-1 text-xs 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 }));
@@ -30,19 +29,19 @@ 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" })] }));
+    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(ChevronRight, { 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] }));
+    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(Check, {}) }) }), 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] }));
+    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(Check, {}) }) }), 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 });

package/dist/components/empty/empty.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FolderOpenIcon } from '@phosphor-icons/react/dist/ssr';
+import { FolderOpen } from 'lucide-react';
 import { Button } from '../button';
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from './empty';
 const meta = {
@@ -15,5 +15,5 @@ const meta = {
 };
 export default meta;
 export const Default = {
-    render: () => (_jsxs(Empty, { children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(FolderOpenIcon, {}) }), _jsx(EmptyTitle, { children: "No projects yet" }), _jsx(EmptyDescription, { children: "Create a project to get started, or browse templates." })] }), _jsx(EmptyContent, { children: _jsx(Button, { size: "sm", children: "New project" }) })] })),
+    render: () => (_jsxs(Empty, { children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(FolderOpen, {}) }), _jsx(EmptyTitle, { children: "No projects yet" }), _jsx(EmptyDescription, { children: "Create a project to get started, or browse templates." })] }), _jsx(EmptyContent, { children: _jsx(Button, { size: "sm", children: "New project" }) })] })),
 };