@wheelhouse/ui 0.2.0 → 0.2.1

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

@@ -0,0 +1,47 @@
+import { type DateSelectorFilterType, type DateSelectorI18nConfig, type DateSelectorPeriodType, type DateSelectorRollingDays, type DateSelectorSelectionMode, type DateSelectorValue } from './date-selector-types';
+/**
+ * Computes inclusive calendar date bounds for rolling windows. “Next N” includes today and spans N calendar days.
+ * “Last N” includes today and goes back N − 1 days before today (N days total).
+ */
+export declare function computeRollingDateRange(mode: 'rolling-next' | 'rolling-last', days: number, now?: Date): {
+    startDate: Date;
+    endDate: Date;
+};
+/**
+ * Formats a {@link DateSelectorValue} for display using the same rules as the selector’s summary text.
+ */
+export declare function formatDateValue(value: DateSelectorValue, i18n?: DateSelectorI18nConfig, dayDateFormat?: string): string;
+/** Stable fingerprint for a {@link DateSelectorValue} (for sync keys and onChange deduplication). */
+export declare function dateSelectorDataKey(value: DateSelectorValue | undefined): string;
+export declare function computeStateSyncKey(value: DateSelectorValue | undefined, presetMode: DateSelectorFilterType | undefined, defaultFilterType: DateSelectorFilterType, validDefaultPeriodType: DateSelectorPeriodType): string;
+/** Full local UI state for {@link useDateSelector} (calendar month / hover are not part of {@link DateSelectorValue}). */
+export interface DateSelectorInternalState {
+    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;
+    selectionMode: DateSelectorSelectionMode;
+    rollingDays: DateSelectorRollingDays | undefined;
+}
+export declare function createInitialInternalState(value: DateSelectorValue | undefined, validDefaultPeriodType: DateSelectorPeriodType, defaultFilterType: DateSelectorFilterType, presetMode: DateSelectorFilterType | undefined): DateSelectorInternalState;
+export declare function buildRollingValueFromState(selectionMode: DateSelectorSelectionMode, rollingDays: DateSelectorRollingDays | undefined): DateSelectorValue | undefined;
+export declare function buildCurrentValueFromInternal(s: DateSelectorInternalState, presetMode: DateSelectorFilterType | undefined): DateSelectorValue;
+/** Combined UI state + last emitted value fingerprint for `onChange` deduplication. */
+export interface DateSelectorHookState {
+    internal: DateSelectorInternalState;
+    lastEmittedDataKey: string;
+}
+//# sourceMappingURL=date-selector-value.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-selector-value.d.ts","sourceRoot":"","sources":["../../../src/components/date-selector/date-selector-value.ts"],"names":[],"mappings":"AAEA,OAAO,EACH,KAAK,sBAAsB,EAC3B,KAAK,sBAAsB,EAC3B,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,EAC5B,KAAK,yBAAyB,EAC9B,KAAK,iBAAiB,EAEzB,MAAM,uBAAuB,CAAC;AAE/B;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,cAAc,GAAG,cAAc,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,GAAE,IAAiB,GAAG;IAAE,SAAS,EAAE,IAAI,CAAC;IAAC,OAAO,EAAE,IAAI,CAAA;CAAE,CAYvJ;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC3B,KAAK,EAAE,iBAAiB,EACxB,IAAI,GAAE,sBAAmD,EACzD,aAAa,GAAE,MAAqB,GACrC,MAAM,CAuDR;AAED,qGAAqG;AACrG,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,GAAG,MAAM,CAgBhF;AAED,wBAAgB,mBAAmB,CAC/B,KAAK,EAAE,iBAAiB,GAAG,SAAS,EACpC,UAAU,EAAE,sBAAsB,GAAG,SAAS,EAC9C,iBAAiB,EAAE,sBAAsB,EACzC,sBAAsB,EAAE,sBAAsB,GAC/C,MAAM,CAER;AAED,0HAA0H;AAC1H,MAAM,WAAW,yBAAyB;IACtC,UAAU,EAAE,sBAAsB,CAAC;IACnC,UAAU,EAAE,sBAAsB,CAAC;IACnC,YAAY,EAAE,IAAI,GAAG,SAAS,CAAC;IAC/B,eAAe,EAAE,IAAI,GAAG,SAAS,CAAC;IAClC,aAAa,EAAE,IAAI,CAAC;IACpB,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC;IACxD,QAAQ,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC;IACtD,SAAS,EAAE,IAAI,GAAG,SAAS,CAAC;IAC5B,aAAa,EAAE,yBAAyB,CAAC;IACzC,WAAW,EAAE,uBAAuB,GAAG,SAAS,CAAC;CACpD;AAED,wBAAgB,0BAA0B,CACtC,KAAK,EAAE,iBAAiB,GAAG,SAAS,EACpC,sBAAsB,EAAE,sBAAsB,EAC9C,iBAAiB,EAAE,sBAAsB,EACzC,UAAU,EAAE,sBAAsB,GAAG,SAAS,GAC/C,yBAAyB,CAoD3B;AAED,wBAAgB,0BAA0B,CACtC,aAAa,EAAE,yBAAyB,EACxC,WAAW,EAAE,uBAAuB,GAAG,SAAS,GACjD,iBAAiB,GAAG,SAAS,CAoB/B;AAED,wBAAgB,6BAA6B,CAAC,CAAC,EAAE,yBAAyB,EAAE,UAAU,EAAE,sBAAsB,GAAG,SAAS,GAAG,iBAAiB,CAc7I;AAED,uFAAuF;AACvF,MAAM,WAAW,qBAAqB;IAClC,QAAQ,EAAE,yBAAyB,CAAC;IACpC,kBAAkB,EAAE,MAAM,CAAC;CAC9B"}

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

