basalt-ui 1.25.0 → 1.27.0

package/dist/controls/filter-sheet.js

@@ -0,0 +1,146 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Drawer } from "@mantine/core";
+import { useId } from "react";
+import classes from "./controls.module.css";
+function FilterSheet({
+  opened,
+  onClose,
+  onResetAll,
+  title = "Filters",
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      opened,
+      onClose,
+      position: "bottom",
+      radius: "sm",
+      classNames: { header: classes.sheetHeader, title: classes.sheetTitle },
+      title: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: classes.sheetTitleText, children: title }),
+        /* @__PURE__ */ jsx(Button, { variant: "subtle", size: "ctl", onClick: onResetAll, children: "Reset all" })
+      ] }),
+      children: /* @__PURE__ */ jsx("div", { className: classes.sheetBody, children })
+    }
+  );
+}
+function CheckGlyph() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2.25,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "M5 12.5l5 5l9 -11" })
+    }
+  );
+}
+function SheetOptionList({
+  mode,
+  selected,
+  options,
+  onToggle,
+  labelId
+}) {
+  const name = useId();
+  return (
+    // A real `<fieldset>`, not `role="group"` on a div — the native element carries the grouping
+    // semantics and gets its own box reset in the module (`.sheetList`). `aria-labelledby` points at
+    // the `SheetField` heading rather than a `<legend>`: the heading is already visible above the
+    // list, and a legend would render it a second time.
+    /* @__PURE__ */ jsx("fieldset", { className: classes.sheetList, "aria-labelledby": labelId, children: options.map((option) => {
+      const isSelected = selected.includes(option.value);
+      return /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: classes.sheetOption,
+          ...isSelected && { "data-selected": true },
+          ...option.disabled === true && { "data-disabled": true },
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: classes.sheetOptionInput,
+                type: mode === "single" ? "radio" : "checkbox",
+                name,
+                value: option.value,
+                checked: isSelected,
+                disabled: option.disabled === true,
+                "aria-label": option.label,
+                onChange: () => {
+                  onToggle(option.value);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: classes.sheetOptionLabel, children: option.label }),
+            isSelected && /* @__PURE__ */ jsx("span", { className: classes.sheetOptionCheck, "aria-hidden": true, children: /* @__PURE__ */ jsx(CheckGlyph, {}) })
+          ]
+        },
+        option.value
+      );
+    }) })
+  );
+}
+function SheetDisclosure({
+  label,
+  expanded,
+  onToggle,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: classes.sheetList, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: classes.sheetOption,
+        "aria-expanded": expanded,
+        ...expanded && { "data-selected": true },
+        onClick: onToggle,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: classes.sheetOptionLabel, children: label }),
+          expanded && /* @__PURE__ */ jsx("span", { className: classes.sheetOptionCheck, "aria-hidden": true, children: /* @__PURE__ */ jsx(CheckGlyph, {}) })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx("div", { className: classes.sheetDisclosureBody, children })
+  ] });
+}
+function SheetField({ label, labelId, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: classes.sheetField, children: [
+    /* @__PURE__ */ jsx("span", { className: classes.sheetLabel, ...labelId !== void 0 && { id: labelId }, children: label }),
+    children
+  ] });
+}
+function useControlName(label, inSheet) {
+  const labelId = useId();
+  return {
+    labelId,
+    nameProps: inSheet ? { "aria-labelledby": labelId } : { "aria-label": label }
+  };
+}
+function SheetRow({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: classes.sheetRow, children });
+}
+const sheetRowClass = classes.sheetRow;
+const sheetRowClassNames = {
+  root: classes.sheetRow,
+  body: classes.sheetRowBody,
+  label: classes.sheetRowLabel
+};
+export {
+  FilterSheet,
+  SheetDisclosure,
+  SheetField,
+  SheetOptionList,
+  SheetRow,
+  sheetRowClass,
+  sheetRowClassNames,
+  useControlName
+};

