@caratlogic/design-system 0.1.34 → 0.1.35

package/dist/index.cjs.js

@@ -15901,8 +15901,9 @@ function filterOptionsByQuery(options, query) {
     return options.filter((option) => option.label.toLowerCase().includes(needle));
 }
 const getChipClassName = getPillClassName;
-function getTileClassName(selected) {
-    return getSelectableOptionClassName(selected, 'flex min-h-12 min-w-0 flex-col items-center justify-center gap-0.5 rounded-md px-2 py-1.5 text-center');
+/** A tile with a count reads like a list row: name on the left, count badge on the right. */
+function getTileClassName(selected, hasCount = false) {
+    return getSelectableOptionClassName(selected, cn('flex min-h-12 min-w-0 items-center gap-2 rounded-md px-3 py-1.5', hasCount ? 'justify-between text-left' : 'justify-center text-center'));
 }
 /** The list's search box only appears once there are enough options to need it. */
 const SEARCH_MIN_OPTIONS = 9;
@@ -15915,6 +15916,15 @@ const FILL_WRAPPER_CLASS_NAME = 'flex min-h-0 flex-1 flex-col';
 const LIST_COLUMN_MIN_WIDTH = '10rem';
 const getOptionsScrollClassName = (fill) => fill ? OPTIONS_FILL_CLASS_NAME : OPTIONS_SCROLL_CLASS_NAME;
 const LIST_ROW_CLASS_NAME = getOptionRowClassName();
+const COUNT_BADGE_TONES = {
+    neutral: 'bg-muted text-muted-foreground',
+    tinted: 'bg-primary/10 text-primary',
+    solid: 'bg-primary-foreground/20 text-primary-foreground',
+};
+/** How many items carry the option, as a small round badge at the right. */
+const getCountBadgeClassName = (tone) => cn('inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-xs font-medium tabular-nums', COUNT_BADGE_TONES[tone]);
+const COUNT_BADGE_CLASS_NAME = getCountBadgeClassName('neutral');
+const formatOptionCount = (count) => count.toLocaleString('en-US');
 /** Picking a value: a single-choice list replaces (or clears) it, a multi-choice list toggles it. */
 const pickValue = (values, value, single) => {
     if (!single)
@@ -15963,12 +15973,12 @@ function PickListFilter({ options, value, onChange, ariaLabel, layout = 'list',
                         ? getGridColumnsStyle(undefined, LIST_COLUMN_MIN_WIDTH)
                         : undefined, wrapperClassName: wrapperClassName, children: visibleOptions.map((option) => (jsxRuntime.jsxs("label", { className: LIST_ROW_CLASS_NAME, children: [single ? (jsxRuntime.jsx("input", { type: "radio", name: radioName, checked: value.includes(option.value), 
                                 // A click on the picked row clears it (radios can't be unticked natively).
-                                onClick: () => toggle(option), onChange: () => undefined, className: LIST_RADIO_CLASS_NAME })) : (jsxRuntime.jsx(Checkbox, { className: LIST_CHECKBOX_CLASS_NAME, checked: value.includes(option.value), onCheckedChange: () => toggle(option) })), option.content ? (jsxRuntime.jsx("span", { className: "min-w-0 flex-1", children: option.content })) : (jsxRuntime.jsx(TruncatedLabel, { text: option.label, className: "flex-1" })), (option.count ?? option.hint) !== undefined && (jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground tabular-nums", children: option.count ?? option.hint })), jsxRuntime.jsx(OptionSwatch, { color: option.swatch })] }, option.value))) })] }));
+                                onClick: () => toggle(option), onChange: () => undefined, className: LIST_RADIO_CLASS_NAME })) : (jsxRuntime.jsx(Checkbox, { className: LIST_CHECKBOX_CLASS_NAME, checked: value.includes(option.value), onCheckedChange: () => toggle(option) })), option.content ? (jsxRuntime.jsx("span", { className: "min-w-0 flex-1", children: option.content })) : (jsxRuntime.jsx(TruncatedLabel, { text: option.label, className: "flex-1" })), option.hint && (jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground", children: option.hint })), jsxRuntime.jsx(OptionSwatch, { color: option.swatch }), option.count !== undefined && (jsxRuntime.jsx("span", { className: COUNT_BADGE_CLASS_NAME, children: formatOptionCount(option.count) }))] }, option.value))) })] }));
     }
     if (layout === 'tiles') {
-        return (jsxRuntime.jsx(ScrollFade, { role: "group", "aria-label": ariaLabel, wrapperClassName: wrapperClassName, className: cn('grid content-start gap-1.5', scrollClassName), style: getGridColumnsStyle(columns), children: visibleOptions.map((option) => (jsxRuntime.jsxs("button", { type: "button", "aria-pressed": value.includes(option.value), onClick: () => toggle(option), className: getTileClassName(value.includes(option.value)), children: [jsxRuntime.jsx(TruncatedLabel, { text: option.label }), option.count !== undefined && (jsxRuntime.jsx("span", { className: "text-xs font-normal text-muted-foreground", children: option.count }))] }, option.value))) }));
+        return (jsxRuntime.jsx(ScrollFade, { role: "group", "aria-label": ariaLabel, wrapperClassName: wrapperClassName, className: cn('grid content-start gap-1.5', scrollClassName), style: getGridColumnsStyle(columns), children: visibleOptions.map((option) => (jsxRuntime.jsxs("button", { type: "button", "aria-pressed": value.includes(option.value), onClick: () => toggle(option), className: getTileClassName(value.includes(option.value), option.count !== undefined), children: [jsxRuntime.jsx(TruncatedLabel, { text: option.label }), option.count !== undefined && (jsxRuntime.jsx("span", { className: getCountBadgeClassName(value.includes(option.value) ? 'tinted' : 'neutral'), children: formatOptionCount(option.count) }))] }, option.value))) }));
     }
-    return (jsxRuntime.jsx(ScrollFade, { role: "group", "aria-label": ariaLabel, wrapperClassName: wrapperClassName, className: cn('flex flex-wrap content-start gap-1.5', scrollClassName), children: visibleOptions.map((option) => (jsxRuntime.jsxs("button", { type: "button", "aria-pressed": value.includes(option.value), onClick: () => toggle(option), className: getChipClassName(value.includes(option.value)), children: [jsxRuntime.jsx(OptionSwatch, { color: option.swatch, round: true }), jsxRuntime.jsx("span", { children: option.label }), option.count !== undefined && (jsxRuntime.jsx("span", { className: "font-normal text-muted-foreground", children: option.count }))] }, option.value))) }));
+    return (jsxRuntime.jsx(ScrollFade, { role: "group", "aria-label": ariaLabel, wrapperClassName: wrapperClassName, className: cn('flex flex-wrap content-start gap-1.5', scrollClassName), children: visibleOptions.map((option) => (jsxRuntime.jsxs("button", { type: "button", "aria-pressed": value.includes(option.value), onClick: () => toggle(option), className: getChipClassName(value.includes(option.value)), children: [jsxRuntime.jsx(OptionSwatch, { color: option.swatch, round: true }), jsxRuntime.jsx("span", { children: option.label }), option.count !== undefined && (jsxRuntime.jsx("span", { className: "text-xs font-normal tabular-nums text-muted-foreground", children: formatOptionCount(option.count) }))] }, option.value))) }));
 }
 
 const TRIGGER_BASE = 'h-9 !w-fit shadow-[0_1px_2px_0_rgba(0,0,0,0.05)] gap-2 text-foreground bg-card hover:bg-muted/40 border border-border rounded-lg text-sm font-medium px-3';
@@ -38733,8 +38743,11 @@ function useDateRangeFilter(value, onChange, today, fiscalYearStartMonth) {
 }
 
 /** Date filter body: presets on the left, a From / To range on the right. */
-function DateRangeFilter({ value, onChange, ariaLabel, fiscalYearStartMonth = 1, today = new Date(), }) {
+function DateRangeFilter({ value, onChange, ariaLabel, fiscalYearStartMonth = 1, today = new Date(), compact = false, }) {
     const { from, to, selectPreset, handleFromChange, handleToChange, clear } = useDateRangeFilter(value, onChange, today, fiscalYearStartMonth);
+    if (compact) {
+        return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-2.5 text-xs", children: [jsxRuntime.jsx("div", { role: "group", "aria-label": getPresetGroupLabel(ariaLabel), className: "flex flex-wrap gap-1.5", children: DATE_PRESET_OPTIONS.map((preset) => (jsxRuntime.jsx("button", { type: "button", "aria-pressed": value?.preset === preset.value, onClick: () => selectPreset(preset.value), className: getPillClassName(value?.preset === preset.value), children: preset.label }, preset.value))) }), jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [jsxRuntime.jsx(DateInput, { value: fromIsoDate(from), max: to || undefined, placeholder: "From", ariaLabel: getDateInputLabel(ariaLabel, 'from'), onChange: handleFromChange }), jsxRuntime.jsx(DateInput, { value: fromIsoDate(to), min: from || undefined, placeholder: "To", ariaLabel: getDateInputLabel(ariaLabel, 'to'), onChange: handleToChange, align: "end" })] }), value && (jsxRuntime.jsx("button", { type: "button", onClick: clear, className: cn('self-start', FILTER_LINK_CLASS_NAME), children: "Clear" }))] }));
+    }
     return (jsxRuntime.jsxs("div", { className: "grid grid-cols-[auto_minmax(0,1fr)] divide-x divide-border text-xs", children: [jsxRuntime.jsx("div", { role: "group", "aria-label": getPresetGroupLabel(ariaLabel), className: "flex flex-col gap-1 pr-3", children: DATE_PRESET_OPTIONS.map((preset) => (jsxRuntime.jsx("button", { type: "button", "aria-pressed": value?.preset === preset.value, onClick: () => selectPreset(preset.value), className: getPresetClassName$1(value?.preset === preset.value), children: preset.label }, preset.value))) }), jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-3 pl-3", children: [jsxRuntime.jsxs("label", { className: "flex min-w-0 flex-col gap-1 text-muted-foreground", children: ["From", jsxRuntime.jsx(DateInput
                             // The inputs sit on the card's right; an end-aligned calendar stays under them.
                             , { 
@@ -38799,13 +38812,17 @@ function getNextScaleRange(anchor, option) {
         ? { from: option, to: option }
         : { from: anchor, to: option };
 }
-function getScaleButtonClassName(position, fill = false) {
-    return cn('flex min-w-0 cursor-pointer flex-col items-center justify-center rounded-md border text-center transition-colors', fill ? 'min-h-12 px-2 py-1.5 text-sm' : 'min-h-10 px-1.5 py-1 text-xs', FILTER_FOCUS_RING, 
+function getScaleButtonClassName(position, fill = false, hasCount = false) {
+    return cn('flex min-w-0 cursor-pointer items-center gap-2 rounded-md border transition-colors', 
+    // With a count: name left, badge right (like a list row); without: name centred.
+    hasCount ? 'justify-between text-left' : 'justify-center text-center', fill ? 'min-h-12 px-2 py-1.5 text-sm' : 'min-h-10 px-1.5 py-1 text-xs', FILTER_FOCUS_RING, 
     // Unselected options look exactly like unselected pick-list tiles.
     position === 'outside' && getSelectableOptionClassName(false), position === 'end' &&
         'border-primary bg-primary font-medium text-primary-foreground', position === 'between' &&
         'border-primary/30 bg-primary/10 font-medium text-primary');
 }
+/** The count badge follows the tile: plain, tinted inside the range, solid on an end. */
+const getScaleCountTone = (position) => position === 'end' ? 'solid' : position === 'between' ? 'tinted' : 'neutral';
 
 /** First click picks the start option, the next click the end option; a click after that starts over. */
 function useScaleRangeFilter({ value, onChange, }) {
@@ -38826,7 +38843,7 @@ function ScaleRangeFilter({ options, value, onChange, ariaLabel, columns, fill =
     const { selectOption } = useScaleRangeFilter({ value, onChange });
     return (jsxRuntime.jsx("div", { role: "group", "aria-label": ariaLabel, className: fill ? 'grid gap-2' : 'grid gap-1.5', style: getGridColumnsStyle(columns), children: options.map((option) => {
             const position = getScalePosition(options, value, option.value);
-            return (jsxRuntime.jsx("button", { type: "button", "aria-pressed": position !== 'outside', "aria-label": option.label, onClick: () => selectOption(option.value), className: getScaleButtonClassName(position, fill), children: jsxRuntime.jsx(TruncatedLabel, { text: option.label }) }, option.value));
+            return (jsxRuntime.jsxs("button", { type: "button", "aria-pressed": position !== 'outside', "aria-label": option.label, onClick: () => selectOption(option.value), className: getScaleButtonClassName(position, fill, option.count !== undefined), children: [jsxRuntime.jsx(TruncatedLabel, { text: option.label }), option.count !== undefined && (jsxRuntime.jsx("span", { className: getCountBadgeClassName(getScaleCountTone(position)), children: formatOptionCount(option.count) }))] }, option.value));
         }) }));
 }
 
@@ -38860,6 +38877,43 @@ function FilterCardSkeleton({ variant = 'list', className, }) {
     return (jsxRuntime.jsxs("div", { "aria-hidden": "true", className: cn(CARD_CLASS_NAME, className), children: [jsxRuntime.jsx(SquareSkeleton, { height: 16, width: 96, rounded: "sm" }), jsxRuntime.jsx(Body, { variant: variant })] }));
 }
 
+const getRemoveLabel = (label) => `Remove ${label}`;
+
+function usePickListDropdown(options, value, onChange, single) {
+    const [open, setOpen] = React.useState(false);
+    const selected = React.useMemo(() => options.filter((option) => value.includes(option.value)), [options, value]);
+    return {
+        open,
+        setOpen,
+        selected,
+        handleChange: (values) => {
+            onChange(values);
+            if (single)
+                setOpen(false);
+        },
+        remove: (removed) => onChange(value.filter((current) => current !== removed)),
+    };
+}
+
+const TRIGGER_CLASS_NAME = cn('flex h-9 w-full min-w-0 cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-card px-3 text-left text-sm transition-colors hover:bg-muted/40', FILTER_FOCUS_RING);
+const CHIP_CLASS_NAME = 'inline-flex h-7 max-w-full items-center gap-1 rounded-full border border-primary/30 bg-primary/5 pr-1 pl-2.5 text-xs text-foreground';
+const CHIP_REMOVE_CLASS_NAME = cn('inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground hover:bg-primary/10 hover:text-foreground', FILTER_FOCUS_RING);
+/** `Ruby` for one, `3 selected` for several; the pills below name them. */
+function getTriggerText(selectedLabels, placeholder) {
+    if (selectedLabels.length === 0)
+        return placeholder;
+    if (selectedLabels.length === 1)
+        return selectedLabels[0];
+    return `${selectedLabels.length} selected`;
+}
+
+/** A long pick list as a compact select: the searchable list opens on demand, picks show as removable pills. */
+function PickListDropdown({ options, value, onChange, ariaLabel, placeholder, searchPlaceholder, single = false, }) {
+    const { open, setOpen, selected, handleChange, remove } = usePickListDropdown(options, value, onChange, single);
+    const labels = selected.map((option) => option.label);
+    return (jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [jsxRuntime.jsxs(Popover, { open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs("button", { type: "button", "aria-label": ariaLabel, className: TRIGGER_CLASS_NAME, children: [jsxRuntime.jsx("span", { className: cn('min-w-0 flex-1', labels.length === 0 && 'text-placeholder'), children: jsxRuntime.jsx(TruncatedLabel, { text: getTriggerText(labels, placeholder) }) }), jsxRuntime.jsx(ChevronDown, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" })] }) }), jsxRuntime.jsx(PopoverContent, { align: "start", sideOffset: 4, className: "w-[var(--radix-popover-trigger-width)] min-w-64 p-3", children: jsxRuntime.jsx(PickListFilter, { ariaLabel: ariaLabel, options: options, value: value, onChange: handleChange, layout: "list", searchPlaceholder: searchPlaceholder ?? 'Search', alwaysSearchable: true, single: single }) })] }), !single && selected.length > 0 && (jsxRuntime.jsx("ul", { className: "flex flex-wrap gap-1.5", children: selected.map((option) => (jsxRuntime.jsxs("li", { className: CHIP_CLASS_NAME, children: [jsxRuntime.jsx(TruncatedLabel, { text: option.label }), jsxRuntime.jsx("button", { type: "button", "aria-label": getRemoveLabel(option.label), onClick: () => remove(option.value), className: CHIP_REMOVE_CLASS_NAME, children: jsxRuntime.jsx(X$2, { "aria-hidden": "true", className: "size-3" }) })] }, option.value))) }))] }));
+}
+
 const getClearIdsLabel = (ariaLabel) => `Clear ${ariaLabel}`;
 
 const DEFAULT_ID_HELPER_TEXT = 'Paste from Excel or an email. Commas, spaces and new lines all split IDs.';
@@ -39033,7 +39087,7 @@ function isSameRange(a, b) {
 function getBoundInputClassName(filled) {
     return cn('h-9 min-w-0 flex-1 text-sm', filled && 'border-primary bg-primary/5');
 }
-const getPresetClassName = getPillClassName;
+const getPresetClassName = (selected) => cn(getPillClassName(selected), 'shrink-0 whitespace-nowrap');
 
 function useNumberRangeInputs(value, onChange) {
     const minText = toBoundText(value?.min);
@@ -39067,7 +39121,7 @@ function useNumberRangeInputs(value, onChange) {
 /** From – To number inputs for full-page filter cards, with optional quick-pick presets. */
 function NumberRangeInputs({ value, onChange, ariaLabel, fromPlaceholder = 'From', toPlaceholder = 'To', presets, presetsLabel, }) {
     const { fromDraft, toDraft, reversed, handleFromChange, handleToChange, isPresetSelected, togglePreset, } = useNumberRangeInputs(value, onChange);
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(Input, { inputMode: "decimal", value: fromDraft, placeholder: fromPlaceholder, "aria-label": getBoundLabel(ariaLabel, 'from'), "aria-invalid": reversed || undefined, onChange: handleFromChange, className: getBoundInputClassName(fromDraft !== '') }), jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "\u2013" }), jsxRuntime.jsx(Input, { inputMode: "decimal", value: toDraft, placeholder: toPlaceholder, "aria-label": getBoundLabel(ariaLabel, 'to'), "aria-invalid": reversed || undefined, onChange: handleToChange, className: getBoundInputClassName(toDraft !== '') })] }), reversed && (jsxRuntime.jsx("p", { role: "alert", className: "text-xs text-destructive", children: REVERSED_RANGE_MESSAGE })), presets && presets.length > 0 && (jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [presetsLabel && (jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: presetsLabel })), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: presets.map((preset) => (jsxRuntime.jsx("button", { type: "button", "aria-pressed": isPresetSelected(preset), onClick: () => togglePreset(preset), className: getPresetClassName(isPresetSelected(preset)), children: preset.label }, preset.label))) })] }))] }));
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(Input, { inputMode: "decimal", value: fromDraft, placeholder: fromPlaceholder, "aria-label": getBoundLabel(ariaLabel, 'from'), "aria-invalid": reversed || undefined, onChange: handleFromChange, className: getBoundInputClassName(fromDraft !== '') }), jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "\u2013" }), jsxRuntime.jsx(Input, { inputMode: "decimal", value: toDraft, placeholder: toPlaceholder, "aria-label": getBoundLabel(ariaLabel, 'to'), "aria-invalid": reversed || undefined, onChange: handleToChange, className: getBoundInputClassName(toDraft !== '') })] }), reversed && (jsxRuntime.jsx("p", { role: "alert", className: "text-xs text-destructive", children: REVERSED_RANGE_MESSAGE })), presets && presets.length > 0 && (jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [presetsLabel && (jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: presetsLabel })), jsxRuntime.jsx("div", { className: "flex gap-1.5 overflow-x-auto pb-1 [scrollbar-width:thin]", children: presets.map((preset) => (jsxRuntime.jsx("button", { type: "button", "aria-pressed": isPresetSelected(preset), onClick: () => togglePreset(preset), className: getPresetClassName(isPresetSelected(preset)), children: preset.label }, preset.label))) })] }))] }));
 }
 
 const NEXT_KEYS = new Set(['ArrowDown', 'ArrowRight']);