@@ -0,0 +1,183 @@
+import { addDays, format, startOfDay, subDays } from 'date-fns';
+import { DEFAULT_DATE_SELECTOR_I18N, } from './date-selector-types';
+/**
+ * Computes inclusive calendar date bounds for rolling windows. “Next N” includes today and spans N calendar days.
+ * “Last N” includes today and goes back N − 1 days before today (N days total).
+ */
+export function computeRollingDateRange(mode, days, now = new Date()) {
+    const today = startOfDay(now);
+    if (mode === 'rolling-next') {
+        return {
+            startDate: today,
+            endDate: startOfDay(addDays(today, days - 1)),
+        };
+    }
+    return {
+        startDate: startOfDay(subDays(today, days - 1)),
+        endDate: today,
+    };
+}
+/**
+ * Formats a {@link DateSelectorValue} for display using the same rules as the selector’s summary text.
+ */
+export function formatDateValue(value, i18n = DEFAULT_DATE_SELECTOR_I18N, dayDateFormat = 'MM/dd/yyyy') {
+    const { period, selectionMode, rollingDays, startDate, endDate, year, month, quarter, rangeStart, rangeEnd } = value;
+    if ((selectionMode === 'rolling-next' || selectionMode === 'rolling-last') && rollingDays !== undefined) {
+        const label = selectionMode === 'rolling-next'
+            ? i18n.rollingSummaryNext.replace('{{count}}', String(rollingDays))
+            : i18n.rollingSummaryLast.replace('{{count}}', String(rollingDays));
+        if (startDate && endDate) {
+            return `${label} (${format(startDate, dayDateFormat)} – ${format(endDate, dayDateFormat)})`;
+        }
+        return label;
+    }
+    if (period === 'day') {
+        if (startDate && endDate) {
+            return `${format(startDate, dayDateFormat)} - ${format(endDate, dayDateFormat)}`;
+        }
+        if (startDate) {
+            return format(startDate, dayDateFormat);
+        }
+        return '';
+    }
+    if (period === 'month') {
+        if (rangeStart && rangeEnd) {
+            return `${i18n.monthsShort[rangeStart.value]} ${rangeStart.year} - ${i18n.monthsShort[rangeEnd.value]} ${rangeEnd.year}`;
+        }
+        if (year !== undefined && month !== undefined) {
+            return `${i18n.monthsShort[month]} ${year}`;
+        }
+        return '';
+    }
+    if (period === 'quarter') {
+        if (rangeStart && rangeEnd) {
+            return `${i18n.quarters[rangeStart.value]} ${rangeStart.year} - ${i18n.quarters[rangeEnd.value]} ${rangeEnd.year}`;
+        }
+        if (year !== undefined && quarter !== undefined) {
+            return `${i18n.quarters[quarter]} ${year}`;
+        }
+        return '';
+    }
+    if (period === 'year') {
+        if (rangeStart && rangeEnd) {
+            return `${rangeStart.year} - ${rangeEnd.year}`;
+        }
+        if (year !== undefined) {
+            return `${year}`;
+        }
+        return '';
+    }
+    return '';
+}
+/** Stable fingerprint for a {@link DateSelectorValue} (for sync keys and onChange deduplication). */
+export function dateSelectorDataKey(value) {
+    if (value === undefined)
+        return '__uc__';
+    const v = value;
+    return [
+        v.period,
+        v.operator,
+        v.selectionMode ?? '',
+        v.rollingDays ?? '',
+        v.year ?? '',
+        v.month ?? '',
+        v.quarter ?? '',
+        v.startDate?.getTime() ?? '',
+        v.endDate?.getTime() ?? '',
+        v.rangeStart ? `${v.rangeStart.year}-${v.rangeStart.value}` : '',
+        v.rangeEnd ? `${v.rangeEnd.year}-${v.rangeEnd.value}` : '',
+    ].join('|');
+}
+export function computeStateSyncKey(value, presetMode, defaultFilterType, validDefaultPeriodType) {
+    return `${dateSelectorDataKey(value)}|${presetMode ?? ''}|${defaultFilterType}|${validDefaultPeriodType}`;
+}
+export function createInitialInternalState(value, validDefaultPeriodType, defaultFilterType, presetMode) {
+    const calendarMonth = value?.startDate ?? new Date();
+    if (!value) {
+        return {
+            periodType: validDefaultPeriodType,
+            filterType: presetMode ?? defaultFilterType,
+            selectedDate: undefined,
+            selectedEndDate: undefined,
+            calendarMonth,
+            selectedYear: undefined,
+            selectedMonth: undefined,
+            selectedQuarter: undefined,
+            rangeStart: undefined,
+            rangeEnd: undefined,
+            hoverDate: undefined,
+            selectionMode: 'custom',
+            rollingDays: undefined,
+        };
+    }
+    const filterType = presetMode ?? value.operator ?? defaultFilterType;
+    if (value.selectionMode === 'rolling-next' || value.selectionMode === 'rolling-last') {
+        return {
+            periodType: value.period || validDefaultPeriodType,
+            filterType,
+            selectedDate: undefined,
+            selectedEndDate: undefined,
+            calendarMonth,
+            selectedYear: value.year,
+            selectedMonth: value.month,
+            selectedQuarter: value.quarter,
+            rangeStart: value.rangeStart,
+            rangeEnd: value.rangeEnd,
+            hoverDate: undefined,
+            selectionMode: value.selectionMode,
+            rollingDays: value.rollingDays,
+        };
+    }
+    return {
+        periodType: value.period || validDefaultPeriodType,
+        filterType,
+        selectedYear: value.year,
+        selectedMonth: value.month,
+        selectedQuarter: value.quarter,
+        rangeStart: value.rangeStart,
+        rangeEnd: value.rangeEnd,
+        hoverDate: undefined,
+        selectionMode: 'custom',
+        rollingDays: undefined,
+        selectedDate: value.startDate,
+        selectedEndDate: value.endDate,
+        calendarMonth,
+    };
+}
+export function buildRollingValueFromState(selectionMode, rollingDays) {
+    if (selectionMode !== 'rolling-next' && selectionMode !== 'rolling-last') {
+        return undefined;
+    }
+    if (rollingDays === undefined) {
+        return {
+            period: 'day',
+            operator: 'between',
+            selectionMode,
+        };
+    }
+    const { startDate: rs, endDate: re } = computeRollingDateRange(selectionMode === 'rolling-next' ? 'rolling-next' : 'rolling-last', rollingDays, new Date());
+    return {
+        period: 'day',
+        operator: 'between',
+        selectionMode,
+        rollingDays,
+        startDate: rs,
+        endDate: re,
+    };
+}
+export function buildCurrentValueFromInternal(s, presetMode) {
+    const rolling = buildRollingValueFromState(s.selectionMode, s.rollingDays);
+    if (rolling)
+        return rolling;
+    return {
+        period: s.periodType,
+        operator: presetMode ?? s.filterType,
+        startDate: s.selectedDate,
+        endDate: s.selectedEndDate,
+        year: s.selectedYear,
+        month: s.selectedMonth,
+        quarter: s.selectedQuarter,
+        rangeStart: s.rangeStart,
+        rangeEnd: s.rangeEnd,
+    };
+}

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