package/dist/controls/glyphs.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The control tier's own inline glyphs (`docs/CONTROLS-SPEC.md` §3).
+ *
+ * basalt ships NO icon dependency — every `icon` slot in the public API takes a `ReactNode` the
+ * consumer fills. These are the few glyphs the FRAMEWORK draws for itself, where a default icon is
+ * part of the control's identity rather than a caller's decision: a range filter reads as a date
+ * picker because it carries a calendar, a compare filter because it carries the swap arrows, and
+ * the mobile `Filters (n)` pill because it carries a funnel. Same convention the shell already uses
+ * for its own chrome (`shell/sidebar-search.tsx`, `shell/app-sidebar.tsx`): a 24×24 `viewBox`,
+ * `stroke="currentColor"`, sized down by the `size` prop.
+ *
+ * INTERNAL — not on the `./controls` barrel. A consumer wanting a different glyph passes `icon`.
+ */
+import type { ReactNode } from 'react';
+/** `RangeFilter`'s default leading icon. */
+export declare function CalendarGlyph(): ReactNode;
+/** `CompareFilter`'s default leading icon — the arrows-swap glyph. */
+export declare function SwapGlyph(): ReactNode;
+/** The mobile `Filters (n)` pill's leading icon. */
+export declare function FunnelGlyph(): ReactNode;
+/**
+ * Every pill's trailing affordance — 14px, muted, and an SVG rather than the `⇅` character it
+ * replaced. A text glyph rendered at the label's own font metrics, so it sat off the optical centre
+ * and shifted with the font stack; the path is centred in its own box.
+ */
+export declare function UpDownGlyph(): ReactNode;
+//# sourceMappingURL=glyphs.d.ts.map

package/dist/controls/glyphs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"glyphs.d.ts","sourceRoot":"","sources":["../../src/controls/glyphs.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAwBtC,4CAA4C;AAC5C,wBAAgB,aAAa,IAAI,SAAS,CASzC;AAED,sEAAsE;AACtE,wBAAgB,SAAS,IAAI,SAAS,CAOrC;AAED,oDAAoD;AACpD,wBAAgB,WAAW,IAAI,SAAS,CAMvC;AAED;;;;GAIG;AACH,wBAAgB,WAAW,IAAI,SAAS,CAOvC"}

