@wheelhouse/ui 0.2.1 → 0.2.3

package/dist/components/filters/filters.stories.d.ts

@@ -1,8 +1,113 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react';
 import { Filters } from '.';
-declare const meta: Meta<typeof Filters>;
+declare const meta: {
+    title: string;
+    component: typeof Filters;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        className: string;
+        size: "sm";
+        radius: "default";
+        showSearchInput: true;
+        submenuSearchMinOptions: number;
+        allowMultiple: true;
+        menuPopupClassName: string;
+        collapsibleAddFilterGroups: false;
+        defaultAddFilterGroupsCollapsed: false;
+        nestedAddFilterGroups: false;
+        collapseAddButton: false;
+        enableShortcut: false;
+        shortcutKey: string;
+        shortcutLabel: string;
+    };
+    argTypes: {
+        className: {
+            readonly control: "text";
+            readonly description: "Optional class on the filters container.";
+        };
+        size: {
+            readonly control: "inline-radio";
+            readonly options: ("default" | "sm" | "lg")[];
+            readonly description: "Control density for filter rows and add-filter trigger.";
+        };
+        radius: {
+            readonly control: "inline-radio";
+            readonly options: ("default" | "full")[];
+            readonly description: "Corner radius for each filter row’s grouped controls (label, operator, value, remove).";
+        };
+        showSearchInput: {
+            readonly control: "boolean";
+            readonly description: "Search field at the top of the add-filter menu.";
+        };
+        submenuSearchMinOptions: {
+            readonly control: {
+                readonly type: "number";
+                readonly min: 0;
+                readonly max: 100;
+                readonly step: 1;
+            };
+            readonly description: "Minimum options before search in value popovers and add-filter option submenus (0 = always when searchable).";
+        };
+        allowMultiple: {
+            readonly control: "boolean";
+            readonly description: "Allow more than one filter per field key.";
+        };
+        menuPopupClassName: {
+            readonly control: "text";
+            readonly description: "Extra classes on the add-filter dropdown surface.";
+        };
+        collapsibleAddFilterGroups: {
+            readonly control: "boolean";
+            readonly description: "Grouped config only: accordion headers per section (ignored when **Nested** mode is used in grouped story).";
+        };
+        defaultAddFilterGroupsCollapsed: {
+            readonly control: "boolean";
+            readonly description: "Grouped + accordion: start every section collapsed when the menu opens.";
+        };
+        nestedAddFilterGroups: {
+            readonly control: "boolean";
+            readonly description: "Grouped config only: category rows open a side submenu (ignored when grouped story uses **Grouped menu mode**).";
+        };
+        collapseAddButton: {
+            readonly control: "boolean";
+            readonly description: "Collapse the add-filter control into a compact trigger when filters exist.";
+        };
+        enableShortcut: {
+            readonly control: "boolean";
+            readonly description: "Open add-filter menu with a global key (see shortcut keys).";
+        };
+        shortcutKey: {
+            readonly control: "text";
+            readonly description: "Key to listen for when **Enable shortcut** is on (e.g. `f`).";
+        };
+        shortcutLabel: {
+            readonly control: "text";
+            readonly description: "Label shown in the add-filter menu for the shortcut (e.g. `F`).";
+        };
+        filters: {
+            readonly control: false;
+        };
+        fields: {
+            readonly control: false;
+        };
+        onChange: {
+            readonly control: false;
+        };
+        trigger: {
+            readonly control: false;
+        };
+        i18n: {
+            readonly control: false;
+        };
+    };
+};
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithOneFilter: Story;
+export declare const GroupedFieldsAndSearch: Story;
+export declare const DateMetricAdjRevpar: Story;
 //# sourceMappingURL=filters.stories.d.ts.map

package/dist/components/filters/filters.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filters.stories.d.ts","sourceRoot":"","sources":["../../../src/components/filters/filters.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAqD,OAAO,EAAE,MAAM,GAAG,CAAC;AA0C/E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAOC,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}
+{"version":3,"file":"filters.stories.d.ts","sourceRoot":"","sources":["../../../src/components/filters/filters.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAQvD,OAAO,EAAkH,OAAO,EAAE,MAAM,GAAG,CAAC;AA0R5I,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAEJ,KAAK,CAAC;AAEtB,eAAO,MAAM,aAAa,EAEV,KAAK,CAAC;AA0DtB,eAAO,MAAM,sBAAsB,EA4CnB,KAAK,CAAC;AA8CtB,eAAO,MAAM,mBAAmB,EAgChB,KAAK,CAAC"}

package/dist/components/filters/filters.stories.js

@@ -1,48 +1,383 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Filter as FilterIcon, Tag } from 'lucide-react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Activity, BarChart3, Filter as FilterIcon, Home, Tag, Users } from 'lucide-react';
+import { buildDateSelectorI18nFromT, DATE_SELECTOR_NAMESPACE } from '../../blocks/date-selector';
 import { Button } from '../button';
