@wheelhouse/ui 0.2.2 → 0.2.4

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

@@ -0,0 +1,191 @@
+'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, useContext, useLayoutEffect, useMemo, useState } from 'react';
+import { parse } from 'date-fns';
+import { I18nContext, useTranslation } from 'react-i18next';
+import { cn } from '../../lib/utils';
+import { Button } from '../../components/button';
+import { Input } from '../../components/input';
+import { ScrollArea } from '../../components/scroll-area';
+import { Tabs, TabsList, TabsTrigger } from '../../components/tabs';
+import { X } from 'lucide-react';
+import { DateSelectorContext } from './date-selector-context';
+import { DateSelectorDayPicker, DateSelectorFilterToggle, DateSelectorGranularityTabs, DateSelectorPeriodGrid, DateSelectorPeriodTabs, DateSelectorYearList, } from './date-selector-parts';
+import { getDateSelectorDefaultI18n } from './date-selector-default-i18n';
+import { buildDateSelectorI18nFromT, registerDateSelectorI18n } from './date-selector-i18n.shared';
+import { DATE_SELECTOR_NAMESPACE } from './date-selector-i18n-resources';
+import { DATE_SELECTOR_ROLLING_DAY_OPTIONS, DATE_SELECTOR_ROLLING_MONTH_OPTIONS, DATE_SELECTOR_ROLLING_QUARTER_OPTIONS, DATE_SELECTOR_ROLLING_YEAR_OPTIONS, } 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, i18nInstance: i18nInstanceProp, inputHint, dayDateFormat = 'MM/dd/yyyy', dayDateFormats, weekStartsOn, showRollingPresets = false, rollingDayOptions = DATE_SELECTOR_ROLLING_DAY_OPTIONS, rollingMonthOptions = DATE_SELECTOR_ROLLING_MONTH_OPTIONS, rollingQuarterOptions = DATE_SELECTOR_ROLLING_QUARTER_OPTIONS, rollingYearOptions = DATE_SELECTOR_ROLLING_YEAR_OPTIONS, fillHeight = false, separateDayPeriod = false, }) {
+    // Resolve the i18next instance: explicit prop wins, then nearest I18nextProvider, else a package default
+    // (bundled `dateSelector` resources) so the block works without a provider in tests / minimal apps.
+    const i18nFromCtx = useContext(I18nContext)?.i18n;
+    const i18nResolved = i18nInstanceProp ?? i18nFromCtx ?? getDateSelectorDefaultI18n();
+    // Merge built-in locale JSON into this instance once per instance; layout effect so bundles exist before paint.
+    useLayoutEffect(() => {
+        registerDateSelectorI18n(i18nResolved);
+    }, [i18nResolved]);
+    // Namespace `dateSelector`; pass `i18n` explicitly so it matches `i18nResolved`. Suspense off for predictable SSR/story usage.
+    const { t } = useTranslation(DATE_SELECTOR_NAMESPACE, {
+        i18n: i18nResolved,
+        useSuspense: false,
+    });
+    const translatedI18n = useMemo(() => buildDateSelectorI18nFromT(t), [t]);
+    // Optional `i18n` prop still overrides individual strings without replacing i18next setup.
+    const mergedI18n = useMemo(() => ({ ...translatedI18n, ...i18nOverride }), [translatedI18n, 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, rollingUnit, rollingCount, applyRollingPreset, enterCustomRange, syncInternalFromParsedValue, } = selector;
+    const optionsForRollingUnit = useCallback((unit) => {
+        if (unit === 'day')
+            return rollingDayOptions;
+        if (unit === 'month')
+            return rollingMonthOptions;
+        if (unit === 'quarter')
+            return rollingQuarterOptions;
+        return rollingYearOptions;
+    }, [rollingDayOptions, rollingMonthOptions, rollingQuarterOptions, rollingYearOptions]);
+    const rollingChipOptions = useMemo(() => [...optionsForRollingUnit(rollingUnit)], [rollingUnit, optionsForRollingUnit]);
+    const rollingChipLabel = useCallback((count) => {
+        if (rollingUnit === 'month') {
+            return count === 1 ? mergedI18n.rollingMonthChipSingle : mergedI18n.rollingMonthsChip.replace('{{count}}', String(count));
+        }
+        if (rollingUnit === 'quarter') {
+            return count === 1 ? mergedI18n.rollingQuarterChip : mergedI18n.rollingQuartersChip.replace('{{count}}', String(count));
+        }
+        if (rollingUnit === 'year') {
+            return count === 1 ? mergedI18n.rollingYearChip : mergedI18n.rollingYearsChip.replace('{{count}}', String(count));
+        }
+        return mergedI18n.rollingDaysChip.replace('{{count}}', String(count));
+    }, [mergedI18n, rollingUnit]);
+    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]', fillHeight ? 'flex h-full min-h-0 flex-col gap-4' : 'space-y-2', className), children: [label && (_jsx("h3", { className: "shrink-0 text-sm font-medium", "data-slot": "data-selector-label", children: label })), showRollingPresets && (_jsxs("div", { className: cn('shrink-0', fillHeight ? 'space-y-4' : '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') {
+                                    const opts = optionsForRollingUnit(rollingUnit);
+                                    const count = rollingCount !== undefined && opts.includes(rollingCount) ? rollingCount : opts[0];
+                                    applyRollingPreset('rolling-next', rollingUnit, count);
+                                }
+                                else if (newValue === 'rolling-last') {
+                                    const opts = optionsForRollingUnit(rollingUnit);
+                                    const count = rollingCount !== undefined && opts.includes(rollingCount) ? rollingCount : opts[0];
+                                    applyRollingPreset('rolling-last', rollingUnit, count);
+                                }
+                                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') && (_jsxs("div", { className: "space-y-2", "data-slot": "date-selector-rolling-value", children: [_jsx(Tabs, { className: "w-full", value: rollingUnit, onValueChange: (v) => {
+                                        if (!v)
+                                            return;
+                                        const unit = v;
+                                        const opts = optionsForRollingUnit(unit);
+                                        const count = rollingCount !== undefined && opts.includes(rollingCount) ? rollingCount : opts[0];
+                                        applyRollingPreset(selectionMode === 'rolling-last' ? 'rolling-last' : 'rolling-next', unit, count);
+                                    }, children: _jsxs(TabsList, { className: "grid h-auto min-h-9 w-full min-w-0 grid-cols-2 gap-1 bg-muted/60 p-[3px] sm:grid-cols-4", children: [_jsx(TabsTrigger, { value: "day", className: "min-w-0 px-2 py-1 text-center font-normal", children: mergedI18n.rollingUnitTabs.days }), _jsx(TabsTrigger, { value: "month", className: "min-w-0 px-2 py-1 text-center font-normal", children: mergedI18n.rollingUnitTabs.months }), _jsx(TabsTrigger, { value: "quarter", className: "min-w-0 px-2 py-1 text-center font-normal", children: mergedI18n.rollingUnitTabs.quarters }), _jsx(TabsTrigger, { value: "year", className: "min-w-0 px-2 py-1 text-center font-normal", children: mergedI18n.rollingUnitTabs.years })] }) }), _jsx("div", { className: cn('grid gap-2', rollingChipOptions.length <= 4 ? 'grid-cols-2 sm:grid-cols-4' : 'grid-cols-3 sm:grid-cols-4'), children: rollingChipOptions.map((c) => (_jsx(Button, { type: "button", size: "sm", className: "w-full min-w-0", variant: rollingCount === c ? 'default' : 'outline', onClick: () => applyRollingPreset(selectionMode === 'rolling-last' ? 'rolling-last' : 'rolling-next', rollingUnit, c), children: rollingChipLabel(c) }, c))) })] }))] })), showOperators && !hideOperatorsForRolling && (_jsx(DateSelectorFilterToggle, { className: "shrink-0", value: filterType, onChange: setFilterType, showBetween: allowRange, presetMode: presetMode })), showInput && !showRollingPresets && summaryInput, (!showRollingPresets || selectionMode === 'custom') &&
+                    (separateDayPeriod ? (_jsxs("div", { className: "flex w-full shrink-0 flex-wrap items-stretch gap-2", children: [(!periodTypes?.length || periodTypes.includes('day')) && (_jsx(Button, { type: "button", variant: periodType === 'day' ? 'default' : 'outline', size: "sm", className: "h-9 shrink-0 px-4", onClick: () => setPeriodType('day'), children: mergedI18n.periodTypes.day })), _jsx("div", { className: "min-w-0 flex-1", children: _jsx(DateSelectorGranularityTabs, { periodType: periodType, onChange: setPeriodType, periodTypes: periodTypes?.filter((p) => p !== 'day') }) })] })) : (_jsx(DateSelectorPeriodTabs, { className: "shrink-0", value: periodType, onChange: setPeriodType, periodTypes: periodTypes }))), periodType === 'day' && showDayCalendar && (_jsx("div", { className: cn('w-full pb-1', fillHeight && 'flex min-h-0 flex-1 flex-col'), 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: cn('-mr-3 flex w-full flex-col', fillHeight ? 'min-h-0 flex-1' : ''), children: _jsxs(ScrollArea, { className: cn('min-h-0 w-full pe-3', fillHeight ? 'flex-1 basis-0' : 'h-[200px]'), 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 → blocks}/date-selector/date-selector.stories.d.ts

@@ -14,6 +14,8 @@ type DateSelectorStoryArgs = Omit<Partial<DateSelectorProps>, 'value' | 'onChang
     periodTypesPreset?: PeriodTypesPreset;
     presetMode?: DateSelectorFilterType | 'unset';
     weekStartsOn?: 'unset' | NonNullable<DateSelectorProps['weekStartsOn']>;
+    /** Pattern 2 only: when true, `i18nInstance` is omitted so the Storybook toolbar locale applies. */
+    useSharedToolbarI18n?: boolean;
 };
 /** Storybook-only shell: maps story args to {@link DateSelector} and wires controlled state. */
 declare function DateSelectorStorybook(args: DateSelectorStoryArgs): import("react/jsx-runtime").JSX.Element;
@@ -113,6 +115,15 @@ declare const meta: {
         i18n: {
             control: false;
         };
+        i18nInstance: {
+            control: false;
+        };
+        useSharedToolbarI18n: {
+            control: false;
+            table: {
+                disable: true;
+            };
+        };
         yearOptions: {
             control: false;
         };
@@ -132,4 +143,7 @@ export declare const PresetBetween: Story;
 export declare const NoInput: Story;
 export declare const NoOperators: Story;
 export declare const RollingPresets: Story;
+export declare const PatternPartialI18nProp: Story;
+export declare const PatternDedicatedI18nInstance: Story;
+export declare const PatternGlobalLocaleToolbar: Story;
 //# sourceMappingURL=date-selector.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-selector.stories.d.ts","sourceRoot":"","sources":["../../../src/blocks/date-selector/date-selector.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOvD,OAAO,KAAK,EAAE,sBAAsB,EAAkD,iBAAiB,EAAqB,MAAM,GAAG,CAAC;AAEtI,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;IACxE,oGAAoG;IACpG,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC;AAgGF,gGAAgG;AAChG,iBAAS,qBAAqB,CAAC,IAAI,EAAE,qBAAqB,2CAIzD;AAED,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAoD+C,iBAAiB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsB9B,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;AAkBF,eAAO,MAAM,sBAAsB,EAAE,KA2CpC,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAqD1C,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KA0CxC,CAAC"}

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

@@ -0,0 +1,299 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createInstance } from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { useState } from 'react';
+import { DATE_SELECTOR_NAMESPACE, DATE_SELECTOR_RESOURCE_BUNDLES, DateSelector, DEFAULT_DATE_SELECTOR_I18N } from '.';
+const PERIOD_TYPE_PRESETS = {
+    all: undefined,
+    day: ['day'],
+    'day-month': ['day', 'month'],
+    month: ['month'],
+    quarter: ['quarter'],
+    year: ['year'],
+};
+function JsonBlock({ label, value }) {
+    return (_jsxs("div", { className: "mt-3 space-y-1.5", children: [_jsx("div", { className: "text-xs font-medium text-foreground", children: label }), _jsx("pre", { className: "max-h-64 overflow-auto rounded-md border border-border bg-background p-3 font-mono text-[11px] leading-relaxed whitespace-pre-wrap text-foreground", children: JSON.stringify(value, null, 2) })] }));
+}
+/** Canvas + Docs intro for the three i18n pattern examples (share with teammates). */
+function StoryIntro({ title, description, children }) {
+    return (_jsxs("div", { className: "flex w-full max-w-lg flex-col gap-4", children: [_jsxs("div", { className: "rounded-md border border-border bg-muted/40 p-4 text-sm leading-relaxed text-foreground", children: [_jsx("h2", { className: "mb-2 font-semibold tracking-tight", children: title }), _jsx("div", { className: "space-y-2 text-muted-foreground [&_code]:rounded [&_code]:bg-background [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-xs", children: description })] }), children] }));
+}
+const demoJapaneseBundle = {
+    ...DEFAULT_DATE_SELECTOR_I18N,
+    selectDate: '日付を選択',
+    apply: '適用',
+    cancel: 'キャンセル',
+    clear: 'クリア',
+    today: '今日',
+    filterTypes: {
+        is: '次と一致',
+        before: 'より前',
+        after: 'より後',
+        between: '範囲',
+    },
+    periodTypes: {
+        day: '日',
+        month: '月',
+        quarter: '四半期',
+        year: '年',
+    },
+    months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+    monthsShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+    quarters: ['Q1', 'Q2', 'Q3', 'Q4'],
+    weekdays: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
+    weekdaysShort: ['日', '月', '火', '水', '木', '金', '土'],
+    placeholder: '日付を選択…',
+    rangePlaceholder: '期間を選択…',
+    rollingWindowTabs: { next: '次へ', last: '前へ', custom: 'カスタム' },
+    rollingSummaryNext: '次の{{count}}日間',
+    rollingSummaryLast: '過去{{count}}日間',
+    rollingDaysChip: '{{count}}日',
+};
+/** Isolated i18next instance for “own language pack” demos (not the Storybook toolbar instance). */
+const jaDemoI18n = createInstance();
+jaDemoI18n.use(initReactI18next).init({
+    lng: 'ja',
+    fallbackLng: 'ja',
+    supportedLngs: ['ja'],
+    interpolation: { escapeValue: false },
+    react: { useSuspense: false },
+    ns: [DATE_SELECTOR_NAMESPACE],
+    defaultNS: DATE_SELECTOR_NAMESPACE,
+    resources: {
+        ja: { [DATE_SELECTOR_NAMESPACE]: demoJapaneseBundle },
+    },
+});
+const pattern1DefaultI18n = {
+    filterTypes: {
+        is: 'equals',
+        before: 'before',
+        after: 'after',
+        between: 'between',
+    },
+    placeholder: 'Pick a date…',
+    rangePlaceholder: 'Pick a start and end…',
+};
+function storyArgsToProps(args) {
+    const { periodTypesPreset = 'all', presetMode, weekStartsOn, useSharedToolbarI18n: _strip, ...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: 'Blocks/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 },
+        i18nInstance: { control: false },
+        useSharedToolbarI18n: { control: false, table: { disable: true } },
+        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',
+    },
+};
+const docPartialProp = `
+Use the **\`i18n\`** prop to override specific strings (a \`Partial<DateSelectorI18nConfig>\`). Values merge on top of whatever
+the active i18next locale resolves. Good for product wording, A/B copy, or apps that do not want to register JSON bundles.
+`;
+const docDedicatedInstance = `
+Create an **\`i18next\` instance** (e.g. \`createInstance()\`), load your \`dateSelector\` namespace resources, and pass
+**\`i18nInstance={…}\`** so this block uses that instance—useful for embeds, tests, or a locale that only exists in one subtree.
+`;
+const docGlobalToolbar = `
+**Production-style path:** one app-wide \`i18n\`, call \`registerDateSelectorI18n(appI18n)\` at startup, then
+**\`changeLanguage\`** (or your locale switcher). In Storybook, use the **Locale** toolbar: choose **Português** to see the
+built-in \`pt\` bundle—no extra props on \`DateSelector\`.
+`;
+export const PatternPartialI18nProp = {
+    name: 'i18n · Partial prop overrides',
+    parameters: {
+        docs: {
+            description: {
+                story: docPartialProp,
+            },
+        },
+    },
+    args: {
+        label: 'Due date',
+        i18n: pattern1DefaultI18n,
+    },
+    argTypes: {
+        i18n: {
+            control: 'object',
+            description: 'Partial `DateSelectorI18nConfig`. Edits apply live (same data as the JSON panel above).',
+        },
+        i18nInstance: { table: { disable: true } },
+    },
+    render: function PatternPartialI18nPropRender(args) {
+        const [value, setValue] = useState();
+        const props = storyArgsToProps(args);
+        return (_jsx(StoryIntro, { title: "Pattern 1 \u2014 Partial `i18n` prop", description: _jsxs(_Fragment, { children: [_jsxs("p", { children: ["Override individual labels without touching i18next resources. Merges on top of the current locale from ", _jsx("code", { children: "t()" }), "."] }), _jsxs("p", { children: [_jsx("strong", { children: "Controls \u2192 `i18n`" }), " is a JSON object editor for this prop. ", _jsx("code", { children: "i18nInstance" }), " cannot appear in Controls\u2014it is a runtime i18next instance, not serializable JSON (see Pattern 2)."] }), _jsx(JsonBlock, { label: "Live JSON: `i18n` prop (synced with Controls)", value: args.i18n ?? {} })] }), children: _jsx(DateSelector, { ...props, value: value, onChange: setValue }) }));
+    },
+};
+export const PatternDedicatedI18nInstance = {
+    name: 'i18n · Dedicated instance (Japanese)',
+    parameters: {
+        docs: {
+            description: {
+                story: docDedicatedInstance,
+            },
+        },
+    },
+    args: {
+        label: '期間',
+        useSharedToolbarI18n: false,
+    },
+    argTypes: {
+        useSharedToolbarI18n: {
+            control: 'boolean',
+            table: { disable: false },
+            description: 'Off: pass `i18nInstance={jaDemoI18n}` (Japanese bundle below). On: omit `i18nInstance` and use the Storybook Locale toolbar instead.',
+        },
+        i18n: { table: { disable: true } },
+        i18nInstance: { table: { disable: true } },
+    },
+    render: function PatternDedicatedI18nInstanceRender(args) {
+        const [value, setValue] = useState();
+        const props = storyArgsToProps(args);
+        const useShared = args.useSharedToolbarI18n === true;
+        return (_jsx(StoryIntro, { title: "Pattern 2 \u2014 Dedicated `i18n` instance", description: _jsxs(_Fragment, { children: [_jsxs("p", { children: ["This story uses a ", _jsx("strong", { children: "separate" }), " ", _jsx("code", { children: "i18next" }), " instance (", _jsx("code", { children: "jaDemoI18n" }), ") with a full", ' ', _jsx("code", { children: "dateSelector" }), " resource for Japanese. You cannot edit ", _jsx("code", { children: "i18nInstance" }), " in Controls\u2014it is not JSON."] }), _jsxs("p", { children: ["Toggle ", _jsx("strong", { children: "Use shared toolbar i18n" }), " to compare: same component without ", _jsx("code", { children: "i18nInstance" }), ", so language comes from the toolbar (Locale)."] }), _jsx(JsonBlock, { label: "JSON shape: resources.ja.dateSelector (loaded into jaDemoI18n)", value: { ja: { [DATE_SELECTOR_NAMESPACE]: demoJapaneseBundle } } }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Code: ", _jsxs("code", { children: ["i18nInstance=", '{jaDemoI18n}'] }), " \u2014 holds the instance returned by ", _jsx("code", { children: "createInstance()" }), ", not a plain object."] })] }), children: _jsx(DateSelector, { ...props, i18nInstance: useShared ? undefined : jaDemoI18n, value: value, onChange: setValue }) }));
+    },
+};
+export const PatternGlobalLocaleToolbar = {
+    name: 'i18n · Shared locale (toolbar)',
+    parameters: {
+        docs: {
+            description: {
+                story: docGlobalToolbar,
+            },
+        },
+    },
+    args: {
+        label: 'Data',
+    },
+    argTypes: {
+        i18n: { table: { disable: true } },
+    },
+    render: function PatternGlobalLocaleToolbarRender(args) {
+        const [value, setValue] = useState();
+        const props = storyArgsToProps(args);
+        return (_jsx(StoryIntro, { title: "Pattern 3 \u2014 Global locale (Storybook toolbar)", description: _jsxs(_Fragment, { children: [_jsxs("p", { children: [_jsx("strong", { children: "No" }), " ", _jsx("code", { children: "i18n" }), " or ", _jsx("code", { children: "i18nInstance" }), " props: the component uses the nearest", ' ', _jsx("code", { children: "I18nextProvider" }), " from Storybook preview (shared ", _jsx("code", { children: "storybookI18n" }), ")."] }), _jsxs("p", { children: ["Use the Storybook ", _jsx("strong", { children: "Locale" }), " toolbar and select ", _jsx("strong", { children: "Portugu\u00EAs" }), " \u2014 the built-in ", _jsx("code", { children: "pt" }), " bundle ships with ", _jsx("code", { children: "@wheelhouse/ui" }), " and is registered on mount."] }), _jsx(JsonBlock, { label: "Reference JSON: built-in `pt` bundle (namespace dateSelector)", value: { pt: { [DATE_SELECTOR_NAMESPACE]: DATE_SELECTOR_RESOURCE_BUNDLES.pt } } })] }), children: _jsx(DateSelector, { ...props, value: value, onChange: setValue }) }));
+    },
+};

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

@@ -0,0 +1,11 @@
+export { computeRollingDateRange, computeRollingPresetRange, DATE_SELECTOR_COMPACT_DAY_FORMAT, formatDateValue, formatRollingRangeTooltipDetail, getRollingBarShortLabel, getRollingSummaryLabel, resolveRollingCount, resolveRollingUnit, } from './date-selector-value';
+export { getDateSelectorDefaultI18n } from './date-selector-default-i18n';
+export { buildDateSelectorI18nFromT, registerDateSelectorI18n } from './date-selector-i18n.shared';
+export { DATE_SELECTOR_NAMESPACE, DATE_SELECTOR_RESOURCE_BUNDLES } from './date-selector-i18n-resources';
+export type { DateSelectorResourceBundle } from './date-selector-i18n-resources';
+export { DATE_SELECTOR_ROLLING_DAY_OPTIONS, DATE_SELECTOR_ROLLING_MONTH_OPTIONS, DATE_SELECTOR_ROLLING_QUARTER_OPTIONS, DATE_SELECTOR_ROLLING_YEAR_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, FormatDateValueOptions, DateSelectorPeriodType, DateSelectorProps, DateSelectorRollingDays, DateSelectorRollingMonths, DateSelectorRollingQuarters, DateSelectorRollingUnit, DateSelectorRollingYears, DateSelectorSelectionMode, DateSelectorValue, UseDateSelectorOptions, } from './date-selector-types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/date-selector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,uBAAuB,EACvB,yBAAyB,EACzB,gCAAgC,EAChC,eAAe,EACf,+BAA+B,EAC/B,uBAAuB,EACvB,sBAAsB,EACtB,mBAAmB,EACnB,kBAAkB,GACrB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,0BAA0B,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACnG,OAAO,EAAE,uBAAuB,EAAE,8BAA8B,EAAE,MAAM,gCAAgC,CAAC;AACzG,YAAY,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AACjF,OAAO,EACH,iCAAiC,EACjC,mCAAmC,EACnC,qCAAqC,EACrC,kCAAkC,EAClC,0BAA0B,GAC7B,MAAM,uBAAuB,CAAC;AAC/B,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,sBAAsB,EACtB,iBAAiB,EACjB,uBAAuB,EACvB,yBAAyB,EACzB,2BAA2B,EAC3B,uBAAuB,EACvB,wBAAwB,EACxB,yBAAyB,EACzB,iBAAiB,EACjB,sBAAsB,GACzB,MAAM,uBAAuB,CAAC"}

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

@@ -0,0 +1,8 @@
+export { computeRollingDateRange, computeRollingPresetRange, DATE_SELECTOR_COMPACT_DAY_FORMAT, formatDateValue, formatRollingRangeTooltipDetail, getRollingBarShortLabel, getRollingSummaryLabel, resolveRollingCount, resolveRollingUnit, } from './date-selector-value';
+export { getDateSelectorDefaultI18n } from './date-selector-default-i18n';
+export { buildDateSelectorI18nFromT, registerDateSelectorI18n } from './date-selector-i18n.shared';
+export { DATE_SELECTOR_NAMESPACE, DATE_SELECTOR_RESOURCE_BUNDLES } from './date-selector-i18n-resources';
+export { DATE_SELECTOR_ROLLING_DAY_OPTIONS, DATE_SELECTOR_ROLLING_MONTH_OPTIONS, DATE_SELECTOR_ROLLING_QUARTER_OPTIONS, DATE_SELECTOR_ROLLING_YEAR_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 → blocks}/date-selector/use-date-selector.d.ts

@@ -1,5 +1,5 @@
 import { type SetStateAction } from 'react';
-import type { DateSelectorFilterType, DateSelectorPeriodType, DateSelectorRollingDays, DateSelectorValue, UseDateSelectorOptions } from './date-selector-types';
+import type { DateSelectorFilterType, DateSelectorPeriodType, DateSelectorRollingUnit, 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}.
@@ -30,7 +30,8 @@ export declare function useDateSelector({ value, onChange, defaultPeriodType, de
     currentValue: DateSelectorValue;
     allowRange: boolean;
     selectionMode: import("./date-selector-types").DateSelectorSelectionMode;
-    rollingDays: 3 | 7 | 14 | 30 | 60 | 90 | 180 | 365 | undefined;
+    rollingUnit: DateSelectorRollingUnit;
+    rollingCount: number | undefined;
     setPeriodType: (type: DateSelectorPeriodType) => void;
     setFilterType: (type: DateSelectorFilterType) => void;
     setSelectedDate: (action: SetStateAction<Date | undefined>) => void;
@@ -43,7 +44,7 @@ export declare function useDateSelector({ value, onChange, defaultPeriodType, de
     handleYearSelect: (year: number) => void;
     isInRange: (year: number, periodValue: number) => boolean;
     isYearInRange: (year: number) => boolean;
-    applyRollingPreset: (mode: "rolling-next" | "rolling-last", days: DateSelectorRollingDays) => void;
+    applyRollingPreset: (mode: "rolling-next" | "rolling-last", unit: DateSelectorRollingUnit, count: number) => void;
     enterCustomRange: () => void;
     syncInternalFromParsedValue: (parsed: DateSelectorValue) => void;
 };

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-date-selector.d.ts","sourceRoot":"","sources":["../../../src/blocks/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;;;;;;;;;;;;;;;;;;;;;;;;0BA+PV,sBAAsB;0BAoBtB,sBAAsB;8BArMpB,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;;0BA8EhE,IAAI;+BAgCH,MAAM,eAAe,MAAM;6BA0C3B,MAAM;sBA6EN,MAAM,eAAe,MAAM;0BAW3B,MAAM;+BArLN,cAAc,GAAG,cAAc,QAAQ,uBAAuB,SAAS,MAAM;;0CA/E3E,iBAAiB;EAiTjC"}