package/dist/controls/glyphs.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const ICON_SIZE = 16;
+const AFFORDANCE_SIZE = 14;
+function Stroke({ size = ICON_SIZE, children }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.75,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children
+    }
+  );
+}
+function CalendarGlyph() {
+  return /* @__PURE__ */ jsxs(Stroke, { children: [
+    /* @__PURE__ */ jsx("rect", { x: 3, y: 5, width: 18, height: 16, rx: 2.5 }),
+    /* @__PURE__ */ jsx("path", { d: "M3 10h18" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 3v4" }),
+    /* @__PURE__ */ jsx("path", { d: "M16 3v4" })
+  ] });
+}
+function SwapGlyph() {
+  return /* @__PURE__ */ jsxs(Stroke, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4 8h13l-3.5 -3.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M20 16h-13l3.5 3.5" })
+  ] });
+}
+function FunnelGlyph() {
+  return /* @__PURE__ */ jsx(Stroke, { children: /* @__PURE__ */ jsx("path", { d: "M4 4h16l-6.5 8v7l-3 -1.5v-5.5z" }) });
+}
+function UpDownGlyph() {
+  return /* @__PURE__ */ jsxs(Stroke, { size: AFFORDANCE_SIZE, children: [
+    /* @__PURE__ */ jsx("path", { d: "M8 9l4 -4l4 4" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 15l4 4l4 -4" })
+  ] });
+}
+export {
+  CalendarGlyph,
+  FunnelGlyph,
+  SwapGlyph,
+  UpDownGlyph
+};

package/dist/controls/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * `basalt-ui/controls` — the Mantine-coupled control tier (`docs/CONTROLS-SPEC.md` §3).
+ *
+ * Every control here renders at the `ctl` tier from the home that hosts it and owns its own
+ * desktop/mobile swap in CSS (law C9). Actions and sync land in wave 3; the filter/tab family
+ * follows in wave 4.
+ */
+export { ActionGroup, OverflowMenu, DESKTOP_SECONDARY_MAX, MOBILE_GLOBAL_BAR_MAX, barActionMobile, globalActionMobile, type BarAction, type BarActionItem, type BarActionMenu, type BarActionCustom, type ActionGroupProps, type GlobalAction, type OverflowMenuProps, } from './actions.js';
+export { SyncButton, formatAge, AGE_REFRESH_MS, type SyncButtonProps } from './sync-button.js';
+export { ControlGroup, type ControlGroupProps } from './control-group.js';
+export { FilterSet, type FilterSetProps } from './filter-set.js';
+export { RangeFilter, type RangeCustomPickerProps, type RangeFilterProps } from './range-filter.js';
+export { CompareFilter, COMPARE_VALUES, type CompareFilterProps, type CompareValue, } from './compare-filter.js';
+export { SelectFilter, type FilterOption, type SelectFilterEnumProps, type SelectFilterProps, type SelectFilterStringProps, } from './select-filter.js';
+export { MultiSelectFilter, type MultiSelectFilterProps } from './multi-select-filter.js';
+export { NumberFilter, type NumberFilterOption, type NumberFilterProps } from './number-filter.js';
+export { SearchFilter, type SearchFilterProps } from './search-filter.js';
+export { ToggleFilter, type ToggleFilterProps } from './toggle-filter.js';
+export { ViewTabs, type ViewTabsOption, type ViewTabsProps } from './view-tabs.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/controls/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EACL,WAAW,EACX,YAAY,EACZ,qBAAqB,EACrB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACjB,KAAK,iBAAiB,GACvB,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAC3F,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAMtE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,KAAK,sBAAsB,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAChG,OAAO,EACL,aAAa,EACb,cAAc,EACd,KAAK,kBAAkB,EACvB,KAAK,YAAY,GAClB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EACL,YAAY,EACZ,KAAK,YAAY,EACjB,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,GAC7B,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,uBAAuB,CAAA;AACtF,OAAO,EAAE,YAAY,EAAE,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAC/F,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAAE,QAAQ,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA"}

package/dist/controls/index.js

@@ -0,0 +1,46 @@
+import {
+  ActionGroup,
+  OverflowMenu,
+  DESKTOP_SECONDARY_MAX,
+  MOBILE_GLOBAL_BAR_MAX,
+  barActionMobile,
+  globalActionMobile
+} from "./actions.js";
+import { SyncButton, formatAge, AGE_REFRESH_MS } from "./sync-button.js";
+import { ControlGroup } from "./control-group.js";
+import { FilterSet } from "./filter-set.js";
+import { RangeFilter } from "./range-filter.js";
+import {
+  CompareFilter,
+  COMPARE_VALUES
+} from "./compare-filter.js";
+import {
+  SelectFilter
+} from "./select-filter.js";
+import { MultiSelectFilter } from "./multi-select-filter.js";
+import { NumberFilter } from "./number-filter.js";
+import { SearchFilter } from "./search-filter.js";
+import { ToggleFilter } from "./toggle-filter.js";
+import { ViewTabs } from "./view-tabs.js";
+export {
+  AGE_REFRESH_MS,
+  ActionGroup,
+  COMPARE_VALUES,
+  CompareFilter,
+  ControlGroup,
+  DESKTOP_SECONDARY_MAX,
+  FilterSet,
+  MOBILE_GLOBAL_BAR_MAX,
+  MultiSelectFilter,
+  NumberFilter,
+  OverflowMenu,
+  RangeFilter,
+  SearchFilter,
+  SelectFilter,
+  SyncButton,
+  ToggleFilter,
+  ViewTabs,
+  barActionMobile,
+  formatAge,
+  globalActionMobile
+};

package/dist/controls/multi-select-filter.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import type { FieldHandle, MultiField } from '../state.js';
+import type { FilterOption } from './select-filter.js';
+export type MultiSelectFilterProps<T extends string> = {
+    readonly field: FieldHandle<MultiField<T>>;
+    readonly label: string;
+    readonly icon?: ReactNode;
+    /**
+     * The plural noun in the `3 channels` count.
+     *
+     * @default the label, lowercased
+     */
+    readonly noun?: string;
+    /**
+     * Overrides `field.options` at render — a runtime catalogue whose labels carry live data
+     * (`web · 1.2k`). The VALUES still belong to the field: a multi field is a closed set, so this
+     * relabels and reorders rows, it does not open new ones. Unlike `SelectFilter` there is no
+     * string-field shape to make it required.
+     */
+    readonly options?: readonly FilterOption[];
+};
+export declare function MultiSelectFilter<T extends string>({ field, label, icon, noun, options: optionsProp, }: MultiSelectFilterProps<T>): ReactNode;
+//# sourceMappingURL=multi-select-filter.d.ts.map

package/dist/controls/multi-select-filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select-filter.d.ts","sourceRoot":"","sources":["../../src/controls/multi-select-filter.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAMnD,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,MAAM,IAAI;IACrD,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;IAC1C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB;;;;OAIG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB;;;;;OAKG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;CAC3C,CAAA;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,EAClD,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EAAE,WAAW,GACrB,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,SAAS,CAsFvC"}

package/dist/controls/multi-select-filter.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Checkbox, 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";
+function MultiSelectFilter({
+  field,
+  label,
+  icon,
+  noun,
+  options: optionsProp
+}) {
+  const [value, setValue] = field.use();
+  const surface = useFilterSurface();
+  const isDefault = field.isDefault(value);
+  useFilterRegistration(!isDefault, () => {
+    field.clear();
+  });
+  const options = optionsProp ?? field.options;
+  const inSheet = surface === "sheet";
+  const carriesInformation = value.length > 0 && value.length < options.length;
+  const { labelId } = useControlName(label, inSheet);
+  if (inSheet) {
+    return /* @__PURE__ */ jsx(SheetField, { label, labelId, children: /* @__PURE__ */ jsx(
+      SheetOptionList,
+      {
+        mode: "multi",
+        labelId,
+        selected: value,
+        options,
+        onToggle: (next) => {
+          const has = value.includes(next);
+          setValue(has ? value.filter((v) => v !== next) : [...value, next]);
+        }
+      }
+    ) });
+  }
+  const body = (
+    // Mantine's own `label`, for the same reason `enum-filter.tsx` uses it — `Checkbox.Group`
+    // overwrites any `aria-label`/`aria-labelledby` with its own. Named from `label`, never from the
+    // pill text, which reads `3 channels` and describes the selection rather than the filter.
+    /* @__PURE__ */ jsxs(
+      Checkbox.Group,
+      {
+        label,
+        classNames: { label: classes.groupLabel },
+        value: [...value],
+        onChange: (next) => {
+          setValue(next);
+        },
+        children: [
+          /* @__PURE__ */ jsx(Stack, { gap: 2, children: options.map((option) => /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              value: option.value,
+              label: option.label,
+              ...option.disabled === true && { disabled: true }
+            },
+            option.value
+          )) }),
+          !isDefault && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "subtle",
+              size: "ctl",
+              onClick: () => {
+                field.clear();
+              },
+              children: "Clear"
+            }
+          )
+        ]
+      }
+    )
+  );
+  return /* @__PURE__ */ jsx(
+    FilterPill,
+    {
+      label: carriesInformation ? `${value.length} ${noun ?? label.toLowerCase()}` : label,
+      active: !isDefault,
+      ...icon !== void 0 && { icon },
+      children: /* @__PURE__ */ jsx("div", { className: classes.optionList, children: body })
+    }
+  );
+}
+export {
+  MultiSelectFilter
+};

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

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import type { FieldHandle, NumberField } from '../state.js';
+/** One row of a numeric preset set. Narrower than `FilterOption` — a preset is never `disabled`:
+ *  the set is declared at the call site, so a row that should not be offered is left out. */
+export type NumberFilterOption = {
+    readonly value: number;
+    readonly label: string;
+};
+export type NumberFilterProps = {
+    readonly field: FieldHandle<NumberField>;
+    /** The popover/sheet heading and the accessible name — never the pill text, which reads the
+     *  VALUE (see `EnumFilter`'s doc for why a pill may only print what is selected). */
+    readonly label: string;
+    readonly icon?: ReactNode;
+    /** Present → the radio-list form. Absent → the stepper form. */
+    readonly options?: readonly NumberFilterOption[];
+    /**
+     * The stepper's increment. Ignored in the `options` form, which has no stepper.
+     *
+     * @default 1 — and for an `int: true` field that is also the only sane grain, so it is what the
+     * field's own declaration produces without this prop.
+     */
+    readonly step?: number;
+};
+export declare function NumberFilter({ field, label, icon, options, step }: NumberFilterProps): ReactNode;
+//# sourceMappingURL=number-filter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-filter.d.ts","sourceRoot":"","sources":["../../src/controls/number-filter.tsx"],"names":[],"mappings":"AAoDA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAQxD;6FAC6F;AAC7F,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;IACxC;yFACqF;IACrF,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB,gEAAgE;IAChE,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAA;IAChD;;;;;OAKG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,iBAAiB,GAAG,SAAS,CAsBhG"}

