@eifi1/ui-kit 0.4.1 → 0.5.0

package/dist/components/treemap.js

@@ -0,0 +1,179 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
+import { Treemap as RechartsTreemap } from "recharts";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "./chart.js";
+import { PALETTE_HEX, textOn } from "../theme/chart-palette.js";
+import { parseHex } from "../theme/color.js";
+const CHART_TOKENS = 9;
+function readChartTokens() {
+  const root = document.documentElement;
+  const fallback = root.classList.contains("dark") ? PALETTE_HEX.dark : PALETTE_HEX.light;
+  const style = getComputedStyle(root);
+  return Array.from({ length: CHART_TOKENS }, (_, i) => {
+    const v = style.getPropertyValue(`--chart-${i + 1}`).trim();
+    return parseHex(v) ? v : fallback[i];
+  }).join(",");
+}
+function subscribeChartTokens(onChange) {
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class", "style", "data-theme"]
+  });
+  return () => observer.disconnect();
+}
+const SERVER_TOKENS = PALETTE_HEX.light.join(",");
+function useChartTokenHex() {
+  const joined = useSyncExternalStore(subscribeChartTokens, readChartTokens, () => SERVER_TOKENS);
+  return joined.split(",");
+}
+const LABEL_FONT_SIZE = 12;
+const NOTE_FONT_SIZE = 11;
+function fitLabel(name, boxWidth, fontSize) {
+  const max = Math.floor((boxWidth - 12) / (fontSize * 0.58));
+  if (max < 3) return null;
+  return name.length <= max ? name : `${name.slice(0, max - 1).trimEnd()}\u2026`;
+}
+function TreemapCell({
+  depth,
+  x = 0,
+  y = 0,
+  width = 0,
+  height = 0,
+  name,
+  fill,
+  id,
+  onNodeClick,
+  redactNames,
+  nodeNote
+}) {
+  if (!depth) return null;
+  const px = Math.round(x);
+  const py = Math.round(y);
+  const pw = Math.round(width);
+  const ph = Math.round(height);
+  const tileFill = fill ?? "var(--chart-1)";
+  const ink = textOn(tileFill);
+  const label = pw >= 44 && ph >= 20 ? fitLabel(name ?? "", pw, LABEL_FONT_SIZE) : null;
+  const rawNote = id != null && nodeNote ? nodeNote(id) : void 0;
+  const note = label != null && rawNote != null && ph >= 36 ? fitLabel(rawNote, pw, NOTE_FONT_SIZE) : null;
+  const activate = id != null && onNodeClick ? () => onNodeClick(id, name ?? "") : void 0;
+  const onKeyDown = activate ? (e) => {
+    if (e.key !== "Enter" && e.key !== " ") return;
+    e.preventDefault();
+    activate();
+  } : void 0;
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      onClick: activate,
+      onKeyDown,
+      role: activate ? "button" : void 0,
+      tabIndex: activate ? 0 : void 0,
+      "aria-label": activate ? name : void 0,
+      "data-private": activate && redactNames ? "" : void 0,
+      cursor: activate ? "pointer" : void 0,
+      className: activate ? "outline-none [&:focus-visible>rect]:stroke-[var(--brand)]" : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: px,
+            y: py,
+            width: pw,
+            height: ph,
+            fill: tileFill,
+            stroke: "var(--bg-surface)",
+            strokeWidth: 2,
+            rx: 3
+          }
+        ),
+        label != null && /* @__PURE__ */ jsx(
+          "text",
+          {
+            "data-private": redactNames ? "" : void 0,
+            x: px + 6,
+            y: py + 15,
+            fill: ink,
+            stroke: tileFill,
+            strokeWidth: 2.5,
+            strokeLinejoin: "round",
+            paintOrder: "stroke",
+            fontSize: LABEL_FONT_SIZE,
+            fontWeight: 600,
+            style: { pointerEvents: "none" },
+            children: label
+          }
+        ),
+        note != null && /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: px + 6,
+            y: py + 29,
+            fill: ink,
+            fillOpacity: 0.85,
+            stroke: tileFill,
+            strokeWidth: 2.5,
+            strokeLinejoin: "round",
+            paintOrder: "stroke",
+            fontSize: NOTE_FONT_SIZE,
+            fontWeight: 500,
+            style: { pointerEvents: "none" },
+            children: note
+          }
+        )
+      ]
+    }
+  );
+}
+const TREEMAP_CONFIG = {};
+function RedactedTooltipContent(props) {
+  return /* @__PURE__ */ jsx("div", { "data-private": true, children: /* @__PURE__ */ jsx(ChartTooltipContent, { ...props }) });
+}
+const DEFAULT_NUMBER = new Intl.NumberFormat();
+function Treemap({
+  data,
+  valueFormatter,
+  height = 320,
+  onNodeClick,
+  redactNames = false,
+  nodeNote,
+  maxTiles,
+  colors,
+  style,
+  ...rest
+}) {
+  const tokenHex = useChartTokenHex();
+  const ramp = colors && colors.length > 0 ? colors : tokenHex;
+  const nodes = data.map((d, idx) => ({
+    id: d.id,
+    name: d.name,
+    size: d.value,
+    fill: d.fill ?? ramp[idx % ramp.length]
+  })).filter((n) => Number.isFinite(n.size) && n.size > 0).slice(0, maxTiles ?? void 0);
+  if (nodes.length === 0) return null;
+  const total = nodes.reduce((acc, n) => acc + n.size, 0);
+  const format = (v) => {
+    const share = total > 0 ? v / total : void 0;
+    return valueFormatter ? valueFormatter(v, share) : DEFAULT_NUMBER.format(v);
+  };
+  const Content = redactNames ? RedactedTooltipContent : ChartTooltipContent;
+  return /* @__PURE__ */ jsx(ChartContainer, { ...rest, config: TREEMAP_CONFIG, style: { ...style, height }, children: /* @__PURE__ */ jsx(
+    RechartsTreemap,
+    {
+      data: nodes,
+      dataKey: "size",
+      fill: "var(--chart-1)",
+      isAnimationActive: false,
+      content: /* @__PURE__ */ jsx(TreemapCell, { onNodeClick, redactNames, nodeNote }),
+      children: /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(Content, { hideLabel: true, valueFormatter: format }) })
+    }
+  ) });
+}
+export {
+  Treemap,
+  TreemapCell,
+  fitLabel
+};
+//# sourceMappingURL=treemap.js.map

