basalt-ui 1.25.0 → 1.26.0

package/dist/controls/search-filter.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TextInput } from "@mantine/core";
+import { useEffect, useRef, useState } from "react";
+import { useFilterRegistration, useFilterSurface } from "./filter-context.js";
+import { SheetField, useControlName } from "./filter-sheet.js";
+const DEBOUNCE_MS = 200;
+function SearchFilter({
+  field,
+  placeholder,
+  label = "Search"
+}) {
+  const [value, setValue] = field.use();
+  const surface = useFilterSurface();
+  const draft = useDebouncedField(value, setValue);
+  useFilterRegistration(!field.isDefault(value), () => {
+    setValue(field.fallback);
+  });
+  const { labelId, nameProps } = useControlName(label, surface === "sheet");
+  const input = /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      ...nameProps,
+      size: "ctl",
+      value: draft.value,
+      leftSection: /* @__PURE__ */ jsx(SearchIcon, {}),
+      ...placeholder !== void 0 && { placeholder },
+      onChange: (event) => {
+        draft.set(event.currentTarget.value);
+      }
+    }
+  );
+  if (surface === "sheet") {
+    return /* @__PURE__ */ jsx(SheetField, { label, labelId, children: input });
+  }
+  return input;
+}
+function useDebouncedField(value, setValue) {
+  const [draft, setDraft] = useState(value);
+  const seen = useRef(value);
+  const commit = useRef(setValue);
+  commit.current = setValue;
+  useEffect(() => {
+    if (seen.current === value) return;
+    seen.current = value;
+    setDraft(value);
+  }, [value]);
+  useEffect(() => {
+    if (draft === value) return;
+    const timer = setTimeout(() => {
+      seen.current = draft;
+      commit.current(draft);
+    }, DEBOUNCE_MS);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [draft, value]);
+  return { value: draft, set: setDraft };
+}
+function SearchIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 21l-4.35 -4.35" })
+      ]
+    }
+  );
+}
+export {
+  SearchFilter
+};

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