package/dist/controls/number-filter.js

@@ -0,0 +1,143 @@
+import { jsx } from "react/jsx-runtime";
+import { NumberInput } from "@mantine/core";
+import { useEffect, useRef, useState } from "react";
+import classes from "./controls.module.css";
+import { EnumFilter } from "./enum-filter.js";
+import { useFilterRegistration, useFilterSurface } from "./filter-context.js";
+import { FilterPill } from "./filter-pill.js";
+import { SheetField, useControlName } from "./filter-sheet.js";
+function NumberFilter({ field, label, icon, options, step }) {
+  if (options !== void 0) {
+    return /* @__PURE__ */ jsx(
+      NumberChoice,
+      {
+        field,
+        label,
+        options,
+        ...icon !== void 0 && { icon }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    NumberStepper,
+    {
+      field,
+      label,
+      ...icon !== void 0 && { icon },
+      ...step !== void 0 && { step }
+    }
+  );
+}
+function NumberChoice({
+  field,
+  label,
+  icon,
+  options
+}) {
+  const [value, setValue] = field.use();
+  const rows = options.map((option) => ({ value: String(option.value), label: option.label }));
+  const choice = {
+    fallback: String(field.fallback),
+    options: rows,
+    use: () => [
+      String(value),
+      (next) => {
+        setValue(Number(next));
+      }
+    ],
+    isDefault: (v) => field.isDefault(Number(v)),
+    clear: () => {
+      field.clear();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    EnumFilter,
+    {
+      field: choice,
+      label,
+      numeric: true,
+      options: rows,
+      ...icon !== void 0 && { icon }
+    }
+  );
+}
+function NumberStepper({
+  field,
+  label,
+  icon,
+  step
+}) {
+  const [value, setValue] = field.use();
+  const surface = useFilterSurface();
+  const inSheet = surface === "sheet";
+  const isDefault = field.isDefault(value);
+  useFilterRegistration(!isDefault, () => {
+    field.clear();
+  });
+  const { labelId, nameProps } = useControlName(label, inSheet);
+  const draft = useCommittedNumber(value, setValue, { min: field.min, max: field.max });
+  const input = /* @__PURE__ */ jsx(
+    NumberInput,
+    {
+      ...nameProps,
+      size: "ctl",
+      ...field.min !== void 0 && { min: field.min },
+      ...field.max !== void 0 && { max: field.max },
+      ...field.int && { allowDecimal: false },
+      ...step !== void 0 ? { step } : field.int && { step: 1 },
+      value: draft.value,
+      onChange: draft.set,
+      onBlur: draft.commit,
+      onKeyDown: (event) => {
+        if (event.key !== "Enter") return;
+        event.preventDefault();
+        draft.commit();
+      }
+    }
+  );
+  if (inSheet) {
+    return /* @__PURE__ */ jsx(SheetField, { label, labelId, children: input });
+  }
+  return /* @__PURE__ */ jsx(
+    FilterPill,
+    {
+      label: String(value),
+      numeric: true,
+      active: !isDefault,
+      ...icon !== void 0 && { icon },
+      children: /* @__PURE__ */ jsx("div", { className: classes.optionList, children: input })
+    }
+  );
+}
+function useCommittedNumber(value, setValue, bounds) {
+  const [draft, setDraft] = useState(value);
+  const seen = useRef(value);
+  const commitRef = useRef(setValue);
+  commitRef.current = setValue;
+  useEffect(() => {
+    if (seen.current === value) return;
+    seen.current = value;
+    setDraft(value);
+  }, [value]);
+  return {
+    value: draft,
+    set: setDraft,
+    commit: () => {
+      const parsed = typeof draft === "number" ? draft : Number.parseFloat(draft);
+      if (!Number.isFinite(parsed)) {
+        setDraft(value);
+        return;
+      }
+      let next = parsed;
+      if (bounds.min !== void 0 && next < bounds.min) next = bounds.min;
+      if (bounds.max !== void 0 && next > bounds.max) next = bounds.max;
+      setDraft(next);
+      if (next === value) return;
+      seen.current = next;
+      commitRef.current(next);
+    }
+  };
+}
+export {
+  NumberFilter
+};

package/dist/controls/peer-boundary.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=peer-boundary.test.d.ts.map

package/dist/controls/peer-boundary.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"peer-boundary.test.d.ts","sourceRoot":"","sources":["../../src/controls/peer-boundary.test.ts"],"names":[],"mappings":""}

package/dist/controls/props-contract.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=props-contract.test.d.ts.map

package/dist/controls/props-contract.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props-contract.test.d.ts","sourceRoot":"","sources":["../../src/controls/props-contract.test.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,43 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { FieldHandle, RangeField } from '../state.js';
+/**
+ * The contract a custom-range picker satisfies — `basalt-ui/controls-dates`' `DateRangePicker`, or a
+ * consumer's own. Dates are ISO (`YYYY-MM-DD`), the same shape `field.range` stores and
+ * `toWindow()` emits, so the picker never learns the store's encoding.
+ */
+export type RangeCustomPickerProps = {
+    readonly value: {
+        readonly from?: string | undefined;
+        readonly to?: string | undefined;
+    };
+    readonly onChange: (next: {
+        from: string;
+        to: string;
+    }) => void;
+};
+/** Everything about the props that does not depend on the field's `custom` flag. */
+type RangeFilterBase<P extends string, C extends boolean> = {
+    /**
+     * A range handle from either store factory. Generic over the field's `custom` flag so a
+     * `field.range({ ... })` WITHOUT `custom` (whose handle is `RangeField<P, false>`, and whose
+     * values therefore never include `'custom'`) binds with no cast — pinning `C` to its default
+     * `boolean` here made the setter contravariantly incompatible and forced one at every call site.
+     */
+    readonly field: FieldHandle<RangeField<P, C>>;
+    /** Leading pill icon. Defaults to a calendar glyph — a range filter reads as a date control, so
+     *  the glyph is part of the control's identity, not a per-call-site decision. */
+    readonly icon?: ReactNode;
+    /** Sheet-form heading. The pill's own label is the VALUE, which is what a bar reads. @default 'Range' */
+    readonly label?: string;
+};
+export type RangeFilterProps<P extends string, C extends boolean = boolean> = RangeFilterBase<P, C> & {
+    /**
+     * Rendered when the field declares `custom: true`. Omitted → presets only, which stays LEGAL
+     * (a range that only ever shows presets is a real configuration) but warns once in dev when the
+     * field allows a custom window: the affordance is then unreachable, and nothing else says so.
+     */
+    readonly customPicker?: ComponentType<RangeCustomPickerProps>;
+};
+export declare function RangeFilter<P extends string, C extends boolean = boolean>(props: RangeFilterProps<P, C>): ReactNode;
+export {};
+//# sourceMappingURL=range-filter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"range-filter.d.ts","sourceRoot":"","sources":["../../src/controls/range-filter.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAc,MAAM,UAAU,CAAA;AAwCnE;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,KAAK,EAAE;QAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAA;IACxF,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CAChE,CAAA;AAED,oFAAoF;AACpF,KAAK,eAAe,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,OAAO,IAAI;IAC1D;;;;;OAKG;IACH,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;IAC7C;qFACiF;IACjF,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB,yGAAyG;IACzG,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,OAAO,GAAG,OAAO,IAAI,eAAe,CAC3F,CAAC,EACD,CAAC,CACF,GAAG;IACF;;;;OAIG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAA;CAC9D,CAAA;AAED,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,OAAO,GAAG,OAAO,EACvE,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,GAC5B,SAAS,CAyGX"}