package/dist/components/treemap.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/treemap.tsx"],"sourcesContent":["// A tile chart (\"treemap\"): one rectangle per node, its AREA the node's share of what\n// is drawn. Lifted out of keksdose's reports, where five cards drew it (spending by\n// group and by category, net worth by account and by type, allocation, payees, food\n// groups) — every domain word is gone and every string it could print is a prop.\n//\n// It uses the kit's own chart shell (`ChartContainer`, `ChartTooltipContent`) and the\n// kit's own ink rule (`textOn`), so it re-skins with the palette like every other\n// chart. The one thing it cannot take from a CSS var is the tile colour: the label ink\n// is MEASURED against the fill, and a `var(--chart-3)` string measures as nothing — see\n// `useChartTokenHex` below for how the concrete hex is found instead.\nimport { useSyncExternalStore } from \"react\";\nimport type { ComponentProps, ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\nimport { Treemap as RechartsTreemap } from \"recharts\";\nimport { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from \"./chart\";\nimport { PALETTE_HEX, textOn } from \"../theme/chart-palette\";\nimport { parseHex } from \"../theme/color\";\n\n/**\n * One tile.\n *\n * `value`, not keksdose's `total`: a treemap's areas are not always money (keksdose\n * already sizes one by transaction COUNT), and `value` is the word every other chart\n * in recharts uses for the number a mark is sized by. Migrating is a rename at the\n * mapping step — `{ id, name, value: row.total }`.\n */\nexport interface TreemapNode {\n  /** Stable key, handed back by {@link TreemapProps.onNodeClick} and\n   *  {@link TreemapProps.nodeNote}. Names can collide; ids must not. */\n  id: string;\n  name: string;\n  /** The tile's area. A node whose value is not a positive finite number is NOT\n   *  drawn — an area cannot be negative, and recharts lays a negative size out as\n   *  nonsense rather than refusing it. Saying so is the caller's job: a group that\n   *  vanishes silently between two views of the same data is a bug report. */\n  value: number;\n  /** Overrides the by-index palette colour for this tile — e.g. to paint every child\n   *  in its parent group's colour, so the groups stay legible in one picture. A\n   *  concrete `#rrggbb` keeps the label ink measured; anything else (a CSS var) gets\n   *  `currentColor` ink, because there is nothing to measure. */\n  fill?: string;\n}\n\n/**\n * Everything a `<div>` takes reaches the chart's root (`ChartContainer`), so a test id\n * or a `data-tour` anchor can find it. `children` is the chart's own.\n */\nexport interface TreemapProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  data: TreemapNode[];\n  /**\n   * Formats a node's value in the tooltip. Handed the node's SHARE of what is drawn\n   * (0–1) as a second argument, because a tile is read for how big it is relative to\n   * the rest, and \"€412.30\" alone makes the reader estimate that ratio off the areas.\n   * The share is `undefined` when the drawn total is not positive.\n   *\n   * Default: the bare number through `Intl.NumberFormat` in the runtime's locale. A\n   * host that has a currency or a locale passes this — the kit knows neither.\n   */\n  valueFormatter?: (value: number, share: number | undefined) => ReactNode;\n  /** Chart height in px. Default 320. */\n  height?: number;\n  /** A tile was activated — by click, or by Enter/Space on a focused tile. Setting\n   *  this makes every tile a focusable `role=\"button\"` named by its node name. */\n  onNodeClick?: (id: string, name: string) => void;\n  /**\n   * The node names are the user's own data (payees, not categories): the tile labels\n   * and the whole tooltip bubble get `data-private`, the same attribute the kit's\n   * `Tooltip redact` and `ChartTooltipContent`'s value cell carry, so the host's one\n   * privacy rule reaches them. Off by default — a category name is a label of the app.\n   */\n  redactNames?: boolean;\n  /**\n   * A second, smaller line under a tile's label — one extra figure per node that the\n   * name cannot carry (a year-on-year `+12%`, `new`). Return `undefined` for a node\n   * with nothing to add. Never tagged `data-private`: a ratio reveals no amount.\n   *\n   * ON THE TILE rather than in the tooltip, for two reasons. The tooltip identifies a\n   * node by name or by raw value, so a per-node note would be keyed on an amount (two\n   * nodes of equal size would swap notes). And a tooltip is a pointer affordance: a\n   * phone never hovers, so a figure that only exists on hover does not exist there.\n   */\n  nodeNote?: (id: string) => string | undefined;\n  /**\n   * Draw at most this many tiles (the first N drawable nodes, in the order given —\n   * sort first). Unbounded by default. A tile under ~44x20px has no room for a label,\n   * and a map made of unlabelled rectangles answers nothing; around 24 is where the\n   * smallest tile of a skewed series reaches that floor on a phone-width card. The\n   * caller owns the \"N more not shown\" line, since it knows how many it passed.\n   */\n  maxTiles?: number;\n  /**\n   * The categorical ramp tiles take by index, as concrete hex. Default: the page's\n   * live `--chart-1…9` tokens (see `useChartTokenHex`). Pass one when the host\n   * already holds the active palette — e.g. `createPaletteStore`'s `useChartHex()` —\n   * so a caller colouring a legend beside the map is guaranteed the same list.\n   */\n  colors?: readonly string[];\n}\n\n// ── The categorical ramp, as concrete hex ──────────────────────────────────\n//\n// The label ink is measured against the tile's fill, so the fill has to be a colour\n// and not a reference to one. keksdose read it from its palette STORE, which is an\n// app object the kit cannot import. What the kit does own is the token layer: whether\n// a palette arrives through `applyTokenSet` (inline properties on <html>) or through\n// tokens.css (`:root` / `.dark`), the resolved `--chart-N` on <html> is the colour\n// every other chart on the page is being painted with. So that is what is read, and\n// re-read whenever <html>'s class or style changes — which is exactly when a theme\n// toggle or a palette switch lands.\n\nconst CHART_TOKENS = 9;\n\n/** The resolved ramp, joined into ONE string so `useSyncExternalStore` compares a\n *  primitive: a fresh array per read would never be `Object.is`-equal to the last and\n *  would re-render forever. */\nfunction readChartTokens(): string {\n  const root = document.documentElement;\n  const fallback = root.classList.contains(\"dark\") ? PALETTE_HEX.dark : PALETTE_HEX.light;\n  const style = getComputedStyle(root);\n  return Array.from({ length: CHART_TOKENS }, (_, i) => {\n    const v = style.getPropertyValue(`--chart-${i + 1}`).trim();\n    // An unresolved token (a host that never loaded tokens.css, a test DOM) falls\n    // back to the built-in ramp for the current theme rather than to no colour.\n    return parseHex(v) ? v : fallback[i];\n  }).join(\",\");\n}\n\nfunction subscribeChartTokens(onChange: () => void): () => void {\n  const observer = new MutationObserver(onChange);\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"style\", \"data-theme\"],\n  });\n  return () => observer.disconnect();\n}\n\nconst SERVER_TOKENS = PALETTE_HEX.light.join(\",\");\n\nfunction useChartTokenHex(): string[] {\n  const joined = useSyncExternalStore(subscribeChartTokens, readChartTokens, () => SERVER_TOKENS);\n  return joined.split(\",\");\n}\n\n// ── Tile ──────────────────────────────────────────────────────────────────\n\nconst LABEL_FONT_SIZE = 12;\n/** The optional second line, a step down from the name so the tile reads name-first. */\nconst NOTE_FONT_SIZE = 11;\n\n/**\n * Fit a label to its tile: the text itself when it fits, an ellipsised head when it\n * does not, `null` when not even three characters would. Without this a long name ran\n * on across its neighbours and collided with THEIR labels. 0.58em is the average\n * advance of a UI sans at this weight; it only needs to be close, since the tile keeps\n * 6px of padding either side. The full name stays in the tooltip.\n */\nexport function fitLabel(name: string, boxWidth: number, fontSize: number): string | null {\n  const max = Math.floor((boxWidth - 12) / (fontSize * 0.58));\n  if (max < 3) return null;\n  return name.length <= max ? name : `${name.slice(0, max - 1).trimEnd()}…`;\n}\n\n/** What recharts hands a `content` element for each node, plus the three options the\n *  chart forwards. Everything optional because recharts clones the element it was\n *  given and fills the geometry in — the element as written carries only the options. */\nexport interface TreemapCellProps {\n  depth?: number;\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  name?: string;\n  fill?: string;\n  id?: string;\n  onNodeClick?: (id: string, name: string) => void;\n  redactNames?: boolean;\n  nodeNote?: (id: string) => string | undefined;\n}\n\n/**\n * One tile. Exported so a caller drawing its own recharts `<Treemap>` gets the same\n * label rules.\n *\n * recharts' default cell inherits the chart-level `stroke`, an SVG presentation\n * attribute that lands on the `<svg>` root and cascades into the label — so the glyphs\n * were painted with a 1px outline ON TOP of themselves, which reads as blur. This cell\n * draws its own label with a halo in the TILE colour painted BEHIND the fill\n * (`paint-order: stroke`), which defeats any inherited stroke and keeps the text solid\n * where it overlaps a lighter or darker part of its own tile.\n */\nexport function TreemapCell({\n  depth,\n  x = 0,\n  y = 0,\n  width = 0,\n  height = 0,\n  name,\n  fill,\n  id,\n  onNodeClick,\n  redactNames,\n  nodeNote,\n}: TreemapCellProps) {\n  // Depth 0 is recharts' synthetic root, which spans the whole chart.\n  if (!depth) return null;\n  // Whole pixels: a rect on a half pixel renders its edge across two half-lit\n  // columns, and the text baseline inherits that blur.\n  const px = Math.round(x);\n  const py = Math.round(y);\n  const pw = Math.round(width);\n  const ph = Math.round(height);\n  const tileFill = fill ?? \"var(--chart-1)\";\n  const ink = textOn(tileFill);\n  // Below ~44x20 there is no room for a readable word, so no label at all rather than\n  // a one-letter stub bleeding over the tile edge.\n  const label = pw >= 44 && ph >= 20 ? fitLabel(name ?? \"\", pw, LABEL_FONT_SIZE) : null;\n  // Only under a label that is itself drawn — a stray \"+12%\" on an unnamed rectangle\n  // names nothing — and only where a second baseline fits: the note's baseline sits\n  // 29px down and an 11px glyph hangs ~2px below it, so 36 leaves the same ~5px under\n  // the note that the label keeps under itself at the 20px floor.\n  const rawNote = id != null && nodeNote ? nodeNote(id) : undefined;\n  const note =\n    label != null && rawNote != null && ph >= 36 ? fitLabel(rawNote, pw, NOTE_FONT_SIZE) : null;\n  const activate = id != null && onNodeClick ? () => onNodeClick(id, name ?? \"\") : undefined;\n  const onKeyDown = activate\n    ? (e: KeyboardEvent<SVGGElement>) => {\n        if (e.key !== \"Enter\" && e.key !== \" \") return;\n        e.preventDefault();\n        activate();\n      }\n    : undefined;\n  return (\n    <g\n      onClick={activate}\n      onKeyDown={onKeyDown}\n      // A clickable tile is a button to a keyboard and a screen reader too; the\n      // drilldown it opens was mouse-only in the app this came from. Named by the node\n      // name, which is also why the group carries `data-private` under `redactNames`.\n      role={activate ? \"button\" : undefined}\n      tabIndex={activate ? 0 : undefined}\n      aria-label={activate ? name : undefined}\n      data-private={activate && redactNames ? \"\" : undefined}\n      cursor={activate ? \"pointer\" : undefined}\n      // CSS beats a presentation attribute, so this recolours the rect's own stroke\n      // for as long as the tile has keyboard focus.\n      className={activate ? \"outline-none [&:focus-visible>rect]:stroke-[var(--brand)]\" : undefined}\n    >\n      {/* The 2px gutter is the card showing through, not a white grid — on a dark\n          surface white lines glare harder than the tiles. */}\n      <rect\n        x={px}\n        y={py}\n        width={pw}\n        height={ph}\n        fill={tileFill}\n        stroke=\"var(--bg-surface)\"\n        strokeWidth={2}\n        rx={3}\n      />\n      {label != null && (\n        <text\n          // A plain attribute, so the host's `[data-private]` rule reaches an SVG\n          // <text> exactly as it reaches a table cell.\n          data-private={redactNames ? \"\" : undefined}\n          x={px + 6}\n          y={py + 15}\n          fill={ink}\n          stroke={tileFill}\n          strokeWidth={2.5}\n          strokeLinejoin=\"round\"\n          paintOrder=\"stroke\"\n          fontSize={LABEL_FONT_SIZE}\n          fontWeight={600}\n          style={{ pointerEvents: \"none\" }}\n        >\n          {label}\n        </text>\n      )}\n      {note != null && (\n        <text\n          x={px + 6}\n          y={py + 29}\n          fill={ink}\n          fillOpacity={0.85}\n          stroke={tileFill}\n          strokeWidth={2.5}\n          strokeLinejoin=\"round\"\n          paintOrder=\"stroke\"\n          fontSize={NOTE_FONT_SIZE}\n          fontWeight={500}\n          style={{ pointerEvents: \"none\" }}\n        >\n          {note}\n        </text>\n      )}\n    </g>\n  );\n}\n\n// ── Chart ─────────────────────────────────────────────────────────────────\n\n// Nodes carry their own `fill`, and `ChartTooltipContent` falls back to it for the\n// swatch, so no series config is needed.\nconst TREEMAP_CONFIG: ChartConfig = {};\n\n/**\n * The shared tooltip with the whole bubble tagged `data-private`, for names that are\n * the user's own data.\n *\n * The bubble, not just the name: `ChartTooltipContent` prints the name either from\n * `item.name` or from a config `label`, and only the config route could be tagged — but\n * a config entry keyed by a payee name is not a CSS identifier, and `ChartStyle` would\n * (rightly) refuse it. The bubble holds the name and the value, and the value cell is\n * already `data-private`, so tagging the wrapper hides nothing extra.\n *\n * recharts CLONES the `content` element to inject `active`/`payload`, so this has to BE\n * that element — a `<div>` wrapped around `<ChartTooltipContent />` in the JSX would\n * take those props itself and hand the tooltip nothing.\n */\nfunction RedactedTooltipContent(props: ComponentProps<typeof ChartTooltipContent>) {\n  return (\n    <div data-private>\n      <ChartTooltipContent {...props} />\n    </div>\n  );\n}\n\nconst DEFAULT_NUMBER = new Intl.NumberFormat();\n\n/**\n * Tile chart: one rectangle per {@link TreemapNode}, sized by `value`, coloured by\n * index from the chart ramp (or by the node's own `fill`), labelled in whichever of the\n * kit's two inks measures better against it. Hover shows the name and the formatted\n * value; `onNodeClick` turns the tiles into buttons.\n *\n * Renders nothing when no node has a positive value — an empty box is a hole in the\n * card, and the caller's own sentence is the better answer there.\n *\n * Needs `recharts`, like everything behind `@eifi1/ui-kit/chart`.\n */\nexport function Treemap({\n  data,\n  valueFormatter,\n  height = 320,\n  onNodeClick,\n  redactNames = false,\n  nodeNote,\n  maxTiles,\n  colors,\n  style,\n  ...rest\n}: TreemapProps) {\n  const tokenHex = useChartTokenHex();\n  const ramp = colors && colors.length > 0 ? colors : tokenHex;\n  // Coloured by index into `data` AS GIVEN, before anything is dropped: a caller\n  // painting a legend or a second map from the same list must land on the same hue\n  // for the same row, and filtering first would shift every colour after a gap.\n  const nodes = data\n    .map((d, idx) => ({\n      id: d.id,\n      name: d.name,\n      size: d.value,\n      fill: d.fill ?? ramp[idx % ramp.length],\n    }))\n    .filter((n) => Number.isFinite(n.size) && n.size > 0)\n    .slice(0, maxTiles ?? undefined);\n  if (nodes.length === 0) return null;\n\n  // The share is of what is DRAWN, so it always reads as \"of this picture\".\n  const total = nodes.reduce((acc, n) => acc + n.size, 0);\n  const format = (v: number): ReactNode => {\n    const share = total > 0 ? v / total : undefined;\n    return valueFormatter ? valueFormatter(v, share) : DEFAULT_NUMBER.format(v);\n  };\n  const Content = redactNames ? RedactedTooltipContent : ChartTooltipContent;\n  return (\n    <ChartContainer {...rest} config={TREEMAP_CONFIG} style={{ ...style, height }}>\n      {/* No chart-level `stroke`: recharts spreads it onto the <svg> root, from where\n          it inherits into every label (see TreemapCell). Each cell strokes its own rect. */}\n      <RechartsTreemap\n        data={nodes}\n        dataKey=\"size\"\n        fill=\"var(--chart-1)\"\n        isAnimationActive={false}\n        content={<TreemapCell onNodeClick={onNodeClick} redactNames={redactNames} nodeNote={nodeNote} />}\n      >\n        <ChartTooltip content={<Content hideLabel valueFormatter={format} />} />\n      </RechartsTreemap>\n    </ChartContainer>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, ComponentPropsWithoutRef, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { SelectHTMLAttributes, ReactNode, InputHTMLAttributes, ButtonHTMLAttributes, ComponentPropsWithoutRef, TextareaHTMLAttributes } from 'react';
 
 type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "brand";
 /**
@@ -10,23 +10,27 @@ type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "brand";
  * `<Button>`, so the two stay in lockstep.
  */
 declare function buttonClasses(variant?: ButtonVariant, className?: string): string;