@@ -39100,7 +39154,10 @@ function getRadioCircleClassName(checked) {
 }
 
 /** Any / Yes / No radio group for boolean columns (e.g. Active). */
-function TriStateFilter({ value, onChange, ariaLabel, }) {
+function TriStateFilter({ value, onChange, ariaLabel, compact = false, }) {
+    if (compact) {
+        return (jsxRuntime.jsx("div", { role: "radiogroup", "aria-label": ariaLabel, onKeyDown: createRadioGroupKeyDownHandler(value, onChange), className: "flex flex-wrap gap-1.5", children: TRI_STATE_OPTIONS.map((option) => (jsxRuntime.jsx("button", { type: "button", role: "radio", "aria-checked": option.value === value, tabIndex: option.value === value ? 0 : -1, "data-value": option.value, onClick: () => onChange(option.value), className: getPillClassName(option.value === value), children: option.label }, option.value))) }));
+    }
     return (jsxRuntime.jsx("div", { role: "radiogroup", "aria-label": ariaLabel, onKeyDown: createRadioGroupKeyDownHandler(value, onChange), className: "flex flex-col gap-0.5", children: TRI_STATE_OPTIONS.map((option) => {
             const checked = option.value === value;
             return (jsxRuntime.jsxs("button", { type: "button", role: "radio", "aria-checked": checked, tabIndex: checked ? 0 : -1, "data-value": option.value, onClick: () => onChange(option.value), className: getRadioRowClassName(checked), children: [jsxRuntime.jsx("span", { "aria-hidden": "true", className: getRadioCircleClassName(checked), children: checked && jsxRuntime.jsx("span", { className: "size-2 rounded-full bg-primary" }) }), option.label] }, option.value));
@@ -76982,16 +77039,17 @@ function getPopoverWidthClassName(field) {
 }
 const POPOVER_TILE_COLUMNS = 2;
 /** Above this many options, chips / tiles give way to the searchable checkbox list. */
-const MAX_PILL_OPTIONS = 10;
+const MAX_PILL_OPTIONS = 4;
 /** The list layout actually used: the configured one, or the checkbox list once there are too many options for pills. */
 function resolveListLayout(field) {
     return (field.options?.length ?? 0) > MAX_PILL_OPTIONS
         ? 'list'
         : (field.layout ?? 'chips');
 }
-/** The empty single-select dropdown on a card: `inputPlaceholder`, else `Any <label>` (set `inputPlaceholder` for acronyms). */
-const getSingleSelectPlaceholder = (field) => field.inputPlaceholder ?? `Any ${field.label.toLowerCase()}`;
-/** Popover variant: the same control and layout as the card (pills up to 10 options, then the list); tile grids drop to two columns. */
+/** A card dropdown with nothing picked: `inputPlaceholder`, else `Any <label>` (single) or `Select <label>` (set `inputPlaceholder` for acronyms). */
+const getDropdownPlaceholder = (field) => field.inputPlaceholder ??
+    `${field.single ? 'Any' : 'Select'} ${field.label.toLowerCase()}`;
+/** Popover variant: the same control and layout as the card (pills up to 4 options, then the list); tile grids drop to two columns. */
 function toPopoverField(field) {
     if (field.type === 'scale' ||
         (field.type === 'list' && resolveListLayout(field) === 'tiles')) {
@@ -77013,21 +77071,17 @@ function getPopoverStatus(field, value) {
     return describeFilterValue(field, value) || undefined;
 }
 
-/** Single-choice list on a card, as the design's dropdown ("Any supplier"); the filter row lists the same options as a pick-one list. */
-function SingleSelectFilter({ field, selected, onSelect, }) {
-    const options = field.options ?? [];
-    return (jsxRuntime.jsx(SearchableSelect, { options: options, selectedItem: options.find((option) => option.value === selected) ?? null, onChange: (option) => onSelect(option.value), getOptionKey: (option) => option.value, getOptionLabel: (option) => option.label, searchPlaceholder: getSingleSelectPlaceholder(field), hideTriggerSearchIcon: true }));
-}
 /** The control alone — identical in a filter-row popover and on a card, except the list layout. Compose it into custom cards. */
 function FilterFieldControl({ field, value, onChange, fiscalYearStartMonth, fill, inPopover, }) {
     const ariaLabel = `${field.label} filter`;
     switch (field.type) {
         case 'list': {
-            if (field.single && !inPopover) {
-                return (jsxRuntime.jsx(SingleSelectFilter, { field: field, selected: valueOfType(value, 'list')?.values[0], onSelect: (next) => onChange(toListValue([next])) }));
-            }
             const layout = resolveListLayout(field);
-            return (jsxRuntime.jsx(PickListFilter, { ariaLabel: ariaLabel, options: field.options ?? [], value: valueOfType(value, 'list')?.values ?? [], onChange: (values) => onChange(toListValue(values)), layout: layout, searchPlaceholder: layout === 'list' ? field.searchPlaceholder : undefined, columns: field.columns, fill: fill, single: field.single }));
+            // On a card a long list is a compact dropdown with its picks as pills; the filter row's popover already is one.
+            if (!inPopover && layout === 'list') {
+                return (jsxRuntime.jsx(PickListDropdown, { ariaLabel: ariaLabel, options: field.options ?? [], value: valueOfType(value, 'list')?.values ?? [], onChange: (values) => onChange(toListValue(values)), placeholder: getDropdownPlaceholder(field), searchPlaceholder: field.searchPlaceholder, single: field.single }));
+            }
+            return (jsxRuntime.jsx(PickListFilter, { ariaLabel: ariaLabel, options: field.options ?? [], value: valueOfType(value, 'list')?.values ?? [], onChange: (values) => onChange(toListValue(values)), layout: layout, searchPlaceholder: layout === 'list' ? field.searchPlaceholder : undefined, columns: field.columns, single: field.single }));
         }
         case 'scale':
             return (jsxRuntime.jsx(ScaleRangeFilter, { ariaLabel: ariaLabel, options: field.options ?? [], value: valueOfType(value, 'scale')?.range, onChange: (range) => onChange(toScaleValue(range)), columns: field.columns, fill: fill }));
@@ -77040,9 +77094,9 @@ function FilterFieldControl({ field, value, onChange, fiscalYearStartMonth, fill
         case 'contains':
             return (jsxRuntime.jsx(ContainsFilter, { ariaLabel: ariaLabel, size: "field", placeholder: field.inputPlaceholder, value: valueOfType(value, 'contains')?.text ?? '', onChange: (text) => onChange(toContainsValue(text)) }));
         case 'date':
-            return (jsxRuntime.jsx(DateRangeFilter, { ariaLabel: ariaLabel, value: valueOfType(value, 'date')?.range, onChange: (range) => onChange(toDateValue(range)), fiscalYearStartMonth: fiscalYearStartMonth }));
+            return (jsxRuntime.jsx(DateRangeFilter, { ariaLabel: ariaLabel, value: valueOfType(value, 'date')?.range, onChange: (range) => onChange(toDateValue(range)), fiscalYearStartMonth: fiscalYearStartMonth, compact: !inPopover }));
         case 'bool':
-            return (jsxRuntime.jsx(TriStateFilter, { ariaLabel: ariaLabel, value: valueOfType(value, 'bool')?.value ?? 'any', onChange: (next) => onChange(toBoolValue(next)) }));
+            return (jsxRuntime.jsx(TriStateFilter, { ariaLabel: ariaLabel, value: valueOfType(value, 'bool')?.value ?? 'any', onChange: (next) => onChange(toBoolValue(next)), compact: !inPopover }));
     }
 }
 /** Filter-row cell: inline input for number/contains, otherwise a trigger that opens the control in a popover. */
@@ -77087,16 +77141,12 @@ const RETRY_LABEL = 'Try again';
 /** Placeholder cards while the filters load; roughly the first rows of a card grid. */
 const SKELETON_CARD_COUNT = 8;
 const SKELETON_GRID_CLASS_NAME = 'grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4';
-
-const DEFAULT_SKELETON_CARDS = Array.from({ length: SKELETON_CARD_COUNT }, (_, index) => `card-${index}`);
-/** Loading placeholder: the page's own skeleton, or generic list cards. */
-function FilterSurfaceSkeleton({ children, }) {
-    return (jsxRuntime.jsx("div", { role: "status", "aria-label": LOADING_LABEL, children: children ?? (jsxRuntime.jsx("div", { className: SKELETON_GRID_CLASS_NAME, children: DEFAULT_SKELETON_CARDS.map((id) => (jsxRuntime.jsx(FilterCardSkeleton, {}, id))) })) }));
-}
-/** Shown in place of the cards when the filters couldn't load. */
-function FilterSurfaceError({ message, onRetry, }) {
-    return (jsxRuntime.jsxs("div", { role: "alert", className: "flex flex-col items-center rounded-xl border border-border bg-card px-6 py-12 text-center", children: [jsxRuntime.jsx("span", { className: "flex size-10 items-center justify-center rounded-full bg-destructive/10 text-destructive", children: jsxRuntime.jsx(TriangleAlert, { "aria-hidden": "true", className: "size-5" }) }), jsxRuntime.jsx("p", { className: "mt-4 text-base font-semibold text-foreground", children: ERROR_TITLE }), jsxRuntime.jsx("p", { className: "mt-1.5 max-w-sm text-sm text-muted-foreground", children: message }), onRetry && (jsxRuntime.jsx(Button, { appearance: "outline", color: "secondary", size: "md", leftIcon: jsxRuntime.jsx(RotateCcw, {}), onClick: onRetry, className: "mt-5", children: RETRY_LABEL }))] }));
-}
+/** Masonry grid rows are this tall; a card spans as many as its height needs. */
+const MASONRY_ROW_PX = 4;
+/** Rows a card of `height` px (including its bottom gap) spans; 0 until measured. */
+const getMasonrySpan = (height) => height > 0 ? Math.ceil(height / MASONRY_ROW_PX) : 0;
+/** Dense 4px rows; the vertical gap comes from each item's bottom padding. */
+const MASONRY_GRID_CLASS_NAME = 'grid-flow-row-dense auto-rows-[4px] gap-x-3';
 
 const NESTED_LAYER_SELECTOR = '[data-slot="popover-content"], [role="dialog"], [role="menu"], [role="listbox"]';
 function useCloseOnEscape(onClose) {
@@ -77118,14 +77168,49 @@ function useFilterSurfaceMore(defaultExpanded = false) {
     const [expanded, setExpanded] = React.useState(defaultExpanded);
     return { expanded, toggle: () => setExpanded((current) => !current) };
 }
+/** Measures a masonry card and keeps its row span in step with its height (content opening, wrapping…). */
+function useMasonrySpan() {
+    const [node, setNode] = React.useState(null);
+    const [span, setSpan] = React.useState(0);
+    React.useEffect(() => {
+        if (!node)
+            return;
+        const measure = () => {
+            const next = getMasonrySpan(node.offsetHeight);
+            setSpan((current) => (current === next ? current : next));
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [node]);
+    return { ref: React.useCallback((next) => setNode(next), []), span };
+}
+
+const DEFAULT_SKELETON_CARDS = Array.from({ length: SKELETON_CARD_COUNT }, (_, index) => `card-${index}`);
+/** Loading placeholder: the page's own skeleton, or generic list cards. */
+function FilterSurfaceSkeleton({ children, }) {
+    return (jsxRuntime.jsx("div", { role: "status", "aria-label": LOADING_LABEL, children: children ?? (jsxRuntime.jsx("div", { className: SKELETON_GRID_CLASS_NAME, children: DEFAULT_SKELETON_CARDS.map((id) => (jsxRuntime.jsx(FilterCardSkeleton, {}, id))) })) }));
+}
+/** Shown in place of the cards when the filters couldn't load. */
+function FilterSurfaceError({ message, onRetry, }) {
+    return (jsxRuntime.jsxs("div", { role: "alert", className: "flex flex-col items-center rounded-xl border border-border bg-card px-6 py-12 text-center", children: [jsxRuntime.jsx("span", { className: "flex size-10 items-center justify-center rounded-full bg-destructive/10 text-destructive", children: jsxRuntime.jsx(TriangleAlert, { "aria-hidden": "true", className: "size-5" }) }), jsxRuntime.jsx("p", { className: "mt-4 text-base font-semibold text-foreground", children: ERROR_TITLE }), jsxRuntime.jsx("p", { className: "mt-1.5 max-w-sm text-sm text-muted-foreground", children: message }), onRetry && (jsxRuntime.jsx(Button, { appearance: "outline", color: "secondary", size: "md", leftIcon: jsxRuntime.jsx(RotateCcw, {}), onClick: onRetry, className: "mt-5", children: RETRY_LABEL }))] }));
+}
+/** One masonry cell: spans the rows its card needs; the bottom padding is the gap to the next card. */
+function MasonryItem({ children }) {
+    const { ref, span } = useMasonrySpan();
+    return (jsxRuntime.jsx("div", { style: span > 0 ? { gridRowEnd: `span ${span}` } : undefined, children: jsxRuntime.jsx("div", { ref: ref, className: "pb-3", children: children }) }));
+}
 
 /** Full-page filter screen (e.g. an advanced search): header, scrolling card grid, sticky apply footer. */
 function FilterSurface({ title, headerActions, footerChips, footerActions, onClose, status = 'ready', errorMessage, onRetry, skeleton, children, }) {
     useCloseOnEscape(onClose);
     return (jsxRuntime.jsxs("div", { role: "region", "aria-label": title, className: "flex h-full min-h-0 flex-col bg-background", children: [jsxRuntime.jsxs("header", { className: "sticky top-0 z-20 flex shrink-0 flex-wrap items-end justify-between gap-3 bg-background px-3 pt-2 pb-3", children: [jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(IconButton, { appearance: "ghost", size: "sm", "aria-label": BACK_LABEL, title: BACK_LABEL, onClick: onClose, children: jsxRuntime.jsx(ArrowLeft, {}) }), jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-foreground", children: title })] }) }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [headerActions, jsxRuntime.jsx(IconButton, { appearance: "outline", size: "md", "aria-label": CLOSE_LABEL, title: CLOSE_LABEL, onClick: onClose, children: jsxRuntime.jsx(X$2, {}) })] })] }), jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 pb-3", children: status === 'loading' ? (jsxRuntime.jsx(FilterSurfaceSkeleton, { children: skeleton })) : status === 'error' ? (jsxRuntime.jsx(FilterSurfaceError, { message: errorMessage ?? DEFAULT_ERROR_MESSAGE, onRetry: onRetry })) : (jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: children })) }), status === 'ready' && (footerChips || footerActions) && (jsxRuntime.jsxs("footer", { className: "sticky bottom-0 z-20 flex flex-wrap items-center justify-between gap-3 border-t border-border bg-card px-3 py-2", children: [jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: footerChips }), jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: footerActions })] }))] }));
 }
-function FilterSurfaceGroup({ title, className, children, }) {
-    return (jsxRuntime.jsxs("section", { className: "flex flex-col gap-3", children: [title && (jsxRuntime.jsx("h2", { className: "text-xs font-semibold uppercase tracking-wide text-label", children: title })), jsxRuntime.jsx("div", { className: cn('grid grid-cols-1 gap-3 lg:grid-cols-6', className), children: children })] }));
+function FilterSurfaceGroup({ title, masonry = false, className, children, }) {
+    return (jsxRuntime.jsxs("section", { className: "flex flex-col gap-3", children: [title && (jsxRuntime.jsx("h2", { className: "text-xs font-semibold uppercase tracking-wide text-label", children: title })), jsxRuntime.jsx("div", { className: cn('grid grid-cols-1 items-start lg:grid-cols-6', masonry ? MASONRY_GRID_CLASS_NAME : 'gap-3', className), children: masonry
+                    ? React.Children.map(children, (child) => child ? jsxRuntime.jsx(MasonryItem, { children: child }) : null)
+                    : children })] }));
 }
 /** Collapsed "More filters" divider that reveals extra cards. */
 function FilterSurfaceMore({ label, defaultExpanded, children, }) {
@@ -79853,6 +79938,7 @@ exports.PageTabs = PageTabs;
 exports.Pagination = Pagination;
 exports.PaginationSelect = PaginationSelect;
 exports.PartnerShareCard = PartnerShareCard;
+exports.PickListDropdown = PickListDropdown;
 exports.PickListFilter = PickListFilter;
 exports.PriceInput = PriceInput;
 exports.Protected = Protected;