@@ -0,0 +1,74 @@
+/**
+ * `SelectFilter` — one choice, one pill (`docs/CONTROLS-SPEC.md` §3). Takes `field`, never
+ * `value`/`onChange`/`size` (C2/C5): the handle owns the URL write, the localStorage mirror and the
+ * option labels (`store.labels()`), so the call site is the field plus its human name.
+ *
+ * `options` is the escape hatch for a catalogue that only exists at runtime — the label carries live
+ * data (`EUR · 1.08`), or the id set is fetched rather than declared. It OVERRIDES `field.options`
+ * at render, and it is what makes the second `field` shape legal: a `StringField` handle plus
+ * `options` covers an id set no enum could close over (a project picker, a device list), while a
+ * `StringField` handle WITHOUT `options` stays a type error — nothing would supply the rows, so the
+ * filter would render an empty popover.
+ *
+ * @example
+ * <SelectFilter field={analytics.field.currency} label="Currency" clearable />
+ *
+ * @example
+ * // A runtime catalogue over a closed enum — same field, live labels.
+ * <SelectFilter
+ *   field={analytics.field.currency}
+ *   label="Currency"
+ *   options={rates.map((r) => ({ value: r.code, label: `${r.code} · ${r.rate}` }))}
+ * />
+ *
+ * @example
+ * // An id set the enum cannot close over — a string field, options mandatory.
+ * <SelectFilter
+ *   field={dashboard.field.projectId}
+ *   label="Project"
+ *   options={projects.map((p) => ({ value: p.id, label: p.name, disabled: p.archived }))}
+ * />
+ */
+import type { ReactNode } from 'react';
+import type { EnumField, FieldHandle, StringField } from '../state.js';
+/**
+ * One row of a runtime catalogue. Wider than the store's own `FieldOption` by exactly one member:
+ * `disabled` renders the row and refuses the selection, which a declared enum expresses by leaving
+ * the value out and a live catalogue cannot (an archived project still labels the rows already
+ * pointing at it).
+ */
+export type FilterOption = {
+    readonly value: string;
+    readonly label: string;
+    readonly disabled?: boolean;
+};
+type SelectFilterCommon = {
+    readonly label: string;
+    readonly icon?: ReactNode;
+    /** Adds a `Clear` action that writes the field back to its fallback. */
+    readonly clearable?: boolean;
+};
+/** A closed enum field: `options` relabels rows the field already declares, so it is optional. */
+export type SelectFilterEnumProps<T extends string> = SelectFilterCommon & {
+    readonly field: FieldHandle<EnumField<T>>;
+    /** Overrides `field.options` at render — a runtime catalogue, labels included. */
+    readonly options?: readonly FilterOption[];
+};
+/** A string field: it declares no values, so `options` is the only row source and is required. */
+export type SelectFilterStringProps = SelectFilterCommon & {
+    readonly field: FieldHandle<StringField>;
+    /** Required here — see this type's doc. */
+    readonly options: readonly FilterOption[];
+};
+export type SelectFilterProps<T extends string> = SelectFilterEnumProps<T> | SelectFilterStringProps;
+/**
+ * TWO OVERLOADS, not one conditional prop type, and the reason is the error text. A union prop type
+ * reports only the constituent it likes best — for a `StringField` handle passed without `options`
+ * that is the enum branch, so the message reads `Type '"string"' is not assignable to type '"enum"'`
+ * and never mentions the prop that would fix it. The overload form reports both halves, ending in
+ * `Property 'options' is missing`, which is the actual instruction.
+ */
+export declare function SelectFilter<T extends string>(props: SelectFilterEnumProps<T>): ReactNode;
+export declare function SelectFilter(props: SelectFilterStringProps): ReactNode;
+export {};
+//# sourceMappingURL=select-filter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-filter.d.ts","sourceRoot":"","sources":["../../src/controls/select-filter.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAGnE;;;;;GAKG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB,wEAAwE;IACxE,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AAED,kGAAkG;AAClG,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,IAAI,kBAAkB,GAAG;IACzE,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;IACzC,kFAAkF;IAClF,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;CAC3C,CAAA;AAED,kGAAkG;AAClG,MAAM,MAAM,uBAAuB,GAAG,kBAAkB,GAAG;IACzD,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;IACxC,2CAA2C;IAC3C,QAAQ,CAAC,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;CAC1C,CAAA;AAED,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,IAAI,qBAAqB,CAAC,CAAC,CAAC,GAAG,uBAAuB,CAAA;AAEpG;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAA;AAC1F,wBAAgB,YAAY,CAAC,KAAK,EAAE,uBAAuB,GAAG,SAAS,CAAA"}

package/dist/controls/select-filter.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { EnumFilter } from "./enum-filter.js";
+function SelectFilter(props) {
+  const { field, ...rest } = props;
+  if (field.kind === "string") return /* @__PURE__ */ jsx(EnumFilter, { ...rest, field });
+  return /* @__PURE__ */ jsx(EnumFilter, { ...rest, field });
+}
+export {
+  SelectFilter
+};

package/dist/controls/sync-button.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+export type SyncButtonProps = {
+    syncing: boolean;
+    /** Last successful completion. `undefined`/`null` renders no age at all. */
+    lastCompletedAt?: number | Date | null;
+    onSync: () => void;
+    /** The home, and with it the shape: `'global'` is icon-only at every width, `'page'` is labelled
+     * on desktop and icon-only below `sm` — see this module's doc. */
+    scope: 'page' | 'global';
+    /** Visible label at `scope: 'page'` on desktop, and the accessible name in every other form.
+     * @default 'Sync' */
+    label?: string;
+    /**
+     * Last failure. Puts the control in the danger tone, carries the message in the tooltip (which
+     * opens on hover, focus AND touch) and folds it into the button's accessible name, so the red is
+     * never the only signal.
+     */
+    error?: string;
+};
+/** How often the relative age re-renders. One interval, only while mounted. */
+export declare const AGE_REFRESH_MS = 30000;
+/**
+ * Relative age, coarse on purpose: a sync indicator answers "is this stale?", not "how stale to
+ * the second". Anything under a minute is `just now`, so the label stops flickering while a sync
+ * has just landed.
+ */
+export declare function formatAge(ms: number): string;
+/**
+ * @example
+ * // page scope — the page's own data
+ * <PageBar sync={{ syncing, lastCompletedAt, onSync: refetch }} />
+ *
+ * // global scope — the shell header, icon-only at every width
+ * <BasaltShell globalActions={[{ key: 'sync', mobile: 'bar',
+ *   node: <SyncButton scope="global" syncing={s} lastCompletedAt={t} onSync={run} /> }]} />
+ */
+export declare function SyncButton({ syncing, lastCompletedAt, onSync, scope, label, error, }: SyncButtonProps): ReactNode;
+//# sourceMappingURL=sync-button.d.ts.map