-declare function Button({ variant, stretch, className, ...rest }: ButtonHTMLAttributes<HTMLButtonElement> & {
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
+    /** In a flex row next to a taller labelled field, fill the field's height so the
+     *  two line up. No effect outside a flex row. */
     stretch?: boolean;
-}): react.JSX.Element;
-declare const IconButton: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+}
+declare function Button({ variant, stretch, className, ...rest }: ButtonProps): react.JSX.Element;
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
     /** Box size: md = 36px (matches the top bar), sm = 32px. The icon stays 20px. */
     size?: "sm" | "md";
-} & react.RefAttributes<HTMLButtonElement>>;
+}
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
 declare const FIELD_BASE: string;
 /** Cancels FIELD_BASE's read-only treatment for a field that is `readOnly` for a
  *  reason other than "you may not edit this". Attribute-scoped for the same reason
  *  FIELD_BASE is — the two have to cancel on the identical selector or twMerge
  *  cannot make the later one win. */
-declare const FIELD_WRITABLE_LOOK = "[&[readonly]]:bg-white [&[readonly]]:text-slate-900 dark:[&[readonly]]:bg-slate-900 dark:[&[readonly]]:text-slate-100";
+declare const FIELD_WRITABLE_LOOK = "[&[readonly]]:bg-[var(--bg-surface)] [&[readonly]]:text-[var(--text-primary)]";
 declare const FIELD_FLOATING_PAD = "pt-4 pb-1";
