basalt-ui 1.24.0 → 1.26.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,19 @@
+/**
+ * `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 { 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,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,44 @@
+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 { 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,
+  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, () => {
+    setValue(field.fallback);
+  });
+  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: () => {
+                setValue(field.fallback);
+              },
+              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/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,29 @@
+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;
+};
+export type RangeFilterProps<P extends string> = {
+    readonly field: FieldHandle<RangeField<P>>;
+    /** 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;
+    /** Rendered when the field declares `custom: true`. Omitted → presets only. */
+    readonly customPicker?: ComponentType<RangeCustomPickerProps>;
+    /** Sheet-form heading. The pill's own label is the VALUE, which is what a bar reads. @default 'Range' */
+    readonly label?: string;
+};
+export declare function RangeFilter<P extends string>({ field, icon, customPicker, label, }: RangeFilterProps<P>): ReactNode;
+//# 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;AAYnE;;;;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,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI;IAC/C,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;IAC1C;qFACiF;IACjF,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB,+EAA+E;IAC/E,QAAQ,CAAC,YAAY,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAA;IAC7D,yGAAyG;IACzG,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EAC5C,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAe,GAChB,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,CA8FjC"}

package/dist/controls/range-filter.js

@@ -0,0 +1,120 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SegmentedControl, Stack } from "@mantine/core";
+import { useState } from "react";
+import classes from "./controls.module.css";
+import { useFilterRegistration, useFilterSurface } from "./filter-context.js";
+import { FilterPill } from "./filter-pill.js";
+import { CalendarGlyph } from "./glyphs.js";
+import { SheetDisclosure, SheetField, SheetOptionList, useControlName } from "./filter-sheet.js";
+const VERTICAL_FROM = 5;
+const NUMERIC_LABEL = /^\d/;
+function RangeFilter({
+  field,
+  icon,
+  customPicker,
+  label = "Range"
+}) {
+  const [value, setValue] = field.use();
+  const surface = useFilterSurface();
+  const isDefault = field.isDefault(value);
+  useFilterRegistration(!isDefault, () => {
+    setValue(field.fallback);
+  });
+  const options = field.options;
+  const presets = options.filter((option) => option.value !== "custom");
+  const allowsCustom = options.length !== presets.length;
+  const numeric = presets.length > 0 && presets.every((option) => NUMERIC_LABEL.test(option.label));
+  const inSheet = surface === "sheet";
+  const Picker = customPicker;
+  const { labelId, nameProps } = useControlName(label, inSheet);
+  const [customOpen, setCustomOpen] = useState(value.preset === "custom");
+  const showPicker = allowsCustom && Picker !== void 0;
+  if (inSheet) {
+    return /* @__PURE__ */ jsxs(SheetField, { label, labelId, children: [
+      /* @__PURE__ */ jsx(
+        SheetOptionList,
+        {
+          mode: "single",
+          labelId,
+          selected: [value.preset],
+          options: presets.map((option) => ({ value: option.value, label: option.label })),
+          onToggle: (next) => {
+            setCustomOpen(false);
+            setValue({ preset: next });
+          }
+        }
+      ),
+      showPicker && /* @__PURE__ */ jsx(
+        SheetDisclosure,
+        {
+          label: "Custom range\u2026",
+          expanded: customOpen,
+          onToggle: () => {
+            setCustomOpen((open) => !open);
+          },
+          children: /* @__PURE__ */ jsx(
+            Picker,
+            {
+              value: { from: value.from, to: value.to },
+              onChange: ({ from, to }) => {
+                setValue({ preset: "custom", from, to });
+              }
+            }
+          )
+        }
+      )
+    ] });
+  }
+  const body = /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+    /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        ...nameProps,
+        size: "ctl",
+        orientation: presets.length >= VERTICAL_FROM ? "vertical" : "horizontal",
+        value: value.preset,
+        data: presets.map((option) => ({ value: option.value, label: option.label })),
+        ...numeric && { "data-numeric": true },
+        onChange: (next) => {
+          setValue({ preset: next });
+        }
+      }
+    ),
+    showPicker && /* @__PURE__ */ jsx(
+      Picker,
+      {
+        value: { from: value.from, to: value.to },
+        onChange: ({ from, to }) => {
+          setValue({ preset: "custom", from, to });
+        }
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx(
+    FilterPill,
+    {
+      label: rangeLabel(value, options),
+      active: !isDefault,
+      numeric: numeric && value.preset !== "custom",
+      icon: icon ?? /* @__PURE__ */ jsx(CalendarGlyph, {}),
+      children: /* @__PURE__ */ jsx("div", { className: classes.optionList, children: body })
+    }
+  );
+}
+const DAY_FORMAT = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "numeric",
+  // ISO date strings parse as UTC midnight; formatting them in the runtime's zone would render the
+  // previous day west of Greenwich — and differently on server than on client (a hydration
+  // mismatch), the same hazard `formatArticleDate` avoids.
+  timeZone: "UTC"
+});
+function rangeLabel(value, options) {
+  if (value.preset === "custom" && value.from !== void 0 && value.to !== void 0) {
+    return `${DAY_FORMAT.format(new Date(value.from))} \u2013 ${DAY_FORMAT.format(new Date(value.to))}`;
+  }
+  return options.find((option) => option.value === value.preset)?.label ?? value.preset;
+}
+export {
+  RangeFilter
+};

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { FieldHandle, StringField } from '../state.js';
+export type SearchFilterProps = {
+    readonly field: FieldHandle<StringField>;
+    readonly placeholder?: string;
+    /** Sheet-form heading. @default 'Search' */
+    readonly label?: string;
+};
+export declare function SearchFilter({ field, placeholder, label, }: SearchFilterProps): ReactNode;
+//# sourceMappingURL=search-filter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-filter.d.ts","sourceRoot":"","sources":["../../src/controls/search-filter.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAOxD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;IACxC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,4CAA4C;IAC5C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,KAAgB,GACjB,EAAE,iBAAiB,GAAG,SAAS,CAiC/B"}