@wheelhouse/ui 0.2.1 → 0.2.3

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

@@ -1,144 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Rich date / period filter: day through year granularity, filter operators (is / before / after / between), optional free-text input,
- * and shared state via {@link useDateSelector}. Built on `Calendar`, tabs, and `ScrollArea`.
- *
- * Implementation is split across `date-selector-types`, `date-selector-value`, `use-date-selector`, `date-selector-context`,
- * and `date-selector-parts` for maintainability.
- */
-import { useCallback, useMemo, useState } from 'react';
-import { parse } from 'date-fns';
-import { cn } from '../../lib/utils';
-import { Button } from '../button';
-import { Input } from '../input';
-import { ScrollArea } from '../scroll-area';
-import { Tabs, TabsList, TabsTrigger } from '../tabs';
-import { X } from 'lucide-react';
-import { DateSelectorContext } from './date-selector-context';
-import { DateSelectorDayPicker, DateSelectorFilterToggle, DateSelectorPeriodGrid, DateSelectorPeriodTabs, DateSelectorYearList } from './date-selector-parts';
-import { DATE_SELECTOR_ROLLING_DAY_OPTIONS, DEFAULT_DATE_SELECTOR_I18N } from './date-selector-types';
-import { formatDateValue } from './date-selector-value';
-import { useDateSelector } from './use-date-selector';
-/**
- * Composite filter control for dates and calendar periods. Root element sets `data-slot="date-selector"`.
- */
-export function DateSelector({ value, onChange, allowRange = true, periodTypes, defaultPeriodType = 'day', defaultFilterType = 'is', presetMode, showInput = true, showOperators = true, showTwoMonths = false, label, className, yearRange = 5, baseYear, minYear = 2024, maxYear = 2028, yearOptions, i18n: i18nOverride, inputHint, dayDateFormat = 'MM/dd/yyyy', dayDateFormats, weekStartsOn, showRollingPresets = false, rollingDayOptions = DATE_SELECTOR_ROLLING_DAY_OPTIONS, }) {
-    const mergedI18n = useMemo(() => ({ ...DEFAULT_DATE_SELECTOR_I18N, ...i18nOverride }), [i18nOverride]);
-    const selector = useDateSelector({
-        value,
-        onChange,
-        defaultPeriodType,
-        defaultFilterType,
-        presetMode,
-        allowRange,
-        yearRange,
-        baseYear,
-        minYear,
-        maxYear,
-        yearOptions,
-        periodTypes,
-    });
-    const { periodType, filterType, selectedDate, selectedEndDate, calendarMonth, selectedYear, selectedMonth, selectedQuarter, rangeStart, rangeEnd, hoverDate, years, currentValue, setPeriodType, setFilterType, setCalendarMonth, setHoverDate, clearSelection, handleDayClick, handlePeriodSelect, handleYearSelect, isInRange, isYearInRange, selectionMode, rollingDays, applyRollingPreset, enterCustomRange, syncInternalFromParsedValue, } = selector;
-    const defaultRollingDay = useMemo(() => {
-        if (rollingDays !== undefined && rollingDayOptions.includes(rollingDays))
-            return rollingDays;
-        return rollingDayOptions[0];
-    }, [rollingDays, rollingDayOptions]);
-    const hideOperatorsForRolling = showRollingPresets && periodType === 'day' && (selectionMode === 'rolling-next' || selectionMode === 'rolling-last');
-    const showDayCalendar = periodType === 'day' && selectionMode === 'custom';
-    const displayValue = formatDateValue(currentValue, mergedI18n, dayDateFormat);
-    const [draftInput, setDraftInput] = useState('');
-    const [isInputFocused, setIsInputFocused] = useState(false);
-    const summaryInputValue = inputHint ? (isInputFocused ? draftInput : displayValue) : displayValue;
-    const dateFormats = useMemo(() => {
-        if (dayDateFormats && dayDateFormats.length > 0) {
-            const formats = [...dayDateFormats];
-            if (!formats.includes(dayDateFormat)) {
-                formats.unshift(dayDateFormat);
-            }
-            return formats;
-        }
-        const defaultFormats = [dayDateFormat, 'dd/MM/yyyy', 'yyyy-MM-dd', 'MM-dd-yyyy', 'dd-MM-yyyy'];
-        return Array.from(new Set(defaultFormats));
-    }, [dayDateFormat, dayDateFormats]);
-    const parseInputValue = useCallback((text) => {
-        if (!text.trim())
-            return null;
-        const trimmed = text.trim();
-        const yearMatch = trimmed.match(/^\d{4}$/);
-        if (yearMatch) {
-            const year = parseInt(yearMatch[0]);
-            if (year >= 1900 && year <= 2100) {
-                return {
-                    period: 'year',
-                    operator: presetMode ?? filterType,
-                    year,
-                };
-            }
-        }
-        const quarterMatch = trimmed.match(/^Q([1-4])(?:\s+(\d{4}))?$/i);
-        if (quarterMatch) {
-            const quarter = parseInt(quarterMatch[1]) - 1;
-            const year = quarterMatch[2] ? parseInt(quarterMatch[2]) : new Date().getFullYear();
-            if (year >= 1900 && year <= 2100) {
-                return {
-                    period: 'quarter',
-                    operator: presetMode ?? filterType,
-                    year,
-                    quarter,
-                };
-            }
-        }
-        for (const dateFormat of dateFormats) {
-            try {
-                const parsed = parse(trimmed, dateFormat, new Date());
-                if (!isNaN(parsed.getTime())) {
-                    return {
-                        period: 'day',
-                        operator: presetMode ?? filterType,
-                        startDate: parsed,
-                    };
-                }
-            }
-            catch {
-                // Continue to next format
-            }
-        }
-        return null;
-    }, [filterType, presetMode, dateFormats]);
-    const handleInputChange = useCallback((e) => {
-        const newValue = e.target.value;
-        setDraftInput(newValue);
-        const parsed = parseInputValue(newValue);
-        if (parsed) {
-            onChange?.(parsed);
-            if (value === undefined) {
-                syncInternalFromParsedValue(parsed);
-            }
-        }
-    }, [onChange, parseInputValue, syncInternalFromParsedValue, value]);
-    const handleInputBlur = useCallback(() => {
-        setIsInputFocused(false);
-        if (!parseInputValue(draftInput)) {
-            setDraftInput(displayValue);
-        }
-    }, [draftInput, displayValue, parseInputValue]);
-    const summaryInput = showInput ? (_jsxs("div", { className: "relative", "data-slot": "date-selector-summary-input", children: [_jsx(Input, { type: "text", value: summaryInputValue, readOnly: !inputHint, placeholder: isInputFocused && inputHint ? inputHint : mergedI18n.placeholder, onFocus: () => {
-                    setIsInputFocused(true);
-                    setDraftInput(displayValue);
-                }, onBlur: handleInputBlur, onChange: handleInputChange }), summaryInputValue && (_jsx("button", { type: "button", onClick: clearSelection, className: cn('absolute end-2.5 top-1/2 size-4 -translate-y-1/2 cursor-pointer rounded-xs', 'opacity-70 transition-opacity hover:opacity-100', 'ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none'), children: _jsx(X, { className: "size-4" }) }))] })) : null;
-    return (_jsx(DateSelectorContext.Provider, { value: { i18n: mergedI18n, variant: 'outline', size: 'default' }, children: _jsxs("div", { "data-slot": "date-selector", className: cn('w-full max-w-[20rem] space-y-4', className), children: [label && (_jsx("h3", { className: "text-sm font-medium", "data-slot": "data-selector-label", children: label })), showRollingPresets && (_jsxs("div", { className: "space-y-2", "data-slot": "date-selector-rolling", children: [_jsx(Tabs, { className: "w-full", value: selectionMode === 'rolling-next' ? 'rolling-next' : selectionMode === 'rolling-last' ? 'rolling-last' : 'custom', onValueChange: (newValue) => {
-                                if (!newValue)
-                                    return;
-                                if (newValue === 'rolling-next')
-                                    applyRollingPreset('rolling-next', defaultRollingDay);
-                                else if (newValue === 'rolling-last')
-                                    applyRollingPreset('rolling-last', defaultRollingDay);
-                                else if (newValue === 'custom')
-                                    enterCustomRange();
-                            }, children: _jsxs(TabsList, { className: "flex h-9 w-full min-w-0 gap-1 bg-muted/80 p-[3px]", children: [_jsx(TabsTrigger, { value: "rolling-next", "aria-label": mergedI18n.rollingWindowTabs.next, className: "min-w-0 flex-1 px-2 py-1 text-center font-normal", children: mergedI18n.rollingWindowTabs.next }), _jsx(TabsTrigger, { value: "rolling-last", "aria-label": mergedI18n.rollingWindowTabs.last, className: "min-w-0 flex-1 px-2 py-1 text-center font-normal", children: mergedI18n.rollingWindowTabs.last }), _jsx(TabsTrigger, { value: "custom", "aria-label": mergedI18n.rollingWindowTabs.custom, className: "min-w-0 flex-1 px-2 py-1 text-center font-normal", children: mergedI18n.rollingWindowTabs.custom })] }) }), showInput && summaryInput, (selectionMode === 'rolling-next' || selectionMode === 'rolling-last') && (_jsx("div", { className: "grid grid-cols-3 gap-2", "data-slot": "date-selector-rolling-value", children: rollingDayOptions.map((d) => {
-                                const chipLabel = mergedI18n.rollingDaysChip.replace('{{count}}', String(d));
-                                return (_jsx(Button, { type: "button", size: "sm", className: "w-full min-w-0", variant: rollingDays === d ? 'default' : 'outline', onClick: () => applyRollingPreset(selectionMode === 'rolling-last' ? 'rolling-last' : 'rolling-next', d), children: chipLabel }, d));
-                            }) }))] })), showOperators && !hideOperatorsForRolling && (_jsx(DateSelectorFilterToggle, { value: filterType, onChange: setFilterType, showBetween: allowRange, presetMode: presetMode })), showInput && !showRollingPresets && summaryInput, (!showRollingPresets || selectionMode === 'custom') && (_jsx(DateSelectorPeriodTabs, { value: periodType, onChange: setPeriodType, periodTypes: periodTypes })), periodType === 'day' && showDayCalendar && (_jsx("div", { className: "w-full pb-1", children: _jsx(DateSelectorDayPicker, { currentMonth: calendarMonth, selectedDate: selectedDate, selectedEndDate: selectedEndDate, onDayClick: handleDayClick, isRange: filterType === 'between' && allowRange, onDayHover: setHoverDate, hoverDate: hoverDate, showTwoMonths: showTwoMonths, weekStartsOn: weekStartsOn, onMonthChange: setCalendarMonth }) })), periodType !== 'day' && (_jsx("div", { className: "-mr-3 w-full", children: _jsxs(ScrollArea, { className: "h-[200px] w-full pe-3", children: [periodType === 'month' && (_jsx(DateSelectorPeriodGrid, { years: years, items: mergedI18n.monthsShort, selectedYear: selectedYear, selectedValue: selectedMonth, rangeStart: rangeStart, rangeEnd: rangeEnd, isInRange: isInRange, onSelect: handlePeriodSelect, columns: 3 })), periodType === 'quarter' && (_jsx(DateSelectorPeriodGrid, { className: "space-y-3", years: years, items: mergedI18n.quarters, selectedYear: selectedYear, selectedValue: selectedQuarter, rangeStart: rangeStart, rangeEnd: rangeEnd, isInRange: isInRange, onSelect: handlePeriodSelect, columns: 4 })), periodType === 'year' && (_jsx(DateSelectorYearList, { years: years, selectedYear: selectedYear, rangeStart: rangeStart, rangeEnd: rangeEnd, isYearInRange: isYearInRange, onSelect: handleYearSelect }))] }, periodType) }))] }) }));
-}

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

@@ -1 +0,0 @@
-{"version":3,"file":"date-selector.stories.d.ts","sourceRoot":"","sources":["../../../src/components/date-selector/date-selector.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,KAAK,EAAE,sBAAsB,EAA0B,iBAAiB,EAAqB,MAAM,GAAG,CAAC;AAG9G,QAAA,MAAM,mBAAmB;;;;;;;CAOgD,CAAC;AAE1E,KAAK,iBAAiB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAE1D,4FAA4F;AAC5F,KAAK,qBAAqB,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,aAAa,GAAG,YAAY,GAAG,cAAc,CAAC,GAAG;IAClI,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,UAAU,CAAC,EAAE,sBAAsB,GAAG,OAAO,CAAC;IAC9C,YAAY,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC,CAAC;CAC3E,CAAC;AAYF,gGAAgG;AAChG,iBAAS,qBAAqB,CAAC,IAAI,EAAE,qBAAqB,2CAIzD;AAED,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAoD+C,iBAAiB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoB9B,CAAC;AAE/C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC"}

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

@@ -1,144 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,5 +0,0 @@
-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.map

@@ -1 +0,0 @@
-{"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"}