-declare const FIELD_INVALID = "border-rose-400 ring-1 ring-rose-400 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/80 dark:ring-rose-500/80 dark:focus:border-rose-400";
+declare const FIELD_INVALID = "border-[var(--danger-border)] ring-1 ring-[var(--danger-border)] focus:border-[var(--danger)] focus:ring-[var(--danger)]";
 declare const FLOATING_INPUT_CLASS: string;
 /** The phone breakpoint the display treatment below keys off — the same one the
  *  numpad sheet uses, kept in one place so the two can't drift apart. */
@@ -54,8 +58,12 @@ declare const PHONE_QUERY = "(max-width: 767px)";
  * Size and weight are NOT here — an amount wants display type, a subject line
  * wants a heading — so each control adds its own on top.
  */
-declare const FIELD_DISPLAY = "block w-full border-x-0 border-t-0 border-b border-[var(--border)] bg-transparent px-0 pt-0 pb-1 text-[var(--text-primary)] shadow-none placeholder:text-slate-400 focus:border-[var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60 dark:placeholder:text-slate-500";
+declare const FIELD_DISPLAY = "block w-full border-x-0 border-t-0 border-b border-[var(--border)] bg-transparent px-0 pt-0 pb-1 text-[var(--text-primary)] shadow-none placeholder:text-[var(--text-placeholder)] focus:border-[var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60";
 declare const FIELD_TRIGGER: string;
