@wheelhouse/ui 0.2.0 → 0.2.2

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

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

@@ -0,0 +1,135 @@
+import type { StoryObj } from '@storybook/react';
+import type { DateSelectorFilterType, DateSelectorProps } from '.';
+declare const PERIOD_TYPE_PRESETS: {
+    readonly all: undefined;
+    readonly day: ["day"];
+    readonly 'day-month': ["day", "month"];
+    readonly month: ["month"];
+    readonly quarter: ["quarter"];
+    readonly year: ["year"];
+};
+type PeriodTypesPreset = keyof typeof PERIOD_TYPE_PRESETS;
+/** Story-only controls; mapped to {@link DateSelectorProps} in {@link storyArgsToProps}. */
+type DateSelectorStoryArgs = Omit<Partial<DateSelectorProps>, 'value' | 'onChange' | 'periodTypes' | 'presetMode' | 'weekStartsOn'> & {
+    periodTypesPreset?: PeriodTypesPreset;
+    presetMode?: DateSelectorFilterType | 'unset';
+    weekStartsOn?: 'unset' | NonNullable<DateSelectorProps['weekStartsOn']>;
+};
+/** Storybook-only shell: maps story args to {@link DateSelector} and wires controlled state. */
+declare function DateSelectorStorybook(args: DateSelectorStoryArgs): import("react/jsx-runtime").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof DateSelectorStorybook;
+    tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            story: {
+                height: string;
+            };
+        };
+    };
+    args: {
+        label: string;
+        showInput: true;
+        showOperators: true;
+        showTwoMonths: false;
+        allowRange: true;
+        showRollingPresets: false;
+        defaultPeriodType: "day";
+        defaultFilterType: "is";
+        presetMode: "unset";
+        periodTypesPreset: "all";
+        minYear: number;
+        maxYear: number;
+        yearRange: number;
+        weekStartsOn: "unset";
+        inputHint: string;
+        dayDateFormat: string;
+    };
+    argTypes: {
+        label: {
+            control: "text";
+        };
+        showInput: {
+            control: "boolean";
+        };
+        showOperators: {
+            control: "boolean";
+        };
+        showTwoMonths: {
+            control: "boolean";
+        };
+        allowRange: {
+            control: "boolean";
+        };
+        showRollingPresets: {
+            control: "boolean";
+        };
+        defaultPeriodType: {
+            control: "select";
+            options: string[];
+        };
+        defaultFilterType: {
+            control: "select";
+            options: string[];
+        };
+        presetMode: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        periodTypesPreset: {
+            control: "select";
+            options: PeriodTypesPreset[];
+            description: string;
+        };
+        minYear: {
+            control: "number";
+        };
+        maxYear: {
+            control: "number";
+        };
+        yearRange: {
+            control: "number";
+        };
+        baseYear: {
+            control: "number";
+        };
+        weekStartsOn: {
+            control: "select";
+            options: (string | number)[];
+            description: string;
+        };
+        inputHint: {
+            control: "text";
+        };
+        dayDateFormat: {
+            control: "text";
+        };
+        className: {
+            control: false;
+        };
+        i18n: {
+            control: false;
+        };
+        yearOptions: {
+            control: false;
+        };
+        dayDateFormats: {
+            control: false;
+        };
+        rollingDayOptions: {
+            control: false;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const DayOnly: Story;
+export declare const PresetBetween: Story;
+export declare const NoInput: Story;
+export declare const NoOperators: Story;
+export declare const RollingPresets: Story;
+//# sourceMappingURL=date-selector.stories.d.ts.map

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

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

@@ -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"}