basalt-ui 1.26.0 → 1.28.0

package/dist/controls/compare-filter.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { assertRequiredProps } from "../common/validate.js";
 import { EnumFilter } from "./enum-filter.js";
 import { SwapGlyph } from "./glyphs.js";
 const COMPARE_VALUES = ["none", "previous", "year"];
@@ -7,11 +8,25 @@ const COMPARE_LABELS = {
   previous: "Previous period",
   year: "Same period last year"
 };
-function CompareFilter({ field, label = "Compare", icon }) {
+function CompareFilter(props) {
+  assertRequiredProps("CompareFilter", props, ["field"], {
+    field: "bind it to a store field (`store.field.<name>`), never a value/onChange pair."
+  });
+  const { field, label = "Compare", icon, className, style } = props;
   const options = field.options.map(
     (option) => option.label === option.value && isCompareValue(option.value) ? { value: option.value, label: COMPARE_LABELS[option.value] } : option
   );
-  return /* @__PURE__ */ jsx(EnumFilter, { field, label, icon: icon ?? /* @__PURE__ */ jsx(SwapGlyph, {}), options });
+  return /* @__PURE__ */ jsx(
+    EnumFilter,
+    {
+      field,
+      label,
+      icon: icon ?? /* @__PURE__ */ jsx(SwapGlyph, {}),
+      options,
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style }
+    }
+  );
 }
 function isCompareValue(value) {
   return COMPARE_VALUES.includes(value);

package/dist/controls/control-group.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
-export type ControlGroupProps = {
+import type { BasaltProps } from '../common/props.js';
+export type ControlGroupProps = BasaltProps & {
     readonly children: ReactNode;
     /**
      * `none` (the default) JOINS the children: no gap, one shared hairline between each pair, and the
@@ -13,7 +14,6 @@ export type ControlGroupProps = {
      * @default 'none'
      */
     readonly gap?: 'none' | 'tight';
-    readonly className?: string;
 };
-export declare function ControlGroup({ children, gap, className }: ControlGroupProps): ReactNode;
+export declare function ControlGroup({ children, gap, className, style, }: ControlGroupProps): ReactNode;
 //# sourceMappingURL=control-group.d.ts.map

package/dist/controls/control-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control-group.d.ts","sourceRoot":"","sources":["../../src/controls/control-group.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;IAC5B;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,GAAY,EAAE,SAAS,EAAE,EAAE,iBAAiB,GAAG,SAAS,CAWhG"}
+{"version":3,"file":"control-group.d.ts","sourceRoot":"","sources":["../../src/controls/control-group.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGlD,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG;IAC5C,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;IAC5B;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAChC,CAAA;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,GAAY,EACZ,SAAS,EACT,KAAK,GACN,EAAE,iBAAiB,GAAG,SAAS,CAY/B"}

package/dist/controls/control-group.js

@@ -1,15 +1,22 @@
 import { jsx } from "react/jsx-runtime";
 import { Box } from "@mantine/core";
+import { cx } from "../common/props.js";
 import classes from "./controls.module.css";
-function ControlGroup({ children, gap = "none", className }) {
+function ControlGroup({
+  children,
+  gap = "none",
+  className,
+  style
+}) {
   return (
     // A Mantine `Box`, not a raw `<div>` — `basalt/raw-html-layout` flags layout styling on a bare
     // HTML tag, the same reason `CtlSlot` uses one.
     /* @__PURE__ */ jsx(
       Box,
       {
-        className: className === void 0 ? classes.group : `${classes.group} ${className}`,
+        className: cx(classes.group, className),
         "data-gap": gap,
+        ...style !== void 0 && { style },
         children
       }
     )

package/dist/controls/controls.module.css

@@ -2,10 +2,11 @@
  * `basalt-ui/controls` — the filter/tab home surface (docs/CONTROLS-SPEC.md §3).
  *
  * Two form factors per control, ONE mount each, switched by CSS only (C9): the `pill` surface
- * (bordered 30px chip + popover) and the `sheet` surface (44px full-width rows inside the mobile
- * `Filters (n)` Drawer). `48em` / `47.99375em` are the `sm` breakpoint in the exact literal form
- * every other basalt CSS module uses — a media query cannot resolve a custom property, so the
- * breakpoint cannot be a token (see `content/prose.module.css`'s note).
+ * (bordered 30px chip + popover) and the `sheet` surface (`PanelRow` label-above-control rows
+ * inside the mobile `Filters (n)` Drawer — the same rows the aside's `panel` surface renders;
+ * `panel-row.module.css` owns their geometry). `48em` / `47.99375em` are the `sm` breakpoint in the
+ * exact literal form every other basalt CSS module uses — a media query cannot resolve a custom
+ * property, so the breakpoint cannot be a token (see `content/prose.module.css`'s note).
  */
 
 /* ── The pill row (FilterSet, desktop + the mobile inline head) ───────────────────────────────── */
@@ -228,21 +229,19 @@
 /* ── The sheet surface (inside the bottom Drawer) ─────────────────────────────────────────────── */
 
 /*
- * One rhythm, one kind of separator. Groups are 12px apart (`--vx-space-stack-md`) and NOTHING
- * between them draws a line: the only hairline in the sheet is the one between two option rows of
- * the SAME group (`.sheetOption`, below), which is what makes it read as a list rather than as a
- * stack of boxed sections. The pre-1.28 sheet had a footer rule, a Drawer header rule and a
- * `Radio.Group` per filter, so a six-filter sheet drew seven lines and none of them grouped
- * anything.
+ * The sheet's body holds a flat list of `PanelRow`s — the SAME rows the aside's `panel` surface
+ * renders (`panel-row.module.css`), zero gap between them: each row already draws its own
+ * `padding-block` inset and its own `.row + .row` hairline, the same "one rhythm, one separator"
+ * rule the aside's own body follows. A `gap` here would double up with that inset instead of
+ * replacing it.
  */
 .sheetBody {
   display: flex;
   flex-direction: column;
-  gap: var(--vx-space-stack-md, 0.75rem);
 }
 
 /* The Drawer header holds the title AND `Reset all` (see `FilterSheet`'s doc), so it is a row that
- * spreads rather than Mantine's default title-plus-close pair. 44px, like every sheet row. */
+ * spreads rather than Mantine's default title-plus-close pair. */
 .sheetHeader {
   min-height: var(--vx-space-sheet-row-height, 2.75rem);
   padding-block: 0;
@@ -265,141 +264,12 @@
   color: var(--vx-ink);
 }
 
-.sheetField {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-/* ── SheetOptionList / SheetDisclosure ────────────────────────────────────────────────────────── */
-
-/* A `<fieldset>` in the option-list case (see `SheetOptionList`), a plain div in the disclosure
- * case — the reset covers both, since a div ignores all of it. */
-.sheetList {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
-  border: none;
-  min-inline-size: 0;
-  min-width: 0;
-}
-
 /*
- * The 44px option row (C15). `<label>` in a list, `<button>` in a disclosure — one class, because
- * the two must be indistinguishable: the disclosure IS the list's last entry.
- *
- * `appearance`/`margin`/`border`/`background`/`text-align` reset the `<button>` form back to the
- * `<label>`'s box; a `<label>` ignores all five, so there is no need for a second selector.
- */
-.sheetOption {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: var(--mantine-spacing-xs, 0.625rem);
-  width: 100%;
-  min-height: var(--vx-space-sheet-row-height, 2.75rem);
-  appearance: none;
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: none;
-  text-align: start;
-  color: var(--vx-muted);
-  cursor: pointer;
-}
-
-/* Hairline BETWEEN rows only — a trailing border on the last row would be the group separator this
- * sheet deliberately does not draw. */
-.sheetOption + .sheetOption,
-.sheetDisclosureBody + .sheetOption,
-.sheetOption + .sheetDisclosureBody {
-  border-top: 1px solid color-mix(in srgb, var(--vx-ink) 6%, transparent);
-}
-
-.sheetOption[data-selected] {
-  color: var(--vx-ink);
-}
-
-.sheetOption[data-disabled] {
-  color: var(--vx-faint);
-  cursor: not-allowed;
-}
-
-@media (hover: hover) {
-  .sheetOption:not([data-disabled]):hover {
-    color: var(--vx-ink);
-  }
-}
-
-/*
- * The real native radio/checkbox, visually hidden — the row's semantics, not decoration (see
- * `SheetOptionList`'s doc). Not `display: none`: a hidden input is unfocusable, which would take the
- * arrow-key group behaviour with it. Standard visually-hidden clip, and `:focus-visible` on it is
- * what draws the ROW's focus ring below.
- */
-.sheetOptionInput {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
-
-.sheetOption:has(.sheetOptionInput:focus-visible),
-.sheetOption:focus-visible {
-  outline: 2px solid var(--vx-accent);
-  outline-offset: -2px;
-  border-radius: var(--vx-radius-ctrl);
-}
-
-.sheetOptionLabel {
-  flex: 1;
-  min-width: 0;
-  font-size: var(--vx-text-md);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.sheetOptionCheck {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  color: var(--vx-accent);
-}
-
-.sheetDisclosureBody {
-  padding-bottom: var(--vx-space-stack-sm, 0.5rem);
-}
-
-/*
- * The group heading — the package's MONO MICRO label (`docs/DESIGN-SPEC.md` §3), the same treatment
- * `shell/app-sidebar.module.css`'s `.sectionLabel` draws for a nav section. It read as a head-font
- * 13.5px line before, which is the same typography as the option rows it labels, so a group heading
- * and its first option were indistinguishable — and the sheet's only remaining structure IS the
- * heading, since it draws no rules between groups.
- */
-.sheetLabel {
-  font-family: var(--basalt-font-mono);
-  font-size: var(--vx-text-micro);
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--vx-faint);
-}
-
-/*
- * The heading a `Radio.Group`/`Checkbox.Group` renders for itself (Mantine's `Input.Label`) — same
- * typography as `.sheetLabel`, which is what the other sheet fields use. Both surfaces get it: in
- * the popover it is the only place the filter's NAME appears (the pill reads the value), and in the
- * sheet it replaces a `SheetField` heading that could never be programmatically associated —
- * `Radio.Group` overwrites any `aria-labelledby` with its own.
+ * The heading a `Radio.Group`/`Checkbox.Group` renders for itself (Mantine's `Input.Label`) — the
+ * package's MONO MICRO label treatment, weighted up to the head font so it reads as a control's own
+ * name rather than as an option row. In the popover it is the only place the filter's NAME appears
+ * (the pill reads the value); the sheet and panel forms name their control through `PanelRow`'s own
+ * label instead, which is why this class is popover-only.
  */
 .groupLabel {
   font-family: var(--basalt-font-head);
@@ -409,46 +279,6 @@
   color: var(--vx-muted);
 }
 
-/* The sheet's `SheetField` heading sits 2px off its list — the mono micro step above is small
- * enough that the default flow gap read as part of the first row. */
-.sheetField > .sheetLabel {
-  margin-bottom: 2px;
-}
-
-/* 44px rows — the one sheet dimension C15 pins. */
-.sheetRow {
-  display: flex;
-  align-items: center;
-  gap: var(--mantine-spacing-xs, 0.625rem);
-  min-height: var(--vx-space-sheet-row-height, 2.75rem);
-  width: 100%;
-  border-bottom: 1px solid var(--vx-surface-hairline);
-}
-
-.sheetRow:last-child {
-  border-bottom: none;
-}
-
-/*
- * A 44px row is only a 44px TOUCH TARGET if the `<label>` fills it. Mantine centres a Radio/Checkbox
- * `body` in its root and the label line-height is ~20px, so without these the tappable strip is the
- * middle 20px of the row and the outer 12px top and bottom do nothing (C15's number, not delivered).
- * Passed through `classNames`, never as a global `.sheetRow label` selector — a descendant selector
- * here would also capture a nested control's own labels.
- */
-.sheetRowBody {
-  flex: 1;
-  align-items: center;
-  min-height: inherit;
-}
-
-.sheetRowLabel {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  min-height: inherit;
-}
-
 /* ── ControlGroup ─────────────────────────────────────────────────────────────────────────────── */
 
 /*
@@ -540,3 +370,156 @@
   max-width: 9rem;
   flex: 0 1 auto;
 }
+
+/* ── The facet list (MultiSelectFilter, `panel` + `sheet` surfaces) ──────────────────────────────── */
+
+/*
+ * Foundry's facet column (`docs/ASIDE-SPEC.md` §1): one 30px row per option, label left, an optional
+ * mono count and a proportional bar behind it, a check at the trailing edge when selected. The
+ * `sheet` surface renders the SAME list (`docs/CONTROLS-SPEC.md` §3: "sheet = panel rows inside a
+ * Drawer") — a set past `max` folds behind `Show N more` on both.
+ *
+ * The semantics are a hidden native `<input>` inside a `<label>` — not `role="checkbox"` on a div —
+ * so the arrow-key group behaviour, the form-association and the announced state come for free, and
+ * the `<label>` wrapping it makes the whole row the hit target rather than a 16px mark inside it.
+ */
+.facetList {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  border: none;
+  min-inline-size: 0;
+  min-width: 0;
+}
+
+.facetOption {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--vx-space-control-gap, 0.375rem);
+  width: 100%;
+  min-width: 0;
+  height: calc(var(--vx-space-control-height-ctl, 1.875rem) * var(--mantine-scale, 1));
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  text-align: start;
+  color: var(--vx-muted);
+  cursor: pointer;
+}
+
+.facetOption[data-selected] {
+  color: var(--vx-ink);
+}
+
+.facetOption[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.facetOption:has(.facetInput:focus-visible),
+.facetOption:focus-visible {
+  outline: 2px solid var(--vx-accent);
+  outline-offset: -2px;
+  border-radius: var(--vx-radius-ctrl);
+}
+
+/*
+ * The proportional bar. It is BEHIND the row's text, not a column beside it — a bar in its own
+ * column costs the label a third of a 300px row, and the quantity being compared is the row itself.
+ * The width arrives as `--facet-fill` (an inline custom property, the one dynamic number here), so
+ * this rule owns every other dimension and the tint.
+ *
+ * Accent at low alpha, never a fill: `--vx-accent-fill` is a control's surface, and a row of eight
+ * of them would read as eight selected options.
+ */
+.facetBar {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: var(--facet-fill, 0%);
+  border-radius: var(--vx-radius-ctrl);
+  background: color-mix(in srgb, var(--vx-accent) 12%, transparent);
+  pointer-events: none;
+}
+
+/* Every painted child sits above the bar. `position: relative` is all that takes — they are in the
+ * same stacking context and come later in the DOM. */
+.facetLabel,
+.facetCount,
+.facetCheck {
+  position: relative;
+}
+
+.facetLabel {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--vx-text-sm);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.facetCount {
+  flex: none;
+  font-family: var(--basalt-font-mono);
+  font-size: var(--vx-text-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--vx-faint);
+}
+
+.facetCheck {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  color: var(--vx-accent);
+}
+
+/*
+ * The visible checkbox box a facet row draws when it carries no count/bar — the ONLY affordance an
+ * unselected, uncounted row had otherwise was none at all (`.facetCheck` above paints only once
+ * selected). Its own component (`Checkbox.Indicator`) reads `--checkbox-size-ctl` off the `size`
+ * prop, so no dimension is declared here; `flex: none` alone keeps it from being squeezed by the
+ * label's `flex: 1`.
+ */
+.facetCheckbox {
+  flex: none;
+}
+
+.facetInput {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* `Show N more` — the list's last row, same height and inset as an option so the column keeps its
+ * rhythm, but muted and mono-free because it is a disclosure and not a value. */
+.facetMore {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: calc(var(--vx-space-control-height-ctl, 1.875rem) * var(--mantine-scale, 1));
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  text-align: start;
+  font-size: var(--vx-text-xs);
+  color: var(--vx-faint);
+  cursor: pointer;
+}
+
+.facetMore:hover,
+.facetMore:focus-visible {
+  color: var(--vx-ink);
+}

package/dist/controls/controls.module.css.d.ts

@@ -18,18 +18,16 @@ declare const classes: {
   readonly sheetHeader: string
   readonly sheetTitle: string
   readonly sheetTitleText: string
-  readonly sheetField: string
-  readonly sheetList: string
-  readonly sheetOption: string
-  readonly sheetDisclosureBody: string
-  readonly sheetOptionInput: string
-  readonly sheetOptionLabel: string
-  readonly sheetOptionCheck: string
-  readonly sheetLabel: string
   readonly groupLabel: string
-  readonly sheetRow: string
-  readonly sheetRowBody: string
-  readonly sheetRowLabel: string
   readonly phoneSelect: string
+  readonly facetList: string
+  readonly facetOption: string
+  readonly facetBar: string
+  readonly facetLabel: string
+  readonly facetCount: string
+  readonly facetCheck: string
+  readonly facetCheckbox: string
+  readonly facetInput: string
+  readonly facetMore: string
 }
 export default classes

package/dist/controls/enum-filter.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { BasaltProps } from '../common/props.js';
 import type { FieldOption } from '../state.js';
 import type { FilterOption } from './select-filter.js';
 /**
@@ -12,12 +13,15 @@ export type ChoiceHandle<T extends string> = {
     readonly options: readonly FieldOption[];
     use(): readonly [T, (next: T) => void];
     isDefault(v: T): boolean;
+    /** Removes the value on whichever lane the field is on — what both reset paths call, never a write
+     * of the fallback back over it. See `useFilterRegistration`'s doc for why. */
+    clear(): void;
 };
-export type EnumFilterProps<T extends string> = {
+export type EnumFilterProps<T extends string> = BasaltProps & {
     readonly field: ChoiceHandle<T>;
     readonly label: string;
     readonly icon?: ReactNode;
-    /** Adds a `Clear` action that writes the field back to its fallback. */
+    /** Adds a `Clear` action that clears the field — the same `field.clear()` `Reset all` calls. */
     readonly clearable?: boolean;
     /**
      * Overrides `field.options` at render — a runtime catalogue whose labels carry live data, or the
@@ -25,6 +29,12 @@ export type EnumFilterProps<T extends string> = {
      * into, and `exactOptionalPropertyTypes` rejects a possibly-undefined member on a bare optional.
      */
     readonly options?: readonly FilterOption[] | undefined;
+    /**
+     * Mono pill label — forwarded to `FilterPill.numeric`. Set by `NumberFilter`, whose values ARE
+     * numbers (`1` / `2` / `7`), and by nothing else: the same law `[data-numeric]` applies to a
+     * numeric SegmentedControl label. A word-valued filter never sets it.
+     */
+    readonly numeric?: boolean | undefined;
 };
-export declare function EnumFilter<T extends string>({ field, label, icon, clearable, options: optionsProp, }: EnumFilterProps<T>): ReactNode;
+export declare function EnumFilter<T extends string>({ field, label, icon, clearable, numeric, options: optionsProp, className, style, }: EnumFilterProps<T>): ReactNode;
 //# sourceMappingURL=enum-filter.d.ts.map

package/dist/controls/enum-filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"enum-filter.d.ts","sourceRoot":"","sources":["../../src/controls/enum-filter.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAK3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI;IAC3C,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;IACpB,QAAQ,CAAC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAA;IACxC,GAAG,IAAI,SAAS,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,CAAA;IACtC,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,OAAO,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,IAAI;IAC9C,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB,wEAAwE;IACxE,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,YAAY,EAAE,GAAG,SAAS,CAAA;CACvD,CAAA;AAED,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EAC3C,KAAK,EACL,KAAK,EACL,IAAI,EACJ,SAAS,EACT,OAAO,EAAE,WAAW,GACrB,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,CAwFhC"}
+{"version":3,"file":"enum-filter.d.ts","sourceRoot":"","sources":["../../src/controls/enum-filter.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAM3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI;IAC3C,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;IACpB,QAAQ,CAAC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAA;IACxC,GAAG,IAAI,SAAS,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,CAAA;IACtC,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,OAAO,CAAA;IACxB;kFAC8E;IAC9E,KAAK,IAAI,IAAI,CAAA;CACd,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,IAAI,WAAW,GAAG;IAC5D,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB,gGAAgG;IAChG,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,YAAY,EAAE,GAAG,SAAS,CAAA;IACtD;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CACvC,CAAA;AAED,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EAC3C,KAAK,EACL,KAAK,EACL,IAAI,EACJ,SAAS,EACT,OAAO,EACP,OAAO,EAAE,WAAW,EACpB,SAAS,EACT,KAAK,GACN,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,CAqGhC"}

package/dist/controls/enum-filter.js

@@ -3,37 +3,51 @@ import { Button, Radio, Stack } from "@mantine/core";
 import classes from "./controls.module.css";
 import { useFilterRegistration, useFilterSurface } from "./filter-context.js";
 import { FilterPill } from "./filter-pill.js";
-import { SheetField, SheetOptionList, useControlName } from "./filter-sheet.js";
+import { useControlName } from "./filter-sheet.js";
+import { PanelChoice, PanelRow } from "./panel-row.js";
 function EnumFilter({
   field,
   label,
   icon,
   clearable,
-  options: optionsProp
+  numeric,
+  options: optionsProp,
+  className,
+  style
 }) {
   const [value, setValue] = field.use();
   const surface = useFilterSurface();
   const isDefault = field.isDefault(value);
   useFilterRegistration(!isDefault, () => {
-    setValue(field.fallback);
+    field.clear();
   });
   const options = optionsProp ?? field.options;
   const selected = options.find((option) => option.value === value);
   const inSheet = surface === "sheet";
-  const { labelId } = useControlName(label, inSheet);
-  if (inSheet) {
-    return /* @__PURE__ */ jsx(SheetField, { label, labelId, children: /* @__PURE__ */ jsx(
-      SheetOptionList,
+  const inPanel = surface === "panel";
+  const { labelId, nameProps } = useControlName(label, inSheet || inPanel);
+  if (inSheet || inPanel) {
+    return /* @__PURE__ */ jsx(
+      PanelRow,
       {
-        mode: "single",
+        label,
         labelId,
-        selected: [value],
-        options,
-        onToggle: (next) => {
-          setValue(next);
-        }
+        ...className !== void 0 && { className },
+        ...style !== void 0 && { style },
+        children: /* @__PURE__ */ jsx(
+          PanelChoice,
+          {
+            nameProps,
+            value,
+            options,
+            ...numeric === true && { numeric: true },
+            onChange: (next) => {
+              setValue(next);
+            }
+          }
+        )
       }
-    ) });
+    );
   }
   const body = (
     // Mantine's OWN `label` prop, not an `aria-label`: `Radio.Group` overwrites both `aria-label`
@@ -67,7 +81,7 @@ function EnumFilter({
               variant: "subtle",
               size: "ctl",
               onClick: () => {
-                setValue(field.fallback);
+                field.clear();
               },
               children: "Clear"
             }
@@ -81,7 +95,10 @@ function EnumFilter({
     {
       label: selected?.label ?? label,
       active: !isDefault,
+      ...numeric === true && { numeric: true },
       ...icon !== void 0 && { icon },
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style },
       children: /* @__PURE__ */ jsx("div", { className: classes.optionList, children: body })
     }
   );