@eifi1/ui-kit 0.4.0 → 0.5.0

package/dist/components/popover.js

@@ -1,15 +1,33 @@
+"use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useAnchoredPanel } from "../hooks/use-anchored-panel.js";
 import { useEscapeKey, useOutsideClick } from "../hooks/use-dismiss.js";
+import { useFocusTrap } from "../hooks/use-focus-trap.js";
+import { cn } from "../lib/cn.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+const DEFAULT_POPOVER_LABELS = {
+  panel: "Popover"
+};
 const POPOVER_WIDTH = 288;
-function Popover({ trigger, children, width = POPOVER_WIDTH }) {
+function Popover({
+  trigger,
+  children,
+  width = POPOVER_WIDTH,
+  labels,
+  panelId,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
   const [open, setOpen] = useState(false);
   const close = () => setOpen(false);
   const toggle = () => setOpen((v) => !v);
+  const text = useKitLabels("popover", DEFAULT_POPOVER_LABELS, labels);
   const placement = useAnchoredPanel(triggerRef, open);
   const rect = placement.rect;
   const pos = rect ? {
@@ -18,21 +36,52 @@ function Popover({ trigger, children, width = POPOVER_WIDTH }) {
   } : null;
   useOutsideClick([triggerRef, panelRef], close, open);
   useEscapeKey(close, open);
+  useFocusTrap(panelRef, {
+    active: open && pos !== null,
+    // The panel keeps a focus one of its own children has already taken. `FilterPopover`
+    // autofocuses its text box on mount — that is what the press on "Filter" was FOR,
+    // and it is a prop there precisely so the popover keeps it — and a trap that
+    // unconditionally focused the container would take it straight back off again,
+    // one effect later and invisibly.
+    initialFocus: () => {
+      const panel = panelRef.current;
+      const active = document.activeElement;
+      return panel?.contains(active) ? active : panel;
+    }
+  });
+  const handleKeyDown = (e) => {
+    if (e.key !== "Escape") return;
+    e.stopPropagation();
+    close();
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     trigger({ open, toggle, ref: triggerRef }),
     open && pos && createPortal(
       /* @__PURE__ */ jsx(
         "div",
         {
+          ...rest,
           ref: panelRef,
+          role: "dialog",
+          id: panelId,
+          "aria-label": ariaLabel ?? text.panel,
+          tabIndex: -1,
+          onKeyDown: handleKeyDown,
           style: {
+            // Merged over the caller's, never replaced by it: these four are measured
+            // against the trigger every scroll and resize, and a panel that dropped
+            // them would paint at the top-left of the viewport.
+            ...style,
             position: "fixed",
             top: pos.top,
             left: pos.left,
             width,
             maxHeight: placement.maxHeight
           },
-          className: "z-50 overflow-y-auto rounded-md border border-slate-200 bg-white p-3 shadow-lg dark:border-slate-700 dark:bg-slate-900",
+          className: cn(
+            "z-50 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-lg outline-none",
+            className
+          ),
           children: children(close)
         }
       ),
@@ -41,6 +90,7 @@ function Popover({ trigger, children, width = POPOVER_WIDTH }) {
   ] });
 }
 export {
+  DEFAULT_POPOVER_LABELS,
   Popover
 };
 //# sourceMappingURL=popover.js.map

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\n\ninterface PopoverProps {\n  trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  width?: number;\n}\n\nconst POPOVER_WIDTH = 288;\n\n/**\n * Portal-rendered popover anchored under its trigger button. The panel is fixed\n * to the viewport (so table/overflow ancestors can't clip it) and re-aligns on\n * scroll/resize; it closes on outside-click and Escape.\n */\nexport function Popover({ trigger, children, width = POPOVER_WIDTH }: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(false);\n  const close = () => setOpen(false);\n  const toggle = () => setOpen((v) => !v);\n\n  // Align the panel's right edge to the trigger's and clamp it horizontally; the\n  // hook owns the vertical half — below by default, flipped above (and height-capped)\n  // when that is where the room is, e.g. once a mobile keyboard has eaten the bottom\n  // of the screen (feedback #135). It re-measures on scroll/resize.\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  const pos = rect\n    ? {\n        top: placement.top,\n        left: Math.min(Math.max(8, rect.right - width), window.innerWidth - width - 8),\n      }\n    : null;\n\n  useOutsideClick([triggerRef, panelRef], close, open);\n  useEscapeKey(close, open);\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open && pos &&\n        createPortal(\n          <div\n            ref={panelRef}\n            style={{\n              position: \"fixed\",\n              top: pos.top,\n              left: pos.left,\n              width,\n              maxHeight: placement.maxHeight,\n            }}\n            className=\"z-50 overflow-y-auto rounded-md border border-slate-200 bg-white p-3 shadow-lg dark:border-slate-700 dark:bg-slate-900\"\n          >\n            {children(close)}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":"AA2CI,mBAIM,KAJN;AA3CJ,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,cAAc,uBAAuB;AAQ9C,MAAM,gBAAgB;AAOf,SAAS,QAAQ,EAAE,SAAS,UAAU,QAAQ,cAAc,GAAiB;AAClF,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,QAAQ,MAAM,QAAQ,KAAK;AACjC,QAAM,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAMtC,QAAM,YAAY,iBAAiB,YAAY,IAAI;AACnD,QAAM,OAAO,UAAU;AACvB,QAAM,MAAM,OACR;AAAA,IACE,KAAK,UAAU;AAAA,IACf,MAAM,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,QAAQ,KAAK,GAAG,OAAO,aAAa,QAAQ,CAAC;AAAA,EAC/E,IACA;AAEJ,kBAAgB,CAAC,YAAY,QAAQ,GAAG,OAAO,IAAI;AACnD,eAAa,OAAO,IAAI;AAExB,SACE,iCACG;AAAA,YAAQ,EAAE,MAAM,QAAQ,KAAK,WAAW,CAAC;AAAA,IACzC,QAAQ,OACP;AAAA,MACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,OAAO;AAAA,YACL,UAAU;AAAA,YACV,KAAK,IAAI;AAAA,YACT,MAAM,IAAI;AAAA,YACV;AAAA,YACA,WAAW,UAAU;AAAA,UACvB;AAAA,UACA,WAAU;AAAA,UAET,mBAAS,KAAK;AAAA;AAAA,MACjB;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/** The panel's accessible name. A `role=\"dialog\"` with no name announces as \"dialog\"\n *  and nothing else, which is worse than the unlabelled div it replaced — so it is a\n *  prop with an English default, like every other string this package renders. Callers\n *  should pass the control's own name (\"Filter\", \"Choose a date\"); the default is only\n *  there so an unmigrated call site is still named. */\nexport interface PopoverLabels {\n  panel: string;\n}\n\n// Exported since the kit grew one label tree (`UiKitLabels`, src/i18n): the complete\n// English reference a translator works from has to be able to name every namespace.\nexport const DEFAULT_POPOVER_LABELS: PopoverLabels = {\n  panel: \"Popover\",\n};\n\n/**\n * Exported, and extending the `<div>` attributes, so a consumer wrapping this — which is\n * what `DateField` and `FilterPopover` in this very package do — can hand anything\n * through to the PANEL: a `data-tour` anchor for the kit's own guided tour, a test id,\n * an `aria-describedby`, or an `aria-label` naming this particular popover.\n *\n * `children` is omitted from those attributes rather than inherited: here it is a render\n * prop taking the panel's `close`, not a `ReactNode`, so the two cannot be reconciled.\n */\nexport interface PopoverProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  width?: number;\n  labels?: Partial<PopoverLabels>;\n  /** Id for the panel, so a trigger wearing `role=\"combobox\"` can `aria-controls` it.\n   *  Required by ARIA on that role, and the panel is rendered here rather than by the\n   *  caller, so the id has to come in from outside. */\n  panelId?: string;\n  /** Extra classes for the PANEL. The trigger is the caller's own element. */\n  className?: string;\n}\n\nconst POPOVER_WIDTH = 288;\n\n/**\n * Portal-rendered popover anchored under its trigger button. The panel is fixed\n * to the viewport (so table/overflow ancestors can't clip it) and re-aligns on\n * scroll/resize; it closes on outside-click and Escape.\n *\n * ## Trapped, not merely focused — and why, because it is the closer call\n *\n * The audit's finding was that this panel *\"portals out of the tab order with no role\n * and no focus move\"*: Tab from the trigger went straight past the panel into the page\n * behind it, so the calendar, the calculator keypad and every column filter in the kit\n * were mouse-only. Two shapes fix that, and a popover is not automatically a dialog, so\n * this was chosen rather than inherited:\n *\n *  - **The light one** — move focus in on open, hand it back on close, and let Tab walk\n *    OUT of the panel into whatever follows the trigger. That is the right shape for a\n *    non-modal popover sitting inline in the document.\n *  - **The trap** — Tab cycles inside the panel; Escape and a click outside are the\n *    ways out. What is here.\n *\n * The deciding fact is the portal. This panel is rendered to the END of `<body>`, not\n * beside its trigger, so \"let Tab walk out\" does not mean \"carry on from the trigger\" —\n * it means land at the end of the document, several hundred controls from where the\n * user was. Tabbing out of it would be a worse place to arrive than the one the finding\n * complains about, and fixing that properly needs a sentinel-and-return dance that\n * nothing in this package has. The trap gets the user back to the trigger every time,\n * because `useFocusTrap` restores focus on close.\n *\n * And the panels this kit actually opens are self-contained: pick a date, tap out a\n * sum, narrow a column. Each of them commits and closes, and each already has two\n * documented ways out wired above — Escape and an outside press — so containment costs\n * a keyboard user nothing they had.\n *\n * **It stays non-modal in every other respect**, deliberately: no backdrop, no body\n * scroll lock, and no `aria-modal`, so the page behind is still readable by a screen\n * reader, still scrollable, and still clickable — clicking it is what dismisses this.\n * Only Tab is contained. A popover that took the page away as well would be a\n * {@link Modal}, and there is one of those.\n */\nexport function Popover({\n  trigger,\n  children,\n  width = POPOVER_WIDTH,\n  labels,\n  panelId,\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(false);\n  const close = () => setOpen(false);\n  const toggle = () => setOpen((v) => !v);\n  // prop > `<UiKitProvider labels={{ popover }}>` > English. The provider's\n  // `popover.panel` is only the last-resort name for a panel no caller named.\n  const text = useKitLabels(\"popover\", DEFAULT_POPOVER_LABELS, labels);\n\n  // Align the panel's right edge to the trigger's and clamp it horizontally; the\n  // hook owns the vertical half — below by default, flipped above (and height-capped)\n  // when that is where the room is, e.g. once a mobile keyboard has eaten the bottom\n  // of the screen (feedback #135). It re-measures on scroll/resize.\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  const pos = rect\n    ? {\n        top: placement.top,\n        left: Math.min(Math.max(8, rect.right - width), window.innerWidth - width - 8),\n      }\n    : null;\n\n  useOutsideClick([triggerRef, panelRef], close, open);\n  useEscapeKey(close, open);\n\n  useFocusTrap(panelRef, {\n    active: open && pos !== null,\n    // The panel keeps a focus one of its own children has already taken. `FilterPopover`\n    // autofocuses its text box on mount — that is what the press on \"Filter\" was FOR,\n    // and it is a prop there precisely so the popover keeps it — and a trap that\n    // unconditionally focused the container would take it straight back off again,\n    // one effect later and invisibly.\n    initialFocus: () => {\n      const panel = panelRef.current;\n      const active = document.activeElement;\n      return panel?.contains(active) ? (active as HTMLElement) : panel;\n    },\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key !== \"Escape\") return;\n    // `useEscapeKey` above listens on the document and still covers the case where\n    // focus somehow is not in here. This handler is for the case that focus IS, which\n    // is now the normal one — and it exists to STOP the key, because a popover opened\n    // from inside a `Modal` (the calculator on an amount field is exactly that) would\n    // otherwise have its Escape travel on up the React tree and close the dialog\n    // underneath as well. Closing twice is harmless — `close` is a state setter, not a\n    // caller's callback — so the two paths cannot double-fire anything.\n    e.stopPropagation();\n    close();\n  };\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open && pos &&\n        createPortal(\n          <div\n            // `...rest` first: the role, the id the trigger's `aria-controls` points at,\n            // the `tabIndex` the trap needs and the measured position are what make this\n            // a popover, and a caller reaching for a `data-tour` anchor must not be able\n            // to remove one of them by accident.\n            {...rest}\n            ref={panelRef}\n            role=\"dialog\"\n            id={panelId}\n            // The caller's own `aria-label` wins over {@link PopoverLabels.panel}, which\n            // is the package's English fallback for an unnamed panel. Both name the same\n            // element; the DOM spelling is the one being standardised on, so where both\n            // are present it is the one that survives.\n            aria-label={ariaLabel ?? text.panel}\n            // Without it the panel cannot take focus at all, and the trap above would\n            // silently do nothing on a panel whose children are not yet tabbable.\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            style={{\n              // Merged over the caller's, never replaced by it: these four are measured\n              // against the trigger every scroll and resize, and a panel that dropped\n              // them would paint at the top-left of the viewport.\n              ...style,\n              position: \"fixed\",\n              top: pos.top,\n              left: pos.left,\n              width,\n              maxHeight: placement.maxHeight,\n            }}\n            className={cn(\n              \"z-50 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-lg outline-none\",\n              className,\n            )}\n          >\n            {children(close)}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":";AAsJI,mBAIM,KAJN;AAtJJ,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,cAAc,uBAAuB;AAC9C,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAatB,MAAM,yBAAwC;AAAA,EACnD,OAAO;AACT;AAwBA,MAAM,gBAAgB;AAwCf,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAiB;AACf,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,QAAQ,MAAM,QAAQ,KAAK;AACjC,QAAM,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAGtC,QAAM,OAAO,aAAa,WAAW,wBAAwB,MAAM;AAMnE,QAAM,YAAY,iBAAiB,YAAY,IAAI;AACnD,QAAM,OAAO,UAAU;AACvB,QAAM,MAAM,OACR;AAAA,IACE,KAAK,UAAU;AAAA,IACf,MAAM,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,QAAQ,KAAK,GAAG,OAAO,aAAa,QAAQ,CAAC;AAAA,EAC/E,IACA;AAEJ,kBAAgB,CAAC,YAAY,QAAQ,GAAG,OAAO,IAAI;AACnD,eAAa,OAAO,IAAI;AAExB,eAAa,UAAU;AAAA,IACrB,QAAQ,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxB,cAAc,MAAM;AAClB,YAAM,QAAQ,SAAS;AACvB,YAAM,SAAS,SAAS;AACxB,aAAO,OAAO,SAAS,MAAM,IAAK,SAAyB;AAAA,IAC7D;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,CAAC,MAAqC;AAC1D,QAAI,EAAE,QAAQ,SAAU;AAQxB,MAAE,gBAAgB;AAClB,UAAM;AAAA,EACR;AAEA,SACE,iCACG;AAAA,YAAQ,EAAE,MAAM,QAAQ,KAAK,WAAW,CAAC;AAAA,IACzC,QAAQ,OACP;AAAA,MACE;AAAA,QAAC;AAAA;AAAA,UAKE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL,IAAI;AAAA,UAKJ,cAAY,aAAa,KAAK;AAAA,UAG9B,UAAU;AAAA,UACV,WAAW;AAAA,UACX,OAAO;AAAA;AAAA;AAAA;AAAA,YAIL,GAAG;AAAA,YACH,UAAU;AAAA,YACV,KAAK,IAAI;AAAA,YACT,MAAM,IAAI;AAAA,YACV;AAAA,YACA,WAAW,UAAU;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,UAEC,mBAAS,KAAK;AAAA;AAAA,MACjB;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACJ;AAEJ;","names":[]}

package/dist/components/search-field.d.ts

@@ -1,23 +1,41 @@
 import * as react from 'react';
 import { InputHTMLAttributes } from 'react';
 
-interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type"> {
+interface SearchFieldOwnProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type" | "aria-label"> {
     value: string;
     /** The typed text. Emitted as a plain string, not an event: every caller of the
      *  four this replaced wanted the string, and one of them held it in a URL param
      *  rather than in state. */
     onChange: (value: string) => void;
-    /** The field's accessible name. Required, and deliberately not defaulted to the
-     *  placeholder: a placeholder disappears the moment someone types, so a field
-     *  named only by one is unnamed exactly when a screen-reader user is working in
-     *  it. Two of the boxes this replaced had no name but the placeholder. */
-    label: string;
+    /**
+     * The field's accessible name.
+     *
+     * @deprecated Pass `aria-label` instead — the DOM spelling this kit standardised on
+     * when it found three names for one idea (`ariaLabel`, `aria-label`, and this).
+     * Unchanged and still supported; it names the field only when `aria-label` is
+     * absent, so a consumer can migrate one call site at a time.
+     */
+    label?: string;
     /** Names the clear button. Omit it and no clear button is rendered — which is a
      *  decision, not a default: a filter you can type into and not untype is the
      *  complaint that produced the button on three of these four screens. */
     clearLabel?: string;
-    className?: string;
 }
+/**
+ * One of the two spellings is REQUIRED, and the union is how that survives the
+ * deprecation. Making `label` merely optional would have been the easy change and the
+ * wrong one: the whole reason this component exists is that two of the four boxes it
+ * replaced were named by nothing but their placeholder — which disappears the moment
+ * someone types, i.e. exactly when a screen-reader user is working in the field. A
+ * caller now has a choice of spelling; it still has no option to pass neither.
+ */
+type SearchFieldProps = SearchFieldOwnProps & ({
+    "aria-label": string;
+    label?: string;
+} | {
+    label: string;
+    "aria-label"?: string;
+});
 /**
  * The page-level filter box: a search icon, a `type="search"` input, and a clear
  * "×" that appears once there is something to clear.

package/dist/components/search-field.js

@@ -1,16 +1,18 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
 import { Search, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { FIELD_BASE } from "./ui.js";
-const SearchField = forwardRef(function SearchField2({ value, onChange, label, clearLabel, className, placeholder, ...rest }, ref) {
+const SearchField = forwardRef(function SearchField2({ value, onChange, label, clearLabel, className, placeholder, "aria-label": ariaLabel, ...rest }, ref) {
   const innerRef = useRef(null);
+  const name = ariaLabel ?? label;
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ jsx(
       Search,
       {
         "aria-hidden": true,
-        className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400"
+        className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]"
       }
     ),
     /* @__PURE__ */ jsx(
@@ -24,8 +26,8 @@ const SearchField = forwardRef(function SearchField2({ value, onChange, label, c
         type: "search",
         value,
         onChange: (e) => onChange(e.target.value),
-        "aria-label": label,
-        placeholder: placeholder ?? label,
+        "aria-label": name,
+        placeholder: placeholder ?? name,
         name: "search",
         autoComplete: "off",
         autoCapitalize: "none",
@@ -51,7 +53,7 @@ const SearchField = forwardRef(function SearchField2({ value, onChange, label, c
           innerRef.current?.focus();
         },
         "aria-label": clearLabel,
-        className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300",
+        className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]",
         children: /* @__PURE__ */ jsx(X, { className: "size-4" })
       }
     )

package/dist/components/search-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/search-field.tsx"],"sourcesContent":["import { forwardRef, useRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Search, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE } from \"./ui\";\n\nexport interface SearchFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"value\" | \"onChange\" | \"type\"> {\n  value: string;\n  /** The typed text. Emitted as a plain string, not an event: every caller of the\n   *  four this replaced wanted the string, and one of them held it in a URL param\n   *  rather than in state. */\n  onChange: (value: string) => void;\n  /** The field's accessible name. Required, and deliberately not defaulted to the\n   *  placeholder: a placeholder disappears the moment someone types, so a field\n   *  named only by one is unnamed exactly when a screen-reader user is working in\n   *  it. Two of the boxes this replaced had no name but the placeholder. */\n  label: string;\n  /** Names the clear button. Omit it and no clear button is rendered — which is a\n   *  decision, not a default: a filter you can type into and not untype is the\n   *  complaint that produced the button on three of these four screens. */\n  clearLabel?: string;\n  className?: string;\n}\n\n/**\n * The page-level filter box: a search icon, a `type=\"search\"` input, and a clear\n * \"×\" that appears once there is something to clear.\n *\n * ## Why it is a component\n *\n * Keksdose had four of these and no two agreed. Two were character-identical\n * twenty-line copies (the settings catalogue filter and the tour list filter) —\n * the same absolute icon at `left-3`, the same `pl-9 pr-9`, the same\n * `[&::-webkit-search-cancel-button]:appearance-none`, the same conditional clear\n * button at `right-2` — differing only in which state setter they called. The\n * third (the admin support queue) was the same idea at `left-2`/`size-3.5`/`pl-7`\n * with no clear button and no `type=\"search\"`, so it had neither the `searchbox`\n * role nor a way to empty itself. The fourth (the bank picker) was a bare `<Input\n * placeholder=\"Search\">`: no icon, no clear, and no accessible name at all once\n * the placeholder went away.\n *\n * None of that is a design decision anyone made; it is four people solving the\n * same problem on four days. A shared component is how the fourth screen gets the\n * clear button the first one earned.\n *\n * ## The two X's\n *\n * `type=\"search\"` is what gives the field its `searchbox` role — and, in Chrome, a\n * NATIVE clear cross that paints right next to ours, so a non-empty box shows two\n * X's an inch apart. Ours is the one that survives: it carries an accessible name\n * and matches the app's other icon buttons, and it returns focus to the input so\n * the next query can be typed straight away.\n */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(\n  { value, onChange, label, clearLabel, className, placeholder, ...rest },\n  ref,\n) {\n  const innerRef = useRef<HTMLInputElement>(null);\n  return (\n    <div className={cn(\"relative\", className)}>\n      <Search\n        aria-hidden\n        className=\"pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400\"\n      />\n      <input\n        ref={(node) => {\n          innerRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"search\"\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        aria-label={label}\n        placeholder={placeholder ?? label}\n        // Keksdose live #333: *\"Entering the search here — is that set as password?\n        // … I got prompted for remembering my name or mail address\"*, typed into the\n        // settings filter on a phone.\n        //\n        // A `type=\"search\"` input with no `name` and no `autocomplete` is a field\n        // Chrome's autofill classifies by GUESSWORK, from the labels around it and\n        // the other fields on the page — and a settings page has an email and a\n        // password on it. Naming the field and declaring the intent is what takes it\n        // out of that guess: `autocomplete=\"off\"` says it is not part of any profile,\n        // and a `name` of \"search\" is the strongest hint the heuristics take.\n        //\n        // The three that follow are not about autofill but about the same keyboard:\n        // a filter box that capitalises the first letter and autocorrects \"2fa\" to\n        // \"2FA\" is fighting the person typing into it. Declared BEFORE `{...rest}` so\n        // a caller with a reason can still override any of them.\n        name=\"search\"\n        autoComplete=\"off\"\n        autoCapitalize=\"none\"\n        autoCorrect=\"off\"\n        spellCheck={false}\n        {...rest}\n        className={cn(\n          FIELD_BASE,\n          \"pl-9\",\n          // Room for our own \"×\" only when there is one; a field that can't be\n          // cleared has no reason to reserve the space.\n          clearLabel === undefined ? \"pr-3\" : \"pr-9\",\n          \"[&::-webkit-search-cancel-button]:appearance-none\",\n        )}\n      />\n      {clearLabel !== undefined && value !== \"\" && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            onChange(\"\");\n            // Clearing is the start of the next query far more often than it is the\n            // end of this one, so the caret stays where it can be typed into.\n            innerRef.current?.focus();\n          }}\n          aria-label={clearLabel}\n          className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300\"\n        >\n          <X className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n});\nSearchField.displayName = \"SearchField\";\n"],"mappings":"AA4DI,SACE,KADF;AA5DJ,SAAS,YAAY,cAAc;AAEnC,SAAS,QAAQ,SAAS;AAC1B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAkDpB,MAAM,cAAc,WAA+C,SAASA,aACjF,EAAE,OAAO,UAAU,OAAO,YAAY,WAAW,aAAa,GAAG,KAAK,GACtE,KACA;AACA,QAAM,WAAW,OAAyB,IAAI;AAC9C,SACE,qBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GACtC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAU;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,CAAC,SAAS;AACb,mBAAS,UAAU;AACnB,cAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,mBAC9B,IAAK,KAAI,UAAU;AAAA,QAC9B;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,QACxC,cAAY;AAAA,QACZ,aAAa,eAAe;AAAA,QAgB5B,MAAK;AAAA,QACL,cAAa;AAAA,QACb,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,YAAY;AAAA,QACX,GAAG;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA;AAAA,UAGA,eAAe,SAAY,SAAS;AAAA,UACpC;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACC,eAAe,UAAa,UAAU,MACrC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM;AACb,mBAAS,EAAE;AAGX,mBAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,QACA,cAAY;AAAA,QACZ,WAAU;AAAA,QAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,IACxB;AAAA,KAEJ;AAEJ,CAAC;AACD,YAAY,cAAc;","names":["SearchField"]}
+{"version":3,"sources":["../../src/components/search-field.tsx"],"sourcesContent":["import { forwardRef, useRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Search, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE } from \"./ui\";\n\ninterface SearchFieldOwnProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"value\" | \"onChange\" | \"type\" | \"aria-label\"\n  > {\n  value: string;\n  /** The typed text. Emitted as a plain string, not an event: every caller of the\n   *  four this replaced wanted the string, and one of them held it in a URL param\n   *  rather than in state. */\n  onChange: (value: string) => void;\n  /**\n   * The field's accessible name.\n   *\n   * @deprecated Pass `aria-label` instead — the DOM spelling this kit standardised on\n   * when it found three names for one idea (`ariaLabel`, `aria-label`, and this).\n   * Unchanged and still supported; it names the field only when `aria-label` is\n   * absent, so a consumer can migrate one call site at a time.\n   */\n  label?: string;\n  /** Names the clear button. Omit it and no clear button is rendered — which is a\n   *  decision, not a default: a filter you can type into and not untype is the\n   *  complaint that produced the button on three of these four screens. */\n  clearLabel?: string;\n}\n\n/**\n * One of the two spellings is REQUIRED, and the union is how that survives the\n * deprecation. Making `label` merely optional would have been the easy change and the\n * wrong one: the whole reason this component exists is that two of the four boxes it\n * replaced were named by nothing but their placeholder — which disappears the moment\n * someone types, i.e. exactly when a screen-reader user is working in the field. A\n * caller now has a choice of spelling; it still has no option to pass neither.\n */\nexport type SearchFieldProps = SearchFieldOwnProps &\n  ({ \"aria-label\": string; label?: string } | { label: string; \"aria-label\"?: string });\n\n/**\n * The page-level filter box: a search icon, a `type=\"search\"` input, and a clear\n * \"×\" that appears once there is something to clear.\n *\n * ## Why it is a component\n *\n * Keksdose had four of these and no two agreed. Two were character-identical\n * twenty-line copies (the settings catalogue filter and the tour list filter) —\n * the same absolute icon at `left-3`, the same `pl-9 pr-9`, the same\n * `[&::-webkit-search-cancel-button]:appearance-none`, the same conditional clear\n * button at `right-2` — differing only in which state setter they called. The\n * third (the admin support queue) was the same idea at `left-2`/`size-3.5`/`pl-7`\n * with no clear button and no `type=\"search\"`, so it had neither the `searchbox`\n * role nor a way to empty itself. The fourth (the bank picker) was a bare `<Input\n * placeholder=\"Search\">`: no icon, no clear, and no accessible name at all once\n * the placeholder went away.\n *\n * None of that is a design decision anyone made; it is four people solving the\n * same problem on four days. A shared component is how the fourth screen gets the\n * clear button the first one earned.\n *\n * ## The two X's\n *\n * `type=\"search\"` is what gives the field its `searchbox` role — and, in Chrome, a\n * NATIVE clear cross that paints right next to ours, so a non-empty box shows two\n * X's an inch apart. Ours is the one that survives: it carries an accessible name\n * and matches the app's other icon buttons, and it returns focus to the input so\n * the next query can be typed straight away.\n */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(\n  { value, onChange, label, clearLabel, className, placeholder, \"aria-label\": ariaLabel, ...rest },\n  ref,\n) {\n  const innerRef = useRef<HTMLInputElement>(null);\n  // Whichever spelling the caller used. It is the accessible name AND the placeholder\n  // fallback, so a box named only by `aria-label` still says what it is before anyone\n  // has typed in it — the same deal `label` has always had.\n  const name = ariaLabel ?? label;\n  return (\n    <div className={cn(\"relative\", className)}>\n      <Search\n        aria-hidden\n        className=\"pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]\"\n      />\n      <input\n        ref={(node) => {\n          innerRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"search\"\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        aria-label={name}\n        placeholder={placeholder ?? name}\n        // Keksdose live #333: *\"Entering the search here — is that set as password?\n        // … I got prompted for remembering my name or mail address\"*, typed into the\n        // settings filter on a phone.\n        //\n        // A `type=\"search\"` input with no `name` and no `autocomplete` is a field\n        // Chrome's autofill classifies by GUESSWORK, from the labels around it and\n        // the other fields on the page — and a settings page has an email and a\n        // password on it. Naming the field and declaring the intent is what takes it\n        // out of that guess: `autocomplete=\"off\"` says it is not part of any profile,\n        // and a `name` of \"search\" is the strongest hint the heuristics take.\n        //\n        // The three that follow are not about autofill but about the same keyboard:\n        // a filter box that capitalises the first letter and autocorrects \"2fa\" to\n        // \"2FA\" is fighting the person typing into it. Declared BEFORE `{...rest}` so\n        // a caller with a reason can still override any of them.\n        name=\"search\"\n        autoComplete=\"off\"\n        autoCapitalize=\"none\"\n        autoCorrect=\"off\"\n        spellCheck={false}\n        {...rest}\n        className={cn(\n          FIELD_BASE,\n          \"pl-9\",\n          // Room for our own \"×\" only when there is one; a field that can't be\n          // cleared has no reason to reserve the space.\n          clearLabel === undefined ? \"pr-3\" : \"pr-9\",\n          \"[&::-webkit-search-cancel-button]:appearance-none\",\n        )}\n      />\n      {clearLabel !== undefined && value !== \"\" && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            onChange(\"\");\n            // Clearing is the start of the next query far more often than it is the\n            // end of this one, so the caret stays where it can be typed into.\n            innerRef.current?.focus();\n          }}\n          aria-label={clearLabel}\n          className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\"\n        >\n          <X className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n});\nSearchField.displayName = \"SearchField\";\n"],"mappings":";AAiFI,SACE,KADF;AAjFJ,SAAS,YAAY,cAAc;AAEnC,SAAS,QAAQ,SAAS;AAC1B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAmEpB,MAAM,cAAc,WAA+C,SAASA,aACjF,EAAE,OAAO,UAAU,OAAO,YAAY,WAAW,aAAa,cAAc,WAAW,GAAG,KAAK,GAC/F,KACA;AACA,QAAM,WAAW,OAAyB,IAAI;AAI9C,QAAM,OAAO,aAAa;AAC1B,SACE,qBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GACtC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAU;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,CAAC,SAAS;AACb,mBAAS,UAAU;AACnB,cAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,mBAC9B,IAAK,KAAI,UAAU;AAAA,QAC9B;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,QACxC,cAAY;AAAA,QACZ,aAAa,eAAe;AAAA,QAgB5B,MAAK;AAAA,QACL,cAAa;AAAA,QACb,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,YAAY;AAAA,QACX,GAAG;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA;AAAA,UAGA,eAAe,SAAY,SAAS;AAAA,UACpC;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACC,eAAe,UAAa,UAAU,MACrC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM;AACb,mBAAS,EAAE;AAGX,mBAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,QACA,cAAY;AAAA,QACZ,WAAU;AAAA,QAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,IACxB;AAAA,KAEJ;AAEJ,CAAC;AACD,YAAY,cAAc;","names":["SearchField"]}

package/dist/components/series-chart-labels.d.ts

@@ -0,0 +1,14 @@
+interface SeriesChartLabels {
+    /** The button that puts a zoomed chart back to its full extent. Visible text. */
+    resetZoom: string;
+    /** Accessible name of the drag surface laid over the plot. It is the only place the
+     *  gesture is explained, so it says how the drag is read and how to undo it. */
+    zoomHint: string;
+    /** What a chart with nothing to draw says, when the caller passes no `empty`. */
+    empty: string;
+    /** Accessible name of a `ToggleLegend` — a group of switches, one per series. */
+    legend: string;
+}
+declare const DEFAULT_SERIES_CHART_LABELS: SeriesChartLabels;
+
+export { DEFAULT_SERIES_CHART_LABELS, type SeriesChartLabels };

package/dist/components/series-chart-labels.js

@@ -0,0 +1,11 @@
+"use client";
+const DEFAULT_SERIES_CHART_LABELS = {
+  resetZoom: "Reset zoom",
+  zoomHint: "Drag to zoom: a roughly square selection zooms both axes, a long thin one only its own. Double-click to reset.",
+  empty: "No data",
+  legend: "Series"
+};
+export {
+  DEFAULT_SERIES_CHART_LABELS
+};
+//# sourceMappingURL=series-chart-labels.js.map

package/dist/components/series-chart-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/series-chart-labels.ts"],"sourcesContent":["// All user-facing strings for the series chart family — `SeriesChart`, its drag-to-zoom\n// layer and `ToggleLegend` — as the `seriesChart` namespace of `<UiKitProvider labels>`,\n// and per chart the `labels` prop over that.\n//\n// A module of its own, with no recharts in it, so the label registry (src/i18n) can\n// import the defaults without pulling the chart library in behind them.\n\nexport interface SeriesChartLabels {\n  /** The button that puts a zoomed chart back to its full extent. Visible text. */\n  resetZoom: string;\n  /** Accessible name of the drag surface laid over the plot. It is the only place the\n   *  gesture is explained, so it says how the drag is read and how to undo it. */\n  zoomHint: string;\n  /** What a chart with nothing to draw says, when the caller passes no `empty`. */\n  empty: string;\n  /** Accessible name of a `ToggleLegend` — a group of switches, one per series. */\n  legend: string;\n}\n\nexport const DEFAULT_SERIES_CHART_LABELS: SeriesChartLabels = {\n  resetZoom: \"Reset zoom\",\n  zoomHint:\n    \"Drag to zoom: a roughly square selection zooms both axes, a long thin one only its own. Double-click to reset.\",\n  empty: \"No data\",\n  legend: \"Series\",\n};\n"],"mappings":";AAmBO,MAAM,8BAAiD;AAAA,EAC5D,WAAW;AAAA,EACX,UACE;AAAA,EACF,OAAO;AAAA,EACP,QAAQ;AACV;","names":[]}

package/dist/components/series-chart.d.ts

@@ -0,0 +1,207 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ZoomBinding } from './chart-zoom.js';
+import { SeriesChartLabels } from './series-chart-labels.js';
+import 'recharts';
+
+interface SeriesChartSeries {
+    /** The row key this line reads — and the `--color-<key>` it is painted with, so it
+     *  must be a CSS identifier. Build keys out of data with {@link seriesKey}. */
+    key: string;
+    label: ReactNode;
+    /** Any CSS colour the chart shell accepts (hex, rgb/hsl, `var(--token)`). Default:
+     *  the kit's categorical ramp by position, `paletteFor(index)`. */
+    color?: string;
+    /** Marks the PAIRED line of a pair — the return stroke against the out-stroke, the
+     *  reference against the measurement. Shorthand for `dash: 1`. */
+    dashed?: boolean;
+    /** Which of {@link STROKE_PATTERNS} this line takes, for charts where the stroke says
+     *  WHICH QUANTITY and the colour says WHICH MEASUREMENT. */
+    dash?: number;
+    /** `stepAfter`, for a whole-number channel that jumps rather than travels — a
+     *  straight line between index 0 and index 1 draws an index of 0.5, which does not
+     *  exist. Drawn in the {@link STEP_DASH} pattern, whatever `dash` says. */
+    step?: boolean;
+    /** Which of `axes` this line is measured on. Default: `"y"`, the single one. */
+    axis?: string;
+}
+interface SeriesChartAxisShape {
+    id: string;
+    /**
+     * Which side of the plot the ticks stand on. Left unless said otherwise — and said
+     * otherwise for the right-hand chart of a FACING pair (see `facingAxes`), whose
+     * scales go on the outside so neither column of numbers stands between two pictures
+     * being compared.
+     */
+    orientation?: "left" | "right";
+    /** Tints the ticks — and the title too, when exactly one series is measured on this
+     *  axis (see {@link soleSeriesColor}). */
+    color?: string;
+    /** What the TICKS need, in px. The title's strip is added on top. Default 48. */
+    width?: number;
+    /**
+     * Pin the scale instead of fitting it to this chart's data. For a ROW of charts
+     * read against each other: auto-fitted, a 200 N loop and a 2000 N one draw the
+     * identical picture, and the comparison the layout promises is the one it fails.
+     */
+    domain?: [number, number];
+    /** A tick, formatted — as a BARE number. The unit is said once, in the title; the
+     *  tooltip gets it from `valueFormat`. Default: `Intl.NumberFormat` in the kit's
+     *  locale, up to two fraction digits. */
+    format?: (value: number) => string;
+}
+/**
+ * A y axis — and a VISIBLE one says what it measures.
+ *
+ * A union rather than an optional field, so the rule is the type's: a column of numbers
+ * whose quantity and unit are not written down is a column somebody reads as whatever
+ * they expected. `title: ""` is the explicit opt-out (the right-hand chart of a facing
+ * pair, whose neighbour already said it). A HIDDEN axis scales its lines and draws
+ * nothing, so there is nowhere for a title to go.
+ */
+type SeriesChartAxis = SeriesChartAxisShape & ({
+    title: string;
+    hide?: false;
+} | {
+    title?: string;
+    hide: true;
+});
+interface SeriesChartX {
+    /** Row key of the abscissa. Default `"x"`, which is what {@link mergeSeries} writes. */
+    key?: string;
+    /** What the abscissa is, with its unit. Drawn under the axis. */
+    title?: string;
+    /** A tick, formatted — bare, like the y axes'. */
+    format?: (value: number) => string;
+    /**
+     * Whether this chart prints the abscissa's ticks. On by default; off for every chart
+     * of a stack sharing one x window but the bottom one, which prints them for all. It
+     * costs no alignment: the x mapping is decided by the margins and the y bands.
+     */
+    ticks?: boolean;
+    /** The tooltip's heading. Default: the abscissa value through `format`. */
+    label?: (value: number) => ReactNode;
+}
+/**
+ * A vertical segment in data coordinates — two y at one x, which a row-per-abscissa
+ * chart structurally cannot draw. For CLOSING a shape the series already drew: the
+ * turnarounds of a hysteresis loop, where the abscissa stands still while the value
+ * falls from one branch to the other.
+ */
+interface SeriesChartSpan {
+    /** Distinct within the chart. */
+    key: string;
+    /** Which y axis `from`/`to` are measured on. Default `"y"`. */
+    axis?: string;
+    x: number;
+    from: number;
+    to: number;
+    /** Default: `var(--text-muted)`. */
+    color?: string;
+}
+interface SeriesChartProps {
+    /** One row per abscissa value. A missing key is a hole (see `connectNulls`). */
+    rows: Record<string, number>[];
+    series: SeriesChartSeries[];
+    /** Default: one untitled axis, `"y"`. */
+    axes?: SeriesChartAxis[];
+    x?: SeriesChartX;
+    /** A value in the tooltip, where a number stands on its own and needs its unit.
+     *  Default: `Intl.NumberFormat` in the kit's locale. */
+    valueFormat?: (value: number) => string;
+    /** Tailwind height class. Default `h-72`. The empty state takes it too, so a chart
+     *  losing its last line does not relayout the page under it. */
+    height?: string;
+    /** Bridge holes left by sources sampled on different grids. See {@link mergeSeries}. */
+    connectNulls?: boolean;
+    /** Shown, centred at the chart's height, instead of an empty chart. Default: the
+     *  `seriesChart.empty` label. `null` shows nothing. */
+    empty?: ReactNode;
+    /**
+     * Milliseconds for a line to draw itself in. Off by default: a chart beside a live
+     * editor re-renders on every keystroke, and an animation restarted mid-flight reads
+     * as the curve twitching. Turn it on where series come and go by choice.
+     */
+    animationMs?: number;
+    spans?: SeriesChartSpan[];
+    /** Supplied by `withChartZoom` and by nothing else. */
+    zoom?: ZoomBinding;
+    /** Per-chart strings over `<UiKitProvider labels={{ seriesChart }}>`. */
+    labels?: Partial<SeriesChartLabels>;
+    /** BCP 47 tag for the default number formats. Default: the provider's. */
+    locale?: string;
+    /** Onto the chart's root (`ChartContainer`) — e.g. an app's own grid ink. */
+    className?: string;
+}
+/** How much of an axis band the rotated title takes, in px. Reserved rather than
+ *  shared with the ticks: a title merely offset inside the band prints on top of a
+ *  five-figure tick, and which gives way depends on the data. */
+declare const AXIS_TITLE_STRIP = 16;
+/** The width the ticks of a y axis get when a caller does not say. */
+declare const AXIS_TICK_WIDTH = 48;
+/** The band a fitted axis draws, padded — and a real band for constant data, which is
+ *  a zero-height domain recharts cannot scale into. `undefined` when nothing finite. */
+declare function paddedDomain(values: Iterable<number>): [number, number] | undefined;
+/**
+ * {@link paddedDomain} for a caller that has already walked its own data — so a row
+ * of charts can share one scale without building an array to find two numbers in, and
+ * without a second padding rule. `low > high` means "nothing was seen": `undefined`.
+ */
+declare function padBand(low: number, high: number): [number, number] | undefined;
+/** The whole band a y axis occupies: its ticks, and its title when it draws one. For
+ *  lining a heading up over a PLOT rather than over its column. */
+declare function axisBandWidth(tickWidth: number | undefined, titled: boolean): number;
+/**
+ * The colour an axis TITLE takes, or `undefined` for the neutral one.
+ *
+ * An axis measuring exactly one line is that line's, and saying so in the title lets a
+ * reader find a channel's scale without counting axes. An axis measuring several is
+ * nobody's — a title in the first one's colour would be claiming it. Counted off the
+ * series, so toggling a second line onto an axis gives the colour up in the same render.
+ */
+declare function soleSeriesColor(axis: Pick<SeriesChartAxisShape, "id" | "color">, series: readonly Pick<SeriesChartSeries, "axis">[]): string | undefined;
+/** The single-axis case, which is most charts. `width` is what the TICKS need;
+ *  `orientation` is which side they stand on. */
+declare function oneAxis(format: ((value: number) => string) | undefined, title: string, width?: number, orientation?: "left" | "right"): SeriesChartAxis[];
+/** One source's samples: an abscissa and the channels measured against it. */
+interface SeriesSource {
+    x: number[];
+    channels: Record<string, number[]>;
+}
+/**
+ * Merge sources sampled on different grids into rows the chart can draw.
+ *
+ * Merged ON THE ABSCISSA VALUE ITSELF, never interpolated onto a common grid: a line
+ * through invented points looks exactly like one through measured ones. Where a source
+ * has no sample the key is absent, and `connectNulls` bridges the hole with the same
+ * straight segment an interpolation would have drawn — without claiming a measurement.
+ */
+declare function mergeSeries(sources: SeriesSource[]): Record<string, number>[];
+/**
+ * A series key built out of parts — as a CSS identifier.
+ *
+ * The chart shell paints each series through `--color-<key>`, and skips (with a
+ * console warning) any key that is not `[A-Za-z_][A-Za-z0-9_-]*`. A line whose colour
+ * was skipped has no stroke at all: an axis, a grid and nothing between them. So a key
+ * assembled out of DATA — an id, an enum, a side — goes through here: every other
+ * character becomes `_`, the parts are joined with `_`, and a key that would start with
+ * a digit or a hyphen gets a leading `_`.
+ */
+declare function seriesKey(...parts: (string | number)[]): string;
+/**
+ * {@link SeriesChart} without the zoom: the same picture, no drag layer, no reset
+ * button. For a thumbnail, a print view, or a chart the consumer wraps in its own
+ * interaction.
+ */
+declare function StaticSeriesChart({ rows, x, series, axes, valueFormat, height, connectNulls, empty, animationMs, spans, zoom, labels: labelsProp, locale, className, }: SeriesChartProps): react.JSX.Element;
+/**
+ * The series chart, zoomable. Drag across the plot to zoom (the drag's shape picks the
+ * axes), double-click or press the reset button to go back; wrap several in
+ * `SharedXZoom` to move their x windows together.
+ */
+declare const SeriesChart: {
+    (props: SeriesChartProps): react.JSX.Element;
+    displayName: string;
+};
+
+export { AXIS_TICK_WIDTH, AXIS_TITLE_STRIP, SeriesChart, type SeriesChartAxis, type SeriesChartProps, type SeriesChartSeries, type SeriesChartSpan, type SeriesChartX, type SeriesSource, StaticSeriesChart, axisBandWidth, mergeSeries, oneAxis, padBand, paddedDomain, seriesKey, soleSeriesColor };