-import { createFilter, Filters } from '.';
-const demoFields = [
-    {
-        key: 'status',
-        label: 'Status',
-        type: 'select',
-        icon: _jsx(FilterIcon, { className: "size-4" }),
-        options: [
-            { value: 'active', label: 'Active' },
-            { value: 'draft', label: 'Draft' },
-        ],
-    },
-    {
-        key: 'name',
-        label: 'Name',
-        type: 'text',
-        placeholder: 'Contains…',
-        icon: _jsx(Tag, { className: "size-4" }),
-    },
+import { buildFilterI18nFromT, FILTERS_NAMESPACE } from './filters-i18n.shared';
+import { createFilter, DEFAULT_SUBMENU_SEARCH_MIN_OPTIONS, Filters } from '.';
+const teamMemberOptions = [
+    { value: 'alex', label: 'Alex Johnson' },
+    { value: 'jamie', label: 'Jamie Lee' },
+    { value: 'sam', label: 'Sam Rivera' },
+    { value: 'taylor', label: 'Taylor Chen' },
+    { value: 'jordan', label: 'Jordan Patel' },
+    { value: 'casey', label: 'Casey Morgan' },
+    { value: 'riley', label: 'Riley Brooks' },
+    { value: 'quinn', label: 'Quinn Foster' },
+    { value: 'avery', label: 'Avery Scott' },
+    { value: 'morgan', label: 'Morgan Wells' },
+];
+function useFiltersStoryLocale() {
+    const { t, i18n } = useTranslation(FILTERS_NAMESPACE);
+    const filterI18n = useMemo(() => buildFilterI18nFromT(t, i18n.language), [t, i18n.language]);
+    const dateSelectorI18n = useMemo(() => {
+        const dateT = i18n.getFixedT(i18n.language, DATE_SELECTOR_NAMESPACE);
+        return buildDateSelectorI18nFromT(dateT);
+    }, [i18n]);
+    return { t, i18n, filterI18n, dateSelectorI18n };
+}
+function buildDemoFields(t) {
+    return [
+        {
+            key: 'status',
+            label: t('story.fields.status', { defaultValue: 'Status' }),
+            type: 'select',
+            icon: _jsx(FilterIcon, { className: "size-4" }),
+            options: [
+                { value: 'active', label: t('story.options.active', { defaultValue: 'Active' }) },
+                { value: 'draft', label: t('story.options.draft', { defaultValue: 'Draft' }) },
+            ],
+        },
+        {
+            key: 'name',
+            label: t('story.fields.name', { defaultValue: 'Name' }),
+            type: 'text',
+            placeholder: t('story.namePlaceholder', { defaultValue: 'Contains…' }),
+            icon: _jsx(Tag, { className: "size-4" }),
+        },
+    ];
+}
+function buildGroupedFieldsWithSearch(t, dateSelectorI18n, i18n) {
+    return [
+        {
+            group: t('story.groups.listingFeatures', { defaultValue: 'Listing Features' }),
+            fields: [
+                {
+                    key: 'propertyType',
+                    label: t('story.fields.propertyType', { defaultValue: 'Property Type' }),
+                    type: 'multiselect',
+                    icon: _jsx(Home, { className: "size-4" }),
+                    options: [
+                        { value: 'house', label: t('story.options.house', { defaultValue: 'House' }) },
+                        { value: 'condo', label: t('story.options.condo', { defaultValue: 'Condo' }) },
+                        { value: 'townhome', label: t('story.options.townhome', { defaultValue: 'Townhome' }) },
+                        { value: 'land', label: t('story.options.land', { defaultValue: 'Land' }) },
+                    ],
+                },
+                {
+                    key: 'hasPool',
+                    label: t('story.fields.hasPool', { defaultValue: 'Has Pool' }),
+                    type: 'select',
+                    icon: _jsx(Home, { className: "size-4" }),
+                    options: [
+                        { value: 'yes', label: t('story.options.yes', { defaultValue: 'Yes' }) },
+                        { value: 'no', label: t('story.options.no', { defaultValue: 'No' }) },
+                    ],
+                },
+            ],
+        },
+        {
+            group: t('story.groups.listingStatus', { defaultValue: 'Listing Status' }),
+            fields: [
+                {
+                    key: 'listingStatus',
+                    label: t('story.fields.listingStatus', { defaultValue: 'Listing Status' }),
+                    type: 'multiselect',
+                    icon: _jsx(Activity, { className: "size-4" }),
+                    options: [
+                        { value: 'active', label: t('story.options.active', { defaultValue: 'Active' }) },
+                        { value: 'pending', label: t('story.options.pending', { defaultValue: 'Pending' }) },
+                        { value: 'sold', label: t('story.options.sold', { defaultValue: 'Sold' }) },
+                        { value: 'withdrawn', label: t('story.options.withdrawn', { defaultValue: 'Withdrawn' }) },
+                        { value: 'expired', label: t('story.options.expired', { defaultValue: 'Expired' }) },
+                    ],
+                },
+            ],
+        },
+        {
+            group: t('story.groups.teamAccess', { defaultValue: 'Team & Access' }),
+            fields: [
+                {
+                    key: 'teamMember',
+                    label: t('story.fields.teamMember', { defaultValue: 'Team Member' }),
+                    type: 'multiselect',
+                    icon: _jsx(Users, { className: "size-4" }),
+                    options: teamMemberOptions,
+                },
+                {
+                    key: 'yourAccess',
+                    label: t('story.fields.yourAccess', { defaultValue: 'Your Access' }),
+                    type: 'select',
+                    icon: _jsx(Users, { className: "size-4" }),
+                    options: [
+                        { value: 'owner', label: t('story.options.owner', { defaultValue: 'Owner' }) },
+                        { value: 'editor', label: t('story.options.editor', { defaultValue: 'Editor' }) },
+                        { value: 'viewer', label: t('story.options.viewer', { defaultValue: 'Viewer' }) },
+                    ],
+                },
+                {
+                    key: 'listingAdmin',
+                    label: t('story.fields.listingAdmin', { defaultValue: 'Admin of Listing' }),
+                    type: 'select',
+                    icon: _jsx(Users, { className: "size-4" }),
+                    options: [
+                        { value: 'me', label: t('story.options.me', { defaultValue: 'Me' }) },
+                        { value: 'broker', label: t('story.options.broker', { defaultValue: 'Broker' }) },
+                    ],
+                },
+            ],
+        },
+        {
+            group: t('story.groups.listingPerformance', { defaultValue: 'Listing Performance' }),
+            fields: [
+                {
+                    key: 'adjRevpar',
+                    label: t('story.fields.adjRevpar', { defaultValue: 'Adj. RevPAR' }),
+                    type: 'date_metric',
+                    icon: _jsx(BarChart3, { className: "size-4" }),
+                    dateMetricProps: {
+                        showRollingPresets: true,
+                        i18nInstance: i18n,
+                        i18n: dateSelectorI18n,
+                    },
+                },
+                {
+                    key: 'performanceTier',
+                    label: t('story.fields.performanceTier', { defaultValue: 'Performance Tier' }),
+                    type: 'select',
+                    icon: _jsx(BarChart3, { className: "size-4" }),
+                    options: [
+                        { value: 'top', label: t('story.options.top', { defaultValue: 'Top quartile' }) },
+                        { value: 'mid', label: t('story.options.mid', { defaultValue: 'Mid' }) },
+                        { value: 'low', label: t('story.options.low', { defaultValue: 'Needs attention' }) },
+                    ],
+                },
+            ],
+        },
+    ];
+}
+const FILTER_PLAYGROUND_KEYS = [
+    'className',
+    'size',
+    'radius',
+    'showSearchInput',
+    'submenuSearchMinOptions',
+    'allowMultiple',
+    'menuPopupClassName',
+    'collapsibleAddFilterGroups',
+    'defaultAddFilterGroupsCollapsed',
+    'nestedAddFilterGroups',
+    'collapseAddButton',
+    'enableShortcut',
+    'shortcutKey',
+    'shortcutLabel',
 ];
-function FiltersStoryHost() {
+function pickFiltersPlaygroundArgs(args) {
+    const src = args;
+    const out = {};
+    for (const key of FILTER_PLAYGROUND_KEYS) {
+        if (src[key] !== undefined) {
+            out[key] = src[key];
+        }
+    }
+    return out;
+}
+/** `Filters` props that stay wired inside story hosts (not controllable). */
+const filtersStoryReadonlyArgTypes = {
+    filters: { control: false },
+    fields: { control: false },
+    onChange: { control: false },
+    trigger: { control: false },
+    i18n: { control: false },
+};
+/** Shared Controls for `Filters` layout and add-menu behavior (use on stories that forward `args`). */
+const filtersPlaygroundArgTypes = {
+    className: { control: 'text', description: 'Optional class on the filters container.' },
+    size: {
+        control: 'inline-radio',
+        options: ['sm', 'default', 'lg'],
+        description: 'Control density for filter rows and add-filter trigger.',
+    },
+    radius: {
+        control: 'inline-radio',
+        options: ['default', 'full'],
+        description: 'Corner radius for each filter row’s grouped controls (label, operator, value, remove).',
+    },
+    showSearchInput: { control: 'boolean', description: 'Search field at the top of the add-filter menu.' },
+    submenuSearchMinOptions: {
+        control: { type: 'number', min: 0, max: 100, step: 1 },
+        description: 'Minimum options before search in value popovers and add-filter option submenus (0 = always when searchable).',
+    },
+    allowMultiple: { control: 'boolean', description: 'Allow more than one filter per field key.' },
+    menuPopupClassName: { control: 'text', description: 'Extra classes on the add-filter dropdown surface.' },
+    collapsibleAddFilterGroups: {
+        control: 'boolean',
+        description: 'Grouped config only: accordion headers per section (ignored when **Nested** mode is used in grouped story).',
+    },
+    defaultAddFilterGroupsCollapsed: {
+        control: 'boolean',
+        description: 'Grouped + accordion: start every section collapsed when the menu opens.',
+    },
+    nestedAddFilterGroups: {
+        control: 'boolean',
+        description: 'Grouped config only: category rows open a side submenu (ignored when grouped story uses **Grouped menu mode**).',
+    },
+    collapseAddButton: { control: 'boolean', description: 'Collapse the add-filter control into a compact trigger when filters exist.' },
+    enableShortcut: { control: 'boolean', description: 'Open add-filter menu with a global key (see shortcut keys).' },
+    shortcutKey: { control: 'text', description: 'Key to listen for when **Enable shortcut** is on (e.g. `f`).' },
+    shortcutLabel: { control: 'text', description: 'Label shown in the add-filter menu for the shortcut (e.g. `F`).' },
+};
+function addFilterTriggerButtonLabel(size, label) {
+    const btnSize = size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'default';
+    return (_jsx(Button, { variant: "outline", size: btnSize, children: label }));
+}
+function FiltersStoryHost(playground) {
     const [filters, setFilters] = useState([]);
-    return (_jsx("div", { className: "flex min-h-32 min-w-[min(100%,28rem)] flex-wrap items-start gap-2 p-4", children: _jsx(Filters, { filters: filters, fields: demoFields, onChange: setFilters, trigger: _jsx(Button, { variant: "outline", children: "Add filter" }), allowMultiple: true }) }));
+    const { t, filterI18n } = useFiltersStoryLocale();
+    const fields = useMemo(() => buildDemoFields(t), [t]);
+    return (_jsx("div", { className: "flex min-h-32 min-w-[min(100%,28rem)] flex-wrap items-start gap-2 p-4", children: _jsx(Filters, { filters: filters, fields: fields, onChange: setFilters, i18n: filterI18n, trigger: addFilterTriggerButtonLabel(playground.size, filterI18n.addFilterTitle), ...playground }) }));
 }
-function FiltersWithInitialState() {
+function FiltersWithInitialStateHost(playground) {
     const [filters, setFilters] = useState(() => [createFilter('status', 'is', ['active'])]);
-    return (_jsx("div", { className: "flex min-h-32 min-w-[min(100%,28rem)] flex-wrap items-start gap-2 p-4", children: _jsx(Filters, { filters: filters, fields: demoFields, onChange: setFilters, trigger: _jsx(Button, { variant: "outline", children: "Add filter" }), allowMultiple: true }) }));
+    const { t, filterI18n } = useFiltersStoryLocale();
+    const fields = useMemo(() => buildDemoFields(t), [t]);
+    return (_jsx("div", { className: "flex min-h-32 min-w-[min(100%,28rem)] flex-wrap items-start gap-2 p-4", children: _jsx(Filters, { filters: filters, fields: fields, onChange: setFilters, i18n: filterI18n, trigger: addFilterTriggerButtonLabel(playground.size, filterI18n.addFilterTitle), ...playground }) }));
 }
 const meta = {
-    title: 'UI/Filters',
+    title: 'Blocks/Filters',
     component: Filters,
     tags: ['autodocs'],
     parameters: {
         layout: 'centered',
     },
+    args: {
+        className: '',
+        size: 'sm',
+        radius: 'default',
+        showSearchInput: true,
+        submenuSearchMinOptions: DEFAULT_SUBMENU_SEARCH_MIN_OPTIONS,
+        allowMultiple: true,
+        menuPopupClassName: '',
+        collapsibleAddFilterGroups: false,
+        defaultAddFilterGroupsCollapsed: false,
+        nestedAddFilterGroups: false,
+        collapseAddButton: false,
+        enableShortcut: false,
+        shortcutKey: 'f',
+        shortcutLabel: 'F',
+    },
+    argTypes: {
+        ...filtersStoryReadonlyArgTypes,
+        ...filtersPlaygroundArgTypes,
+    },
 };
 export default meta;
 export const Default = {
-    render: () => _jsx(FiltersStoryHost, {}),
+    render: (args) => _jsx(FiltersStoryHost, { ...pickFiltersPlaygroundArgs(args) }),
 };
 export const WithOneFilter = {
-    render: () => _jsx(FiltersWithInitialState, {}),
+    render: (args) => _jsx(FiltersWithInitialStateHost, { ...pickFiltersPlaygroundArgs(args) }),
+};
+function FiltersGroupedAndSearchHost(props) {
+    const [filters, setFilters] = useState([]);
+    const { groupedMenuMode, defaultAddFilterGroupsCollapsed, ...raw } = props;
+    const { nestedAddFilterGroups: _omitNested, collapsibleAddFilterGroups: _omitCollapsible, defaultAddFilterGroupsCollapsed: _omitDefaultCollapsed, ...playground } = pickFiltersPlaygroundArgs(raw);
+    const { t, i18n, filterI18n, dateSelectorI18n } = useFiltersStoryLocale();
+    const groupedFieldsWithSearch = useMemo(() => buildGroupedFieldsWithSearch(t, dateSelectorI18n, i18n), [t, dateSelectorI18n, i18n]);
+    const groupedI18n = useMemo(() => ({
+        ...filterI18n,
+        searchFields: t('story.searchFieldsGrouped', { defaultValue: 'Filter by…' }),
+    }), [filterI18n, t]);
+    const nestedAddFilterGroups = groupedMenuMode === 'nested';
+    const collapsibleAddFilterGroups = groupedMenuMode === 'accordion';
+    return (_jsxs("div", { className: "flex min-h-32 min-w-[min(100%,28rem)] flex-col gap-4 p-4", children: [_jsx("div", { className: "flex flex-wrap items-start gap-2", children: _jsx(Filters, { filters: filters, fields: groupedFieldsWithSearch, onChange: setFilters, i18n: groupedI18n, ...playground, nestedAddFilterGroups: nestedAddFilterGroups, collapsibleAddFilterGroups: collapsibleAddFilterGroups, defaultAddFilterGroupsCollapsed: defaultAddFilterGroupsCollapsed, trigger: addFilterTriggerButtonLabel(playground.size, groupedI18n.addFilterTitle) }, `${groupedMenuMode}-${defaultAddFilterGroupsCollapsed}`) }), _jsx("p", { className: "text-xs text-muted-foreground", children: t('story.currentFiltersCaption', { defaultValue: 'Current filters:' }) }), _jsx("pre", { className: "max-h-80 max-w-full overflow-auto rounded-md border border-border bg-muted/50 p-3 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap", children: JSON.stringify(filters, null, 2) })] }));
+}
+export const GroupedFieldsAndSearch = {
+    args: {
+        groupedMenuMode: 'nested',
+        defaultAddFilterGroupsCollapsed: true,
+    },
+    argTypes: {
+        ...filtersStoryReadonlyArgTypes,
+        ...filtersPlaygroundArgTypes,
+        nestedAddFilterGroups: { control: false },
+        collapsibleAddFilterGroups: { control: false },
+        groupedMenuMode: {
+            name: 'Grouped menu mode',
+            control: 'inline-radio',
+            options: ['nested', 'accordion', 'flat'],
+            description: '**Nested** — category rows open a side submenu (hover or keyboard). **Accordion** — click section headers to expand/collapse. **Flat** — section labels only, all fields listed inline. Select/multiselect still use option submenus.',
+        },
+        defaultAddFilterGroupsCollapsed: {
+            name: 'Accordion: start collapsed',
+            control: 'boolean',
+            if: { arg: 'groupedMenuMode', eq: 'accordion' },
+            description: 'When mode is Accordion, start with every group collapsed each time the add-filter menu opens.',
+        },
+    },
+    render: (args) => {
+        const a = args;
+        return (_jsx(FiltersGroupedAndSearchHost, { ...pickFiltersPlaygroundArgs(a), groupedMenuMode: a.groupedMenuMode ?? 'nested', defaultAddFilterGroupsCollapsed: a.defaultAddFilterGroupsCollapsed ?? true }));
+    },
+    parameters: {
+        controls: {
+            sort: 'none',
+        },
+        docs: {
+            description: {
+                story: 'Grouped `FilterFieldsConfig` with section labels and search. Use **Grouped menu mode** in **Controls** to switch **Nested** (side submenus), **Accordion** (expand/collapse headers), or **Flat** (labels + inline fields). The **Accordion: start collapsed** control appears when mode is Accordion. Select and multiselect fields still open an options submenu. Use the Storybook **Locale** toolbar to switch languages.',
+            },
+        },
+    },
+};
+function FiltersDateMetricStoryHost(props) {
+    const [filters, setFilters] = useState([]);
+    const { rollingRangeDisplay, ...raw } = props;
+    const playground = pickFiltersPlaygroundArgs(raw);
+    const { t, i18n, filterI18n, dateSelectorI18n } = useFiltersStoryLocale();
+    const adjRevparOnlyFields = useMemo(() => [
+        {
+            key: 'adjRevpar',
+            label: t('story.fields.adjRevpar', { defaultValue: 'Adj. RevPAR' }),
+            type: 'date_metric',
+            icon: _jsx(BarChart3, { className: "size-4" }),
+            dateMetricProps: {
+                showRollingPresets: true,
+                showTwoMonths: true,
+                rollingRangeDisplay,
+                i18nInstance: i18n,
+                i18n: dateSelectorI18n,
+            },
+        },
+    ], [rollingRangeDisplay, t, i18n, dateSelectorI18n]);
+    return (_jsx("div", { className: "flex min-h-32 min-w-[min(100%,28rem)] flex-wrap items-start gap-2 p-4", children: _jsx(Filters, { filters: filters, fields: adjRevparOnlyFields, onChange: setFilters, i18n: filterI18n, ...playground, trigger: addFilterTriggerButtonLabel(playground.size, filterI18n.addFilterTitle) }) }));
+}
+export const DateMetricAdjRevpar = {
+    args: {
+        rollingRangeDisplay: 'inline',
+        size: 'sm',
+    },
+    argTypes: {
+        ...filtersStoryReadonlyArgTypes,
+        ...filtersPlaygroundArgTypes,
+        rollingRangeDisplay: {
+            name: 'Rolling range display',
+            control: 'inline-radio',
+            options: ['inline', 'tooltip'],
+            description: 'Passed through field config as `dateMetricProps.rollingRangeDisplay`. Inline shows calendar detail on the trigger; Tooltip shows a short rolling phrase with detail on hover.',
+        },
+    },
+    render: (args) => (_jsx(FiltersDateMetricStoryHost, { rollingRangeDisplay: args.rollingRangeDisplay ?? 'inline', ...pickFiltersPlaygroundArgs(args) })),
+    parameters: {
+        controls: {
+            sort: 'none',
+        },
+        docs: {
+            description: {
+                story: '`type: "date_metric"`: date range uses Next/Last submenus plus Custom (full `DateSelector` in a dialog). Value range operators (Any value, greater than, less than, between). Values live in `filter.values[0]` as `DateMetricFilterPayload`. Use the **Rolling range display** control at the top of the **Controls** panel to set `dateMetricProps.rollingRangeDisplay` — tooltip mode shows the short rolling phrase on the trigger and the resolved calendar detail on hover. The Storybook **Locale** toolbar updates filter and date strings.',
+            },
+        },
+    },
 };

package/dist/components/filters/index.d.ts

@@ -1,5 +1,7 @@
 export * from './filters-defaults';
+export * from './filters-i18n.shared';
 export * from './filters-types';
 export * from './filters-utils';
-export { Filters, FiltersContent } from './filters';
+export { dateSegmentLabelForBar, FilterDateMetricBarPeriodSegments, FilterDateMetricBarValueSegment } from './filter-date-metric-value';
+export { DEFAULT_SUBMENU_SEARCH_MIN_OPTIONS, Filters, FiltersContent } from './filters';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/filters/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/filters/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/filters/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,sBAAsB,EAAE,iCAAiC,EAAE,+BAA+B,EAAE,MAAM,4BAA4B,CAAC;AACxI,OAAO,EAAE,kCAAkC,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/filters/index.js

@@ -1,4 +1,6 @@
 export * from './filters-defaults';
+export * from './filters-i18n.shared';
 export * from './filters-types';
 export * from './filters-utils';
-export { Filters, FiltersContent } from './filters';
+export { dateSegmentLabelForBar, FilterDateMetricBarPeriodSegments, FilterDateMetricBarValueSegment } from './filter-date-metric-value';
+export { DEFAULT_SUBMENU_SEARCH_MIN_OPTIONS, Filters, FiltersContent } from './filters';

package/dist/components/frame/frame.d.ts

@@ -25,7 +25,7 @@ import { type VariantProps } from 'class-variance-authority';
  */
 declare const frameVariants: (props?: ({
     variant?: "default" | "ghost" | "inverse" | null | undefined;
-    spacing?: "default" | "sm" | "lg" | "xs" | null | undefined;
+    spacing?: "default" | "xs" | "sm" | "lg" | null | undefined;
     stacked?: boolean | null | undefined;
     dense?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/frame/frame.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle } from '.';
 const meta = {
-    title: 'UI/Frame',
+    title: 'Components/Frame',
     component: Frame,
     tags: ['autodocs'],
     parameters: {

package/dist/components/hover-card/hover-card.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../button';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card';
 const meta = {
-    title: 'UI/HoverCard',
+    title: 'Components/HoverCard',
     component: HoverCard,
     tags: ['autodocs'],
     parameters: {

package/dist/components/index.d.ts

@@ -14,7 +14,6 @@ export * from './collapsible';
 export * from './command';
 export * from './combobox';
 export * from './context-menu';
-export * from './date-selector';
 export * from './dialog';
 export * from './direction';
 export * from './drawer';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}

package/dist/components/index.js

@@ -14,7 +14,6 @@ export * from './collapsible';
 export * from './command';
 export * from './combobox';
 export * from './context-menu';
-export * from './date-selector';
 export * from './dialog';
 export * from './direction';
 export * from './drawer';

package/dist/components/input/input.stories.js

@@ -3,7 +3,7 @@ import { Field } from '../field';
 import { Label } from '../label';
 import { Input, inputSizeKeys } from './input';
 const meta = {
-    title: 'UI/Input',
+    title: 'Components/Input',
     component: Input,
     tags: ['autodocs'],
     parameters: {

package/dist/components/input-group/input-group.d.ts

@@ -6,13 +6,13 @@ import type { TextareaProps } from '../textarea';
 /** Props for `InputGroup`. */
 export type InputGroupProps = React.ComponentProps<'div'>;
 declare const inputGroupAddonVariants: (props?: ({
-    align?: "inline-end" | "inline-start" | "block-start" | "block-end" | null | undefined;
+    align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const inputGroupAddonAlignKeys: readonly ["inline-start", "inline-end", "block-start", "block-end"];
 /** Props for `InputGroupAddon`. */
 export type InputGroupAddonProps = React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>;
 declare const inputGroupButtonVariants: (props?: ({
-    size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
+    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const inputGroupButtonSizeKeys: readonly ["xs", "sm", "icon-xs", "icon-sm"];
 /** Props for `InputGroupButton` (ghost button sized for use inside a group). */