package/dist/controls/sync-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sync-button.d.ts","sourceRoot":"","sources":["../../src/controls/sync-button.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,OAAO,CAAA;IAChB,4EAA4E;IAC5E,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAA;IACtC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB;sEACkE;IAClE,KAAK,EAAE,MAAM,GAAG,QAAQ,CAAA;IACxB;yBACqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,+EAA+E;AAC/E,eAAO,MAAM,cAAc,QAAS,CAAA;AAEpC;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAO5C;AA0DD;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,eAAe,EACf,MAAM,EACN,KAAK,EACL,KAAc,EACd,KAAK,GACN,EAAE,eAAe,GAAG,SAAS,CA4D7B"}

package/dist/controls/sync-button.js

@@ -0,0 +1,119 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ActionIcon, Button, Tooltip } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { IconSlot } from "../theme/icon-slot.js";
+import classes from "./sync-button.module.css";
+const AGE_REFRESH_MS = 3e4;
+function formatAge(ms) {
+  if (ms < 6e4) return "just now";
+  const minutes = Math.floor(ms / 6e4);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  return `${Math.floor(hours / 24)}d ago`;
+}
+function toMillis(at) {
+  if (at === null || at === void 0) return void 0;
+  return at instanceof Date ? at.getTime() : at;
+}
+function useRelativeAge(at) {
+  const [age, setAge] = useState(void 0);
+  const timestamp = toMillis(at);
+  useEffect(() => {
+    if (timestamp === void 0) {
+      setAge(void 0);
+      return;
+    }
+    const publish = () => {
+      setAge(formatAge(Date.now() - timestamp));
+    };
+    publish();
+    const id = setInterval(publish, AGE_REFRESH_MS);
+    return () => clearInterval(id);
+  }, [timestamp]);
+  return age;
+}
+function RefreshGlyph({ spinning }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      className: spinning ? classes.spin : void 0,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M20 11a8 8 0 1 0-2.34 5.66M20 5v6h-6",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function SyncButton({
+  syncing,
+  lastCompletedAt,
+  onSync,
+  scope,
+  label = "Sync",
+  error
+}) {
+  const age = useRelativeAge(lastCompletedAt);
+  const tooltip = error ?? age;
+  const name = error !== void 0 ? `${label} \u2014 ${error}` : label;
+  const control = {
+    "data-basalt-sync-scope": scope,
+    "aria-busy": syncing,
+    // NOT the native `disabled`. That attribute drops focus to <body> the moment a keyboard user
+    // presses the button, so when the sync lands focus is gone and the next Tab restarts from
+    // the top of the document — and an `aria-busy` element you cannot focus announces nothing.
+    // `aria-disabled` + Mantine's `data-disabled` styling say the same thing and keep the button
+    // where the user left it; the handler does the actual refusing.
+    "aria-disabled": syncing,
+    "aria-label": name,
+    ...syncing && { "data-disabled": true },
+    ...error !== void 0 && { color: "red" },
+    onClick: () => {
+      if (!syncing) onSync();
+    }
+  };
+  return (
+    // `events` is not a default: Mantine's Tooltip opens on HOVER only, so on the stock settings a
+    // keyboard user and a phone user never reach the error — and the age's "the tooltip carries it
+    // below `sm`" claim in the CSS was false on touch. `aria-label` is the belt to that braces: a
+    // tooltip announces only while open, and an error has to be readable without one.
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        label: tooltip ?? "",
+        disabled: tooltip === void 0,
+        events: { hover: true, focus: true, touch: true },
+        withArrow: true,
+        children: scope === "global" ? /* @__PURE__ */ jsx(ActionIcon, { variant: "default", ...control, children: /* @__PURE__ */ jsx(IconSlot, { children: /* @__PURE__ */ jsx(RefreshGlyph, { spinning: syncing }) }) }) : /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "default",
+            className: classes.pageButton,
+            leftSection: /* @__PURE__ */ jsx(IconSlot, { children: /* @__PURE__ */ jsx(RefreshGlyph, { spinning: syncing }) }),
+            ...control,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: classes.label, children: label }),
+              age !== void 0 && /* @__PURE__ */ jsx("span", { className: classes.age, children: age })
+            ]
+          }
+        )
+      }
+    )
+  );
+}
+export {
+  AGE_REFRESH_MS,
+  SyncButton,
+  formatAge
+};