+/** An alias rather than an interface: the chevron adds nothing of its own to an
+ *  `<svg>`'s props, and an interface declaring no members is the same type wearing a
+ *  name that suggests otherwise. */
+type FieldChevronProps = Omit<ComponentPropsWithoutRef<"svg">, "children">;
 /** The dropdown chevron, shared by the native {@link Select} and every custom
  * {@link FIELD_TRIGGER} control.
  *
@@ -64,9 +72,7 @@ declare const FIELD_TRIGGER: string;
  * pushes that box's midline down — so a labelled currency/multi-select chevron
  * sat visibly lower than the native select's right beside it (feedback #400).
  * Pair it with `pr-9` on the trigger so the value can't run underneath. */
-declare function FieldChevron({ className }: {
-    className?: string;
-}): react.JSX.Element;
+declare function FieldChevron({ className, ...rest }: FieldChevronProps): react.JSX.Element;
 declare const FLOATING_LABEL_CLASS: string;
 declare const FLOATING_LABEL_STATIC: string;
 /**
@@ -77,8 +83,7 @@ declare const FLOATING_LABEL_STATIC: string;
  * dropdown controls that need a ref + menu keep their own wrapper but the same label
  * (via {@link FieldLabel}) and trigger ({@link FIELD_TRIGGER}) styles.
  */
