@wheelhouse/ui 0.1.6 → 0.2.1

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

@@ -0,0 +1,131 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { addMonths, isSameMonth, subMonths } from 'date-fns';
+import { DayButton, getDefaultClassNames } from 'react-day-picker';
+import { useIsMobile } from '../../hooks/use-mobile';
+import { cn } from '../../lib/utils';
+import { Button } from '../button';
+import { Calendar, CalendarDayButton } from '../calendar';
+import { Tabs, TabsList, TabsTrigger } from '../tabs';
+import { ChevronLeft, ChevronRight, CornerUpLeft, CornerUpRight } from 'lucide-react';
+import { useDateSelectorContext } from './date-selector-context';
+export function DateSelectorFilterToggle({ value, onChange, showBetween = true, showIs = true, presetMode, className }) {
+    const { i18n } = useDateSelectorContext();
+    const isDisabled = presetMode !== undefined;
+    return (_jsx(Tabs, { className: cn('w-full', className), value: value, onValueChange: (newValue) => {
+            if (!isDisabled && newValue) {
+                onChange(newValue);
+            }
+        }, children: _jsxs(TabsList, { className: cn('flex h-9 w-full min-w-0 gap-1 bg-muted/80 p-[3px]', isDisabled && 'pointer-events-none opacity-50'), children: [showIs && (_jsx(TabsTrigger, { value: "is", "aria-label": i18n.filterTypes.is, className: "min-w-0 flex-1 px-1 py-1 text-center font-normal sm:px-2.5", children: i18n.filterTypes.is })), _jsx(TabsTrigger, { value: "before", "aria-label": i18n.filterTypes.before, className: "min-w-0 flex-1 px-1 py-1 text-center font-normal sm:px-2.5", children: i18n.filterTypes.before }), _jsx(TabsTrigger, { value: "after", "aria-label": i18n.filterTypes.after, className: "min-w-0 flex-1 px-1 py-1 text-center font-normal sm:px-2.5", children: i18n.filterTypes.after }), showBetween && (_jsx(TabsTrigger, { value: "between", "aria-label": i18n.filterTypes.between, className: "min-w-0 flex-1 px-1 py-1 text-center font-normal sm:px-2.5", children: i18n.filterTypes.between }))] }) }));
+}
+export function DateSelectorPeriodTabs({ value, onChange, periodTypes, className }) {
+    const { i18n } = useDateSelectorContext();
+    const tabs = [
+        { value: 'day', label: i18n.periodTypes.day },
+        { value: 'month', label: i18n.periodTypes.month },
+        { value: 'quarter', label: i18n.periodTypes.quarter },
+        { value: 'year', label: i18n.periodTypes.year },
+    ];
+    return (_jsx("div", { className: cn('w-full', className), children: _jsx(Tabs, { className: "w-full", value: value, onValueChange: (newValue) => {
+                if (newValue) {
+                    onChange(newValue);
+                }
+            }, children: _jsx(TabsList, { className: "flex h-9 w-full min-w-0 gap-1 bg-muted/80 p-[3px]", children: tabs.map((tab) => {
+                    const disabled = Boolean(periodTypes?.length && !periodTypes.includes(tab.value));
+                    return (_jsx(TabsTrigger, { value: tab.value, disabled: disabled, "aria-label": tab.label, className: "min-w-0 flex-1 px-1 py-1 text-center font-normal sm:px-2.5", children: tab.label }, tab.value));
+                }) }) }) }));
+}
+export function DateSelectorDayPicker({ currentMonth, selectedDate, selectedEndDate, onDayClick, isRange, onDayHover, hoverDate, showTwoMonths = false, weekStartsOn, onMonthChange, className, }) {
+    const { i18n } = useDateSelectorContext();
+    const isMobile = useIsMobile();
+    const selected = isRange
+        ? selectedDate && selectedEndDate
+            ? { from: selectedDate, to: selectedEndDate }
+            : selectedDate
+                ? { from: selectedDate, to: hoverDate || selectedDate }
+                : undefined
+        : selectedDate;
+    const handleSelect = (date) => {
+        if (!date) {
+            return;
+        }
+        if (isRange && 'from' in date) {
+            if (date.from && !date.to) {
+                onDayClick(date.from);
+            }
+            else if (date.from && date.to) {
+                onDayClick(date.to);
+            }
+        }
+        else if (!isRange && date instanceof Date) {
+            onDayClick(date);
+        }
+    };
+    const CustomDayButton = useCallback((props) => {
+        return (_jsx(CalendarDayButton, { ...props, onMouseEnter: () => {
+                if (isRange && onDayHover && props.day) {
+                    onDayHover(props.day.date);
+                }
+            }, onMouseLeave: () => {
+                if (isRange && onDayHover) {
+                    onDayHover(undefined);
+                }
+            } }));
+    }, [isRange, onDayHover]);
+    const formatters = {
+        formatWeekdayName: (date) => {
+            const dayIndex = date.getDay();
+            return i18n.weekdaysShort[dayIndex] || i18n.weekdays[dayIndex];
+        },
+        formatMonthCaption: (date) => {
+            const monthIndex = date.getMonth();
+            const year = date.getFullYear();
+            return `${i18n.months[monthIndex]} ${year}`;
+        },
+    };
+    const monthCount = isMobile ? 1 : showTwoMonths ? 2 : 1;
+    const secondMonth = addMonths(currentMonth, 1);
+    const captionClass = 'truncate text-center text-sm font-medium';
+    const monthNavRow = onMonthChange && (_jsxs("div", { className: "flex w-full min-w-0 items-center gap-2 pb-2", children: [_jsx(Button, { type: "button", variant: "ghost", className: "size-8.5 shrink-0", onClick: () => onMonthChange(subMonths(currentMonth, 1)), "aria-label": "Previous month", children: _jsx(ChevronLeft, { className: "size-4" }) }), monthCount === 2 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(captionClass, 'min-w-0 flex-1'), children: formatters.formatMonthCaption(currentMonth) }), _jsx("div", { className: cn(captionClass, 'min-w-0 flex-1'), children: formatters.formatMonthCaption(secondMonth) })] })) : (_jsx("div", { className: cn(captionClass, 'min-w-0 flex-1'), children: formatters.formatMonthCaption(currentMonth) })), _jsx(Button, { type: "button", variant: "ghost", className: "size-8.5 shrink-0", onClick: () => onMonthChange(addMonths(currentMonth, 1)), "aria-label": "Next month", children: _jsx(ChevronRight, { className: "size-4" }) }), (() => {
+                const today = new Date();
+                if (isSameMonth(currentMonth, today))
+                    return null;
+                const isFuture = currentMonth > today;
+                return (_jsx(Button, { type: "button", variant: "ghost", className: "size-8.5 shrink-0", onClick: () => onMonthChange(new Date()), title: i18n.today, children: isFuture ? _jsx(CornerUpLeft, { className: "size-4" }) : _jsx(CornerUpRight, { className: "size-4" }) }));
+            })()] }));
+    const rdpClassNames = getDefaultClassNames();
+    const calendarClassNames = {
+        root: cn('w-full min-w-0', rdpClassNames.root),
+        months: 'flex flex-wrap items-start justify-between gap-5 w-full',
+        month: cn('flex w-full min-w-0 flex-1 flex-col items-center', rdpClassNames.month),
+        month_grid: cn('w-full min-w-0 border-collapse', rdpClassNames.month_grid),
+        nav: 'hidden',
+        month_caption: 'hidden',
+    };
+    return (_jsxs("div", { className: cn('flex w-full flex-col', className), children: [monthNavRow, isRange ? (_jsx(Calendar, { month: currentMonth, mode: "range", selected: selected, onSelect: handleSelect, numberOfMonths: monthCount, showOutsideDays: true, weekStartsOn: weekStartsOn, formatters: formatters, className: "w-full shrink-0 p-0", classNames: calendarClassNames, components: {
+                    DayButton: CustomDayButton,
+                } })) : (_jsx(Calendar, { month: currentMonth, mode: "single", selected: selected, onSelect: handleSelect, numberOfMonths: monthCount, showOutsideDays: true, weekStartsOn: weekStartsOn, formatters: formatters, className: "w-full shrink-0 p-0", classNames: calendarClassNames, components: {
+                    DayButton: CustomDayButton,
+                } }))] }));
+}
+export function DateSelectorPeriodGrid({ years, items, selectedYear, selectedValue, rangeStart, rangeEnd, isInRange, onSelect, columns, className, }) {
+    return (_jsx("div", { className: cn('w-full space-y-6', className), children: years.map((year) => (_jsxs("div", { children: [_jsx("div", { className: "sticky top-0 z-10 w-full bg-background py-1 text-center text-sm font-medium text-muted-foreground", children: year }), _jsx("div", { className: "grid gap-2", style: {
+                        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+                    }, children: items.map((item, index) => {
+                        const isSelected = selectedYear === year && selectedValue === index;
+                        const isRangeStart = rangeStart?.year === year && rangeStart?.value === index;
+                        const isRangeEnd = rangeEnd?.year === year && rangeEnd?.value === index;
+                        const inRange = isInRange(year, index);
+                        return (_jsx(Button, { size: "sm", variant: isSelected || isRangeStart || isRangeEnd ? 'default' : 'outline', className: cn(inRange && !isSelected && !isRangeStart && !isRangeEnd && 'bg-accent dark:bg-accent/60'), onClick: () => onSelect(year, index), children: item }, item));
+                    }) })] }, year))) }));
+}
+export function DateSelectorYearList({ years, selectedYear, rangeStart, rangeEnd, isYearInRange, onSelect, className }) {
+    return (_jsx("div", { className: cn('grid grid-cols-2 gap-2', className), children: years.map((year) => {
+            const isSelected = selectedYear === year && !rangeStart && !rangeEnd;
+            const isRangeStart = rangeStart?.year === year;
+            const isRangeEnd = rangeEnd?.year === year;
+            const inRange = isYearInRange(year);
+            return (_jsx(Button, { size: "sm", variant: isSelected || isRangeStart || isRangeEnd ? 'default' : 'outline', className: cn(inRange && !isSelected && !isRangeStart && !isRangeEnd && 'bg-accent dark:bg-accent/60'), onClick: () => onSelect(year), children: year }, year));
+        }) }));
+}

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