package/dist/controls/sync-button.module.css

@@ -0,0 +1,63 @@
+/*
+ * `SyncButton` chrome — the rotating glyph and the desktop-only age suffix.
+ */
+
+.spin {
+  animation: basalt-sync-spin 900ms linear infinite;
+}
+
+@keyframes basalt-sync-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/*
+ * Reduced motion drops the rotation, never the icon: the `aria-busy`/`aria-disabled` pair is what
+ * actually announces "syncing", so removing the spin costs no information.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .spin {
+    animation: none;
+  }
+}
+
+/*
+ * The age rides beside the label on desktop and disappears below `sm`, where the tooltip carries
+ * it instead — one mount, a CSS-only swap (law C9).
+ */
+.age {
+  margin-inline-start: var(--vx-space-control-gap);
+  color: var(--vx-muted);
+  font-family: var(--basalt-font-mono);
+  font-size: var(--vx-text-xs);
+}
+
+/*
+ * `scope: 'page'` below `sm`: the label and the age go, the glyph stays, and the button collapses
+ * to the square icon form (spec §3, "icon-only, age in tooltip"). Hidden, not unmounted — a second
+ * mount under `hiddenFrom` is exactly the responsive twin law C9 forbids, which is also why the
+ * accessible name lives on `aria-label` rather than in this text.
+ *
+ * Three declarations, because Mantine's Button spends its width in three places: `--button-padding-x`
+ * (the inline padding, which `[data-with-left-section]` divides by 1.5), the left section's own
+ * `margin-inline-end` (a fixed `--mantine-spacing-xs`, not a variable, so it takes a rule), and the
+ * width itself, pinned to the `ctl` height so the box is square. This module is unlayered, so it
+ * outranks `@layer mantine` regardless of specificity.
+ */
+@media (max-width: 47.99375em) {
+  .label,
+  .age {
+    display: none;
+  }
+
+  .pageButton {
+    --button-padding-x: 0;
+
+    width: calc(var(--vx-space-control-height-ctl, 1.875rem) * var(--mantine-scale, 1));
+  }
+
+  .pageButton :global(.mantine-Button-section[data-position='left']) {
+    margin-inline-end: 0;
+  }
+}

package/dist/controls/sync-button.module.css.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Typed CSS-module declaration (the S4 CSS-modules path). Named string props — not an index
+ * signature — so dot access stays verbatim under the package's strict flags.
+ */
+declare const classes: {
+  readonly spin: string
+  readonly age: string
+  readonly label: string
+  readonly pageButton: string
+}
+export default classes

package/dist/controls/sync-button.test.d.ts

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

package/dist/controls/sync-button.test.d.ts.map

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

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { BooleanField, FieldHandle } from '../state.js';
+export type ToggleFilterProps = {
+    readonly field: FieldHandle<BooleanField>;
+    readonly label: string;
+    readonly icon?: ReactNode;
+};
+export declare function ToggleFilter({ field, label, icon }: ToggleFilterProps): ReactNode;
+//# sourceMappingURL=toggle-filter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-filter.d.ts","sourceRoot":"","sources":["../../src/controls/toggle-filter.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAKzD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,YAAY,CAAC,CAAA;IACzC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAC1B,CAAA;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,iBAAiB,GAAG,SAAS,CAoCjF"}