-declare function FloatingField({ className, htmlFor, label, staticLabel, srOnlyLabel, hint, children, }: {
-    className?: string;
+interface FloatingFieldProps extends ComponentPropsWithoutRef<"div"> {
     htmlFor?: string;
     label?: ReactNode;
     staticLabel?: boolean;
@@ -99,7 +104,8 @@ declare function FloatingField({ className, htmlFor, label, staticLabel, srOnlyL
      *  the label that gives way (steering-design feedback #48). */
     hint?: ReactNode;
     children: ReactNode;
-}): react.JSX.Element;
+}
+declare function FloatingField({ className, htmlFor, label, staticLabel, srOnlyLabel, hint, children, ...rest }: FloatingFieldProps): react.JSX.Element;
 /**
  * The "?" that explains a field, on the field's own label line (dev#468).
  *
@@ -116,20 +122,34 @@ declare function FloatingField({ className, htmlFor, label, staticLabel, srOnlyL
  * too. The text is also its accessible name, so a screen reader gets it without
  * the bubble ever opening.
  */
-declare function FieldHint({ label, side }: {
+interface FieldHintProps extends Omit<ComponentPropsWithoutRef<"button">, "children"> {
+    /** The explanation. It is both the tooltip's text and, by default, the button's
+     *  accessible name, so a screen reader gets it without the bubble ever opening. */
     label: string;
     side?: "left" | "right" | "top" | "bottom";
-}): react.JSX.Element;
+}
+declare function FieldHint({ label, side, className, "aria-label": ariaLabel, ...rest }: FieldHintProps): react.JSX.Element;
 /**
  * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a
  * button not a labelable input). Same placement as {@link FloatingField}'s static label,
  * so every labelled field lines up. Render inside a `relative` wrapper, before the trigger.
  */
-declare function FieldLabel({ children, className }: {
+interface FieldLabelProps extends ComponentPropsWithoutRef<"span"> {
     children: ReactNode;
-    className?: string;
-}): react.JSX.Element;
-declare const Input: react.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+}
+declare function FieldLabel({ children, className, ...rest }: FieldLabelProps): react.JSX.Element;
+/** The two names the password reveal toggle can wear. See {@link Input}. */
+interface PasswordRevealLabels {
+    /** While the value is hidden — activating the toggle will show it. */
+    show: string;
+    /** While the value is shown. */
+    hide: string;
+}
+declare const DEFAULT_PASSWORD_REVEAL_LABELS: PasswordRevealLabels;
+/** Caller's labels over the English defaults — the same shape as
+ *  `resolveDataTableLabels`, so a consumer translates every kit string one way. */
+declare function resolvePasswordRevealLabels(partial?: Partial<PasswordRevealLabels>): PasswordRevealLabels;
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: ReactNode;
     /** Classes for the `<input>` itself, as distinct from `className`, which
      *  styles the field WRAPPER once a `label` turns this into a FloatingField.
@@ -153,20 +173,37 @@ declare const Input: react.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInp
      *  and painted the field exactly as if it were fine. Setting the prop sets the
      *  attribute too, so the two can no longer be spelled separately. */
     invalid?: boolean;
-} & react.RefAttributes<HTMLInputElement>>;
-declare const Select: react.ForwardRefExoticComponent<SelectHTMLAttributes<HTMLSelectElement> & {
+    /** What is wrong with the value, in the caller's own words ("That IBAN has 21
+     *  digits"). Rendered under the field, pointed at by the control's
+     *  `aria-describedby` — MERGED with any the caller already passed — and implies
+     *  `invalid`, so the field paints as well as announces. `invalid` alone still
+     *  covers the case where the message lives elsewhere. See {@link useFieldError}. */
+    error?: ReactNode;
+    /** Names for the password reveal toggle, English by default — it is the one
+     *  string this component renders on its own behalf, and a German form was
+     *  reading it out in English. See {@link PasswordRevealLabels}. */
+    passwordLabels?: Partial<PasswordRevealLabels>;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
     label?: ReactNode;
+    /** See {@link Input}'s `invalid`. */
     invalid?: boolean;
+    /** See {@link Input}'s `error`. */
+    error?: ReactNode;
     /** A {@link FieldHint} for the label line — see {@link FloatingField}. */
     hint?: ReactNode;
-} & react.RefAttributes<HTMLSelectElement>>;
-declare const Textarea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
+}
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     label?: ReactNode;
     /** See {@link Input}'s `invalid`. */
     invalid?: boolean;
-} & react.RefAttributes<HTMLTextAreaElement>>;
-declare function Card({ className, children, flush, }: {
-    className?: string;
+    /** See {@link Input}'s `error`. */
+    error?: ReactNode;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+interface CardProps extends ComponentPropsWithoutRef<"div"> {
     children: ReactNode;
     /**
      * When true, drop the card chrome (border, rounded corners, shadow) on mobile so the
@@ -174,22 +211,64 @@ declare function Card({ className, children, flush, }: {
      * content cards on data pages; leave off for centered dialog/panel cards.
      */
     flush?: boolean;
-}): react.JSX.Element;
-declare function CardHeader({ className, ...props }: ComponentPropsWithoutRef<"div">): react.JSX.Element;
-declare function CardTitle({ className, ...props }: ComponentPropsWithoutRef<"div">): react.JSX.Element;
-declare function CardDescription({ className, ...props }: ComponentPropsWithoutRef<"div">): react.JSX.Element;
-declare function CardAction({ className, ...props }: ComponentPropsWithoutRef<"div">): react.JSX.Element;
-declare function CardContent({ className, ...props }: ComponentPropsWithoutRef<"div">): react.JSX.Element;
-declare function CardFooter({ className, ...props }: ComponentPropsWithoutRef<"div">): react.JSX.Element;
-declare function Spinner({ className }: {
-    className?: string;
-}): react.JSX.Element;
-declare function EmptyState({ title, hint, className, }: {
+}
+declare function Card({ className, children, flush, ...rest }: CardProps): react.JSX.Element;
+/** The sub-parts add nothing to a `<div>`'s props — they are the SAME element with a
+ *  `data-slot` and a padding rhythm — so each name is an alias rather than an empty
+ *  interface pretending to be more. They exist so a consumer's own wrapper can say
+ *  `CardHeaderProps` instead of `ComponentProps<typeof CardHeader>`. */
+type CardHeaderProps = ComponentPropsWithoutRef<"div">;
+type CardTitleProps = ComponentPropsWithoutRef<"div">;
+type CardDescriptionProps = ComponentPropsWithoutRef<"div">;
+type CardActionProps = ComponentPropsWithoutRef<"div">;
+type CardContentProps = ComponentPropsWithoutRef<"div">;
+type CardFooterProps = ComponentPropsWithoutRef<"div">;
+declare function CardHeader({ className, ...props }: CardHeaderProps): react.JSX.Element;
+declare function CardTitle({ className, ...props }: CardTitleProps): react.JSX.Element;
+declare function CardDescription({ className, ...props }: CardDescriptionProps): react.JSX.Element;
+declare function CardAction({ className, ...props }: CardActionProps): react.JSX.Element;
+declare function CardContent({ className, ...props }: CardContentProps): react.JSX.Element;
+declare function CardFooter({ className, ...props }: CardFooterProps): react.JSX.Element;
+/** A `<span>`'s props plus the words a reader hears — see {@link CardHeaderProps}.
+ *  The ring is drawn with a border, so there is nothing inside it to put children in. */
+interface SpinnerProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
+    /** What the spinner means, for a screen reader. Default: `common.loading` from the
+     *  {@link UiKitProvider}, else "Loading…". */
+    label?: string;
+}
+/**
+ * A spinning ring that also SAYS it is loading.
+ *
+ * It used to be a bordered span and nothing else, so a reader met no element at all
+ * where a sighted user saw the page working — or, beside an emptied list, met the
+ * empty list and concluded there was nothing there. `role="status"` makes it a polite
+ * live region, and the text inside is what that region announces. Text rather than
+ * `aria-label`: a live region's announcement is its CONTENT, and several readers
+ * ignore a name on one.
+ *
+ * `relative` so the `sr-only` text has a local containing block (see
+ * sr-only-containment.test). The role goes BEFORE the spread: a caller showing the
+ * spinner next to text that already says "Loading" can pass `aria-hidden` or its own
+ * `role` and have it win.
+ */
+declare function Spinner({ className, label, ...rest }: SpinnerProps): react.JSX.Element;
+interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    /** The box renders `title` and `hint` in its own two-line rhythm, which is what makes
+     *  every empty state in three apps look like the same thing — so there is no
+     *  `children` slot to put arbitrary content in. */
     title: string;
     hint?: string;
-    className?: string;
-}): react.JSX.Element;
-interface TabsProps<T extends string> {
+}
+declare function EmptyState({ title, hint, className, ...rest }: EmptyStateProps): react.JSX.Element;
+/**
+ * The strip's own props sit on a `<div>`: the tablist IS the root element, so anything
+ * a caller hangs on it — a `data-tour` anchor for the kit's guided tour, a test id, an
+ * `aria-describedby` — lands there. `onChange` is omitted from the div's props because
+ * this component's `onChange` hands over the chosen TAB ID, not a DOM event, and
+ * `children` because the strip renders `tabs` — a caller who wants a PANEL wires it up
+ * through `panelId`, which is the whole point of that prop.
+ */
+interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children"> {
     /** `label` is a ReactNode so tabs can pair an icon with text; `badge` is an
      *  optional trailing node (e.g. a count pill). `href` marks a tab that IS a route:
      *  it renders as an anchor so it can be middle-/⌘-clicked into a new tab (Keksdose
@@ -229,11 +308,45 @@ interface TabsProps<T extends string> {
      *  already fit a phone row, and turning those into chips would be an unrequested
      *  redesign of three other pages. */
     wrap?: boolean;