@@ -0,0 +1,118 @@
+/** Strings and labels for all UI copy in {@link DateSelector}; override partially via {@link DateSelectorProps.i18n}. */
+export interface DateSelectorI18nConfig {
+    selectDate: string;
+    apply: string;
+    cancel: string;
+    clear: string;
+    today: string;
+    filterTypes: {
+        is: string;
+        before: string;
+        after: string;
+        between: string;
+    };
+    periodTypes: {
+        day: string;
+        month: string;
+        quarter: string;
+        year: string;
+    };
+    months: string[];
+    monthsShort: string[];
+    quarters: string[];
+    weekdays: string[];
+    weekdaysShort: string[];
+    placeholder: string;
+    rangePlaceholder: string;
+    rollingWindowTabs: {
+        next: string;
+        last: string;
+        custom: string;
+    };
+    rollingSummaryNext: string;
+    rollingSummaryLast: string;
+    rollingDaysChip: string;
+}
+/** Default English copy for {@link DateSelector}. */
+export declare const DEFAULT_DATE_SELECTOR_I18N: DateSelectorI18nConfig;
+export type DateSelectorPeriodType = 'day' | 'month' | 'quarter' | 'year';
+export type DateSelectorFilterType = 'is' | 'before' | 'after' | 'between';
+export declare const DATE_SELECTOR_ROLLING_DAY_OPTIONS: readonly [3, 7, 14, 30, 60, 90, 180, 365];
+export type DateSelectorRollingDays = (typeof DATE_SELECTOR_ROLLING_DAY_OPTIONS)[number];
+export type DateSelectorSelectionMode = 'custom' | 'rolling-next' | 'rolling-last';
+/** Canonical value emitted by {@link DateSelector} and {@link useDateSelector}; shape depends on `period` and `operator`. */
+export interface DateSelectorValue {
+    period: DateSelectorPeriodType;
+    operator: DateSelectorFilterType;
+    selectionMode?: DateSelectorSelectionMode;
+    rollingDays?: DateSelectorRollingDays;
+    startDate?: Date;
+    endDate?: Date;
+    year?: number;
+    month?: number;
+    quarter?: number;
+    rangeStart?: {
+        year: number;
+        value: number;
+    };
+    rangeEnd?: {
+        year: number;
+        value: number;
+    };
+}
+/** Context passed to subcomponents (variant/size/i18n) from {@link DateSelector}. */
+export interface DateSelectorContextValue {
+    i18n: DateSelectorI18nConfig;
+    variant: 'outline' | 'default';
+    size: 'sm' | 'default' | 'lg';
+}
+/** Options for {@link useDateSelector} (headless state); mirrors the core props of {@link DateSelector} without UI. */
+export interface UseDateSelectorOptions {
+    value?: DateSelectorValue;
+    onChange?: (value: DateSelectorValue) => void;
+    defaultPeriodType?: DateSelectorPeriodType;
+    defaultFilterType?: DateSelectorFilterType;
+    presetMode?: DateSelectorFilterType;
+    allowRange?: boolean;
+    yearRange?: number;
+    baseYear?: number;
+    minYear?: number;
+    maxYear?: number;
+    yearOptions?: readonly number[];
+    periodTypes?: DateSelectorPeriodType[];
+}
+/**
+ * Props for the full {@link DateSelector} UI (filter toggles, optional text input, period tabs, and picker surface).
+ *
+ * **Data model:** `DateSelectorValue` is the emitted filter (period × operator × selection). When `value` is passed,
+ * the hook stays in sync via a derived sync key (controlled). When `value` is omitted, state is internal
+ * (uncontrolled); typed input still calls `onChange` and, for uncontrolled usage, updates the hook via
+ * `syncInternalFromParsedValue`.
+ */
+export interface DateSelectorProps {
+    value?: DateSelectorValue;
+    onChange?: (value: DateSelectorValue) => void;
+    allowRange?: boolean;
+    periodTypes?: DateSelectorPeriodType[];
+    defaultPeriodType?: DateSelectorPeriodType;
+    defaultFilterType?: DateSelectorFilterType;
+    presetMode?: DateSelectorFilterType;
+    showInput?: boolean;
+    showOperators?: boolean;
+    showTwoMonths?: boolean;
+    label?: string;
+    className?: string;
+    yearRange?: number;
+    baseYear?: number;
+    minYear?: number;
+    maxYear?: number;
+    yearOptions?: readonly number[];
+    i18n?: Partial<DateSelectorI18nConfig>;
+    inputHint?: string;
+    dayDateFormat?: string;
+    dayDateFormats?: string[];
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    showRollingPresets?: boolean;
+    rollingDayOptions?: readonly DateSelectorRollingDays[];
+}
+//# sourceMappingURL=date-selector-types.d.ts.map

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

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

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

@@ -0,0 +1,32 @@
+/** Default English copy for {@link DateSelector}. */
+export const DEFAULT_DATE_SELECTOR_I18N = {
+    selectDate: 'Select date',
+    apply: 'Apply',
+    cancel: 'Cancel',
+    clear: 'Clear',
+    today: 'Today',
+    filterTypes: {
+        is: 'is',
+        before: 'before',
+        after: 'after',
+        between: 'between',
+    },
+    periodTypes: {
+        day: 'Day',
+        month: 'Month',
+        quarter: 'Quarter',
+        year: 'Year',
+    },
+    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    quarters: ['Q1', 'Q2', 'Q3', 'Q4'],
+    weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+    placeholder: 'Select date...',
+    rangePlaceholder: 'Select date range...',
+    rollingWindowTabs: { next: 'Next', last: 'Last', custom: 'Custom' },
+    rollingSummaryNext: 'Next {{count}} days',
+    rollingSummaryLast: 'Last {{count}} days',
+    rollingDaysChip: '{{count}} days',
+};
+export const DATE_SELECTOR_ROLLING_DAY_OPTIONS = [3, 7, 14, 30, 60, 90, 180, 365];

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