package/dist/controls/toggle-filter.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@mantine/core";
+import { useFilterRegistration, useFilterSurface } from "./filter-context.js";
+import { FilterPill } from "./filter-pill.js";
+import { sheetRowClassNames } from "./filter-sheet.js";
+function ToggleFilter({ field, label, icon }) {
+  const [value, setValue] = field.use();
+  const surface = useFilterSurface();
+  useFilterRegistration(!field.isDefault(value), () => {
+    setValue(field.fallback);
+  });
+  if (surface === "sheet") {
+    return /* @__PURE__ */ jsx(
+      Switch,
+      {
+        classNames: sheetRowClassNames,
+        checked: value,
+        label,
+        labelPosition: "left",
+        onChange: (event) => {
+          setValue(event.currentTarget.checked);
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    FilterPill,
+    {
+      label,
+      active: value,
+      pressed: value,
+      hideGlyph: true,
+      ...icon !== void 0 && { icon },
+      onClick: () => {
+        setValue(!value);
+      }
+    }
+  );
+}
+export {
+  ToggleFilter
+};

package/dist/controls/view-tabs.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import type { EnumField, FieldHandle } from '../state.js';
+export type ViewTabsOption<T extends string> = {
+    readonly value: T;
+    readonly label: string;
+    /** Render this option on ONE viewport only. Omitted → both. */
+    readonly only?: 'sm-up' | 'sm-down';
+};
+export type ViewTabsProps<T extends string> = {
+    readonly field: FieldHandle<EnumField<T>>;
+    /** Defaults to `field.options` (every declared value, labelled by `store.labels()`). */
+    readonly options?: readonly ViewTabsOption<T>[];
+    /**
+     * The switch's accessible name. Both forms render without a visible Mantine `label` (a home has
+     * no room for one), so without this the desktop track is an unnamed `radiogroup` and the phone
+     * form an unnamed `combobox`.
+     *
+     * @default 'View'
+     */
+    readonly label?: string;
+};
+export declare function ViewTabs<T extends string>({ field, options, label, }: ViewTabsProps<T>): ReactNode;
+//# sourceMappingURL=view-tabs.d.ts.map

package/dist/controls/view-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-tabs.d.ts","sourceRoot":"","sources":["../../src/controls/view-tabs.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAMtD,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI;IAC7C,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAA;IACjB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,+DAA+D;IAC/D,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,IAAI;IAC5C,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;IACzC,wFAAwF;IACxF,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,cAAc,CAAC,CAAC,CAAC,EAAE,CAAA;IAC/C;;;;;;OAMG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,EACzC,KAAK,EACL,OAAO,EACP,KAAc,GACf,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,SAAS,CAoD9B"}

package/dist/controls/view-tabs.js

@@ -0,0 +1,59 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { SegmentedControl, Select } from "@mantine/core";
+import classes from "./controls.module.css";
+const PHONE_TRACK_MAX = 3;
+function ViewTabs({
+  field,
+  options,
+  label = "View"
+}) {
+  const [value, setValue] = field.use();
+  const all = options ?? field.options.map((option) => ({ value: option.value, label: option.label }));
+  const desktop = all.filter((option) => option.only !== "sm-down");
+  const phone = all.filter((option) => option.only !== "sm-up");
+  const commit = (next) => {
+    setValue(next);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        "aria-label": label,
+        visibleFrom: "sm",
+        size: "ctl",
+        value,
+        data: desktop.map((option) => ({ value: option.value, label: option.label })),
+        onChange: commit
+      }
+    ),
+    phone.length <= PHONE_TRACK_MAX ? /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        "aria-label": label,
+        hiddenFrom: "sm",
+        size: "ctl",
+        fullWidth: true,
+        value,
+        data: phone.map((option) => ({ value: option.value, label: option.label })),
+        onChange: commit
+      }
+    ) : /* @__PURE__ */ jsx(
+      Select,
+      {
+        "aria-label": label,
+        hiddenFrom: "sm",
+        size: "ctl",
+        className: classes.phoneSelect,
+        value,
+        allowDeselect: false,
+        data: phone.map((option) => ({ value: option.value, label: option.label })),
+        onChange: (next) => {
+          if (next !== null) commit(next);
+        }
+      }
+    )
+  ] });
+}
+export {
+  ViewTabs
+};