-    /** Accessible name for the `role="tablist"` container. Every tab carries its own
-     *  text, so this names the GROUP, not the tabs; leave it unset where a visible
-     *  heading immediately above already does that job. */
+    /**
+     * Accessible name for the `role="tablist"` container. Every tab carries its own
+     * text, so this names the GROUP, not the tabs; leave it unset where a visible
+     * heading immediately above already does that job.
+     *
+     * @deprecated Pass `aria-label` instead. This kit had three spellings for one idea
+     * — `ariaLabel`, `aria-label` and this `label` — and settled on the DOM one, which
+     * is also the one that arrives for free now that the strip spreads its rest props.
+     * `label` still works and is unchanged; it names the strip only when `aria-label`
+     * is absent.
+     */
     label?: string;
+    /**
+     * `id` of the element the caller renders the open tab's content into — the missing
+     * half of `role="tab"`. A tab that controls nothing is a tab in name only: a screen
+     * reader announces "tab, 2 of 5" and then has no way to take the user to what it
+     * opened, and no way back.
+     *
+     * **This component does not render the panel, on purpose.** `Tabs` is the STRIP; the
+     * content lives wherever the caller put it — three Keksdose pages render it in a
+     * sibling `<Card>`, one renders it through a router outlet, and a tab can BE a route
+     * (`href`), in which case the panel is a whole page this component never sees.
+     * Wrapping `children` here would mean either moving that content into the strip's
+     * subtree — a layout change on every page that uses tabs — or shipping a wrapper
+     * that only some callers could use. So the two halves are joined by an id instead.
+     *
+     * Wire the other end yourself:
+     *
+     * ```tsx
+     * <Tabs tabs={tabs} active={active} onChange={setActive} panelId="report-panel" />
+     * <div id="report-panel" role="tabpanel" aria-labelledby="report-panel-tab" tabIndex={-1}>
+     * ```
+     *
+     * `aria-controls` goes on the OPEN tab only, and `${panelId}-tab` is its id — the
+     * closed tabs' panels are not in the document, and a dangling `aria-controls`
+     * describes a tab as opening something that is not there.
+     */
+    panelId?: string;
 }