@@ -0,0 +1,6 @@
+import { type DateSelectorProps } from './date-selector-types';
+/**
+ * Composite filter control for dates and calendar periods. Root element sets `data-slot="date-selector"`.
+ */
+export declare function DateSelector({ value, onChange, allowRange, periodTypes, defaultPeriodType, defaultFilterType, presetMode, showInput, showOperators, showTwoMonths, label, className, yearRange, baseYear, minYear, maxYear, yearOptions, i18n: i18nOverride, inputHint, dayDateFormat, dayDateFormats, weekStartsOn, showRollingPresets, rollingDayOptions, }: DateSelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=date-selector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-selector.d.ts","sourceRoot":"","sources":["../../../src/components/date-selector/date-selector.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAqC,KAAK,iBAAiB,EAAsD,MAAM,uBAAuB,CAAC;AAItJ;;GAEG;AACH,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,UAAiB,EACjB,WAAW,EACX,iBAAyB,EACzB,iBAAwB,EACxB,UAAU,EACV,SAAgB,EAChB,aAAoB,EACpB,aAAqB,EACrB,KAAK,EACL,SAAS,EACT,SAAa,EACb,QAAQ,EACR,OAAc,EACd,OAAc,EACd,WAAW,EACX,IAAI,EAAE,YAAY,EAClB,SAAS,EACT,aAA4B,EAC5B,cAAc,EACd,YAAY,EACZ,kBAA0B,EAC1B,iBAAqD,GACxD,EAAE,iBAAiB,2CA6TnB"}

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