package/dist/controls-dates/date-range-picker.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+import type { RangeCustomPickerProps } from '../controls/range-filter.js';
+export declare function DateRangePicker({ value, onChange }: RangeCustomPickerProps): ReactNode;
+//# sourceMappingURL=date-range-picker.d.ts.map

package/dist/controls-dates/date-range-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker.d.ts","sourceRoot":"","sources":["../../src/controls-dates/date-range-picker.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAEtE,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,sBAAsB,GAAG,SAAS,CAatF"}

package/dist/controls-dates/date-range-picker.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { DatePicker } from "@mantine/dates";
+function DateRangePicker({ value, onChange }) {
+  return /* @__PURE__ */ jsx(
+    DatePicker,
+    {
+      type: "range",
+      allowSingleDateInRange: true,
+      value: [value.from ?? null, value.to ?? null],
+      onChange: ([from, to]) => {
+        if (from !== null && to !== null) onChange({ from, to });
+      }
+    }
+  );
+}
+export {
+  DateRangePicker
+};

package/dist/controls-dates/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * `basalt-ui/controls-dates` — the one export that needs `@mantine/dates`
+ * (`docs/CONTROLS-SPEC.md` §3). Split off `./controls` on purpose: `./controls` resolves and renders
+ * with no `@mantine/dates` installed, and this subpath is the only place that stops being true.
+ * Proven from outside the package by `scripts/pack-test.sh`.
+ */
+export { DateRangePicker } from './date-range-picker.js';
+export type { RangeCustomPickerProps } from '../controls/range-filter.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/controls-dates/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACrD,YAAY,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/controls-dates/index.js

@@ -0,0 +1,4 @@
+import { DateRangePicker } from "./date-range-picker.js";
+export {
+  DateRangePicker
+};

package/dist/dashboard/delta-badge.d.ts

@@ -1,13 +1,7 @@
-export type DeltaBadgeProps = {
-    /** Signed delta driving tone (positive/negative/zero) and, by default, the label magnitude. */
-    value: number;
-    /** Formats the value into the label text. Defaults to `${Math.abs(value).toFixed(1)}%`. */
-    format?: (value: number) => string;
-    /** Render the ▲/▼ direction glyph. Defaults to `true`; a zero value never shows a glyph. */
-    withGlyph?: boolean;
-    /** Optional comparison timeframe rendered directly after the value in a dimmer shade of the same
-     * tone (e.g. `MoM`, `WoW`, `YTD`) — states what the delta is measured against without a hover. */
-    period?: string | undefined;
-};
-export declare function DeltaBadge({ value, format, withGlyph, period, }: DeltaBadgeProps): import("react").JSX.Element;
+/**
+ * `DeltaBadge` moved to `src/widget-header/` (docs/CONTROLS-SPEC.md §2.2) so `WidgetHeader` can
+ * compose it Mantine-free. Re-exported here unchanged so this deep import path — and `StatCard`'s
+ * own `./delta-badge` import — keep working without a wave-3 edit.
+ */
+export { DeltaBadge, type DeltaBadgeProps } from '../widget-header/delta-badge.js';
 //# sourceMappingURL=delta-badge.d.ts.map

package/dist/dashboard/delta-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"delta-badge.d.ts","sourceRoot":"","sources":["../../src/dashboard/delta-badge.tsx"],"names":[],"mappings":"AAkBA,MAAM,MAAM,eAAe,GAAG;IAC5B,+FAA+F;IAC/F,KAAK,EAAE,MAAM,CAAA;IACb,2FAA2F;IAC3F,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;sGACkG;IAClG,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC5B,CAAA;AAID,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,MAAsB,EACtB,SAAgB,EAChB,MAAM,GACP,EAAE,eAAe,+BAsCjB"}
+{"version":3,"file":"delta-badge.d.ts","sourceRoot":"","sources":["../../src/dashboard/delta-badge.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAA"}