@wheelhouse/ui 0.2.2 → 0.2.3

package/dist/components/combobox/combobox.stories.js

@@ -16,7 +16,7 @@ const programmingLanguages = [
     { id: 'swift', value: 'Swift' },
 ];
 const meta = {
-    title: 'UI/Combobox',
+    title: 'Components/Combobox',
     component: Combobox,
     tags: ['autodocs'],
     parameters: {

package/dist/components/command/command.stories.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Button } from '../button';
 import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from '.';
 const meta = {
-    title: 'UI/Command',
+    title: 'Components/Command',
     component: Command,
     tags: ['autodocs'],
     parameters: {

package/dist/components/context-menu/context-menu.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from '../text';
 import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from '.';
 const meta = {
-    title: 'UI/ContextMenu',
+    title: 'Components/ContextMenu',
     component: ContextMenu,
     tags: ['autodocs'],
     parameters: {

package/dist/components/dialog/dialog.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../button';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from './dialog';
 const meta = {
-    title: 'UI/Dialog',
+    title: 'Components/Dialog',
     component: Dialog,
     tags: ['autodocs'],
     parameters: {

package/dist/components/direction/direction.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DirectionProvider } from './direction';
 const meta = {
-    title: 'UI/Direction',
+    title: 'Components/Direction',
     component: DirectionProvider,
     tags: ['autodocs'],
     parameters: {

package/dist/components/drawer/drawer.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../button';
 import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from './drawer';
 const meta = {
-    title: 'UI/Drawer',
+    title: 'Components/Drawer',
     tags: ['autodocs'],
     parameters: {
         layout: 'centered',

package/dist/components/dropdown-menu/dropdown-menu.d.ts

@@ -25,6 +25,12 @@ type DropdownMenuItemProps = MenuPrimitive.Item.Props & {
     inset?: boolean;
     variant?: 'default' | 'destructive';
 };
+/** Anchor row for `DropdownMenu` — real `<a href>` for navigation, open-in-new-tab, and middle-click. */
+type DropdownMenuLinkItemProps = Omit<React.ComponentPropsWithRef<'a'>, 'className'> & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+    className?: string;
+};
 /** Props for `DropdownMenuSub`. */
 type DropdownMenuSubProps = MenuPrimitive.SubmenuRoot.Props;
 /** Props for `DropdownMenuSubTrigger`. */
@@ -52,6 +58,7 @@ declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, cla
 declare function DropdownMenuGroup({ ...props }: DropdownMenuGroupProps): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuLabel({ className, inset, ...props }: DropdownMenuLabelProps): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuItem({ className, inset, variant, ...props }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLinkItem({ className, inset, variant, children, ...anchorProps }: DropdownMenuLinkItemProps): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuSub({ ...props }: DropdownMenuSubProps): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: DropdownMenuSubTriggerProps): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: DropdownMenuSubContentProps): import("react/jsx-runtime").JSX.Element;
@@ -60,6 +67,6 @@ declare function DropdownMenuRadioGroup({ ...props }: DropdownMenuRadioGroupProp
 declare function DropdownMenuRadioItem({ className, children, inset, ...props }: DropdownMenuRadioItemProps): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuShortcut({ className, ...props }: DropdownMenuShortcutProps): import("react/jsx-runtime").JSX.Element;
-export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
-export type { DropdownMenuProps, DropdownMenuPortalProps, DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuSubContentProps, DropdownMenuGroupProps, DropdownMenuLabelProps, DropdownMenuItemProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuSeparatorProps, DropdownMenuShortcutProps, };
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuLinkItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
+export type { DropdownMenuProps, DropdownMenuPortalProps, DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuSubContentProps, DropdownMenuGroupProps, DropdownMenuLabelProps, DropdownMenuItemProps, DropdownMenuLinkItemProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuSeparatorProps, DropdownMenuShortcutProps, };
 //# sourceMappingURL=dropdown-menu.d.ts.map

package/dist/components/dropdown-menu/dropdown-menu.d.ts.map

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

package/dist/components/dropdown-menu/dropdown-menu.js

@@ -25,6 +25,9 @@ function DropdownMenuLabel({ className, inset, ...props }) {
 function DropdownMenuItem({ className, inset, variant = 'default', ...props }) {
     return (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive-foreground/10 data-[variant=destructive]:focus:text-destructive-foreground dark:data-[variant=destructive]:focus:bg-destructive-foreground/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive-foreground", className), ...props }));
 }
+function DropdownMenuLinkItem({ className, inset, variant = 'default', children, ...anchorProps }) {
+    return (_jsx(MenuPrimitive.Item, { render: _jsx("a", { "data-slot": "dropdown-menu-link-item", "data-inset": inset, "data-variant": variant, className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive-foreground/10 data-[variant=destructive]:focus:text-destructive-foreground dark:data-[variant=destructive]:focus:bg-destructive-foreground/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive-foreground", className), ...anchorProps, children: children }) }));
+}
 function DropdownMenuSub({ ...props }) {
     return _jsx(MenuPrimitive.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
 }
@@ -49,4 +52,4 @@ function DropdownMenuSeparator({ className, ...props }) {
 function DropdownMenuShortcut({ className, ...props }) {
     return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn('ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground', className), ...props }));
 }
-export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuLinkItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/components/dropdown-menu/dropdown-menu.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../button';
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '.';
 const meta = {
-    title: 'UI/DropdownMenu',
+    title: 'Components/DropdownMenu',
     component: DropdownMenu,
     tags: ['autodocs'],
     parameters: {

package/dist/components/dropdown-menu/index.d.ts

@@ -1,3 +1,3 @@
-export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } from './dropdown-menu';
-export type { DropdownMenuProps, DropdownMenuPortalProps, DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuSubContentProps, DropdownMenuGroupProps, DropdownMenuLabelProps, DropdownMenuItemProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuSeparatorProps, DropdownMenuShortcutProps, } from './dropdown-menu';
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuLinkItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } from './dropdown-menu';
+export type { DropdownMenuProps, DropdownMenuPortalProps, DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuSubContentProps, DropdownMenuGroupProps, DropdownMenuLabelProps, DropdownMenuItemProps, DropdownMenuLinkItemProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuSeparatorProps, DropdownMenuShortcutProps, } from './dropdown-menu';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/dropdown-menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,wBAAwB,EACxB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,GACzB,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EACR,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,EACxB,2BAA2B,EAC3B,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,oBAAoB,EACpB,2BAA2B,EAC3B,6BAA6B,EAC7B,2BAA2B,EAC3B,0BAA0B,EAC1B,0BAA0B,EAC1B,yBAAyB,GAC5B,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB,wBAAwB,EACxB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,GACzB,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EACR,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,EACxB,2BAA2B,EAC3B,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,yBAAyB,EACzB,oBAAoB,EACpB,2BAA2B,EAC3B,6BAA6B,EAC7B,2BAA2B,EAC3B,0BAA0B,EAC1B,0BAA0B,EAC1B,yBAAyB,GAC5B,MAAM,iBAAiB,CAAC"}

package/dist/components/dropdown-menu/index.js

@@ -1 +1 @@
-export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } from './dropdown-menu';
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuLinkItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } from './dropdown-menu';

package/dist/components/empty/empty.stories.js

@@ -3,7 +3,7 @@ import { FolderOpen } from 'lucide-react';
 import { Button } from '../button';
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from './empty';
 const meta = {
-    title: 'UI/Empty',
+    title: 'Components/Empty',
     component: Empty,
     tags: ['autodocs'],
     parameters: {

package/dist/components/field/field.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input } from '../input';
 import { Field } from './field';
 const meta = {
-    title: 'UI/Field',
+    title: 'Components/Field',
     component: Field.Root,
     tags: ['autodocs'],
     parameters: {

package/dist/components/filters/filter-date-metric-value.d.ts

@@ -0,0 +1,32 @@
+import { type DateSelectorI18nConfig, type DateSelectorValue, type FormatDateValueOptions } from '../../blocks/date-selector/date-selector-types';
+import type { FilterFieldConfig, FilterI18nConfig } from './filters-types';
+/**
+ * Compact date summary for the bar (e.g. "Last 60 days"); uses rolling templates when applicable.
+ * Day pickers use {@link DATE_SELECTOR_COMPACT_DAY_FORMAT} here so the bar stays short; the dialog still uses `dateMetricProps.dayDateFormat` for parsing.
+ * Pass {@link FormatDateValueOptions} to match {@link DateSelectorProps.rollingRangeDisplay} on the filter field.
+ */
+export declare function dateSegmentLabelForBar(date: DateSelectorValue, dateI18n: DateSelectorI18nConfig, dayDateFormat: string, options?: FormatDateValueOptions): string;
+export interface FilterDateMetricBarPeriodSegmentsProps<T = unknown> {
+    field: FilterFieldConfig<T>;
+    values: T[];
+    onChange: (values: T[]) => void;
+    i18n: FilterI18nConfig;
+    size: 'sm' | 'default' | 'lg';
+    /** When set (e.g. newly added filter row), opens the date range menu once. */
+    autoFocus?: boolean;
+}
+/** Static "in" connector + rolling Next/Last presets (submenus) + full {@link DateSelector} in a dialog for Custom. */
+export declare function FilterDateMetricBarPeriodSegments<T = unknown>({ field, values, onChange, i18n, size, autoFocus }: FilterDateMetricBarPeriodSegmentsProps<T>): import("react/jsx-runtime").JSX.Element;
+export interface FilterDateMetricBarValueSegmentProps<T = unknown> {
+    field: FilterFieldConfig<T>;
+    values: T[];
+    onChange: (values: T[]) => void;
+    operator: string;
+    i18n: FilterI18nConfig;
+    size: 'sm' | 'default' | 'lg';
+    /** Lets the value segment change operator (e.g. "Any value" → threshold so the number field appears). */
+    onOperatorChange?: (operator: string) => void;
+}
+/** Value inputs / “any value” control for a date metric filter bar (after field, “in”, range, and operator). */
+export declare function FilterDateMetricBarValueSegment<T = unknown>({ field, values, onChange, operator, i18n, size, onOperatorChange, }: FilterDateMetricBarValueSegmentProps<T>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=filter-date-metric-value.d.ts.map

package/dist/components/filters/filter-date-metric-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-date-metric-value.d.ts","sourceRoot":"","sources":["../../../src/components/filters/filter-date-metric-value.tsx"],"names":[],"mappings":"AAeA,OAAO,EAKH,KAAK,sBAAsB,EAG3B,KAAK,iBAAiB,EAEtB,KAAK,sBAAsB,EAC9B,MAAM,gDAAgD,CAAC;AAyBxD,OAAO,KAAK,EAA2B,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAyIpG;;;;GAIG;AACH,wBAAgB,sBAAsB,CAClC,IAAI,EAAE,iBAAiB,EACvB,QAAQ,EAAE,sBAAsB,EAChC,aAAa,EAAE,MAAM,EACrB,OAAO,CAAC,EAAE,sBAAsB,GACjC,MAAM,CAER;AAED,MAAM,WAAW,sCAAsC,CAAC,CAAC,GAAG,OAAO;IAC/D,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC5B,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,IAAI,EAAE,gBAAgB,CAAC;IACvB,IAAI,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC9B,8EAA8E;IAC9E,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,uHAAuH;AACvH,wBAAgB,iCAAiC,CAAC,CAAC,GAAG,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,sCAAsC,CAAC,CAAC,CAAC,2CAqP3J;AAED,MAAM,WAAW,oCAAoC,CAAC,CAAC,GAAG,OAAO;IAC7D,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC5B,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,gBAAgB,CAAC;IACvB,IAAI,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC9B,yGAAyG;IACzG,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AA+ED,gHAAgH;AAChH,wBAAgB,+BAA+B,CAAC,CAAC,GAAG,OAAO,EAAE,EACzD,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,gBAAgB,GACnB,EAAE,oCAAoC,CAAC,CAAC,CAAC,kDAyNzC"}

package/dist/components/filters/filter-date-metric-value.js

@@ -0,0 +1,331 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { computeRollingPresetRange, DATE_SELECTOR_COMPACT_DAY_FORMAT, DateSelector, formatDateValue, formatRollingRangeTooltipDetail, getRollingSummaryLabel, resolveRollingCount, resolveRollingUnit, } from '../../blocks/date-selector';
+import { 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 '../../blocks/date-selector/date-selector-types';
+import { Button } from '../button';
+import { ButtonGroupText } from '../button-group';
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../dialog';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '../dropdown-menu';
+import { Input } from '../input';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
+import { Check } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { dateMetricValueForCustomEditor, getDateMetricPayloadFromValues, getOperatorsForField } from './filters-utils';
+/** Matches `Button` `variant="outline"` surface: bordered tile in the preset grid. */
+const ROLLING_PRESET_OUTLINE = 'rounded-md border border-input bg-popover shadow-xs/5 dark:bg-input/32';
+const ROLLING_PRESET_CELL_BASE = cn(ROLLING_PRESET_OUTLINE, 'relative min-h-7 shrink-0 justify-center !px-1.5 !py-1 text-center text-[0.7rem] leading-tight [text-wrap:pretty] tabular-nums', '[&_[data-slot=dropdown-menu-radio-item-indicator]]:hidden');
+/** Selected tile: filled “active” look instead of the menu radio checkmark. */
+const rollingPresetCellSelected = 'border-primary bg-accent font-medium text-foreground shadow-xs/10 dark:bg-accent/90';
+function RollingWindowPresetGrid({ mode, i18n, idPrefix, rollingDayOpts, rollingMonthOpts, rollingQuarterOpts, rollingYearOpts, radioValue, rollingRadioKey, labelForRolling, onApply, }) {
+    const rollingPrefix = mode === 'rolling-next' ? i18n.rollingWindowTabs.next : i18n.rollingWindowTabs.last;
+    const sectionLabel = (unitTab) => `${rollingPrefix} ${unitTab}`;
+    return (_jsx(DropdownMenuRadioGroup, { value: radioValue ?? '', onValueChange: (v) => {
+            if (!v)
+                return;
+            const [u, c] = v.split(':');
+            const count = Number(c);
+            if (!u || !Number.isFinite(count))
+                return;
+            onApply(u, count);
+        }, children: _jsx("div", { className: "flex flex-col", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(DropdownMenuLabel, { className: "px-0 pt-0 pb-0", children: sectionLabel(i18n.rollingUnitTabs.days) }), _jsx("div", { className: "grid grid-cols-4 gap-1.5", children: rollingDayOpts.map((days) => {
+                                    const value = rollingRadioKey('day', days);
+                                    const selected = radioValue === value;
+                                    return (_jsx(DropdownMenuRadioItem, { className: cn(ROLLING_PRESET_CELL_BASE, selected && rollingPresetCellSelected), value: value, "aria-label": labelForRolling(mode, 'day', days), children: days }, `${idPrefix}-day-${days}`));
+                                }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(DropdownMenuLabel, { className: "px-0 pt-0 pb-0", children: sectionLabel(i18n.rollingUnitTabs.months) }), _jsx("div", { className: "grid grid-cols-5 gap-1.5", children: rollingMonthOpts.map((m) => {
+                                    const value = rollingRadioKey('month', m);
+                                    const selected = radioValue === value;
+                                    return (_jsx(DropdownMenuRadioItem, { className: cn(ROLLING_PRESET_CELL_BASE, selected && rollingPresetCellSelected), value: value, "aria-label": labelForRolling(mode, 'month', m), children: m }, `${idPrefix}-month-${m}`));
+                                }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(DropdownMenuLabel, { className: "px-0 pt-0 pb-0", children: sectionLabel(i18n.rollingUnitTabs.quarters) }), _jsx("div", { className: "grid grid-cols-4 gap-1.5", children: rollingQuarterOpts.map((q) => {
+                                    const value = rollingRadioKey('quarter', q);
+                                    const selected = radioValue === value;
+                                    return (_jsx(DropdownMenuRadioItem, { className: cn(ROLLING_PRESET_CELL_BASE, selected && rollingPresetCellSelected), value: value, "aria-label": labelForRolling(mode, 'quarter', q), children: q }, `${idPrefix}-quarter-${q}`));
+                                }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(DropdownMenuLabel, { className: "px-0 pt-0 pb-0", children: sectionLabel(i18n.rollingUnitTabs.years) }), _jsx("div", { className: "grid grid-cols-4 gap-1.5", children: rollingYearOpts.map((y) => {
+                                    const value = rollingRadioKey('year', y);
+                                    const selected = radioValue === value;
+                                    return (_jsx(DropdownMenuRadioItem, { className: cn(ROLLING_PRESET_CELL_BASE, selected && rollingPresetCellSelected), value: value, "aria-label": labelForRolling(mode, 'year', y), children: y }, `${idPrefix}-year-${y}`));
+                                }) })] })] }) }) }));
+}
+/**
+ * Compact date summary for the bar (e.g. "Last 60 days"); uses rolling templates when applicable.
+ * Day pickers use {@link DATE_SELECTOR_COMPACT_DAY_FORMAT} here so the bar stays short; the dialog still uses `dateMetricProps.dayDateFormat` for parsing.
+ * Pass {@link FormatDateValueOptions} to match {@link DateSelectorProps.rollingRangeDisplay} on the filter field.
+ */
+export function dateSegmentLabelForBar(date, dateI18n, dayDateFormat, options) {
+    return formatDateValue(date, dateI18n, dayDateFormat, options);
+}
+/** Static "in" connector + rolling Next/Last presets (submenus) + full {@link DateSelector} in a dialog for Custom. */
+export function FilterDateMetricBarPeriodSegments({ field, values, onChange, i18n, size, autoFocus }) {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [customOpen, setCustomOpen] = useState(false);
+    /** Draft while Custom dialog is open; committed on Done, discarded on dismiss. */
+    const [customDraft, setCustomDraft] = useState(null);
+    const menuAutoOpenedRef = useRef(false);
+    const payload = useMemo(() => getDateMetricPayloadFromValues(values), [values]);
+    const setPayload = (next) => {
+        onChange([next]);
+    };
+    const dayFormat = field.dateMetricProps?.dayDateFormat ?? 'MM/dd/yyyy';
+    const mergedDateI18n = { ...DEFAULT_DATE_SELECTOR_I18N, ...field.dateMetricProps?.i18n };
+    const rollingDayOpts = (field.dateMetricProps?.rollingDayOptions ?? DATE_SELECTOR_ROLLING_DAY_OPTIONS);
+    const rollingMonthOpts = field.dateMetricProps?.rollingMonthOptions ?? DATE_SELECTOR_ROLLING_MONTH_OPTIONS;
+    const rollingQuarterOpts = field.dateMetricProps?.rollingQuarterOptions ?? DATE_SELECTOR_ROLLING_QUARTER_OPTIONS;
+    const rollingYearOpts = field.dateMetricProps?.rollingYearOptions ?? DATE_SELECTOR_ROLLING_YEAR_OPTIONS;
+    const rollingRangeDisplay = field.dateMetricProps?.rollingRangeDisplay ?? 'inline';
+    const barFormatOptions = rollingRangeDisplay === 'tooltip' ? { includeRollingRangeDetailInLabel: false } : undefined;
+    const dateSummary = dateSegmentLabelForBar(payload.date, mergedDateI18n, DATE_SELECTOR_COMPACT_DAY_FORMAT, barFormatOptions);
+    const rollingRangeTooltip = rollingRangeDisplay === 'tooltip' ? formatRollingRangeTooltipDetail(payload.date, mergedDateI18n, dayFormat) : null;
+    const buttonSize = size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'default';
+    const dateRangeTriggerButtonClassName = 'max-w-[min(100%,18rem)] justify-start text-start [text-wrap:pretty] whitespace-normal';
+    const dateRangeTriggerButton = _jsx(Button, { variant: "outline", size: buttonSize, className: dateRangeTriggerButtonClassName });
+    const applyRolling = useCallback((mode, unit, count) => {
+        const base = getDateMetricPayloadFromValues(values);
+        const { startDate, endDate } = computeRollingPresetRange(mode, unit, count);
+        const nextDate = {
+            period: 'day',
+            operator: 'between',
+            selectionMode: mode,
+            rollingUnit: unit,
+            rollingCount: count,
+            startDate,
+            endDate,
+        };
+        if (unit === 'day' && DATE_SELECTOR_ROLLING_DAY_OPTIONS.includes(count)) {
+            nextDate.rollingDays = count;
+        }
+        onChange([
+            {
+                ...base,
+                date: nextDate,
+            },
+        ]);
+        setMenuOpen(false);
+    }, [values, onChange]);
+    useEffect(() => {
+        if (!autoFocus)
+            return;
+        if (menuAutoOpenedRef.current)
+            return;
+        let cancelled = false;
+        const timer = window.setTimeout(() => {
+            if (cancelled)
+                return;
+            menuAutoOpenedRef.current = true;
+            setMenuOpen(true);
+        }, 100);
+        return () => {
+            cancelled = true;
+            window.clearTimeout(timer);
+        };
+    }, [autoFocus]);
+    const labelForRolling = (mode, unit, count) => {
+        if (unit === 'year' && count === 1) {
+            return mode === 'rolling-next' ? mergedDateI18n.rollingSummaryNextYear : mergedDateI18n.rollingSummaryLastYear;
+        }
+        if (unit === 'month' && count === 1) {
+            return mode === 'rolling-next' ? mergedDateI18n.rollingSummaryNextSingleMonth : mergedDateI18n.rollingSummaryLastSingleMonth;
+        }
+        if (unit === 'month' && count > 1) {
+            return mode === 'rolling-next'
+                ? mergedDateI18n.rollingSummaryNextMonths.replace('{{count}}', String(count))
+                : mergedDateI18n.rollingSummaryLastMonths.replace('{{count}}', String(count));
+        }
+        if (unit === 'quarter' && count === 1) {
+            return mode === 'rolling-next' ? mergedDateI18n.rollingSummaryNextQuarter : mergedDateI18n.rollingSummaryLastQuarter;
+        }
+        if (unit === 'quarter' && count > 1) {
+            return mode === 'rolling-next'
+                ? mergedDateI18n.rollingSummaryNextQuarters.replace('{{count}}', String(count))
+                : mergedDateI18n.rollingSummaryLastQuarters.replace('{{count}}', String(count));
+        }
+        return (getRollingSummaryLabel({ period: 'day', operator: 'between', selectionMode: mode, rollingUnit: unit, rollingCount: count }, mergedDateI18n) ?? '');
+    };
+    const rollingRadioKey = (unit, count) => `${unit}:${count}`;
+    const { selectionMode } = payload.date;
+    const selectedCount = resolveRollingCount(payload.date);
+    const selectedUnit = resolveRollingUnit(payload.date);
+    const isAllowedRolling = (unit, count) => {
+        const list = unit === 'day' ? rollingDayOpts : unit === 'month' ? rollingMonthOpts : unit === 'quarter' ? rollingQuarterOpts : rollingYearOpts;
+        return list.includes(count);
+    };
+    const nextRadioValue = selectionMode === 'rolling-next' && selectedCount != null && isAllowedRolling(selectedUnit, selectedCount)
+        ? rollingRadioKey(selectedUnit, selectedCount)
+        : undefined;
+    const lastRadioValue = selectionMode === 'rolling-last' && selectedCount != null && isAllowedRolling(selectedUnit, selectedCount)
+        ? rollingRadioKey(selectedUnit, selectedCount)
+        : undefined;
+    const isNextBranchActive = selectionMode === 'rolling-next';
+    const isLastBranchActive = selectionMode === 'rolling-last';
+    const isCustomRangeActive = selectionMode === 'custom';
+    const mainMenuActiveIcon = (show) => (show ? _jsx(Check, { className: "ml-auto size-4 shrink-0 text-foreground", "aria-hidden": true }) : null);
+    const openCustomDialog = () => {
+        setMenuOpen(false);
+        setCustomDraft(dateMetricValueForCustomEditor(payload.date));
+        setCustomOpen(true);
+    };
+    const commitCustomDialog = () => {
+        if (customDraft != null) {
+            setPayload({ ...payload, date: customDraft });
+        }
+        setCustomDraft(null);
+        setCustomOpen(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(ButtonGroupText, { size: size, className: "bg-background font-normal text-muted-foreground dark:bg-input/30", children: i18n.helpers.dateMetricDateConnector(payload.date, mergedDateI18n) }), _jsxs(DropdownMenu, { open: menuOpen, onOpenChange: setMenuOpen, children: [rollingRangeTooltip ? (_jsxs(Tooltip, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(TooltipTrigger, { render: dateRangeTriggerButton }), children: _jsx("span", { children: dateSummary || i18n.select }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, className: "max-w-xs [text-wrap:pretty] tabular-nums", children: rollingRangeTooltip })] })) : (_jsx(DropdownMenuTrigger, { render: dateRangeTriggerButton, children: _jsx("span", { children: dateSummary || i18n.select }) })), _jsxs(DropdownMenuContent, { align: "center", className: "min-w-48", side: "bottom", children: [_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "min-w-0 shrink", children: mergedDateI18n.rollingWindowTabs.next }), mainMenuActiveIcon(isNextBranchActive)] }) }), _jsx(DropdownMenuSubContent, { align: "start", className: "max-h-none min-w-[13rem] overflow-visible p-2", children: _jsx(RollingWindowPresetGrid, { mode: "rolling-next", idPrefix: "next", i18n: mergedDateI18n, rollingDayOpts: rollingDayOpts, rollingMonthOpts: rollingMonthOpts, rollingQuarterOpts: rollingQuarterOpts, rollingYearOpts: rollingYearOpts, radioValue: nextRadioValue, rollingRadioKey: rollingRadioKey, labelForRolling: labelForRolling, onApply: (unit, count) => applyRolling('rolling-next', unit, count) }) })] }), _jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "min-w-0 shrink", children: mergedDateI18n.rollingWindowTabs.last }), mainMenuActiveIcon(isLastBranchActive)] }) }), _jsx(DropdownMenuSubContent, { align: "start", className: "max-h-none min-w-[13rem] overflow-visible p-2", children: _jsx(RollingWindowPresetGrid, { mode: "rolling-last", idPrefix: "last", i18n: mergedDateI18n, rollingDayOpts: rollingDayOpts, rollingMonthOpts: rollingMonthOpts, rollingQuarterOpts: rollingQuarterOpts, rollingYearOpts: rollingYearOpts, radioValue: lastRadioValue, rollingRadioKey: rollingRadioKey, labelForRolling: labelForRolling, onApply: (unit, count) => applyRolling('rolling-last', unit, count) }) })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "gap-2", onClick: openCustomDialog, children: [_jsx("span", { className: "min-w-0 shrink", children: mergedDateI18n.rollingWindowTabs.custom }), mainMenuActiveIcon(isCustomRangeActive)] })] })] }), _jsx(Dialog, { open: customOpen, onOpenChange: (open) => {
+                    setCustomOpen(open);
+                    if (!open) {
+                        setCustomDraft(null);
+                    }
+                }, children: _jsxs(DialogContent, { className: "max-h-[min(90vh,32rem)] w-[min(calc(100vw-2rem),28rem)] gap-0 overflow-y-auto p-4 sm:max-w-none", children: [_jsx(DialogHeader, { className: "pb-2", children: _jsx(DialogTitle, { children: mergedDateI18n.selectDate }) }), _jsx("div", { className: "flex flex-col gap-6 py-2", children: _jsx("section", { className: "flex flex-col gap-2", children: _jsx(DateSelector, { ...field.dateMetricProps, className: cn('max-w-none space-y-3', field.dateMetricProps?.className), value: customDraft ?? dateMetricValueForCustomEditor(payload.date), onChange: setCustomDraft, showOperators: field.dateMetricProps?.showOperators !== false, showInput: field.dateMetricProps?.showInput ?? false, dayDateFormat: dayFormat, showRollingPresets: false }) }) }), _jsx(DialogFooter, { className: "mt-2 border-t pt-4 sm:justify-end", children: _jsx(Button, { type: "button", size: "sm", variant: "default", onClick: commitCustomDialog, children: i18n.dateMetricDialogDone }) })] }) })] }));
+}
+/** Typographic en dash (–) for “no amount” on the bar trigger. */
+const METRIC_EMPTY_AMOUNT = '\u2013';
+/** Spaces around the en dash so empty segments don’t feel cramped (e.g. `$ – `). */
+const METRIC_EMPTY_DISPLAY = ` ${METRIC_EMPTY_AMOUNT} `;
+const metricAmountFormatters = new Map();
+function formatMetricAmountDigits(value, locale) {
+    let nf = metricAmountFormatters.get(locale);
+    if (!nf) {
+        try {
+            nf = new Intl.NumberFormat(locale, {
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 20,
+                useGrouping: true,
+            });
+        }
+        catch {
+            nf = new Intl.NumberFormat('en-US', {
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 20,
+                useGrouping: true,
+            });
+        }
+        metricAmountFormatters.set(locale, nf);
+    }
+    return nf.format(value);
+}
+/** Bar label: `sym` + grouped amount, or `sym` + spaced en dash when empty. */
+function formatMetricMoney(sym, value, locale) {
+    if (value == null || Number.isNaN(value))
+        return `${sym}${METRIC_EMPTY_DISPLAY}`;
+    return `${sym}${formatMetricAmountDigits(value, locale)}`;
+}
+function parseDraftNumber(raw, previous) {
+    if (raw.trim() === '')
+        return null;
+    const n = Number(raw);
+    if (!Number.isFinite(n))
+        return previous ?? null;
+    return n;
+}
+const METRIC_POPOVER_TRIGGER_NARROW = 'max-w-[min(100%,14rem)] shrink-0 justify-start font-medium tabular-nums';
+const METRIC_POPOVER_TRIGGER_WIDE = 'max-w-[min(100%,18rem)] shrink-0 justify-start text-start font-medium [text-wrap:pretty] whitespace-normal tabular-nums';
+function MetricValueThresholdPopoverShell({ open, onOpenChange, buttonSize, triggerLabel, summary, triggerClassName, children, }) {
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { render: _jsx(Button, { type: "button", variant: "outline", size: buttonSize, className: triggerClassName, "aria-label": triggerLabel, "aria-expanded": open }), children: summary }), _jsx(PopoverContent, { align: "start", side: "bottom", className: "w-(--anchor-width) max-w-none min-w-[8rem] gap-0 p-1.5", children: children })] }));
+}
+/** Value inputs / “any value” control for a date metric filter bar (after field, “in”, range, and operator). */
+export function FilterDateMetricBarValueSegment({ field, values, onChange, operator, i18n, size, onOperatorChange, }) {
+    const [metricPopoverOpen, setMetricPopoverOpen] = useState(false);
+    const [draftMin, setDraftMin] = useState('');
+    const [draftMax, setDraftMax] = useState('');
+    const draftMinRef = useRef('');
+    const draftMaxRef = useRef('');
+    const payload = useMemo(() => getDateMetricPayloadFromValues(values), [values]);
+    const commitMetricFromDraft = useCallback(() => {
+        const base = getDateMetricPayloadFromValues(values);
+        const min = parseDraftNumber(draftMinRef.current, base.min ?? null);
+        const max = parseDraftNumber(draftMaxRef.current, base.max ?? null);
+        if (operator === 'value_greater_than') {
+            onChange([{ ...base, min }]);
+            return;
+        }
+        if (operator === 'value_less_than') {
+            onChange([{ ...base, max }]);
+            return;
+        }
+        if (operator === 'value_between') {
+            onChange([{ ...base, min, max }]);
+        }
+    }, [operator, values, onChange]);
+    const handleMetricPopoverOpenChange = useCallback((open) => {
+        if (open) {
+            const base = getDateMetricPayloadFromValues(values);
+            const dm = base.min != null ? String(base.min) : '';
+            const dx = base.max != null ? String(base.max) : '';
+            draftMinRef.current = dm;
+            draftMaxRef.current = dx;
+            setDraftMin(dm);
+            setDraftMax(dx);
+            setMetricPopoverOpen(true);
+        }
+        else {
+            setMetricPopoverOpen((wasOpen) => {
+                if (wasOpen) {
+                    commitMetricFromDraft();
+                }
+                return false;
+            });
+        }
+    }, [values, commitMetricFromDraft]);
+    const handleMetricValueInputKeyDown = useCallback((e) => {
+        if (e.key !== 'Enter')
+            return;
+        e.preventDefault();
+        handleMetricPopoverOpenChange(false);
+    }, [handleMetricPopoverOpenChange]);
+    const operators = useMemo(() => getOperatorsForField(field, values, i18n), [field, values, i18n]);
+    const valueAnyOperator = operators.find((o) => o.value === 'value_any');
+    const sym = i18n.defaultCurrency;
+    const numberLocale = i18n.numberFormatLocale;
+    const inputSizeProp = size === 'lg' ? 'default' : 'sm';
+    const buttonSize = size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'default';
+    const valueSegment = (() => {
+        if (operator === 'value_any') {
+            const anyLabel = i18n.operators.valueAny;
+            const anyIcon = valueAnyOperator?.icon;
+            if (anyIcon) {
+                return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { type: "button", variant: "outline", size: buttonSize, className: "min-w-8 shrink-0 px-2 font-normal text-muted-foreground hover:text-foreground [&_svg]:size-3.5", "aria-label": anyLabel, onClick: () => onOperatorChange?.('value_greater_than') }), children: anyIcon }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: anyLabel })] }));
+            }
+            return (_jsx(Button, { type: "button", variant: "outline", size: buttonSize, className: "max-w-[min(100%,14rem)] justify-start font-normal text-muted-foreground hover:text-foreground", "aria-label": anyLabel, onClick: () => onOperatorChange?.('value_greater_than'), children: anyLabel }));
+        }
+        if (operator === 'value_greater_than') {
+            const hasMinValue = payload.min != null && !Number.isNaN(payload.min);
+            const summary = formatMetricMoney(sym, payload.min ?? undefined, numberLocale);
+            const triggerLabel = `${i18n.operators.greaterThan}: ${summary}`;
+            return (_jsx(MetricValueThresholdPopoverShell, { open: metricPopoverOpen, onOpenChange: handleMetricPopoverOpenChange, buttonSize: buttonSize, triggerLabel: triggerLabel, summary: summary, triggerClassName: cn(METRIC_POPOVER_TRIGGER_NARROW, !hasMinValue ? 'text-muted-foreground' : 'text-foreground'), children: _jsx(Input, { type: "number", size: inputSizeProp, className: "w-full min-w-0 tabular-nums", value: draftMin, onChange: (e) => {
+                        const v = e.target.value;
+                        draftMinRef.current = v;
+                        setDraftMin(v);
+                    }, onKeyDown: handleMetricValueInputKeyDown }) }));
+        }
+        if (operator === 'value_less_than') {
+            const hasMaxValue = payload.max != null && !Number.isNaN(payload.max);
+            const summary = formatMetricMoney(sym, payload.max ?? undefined, numberLocale);
+            const triggerLabel = `${i18n.operators.lessThan}: ${summary}`;
+            return (_jsx(MetricValueThresholdPopoverShell, { open: metricPopoverOpen, onOpenChange: handleMetricPopoverOpenChange, buttonSize: buttonSize, triggerLabel: triggerLabel, summary: summary, triggerClassName: cn(METRIC_POPOVER_TRIGGER_NARROW, !hasMaxValue ? 'text-muted-foreground' : 'text-foreground'), children: _jsx(Input, { type: "number", size: inputSizeProp, className: "w-full min-w-0 tabular-nums", value: draftMax, onChange: (e) => {
+                        const v = e.target.value;
+                        draftMaxRef.current = v;
+                        setDraftMax(v);
+                    }, onKeyDown: handleMetricValueInputKeyDown }) }));
+        }
+        if (operator === 'value_between') {
+            const hasMinValue = payload.min != null && !Number.isNaN(payload.min);
+            const hasMaxValue = payload.max != null && !Number.isNaN(payload.max);
+            const minPart = formatMetricMoney(sym, payload.min ?? undefined, numberLocale);
+            const maxPart = formatMetricMoney(sym, payload.max ?? undefined, numberLocale);
+            const summary = `${minPart} - ${maxPart}`;
+            const triggerLabel = `${i18n.operators.between}: ${summary}`;
+            return (_jsx(MetricValueThresholdPopoverShell, { open: metricPopoverOpen, onOpenChange: handleMetricPopoverOpenChange, buttonSize: buttonSize, triggerLabel: triggerLabel, summary: summary, triggerClassName: cn(METRIC_POPOVER_TRIGGER_WIDE, !hasMinValue && !hasMaxValue ? 'text-muted-foreground' : 'text-foreground'), children: _jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [_jsx(Input, { type: "number", size: inputSizeProp, className: "w-full min-w-0 tabular-nums", value: draftMin, onChange: (e) => {
+                                const v = e.target.value;
+                                draftMinRef.current = v;
+                                setDraftMin(v);
+                            }, onKeyDown: handleMetricValueInputKeyDown }), _jsx("div", { className: "pointer-events-none text-center text-xs text-muted-foreground select-none", "aria-hidden": true, children: "-" }), _jsx(Input, { type: "number", size: inputSizeProp, className: "w-full min-w-0 tabular-nums", value: draftMax, onChange: (e) => {
+                                const v = e.target.value;
+                                draftMaxRef.current = v;
+                                setDraftMax(v);
+                            }, onKeyDown: handleMetricValueInputKeyDown })] }) }));
+        }
+        return null;
+    })();
+    return valueSegment;
+}