-declare function Tabs<T extends string>({ tabs, active, onChange, className, wrap, label }: TabsProps<T>): react.JSX.Element;
+declare function Tabs<T extends string>({ tabs, active, onChange, className, wrap, label, panelId, "aria-label": ariaLabel, ...rest }: TabsProps<T>): react.JSX.Element;
 
-export { Button, type ButtonVariant, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, EmptyState, FIELD_BASE, FIELD_DISPLAY, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, FLOATING_LABEL_STATIC, FieldChevron, FieldHint, FieldLabel, FloatingField, IconButton, Input, PHONE_QUERY, Select, Spinner, Tabs, type TabsProps, Textarea, buttonClasses };
+export { Button, type ButtonProps, type ButtonVariant, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, DEFAULT_PASSWORD_REVEAL_LABELS, EmptyState, type EmptyStateProps, FIELD_BASE, FIELD_DISPLAY, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, FLOATING_LABEL_STATIC, FieldChevron, type FieldChevronProps, FieldHint, type FieldHintProps, FieldLabel, type FieldLabelProps, FloatingField, type FloatingFieldProps, IconButton, type IconButtonProps, Input, type InputProps, PHONE_QUERY, type PasswordRevealLabels, Select, type SelectProps, Spinner, type SpinnerProps, Tabs, type TabsProps, Textarea, type TextareaProps, buttonClasses, resolvePasswordRevealLabels };