package/dist/components/filters/filters-defaults.d.ts

@@ -1,4 +1,8 @@
+import type { DateSelectorI18nConfig, DateSelectorValue } from '../../blocks/date-selector/date-selector-types';
 import type { FilterI18nConfig, FilterOperator } from './filters-types';
+export type DateMetricDateConnectorPhrases = Pick<FilterI18nConfig, 'dateMetricDateOn' | 'dateMetricDateIn'>;
+/** Default bar connector between amount and date for `date_metric` filters. */
+export declare function defaultDateMetricDateConnector(date: DateSelectorValue, dateI18n: DateSelectorI18nConfig, phrases?: DateMetricDateConnectorPhrases): string;
 export declare const DEFAULT_I18N: FilterI18nConfig;
 export declare const createOperatorsFromI18n: (i18n: FilterI18nConfig) => Record<string, FilterOperator[]>;
 export declare const DEFAULT_OPERATORS: Record<string, FilterOperator[]>;

package/dist/components/filters/filters-defaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filters-defaults.d.ts","sourceRoot":"","sources":["../../../src/components/filters/filters-defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAExE,eAAO,MAAM,YAAY,EAAE,gBAkE1B,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,gBAAgB,KAAG,MAAM,CAAC,MAAM,EAAE,cAAc,EAAE,CAgC9F,CAAC;AAEH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,EAAE,CAAyC,CAAC"}
+{"version":3,"file":"filters-defaults.d.ts","sourceRoot":"","sources":["../../../src/components/filters/filters-defaults.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAEhH,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAExE,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAAC,gBAAgB,EAAE,kBAAkB,GAAG,kBAAkB,CAAC,CAAC;AAe7G,+EAA+E;AAC/E,wBAAgB,8BAA8B,CAC1C,IAAI,EAAE,iBAAiB,EACvB,QAAQ,EAAE,sBAAsB,EAChC,OAAO,GAAE,8BAAsE,GAChF,MAAM,CA2BR;AAED,eAAO,MAAM,YAAY,EAAE,gBA0E1B,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,gBAAgB,KAAG,MAAM,CAAC,MAAM,EAAE,cAAc,EAAE,CAqC9F,CAAC;AAEH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,EAAE,CAAyC,CAAC"}