@eifi1/ui-kit 0.15.3 → 0.15.5

package/dist/components/chart.d.ts

@@ -85,8 +85,23 @@ interface ChartTooltipContentProps {
     boundaryRef?: RefObject<HTMLElement | null>;
     /** Injected by recharts: keep series drawn with `hide` in the tooltip. */
     includeHidden?: boolean;
+    /**
+     * `"floating"` (the default): the box recharts moves with the cursor. `"readout"`: the
+     * same heading and values as a flat row for a FIXED place outside the plot — a
+     * `SeriesChart` whose `tooltip.placement` is `"above"`/`"below"` portals it there, so
+     * a finger on a phone no longer sits on the box it is trying to read (keksdose #359).
+     * No border, shadow, width cap or viewport nudge; the values flow in a grid whose
+     * column count depends on the row's width alone, so the row is the same height
+     * whatever is being pointed at — and, idle, it shows {@link idleKeys} with "—".
+     */
+    variant?: "floating" | "readout";
+    /** Readout only: the series to list while nothing is active, so the row keeps the
+     *  height it will have once something is. */
+    idleKeys?: readonly string[];
+    /** Readout only: the heading while nothing is active. Default "—". */
+    idleLabel?: ReactNode;
 }
-declare function ChartTooltipContent({ active, payload, label, indicator, hideLabel, labelFormatter, valueFormatter, formatValue, coordinate, boundaryRef, includeHidden, }: ChartTooltipContentProps): react.JSX.Element | null;
+declare function ChartTooltipContent({ active, payload, label, indicator, hideLabel, labelFormatter, valueFormatter, formatValue, coordinate, boundaryRef, includeHidden, variant, idleKeys, idleLabel, }: ChartTooltipContentProps): react.JSX.Element | null;
 interface LegendPayloadItem {
     value?: string;
     dataKey?: string | number;

package/dist/components/chart.js

@@ -94,12 +94,17 @@ function ChartTooltipContent({
   formatValue,
   coordinate,
   boundaryRef,
-  includeHidden = false
+  includeHidden = false,
+  variant = "floating",
+  idleKeys,
+  idleLabel
 }) {
   const config = useChart();
   const tipRef = useRef(null);
+  const readout = variant === "readout";
   const items = includeHidden ? payload : payload?.filter((item) => item.hide !== true);
-  const visible = Boolean(active && items?.length);
+  const shown = Boolean(active && items?.length);
+  const visible = shown && !readout;
   const [flip, setFlip] = useState(false);
   const x = coordinate?.x;
   useLayoutEffect(() => {
@@ -144,6 +149,63 @@ function ChartTooltipContent({
       setNudge(next);
     }
   }, [visible, x, payload, label, flip, settled]);
+  const tooltipRow = (item, i, inRow) => {
+    const dk = item.dataKey != null ? String(item.dataKey) : void 0;
+    const nm = item.name != null ? String(item.name) : void 0;
+    const cfgKey = dk && config[dk] ? dk : nm && config[nm] ? nm : dk ?? nm ?? String(i);
+    const series = config[cfgKey];
+    const fill = typeof item.payload?.fill === "string" ? item.payload.fill : void 0;
+    const color = paintedColor(cfgKey, series) ?? fill ?? item.color ?? "#64748b";
+    const name = series?.label ?? nm ?? cfgKey;
+    const raw = tooltipValue(item.value);
+    let text;
+    if (inRow && !shown) text = NO_VALUE;
+    else if (formatValue) text = formatValue(raw);
+    else if (raw == null) text = NO_VALUE;
+    else text = valueFormatter ? valueFormatter(raw) : raw;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("flex items-center", inRow ? "min-w-0 max-w-[12rem] gap-1.5" : "gap-2"),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "shrink-0 rounded-[2px]",
+                indicator === "dot" ? "h-2.5 w-2.5 rounded-full" : "h-2.5 w-1"
+              ),
+              style: { backgroundColor: color }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn("min-w-0 text-[var(--text-muted)]", inRow ? "truncate" : "break-words"),
+              children: name
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-private": true,
+              dir: "auto",
+              className: "ms-auto shrink-0 whitespace-nowrap font-mono font-medium tabular-nums text-[var(--text-primary)]",
+              children: text
+            }
+          )
+        ]
+      },
+      `${cfgKey}-${i}`
+    );
+  };
+  if (readout) {
+    const rows = shown ? items : (idleKeys ?? Object.keys(config)).map((key) => ({ dataKey: key }));
+    return /* @__PURE__ */ jsxs("div", { className: "text-xs", "data-chart-readout": shown ? "active" : "idle", children: [
+      /* @__PURE__ */ jsx("div", { "data-readout-heading": true, className: "truncate font-medium leading-6 text-[var(--text-primary)]", children: shown && !hideLabel && label != null ? labelFormatter ? labelFormatter(label) : label : idleLabel ?? NO_VALUE }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-x-4 gap-y-1", children: rows.map((item, i) => tooltipRow(item, i, true)) })
+    ] });
+  }
   if (!visible || !items) return null;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -158,41 +220,7 @@ function ChartTooltipContent({
       className: "min-w-[9rem] max-w-[min(20rem,calc(100vw-2rem))] rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] px-2.5 py-2 text-xs shadow-xl",
       children: [
         !hideLabel && label != null && /* @__PURE__ */ jsx("div", { className: "mb-1.5 font-medium text-[var(--text-primary)]", children: labelFormatter ? labelFormatter(label) : label }),
-        /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: items.map((item, i) => {
-          const dk = item.dataKey != null ? String(item.dataKey) : void 0;
-          const nm = item.name != null ? String(item.name) : void 0;
-          const cfgKey = dk && config[dk] ? dk : nm && config[nm] ? nm : dk ?? nm ?? String(i);
-          const series = config[cfgKey];
-          const fill = typeof item.payload?.fill === "string" ? item.payload.fill : void 0;
-          const color = paintedColor(cfgKey, series) ?? fill ?? item.color ?? "#64748b";
-          const name = series?.label ?? nm ?? cfgKey;
-          const raw = tooltipValue(item.value);
-          let shown;
-          if (formatValue) shown = formatValue(raw);
-          else if (raw == null) shown = NO_VALUE;
-          else shown = valueFormatter ? valueFormatter(raw) : raw;
-          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: cn(
-                  "shrink-0 rounded-[2px]",
-                  indicator === "dot" ? "h-2.5 w-2.5 rounded-full" : "h-2.5 w-1"
-                ),
-                style: { backgroundColor: color }
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words text-[var(--text-muted)]", children: name }),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                "data-private": true,
-                className: "ms-auto shrink-0 whitespace-nowrap font-mono font-medium tabular-nums text-[var(--text-primary)]",
-                children: shown
-              }
-            )
-          ] }, `${cfgKey}-${i}`);
-        }) })
+        /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: items.map((item, i) => tooltipRow(item, i, false)) })
       ]
     }
   );

package/dist/components/chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/chart.tsx"],"sourcesContent":["// shadcn/ui chart kit — vendored (MIT) and adapted for this app:\n//  - Recharts 3 instead of 2\n//  - the original keys its styling off shadcn theme tokens (--muted-foreground,\n//    --border, bg-background …). This app has no shadcn token layer, so those\n//    are mapped onto this kit's own tokens (--text-muted, --border, --bg-surface\n//    …), which follow the active palette preset and flip with the theme by\n//    themselves — hence no `dark:` variants anywhere below.\n// The value on show is the *structure*: config-driven colors injected as CSS\n// vars, muted axis/grid styling, and a polished tooltip/legend — the things\n// that make shadcn charts read as \"designed\" rather than \"default Recharts\".\nimport { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentProps, CSSProperties, ReactNode, RefObject } from \"react\";\nimport {\n  Legend as RechartsLegend,\n  ResponsiveContainer,\n  Tooltip as RechartsTooltip,\n} from \"recharts\";\nimport { cn } from \"../lib/cn\";\nimport { isRtl } from \"../lib/direction\";\n\nexport interface ChartSeriesConfig {\n  label: ReactNode;\n  color: string;\n}\n\nexport type ChartConfig = Record<string, ChartSeriesConfig>;\n\nconst ChartContext = createContext<ChartConfig | null>(null);\n\nexport function useChart(): ChartConfig {\n  const ctx = useContext(ChartContext);\n  if (!ctx) throw new Error(\"useChart must be used within a <ChartContainer />\");\n  return ctx;\n}\n\ninterface ChartContainerProps extends ComponentProps<\"div\"> {\n  config: ChartConfig;\n  children: ComponentProps<typeof ResponsiveContainer>[\"children\"];\n}\n\n/**\n * The shell every chart in the kit is drawn inside.\n *\n * **The plot is not mirrored in RTL.** An x axis is a number line or a timeline, and\n * both run left-to-right in Hebrew and Arabic charts as much as in English ones; a\n * time axis flipped to run right-to-left is the surprise, not the courtesy. So no\n * `reversed` on any axis, and the SVG is pinned to `direction: ltr` — without that it\n * inherits the page's `rtl`, which flips what `text-anchor: end` means, and the tick\n * labels of a left-hand y axis are drawn INTO the plot instead of beside it. Text\n * inside the SVG still shapes by its own script; only the anchoring is physical.\n * The HTML around the plot — legend, tooltip, the zoom reset button — follows the\n * page's direction like any other markup. A consumer who does want a mirrored\n * category axis passes `reversed` on its own `XAxis`.\n */\nexport function ChartContainer({ id, className, children, config, ...props }: ChartContainerProps) {\n  const uid = useId();\n  // The id is pasted into an UNQUOTED `[data-chart=…]` selector below, so it has to be\n  // a CSS identifier: one stray space or `#` and the browser discards the whole rule,\n  // taking every series colour with it — silently, because an invalid rule is not an\n  // error anywhere. `useId()` gives `:r0:`, and a consumer-supplied id gives whatever\n  // they typed, so both are filtered rather than just the colons.\n  const chartId = `chart-${(id ?? uid).replace(/[^A-Za-z0-9_-]/g, \"\")}`;\n  return (\n    <ChartContext.Provider value={config}>\n      <div\n        data-chart={chartId}\n        className={cn(\n          // touch-pan-y lets a vertical finger drag still scroll the page while\n          // a horizontal drag is handed to recharts for tooltip scrubbing,\n          // instead of the page scrolling underneath the gesture (feedback #292).\n          \"flex w-full touch-pan-y justify-center text-xs\",\n          // physical anchoring for the unmirrored plot (see the doc comment above)\n          \"[&_.recharts-surface]:[direction:ltr]\",\n          // muted axis labels + gridlines; one class each, since the tokens\n          // already carry the light/dark values\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-[var(--text-muted)]\",\n          \"[&_.recharts-cartesian-grid_line]:stroke-[var(--border)]/70\",\n          // hairline hover cursor instead of the heavy default\n          \"[&_.recharts-curve.recharts-tooltip-cursor]:stroke-[var(--border-strong)]\",\n          \"[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-[var(--bg-hover)]\",\n          // kill the focus outlines & white sector strokes Recharts adds\n          \"[&_.recharts-sector]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent\",\n          \"[&_.recharts-layer]:outline-none [&_.recharts-surface]:outline-none [&_.recharts-dot[stroke='#fff']]:stroke-transparent\",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          {children}\n        </ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\n/**\n * A config key, which becomes the tail of a custom-property NAME.\n *\n * `dangerouslySetInnerHTML` means what it says: nothing below is escaped by React, and\n * a `ChartConfig` is not necessarily written by hand — kastlan builds one from category\n * rows in its database, so these keys are user data. A key containing `}` closes this\n * rule, and whatever follows it in that key becomes a NEW rule — one that applies to\n * the whole document rather than to this one chart.\n */\nconst CSS_IDENT = /^[A-Za-z_][A-Za-z0-9_-]*$/;\n\n/**\n * A config colour, which becomes a declaration VALUE.\n *\n * Every form a palette actually produces: both hex spellings, the functional notations\n * — with the argument list restricted to the characters those functions can legally\n * contain, so no `;`, no `}` and no nested `url(` — and `var(--token)`, which is what\n * this kit's own `paletteFor`/`CHART_COLORS` return. `var()`'s optional FALLBACK is\n * deliberately not accepted: its second argument is an arbitrary value, i.e. the same\n * hole in a shape that looks safe.\n */\nconst CSS_COLOR =\n  /^(?:#[0-9a-fA-F]{3}|#[0-9a-fA-F]{6}|(?:rgba?|hsla?)\\([0-9A-Za-z.,%/ -]*\\)|var\\(--[A-Za-z0-9_-]+\\))$/;\n\n/**\n * The colour an entry is painted with, or `undefined` when the style block refuses it.\n *\n * The one gate both sides go through: {@link ChartStyle} emits exactly these, and the\n * legend and tooltip swatches show exactly these. They used to read `config[key].color`\n * directly, so an entry the style block had skipped still showed its configured colour\n * in the key — a swatch promising a colour the series was never painted in.\n */\nfunction paintedColor(key: string, entry: ChartSeriesConfig | undefined): string | undefined {\n  if (!entry?.color) return undefined;\n  return CSS_IDENT.test(key) && CSS_COLOR.test(entry.color) ? entry.color : undefined;\n}\n\n// Inject each series colour as a `--color-<key>` custom property scoped to this\n// chart, so chart JSX can refer to `var(--color-total)` and the legend/tooltip\n// stay in sync from one source of truth.\nfunction ChartStyle({ id, config }: { id: string; config: ChartConfig }) {\n  const entries = Object.entries(config).filter(([key, c]) => {\n    if (!c.color) return false;\n    // Skipping the entry costs that one series its `var(--color-…)` and leaves the rest\n    // of the chart painted; emitting it unchecked costs the page. The warning is so the\n    // consumer finds out from their console rather than from a colourless bar.\n    if (!CSS_IDENT.test(key)) {\n      console.warn(`[ui-kit] chart config key is not a CSS identifier, skipped: ${key}`);\n      return false;\n    }\n    if (!CSS_COLOR.test(c.color)) {\n      console.warn(`[ui-kit] chart config colour for \"${key}\" is not a colour, skipped: ${c.color}`);\n      return false;\n    }\n    return true;\n  });\n  if (!entries.length) return null;\n  const css = `[data-chart=${id}] {\\n${entries\n    .map(([key, c]) => `  --color-${key}: ${c.color};`)\n    .join(\"\\n\")}\\n}`;\n  return <style dangerouslySetInnerHTML={{ __html: css }} />;\n}\n\n/**\n * recharts' `Tooltip`, with `filterNull` defaulting to **false**.\n *\n * recharts drops every payload entry whose value is `null`/`undefined` before the\n * content sees it, so the missing-value path {@link ChartTooltipContent} documents —\n * the em dash, `formatValue(undefined)` — never ran under the default: a series with a\n * gap at the cursor simply vanished from the tooltip, which reads as \"this series does\n * not exist here\" rather than \"it has no value here\". Kept, the entry prints \"—\".\n *\n * The other half of that filter — dropping series drawn with `hide` — is redone by\n * `ChartTooltipContent` itself (honouring `includeHidden`), so a legend toggle still\n * takes a series out of the tooltip. Pass `filterNull` to get recharts' behaviour back.\n */\nexport function ChartTooltip(props: ComponentProps<typeof RechartsTooltip>) {\n  return <RechartsTooltip filterNull={false} {...props} />;\n}\nexport const ChartLegend = RechartsLegend;\n\ninterface TooltipPayloadItem {\n  dataKey?: string | number;\n  name?: string | number;\n  value?: number | string;\n  color?: string;\n  /** A series drawn with `hide` — dropped here, see {@link ChartTooltip}. */\n  hide?: boolean;\n  payload?: Record<string, unknown>;\n}\n\n/**\n * What a series has no value for at this point: a gap in a history, a projection that\n * has not happened yet, a field that did not exist at an earlier capture.\n *\n * An em dash rather than an empty cell, so the row still lines up with its siblings and\n * the reader can see that the series WAS asked and had nothing, rather than wondering\n * whether it was dropped. It is a mark, not a word, so there is nothing here to\n * translate and no label prop to resolve; a caller who wants words passes\n * `formatValue`, which is handed the `undefined` and decides.\n */\nconst NO_VALUE = \"—\";\n\n/**\n * The number this payload item carries, or `undefined` when it carries none.\n *\n * This was `item.value ?? 0`, so every one of the absences above printed a confident\n * \"0\" that appears nowhere in the data — a fabricated figure in a tooltip, which is the\n * one place a reader goes to check an exact number. keksdose found it and wrapped the\n * component rather than trust it. `\"\"` and a non-numeric string are the same absence\n * spelled differently (recharts hands a string value straight through from the data),\n * and are answered the same way.\n */\nfunction tooltipValue(value: number | string | undefined): number | undefined {\n  if (value == null || value === \"\") return undefined;\n  const n = typeof value === \"string\" ? Number(value) : value;\n  return Number.isFinite(n) ? n : undefined;\n}\n\ninterface ChartTooltipContentProps {\n  active?: boolean;\n  payload?: TooltipPayloadItem[];\n  label?: string | number;\n  indicator?: \"dot\" | \"line\";\n  hideLabel?: boolean;\n  labelFormatter?: (label: string | number) => ReactNode;\n  /** Formats one series' value for display. NOT called when the series has no value at\n   *  this point — {@link ChartTooltipContentProps.formatValue} is the one that is. */\n  valueFormatter?: (value: number) => ReactNode;\n  /** Formats one series' value INCLUDING its absence: handed `undefined` for a gap, a\n   *  projection that has not happened yet, or a field that did not exist at an earlier\n   *  capture, and whatever it returns is rendered as-is. Only the caller knows whether\n   *  that absence reads as a dash, a \"not yet\" or a genuine zero, so this is how it\n   *  says. Supplying it wins over `valueFormatter` for every value.\n   *\n   *  It sits NEXT to `valueFormatter` rather than widening it because that prop's\n   *  parameter is contextually typed at every call site there is — `(v) => money(v)` —\n   *  so widening it to `number | undefined` is a compile error in all three consuming\n   *  apps, which is a breaking change this module does not get to make by itself. */\n  formatValue?: (value: number | undefined) => ReactNode;\n  /** Cursor position within the chart, injected by recharts. Used with\n   *  {@link boundaryRef} to decide whether to flip the tooltip. */\n  coordinate?: { x?: number; y?: number };\n  /** When set, the tooltip flips to the LEFT of the cursor if it would otherwise\n   *  spill past the right edge of this (usually horizontally-scrolling) container\n   *  — e.g. a wide chart whose rightmost bars sat off-screen (feedback #77). */\n  boundaryRef?: RefObject<HTMLElement | null>;\n  /** Injected by recharts: keep series drawn with `hide` in the tooltip. */\n  includeHidden?: boolean;\n}\n\nexport function ChartTooltipContent({\n  active,\n  payload,\n  label,\n  indicator = \"dot\",\n  hideLabel = false,\n  labelFormatter,\n  valueFormatter,\n  formatValue,\n  coordinate,\n  boundaryRef,\n  includeHidden = false,\n}: ChartTooltipContentProps) {\n  const config = useChart();\n  const tipRef = useRef<HTMLDivElement>(null);\n  // `ChartTooltip` keeps null values (so they can print \"—\"), which also keeps the\n  // series a legend toggle switched off with `hide`; those go here instead.\n  const items = includeHidden ? payload : payload?.filter((item) => item.hide !== true);\n  const visible = Boolean(active && items?.length);\n  // Recharts anchors the tooltip at coordinate.x inside the full (scrolled) chart\n  // width; subtract the container's scrollLeft to get its on-screen x, then flip\n  // left if the tooltip's own width would run past the visible right edge.\n  //\n  // Both the cursor and the flip are PHYSICAL (the plot is never mirrored, see\n  // `ChartContainer`), but an RTL scroller counts `scrollLeft` from its right edge —\n  // 0 at the start, negative going left — so there the content's left edge sits\n  // `scrollWidth - clientWidth + scrollLeft` px to the left of the visible one.\n  //\n  // Measured in a layout effect (the DOM is not readable during render), so it commits\n  // before paint. `payload` and `label` are deps because they change the tooltip's own\n  // width, and recharts hands a fresh `payload` on every tooltip render, so a scroll\n  // followed by any re-render is re-measured just as it was when this ran in render.\n  const [flip, setFlip] = useState(false);\n  const x = coordinate?.x;\n  useLayoutEffect(() => {\n    const boundary = boundaryRef?.current;\n    if (!visible || !boundary || x == null) {\n      setFlip(false);\n      return;\n    }\n    const offset = isRtl(boundary)\n      ? boundary.scrollWidth - boundary.clientWidth + boundary.scrollLeft\n      : boundary.scrollLeft;\n    const visibleX = x - offset;\n    const tipWidth = tipRef.current?.offsetWidth ?? 160;\n    setFlip(visibleX + tipWidth + 12 > boundary.clientWidth);\n  }, [visible, x, boundaryRef, payload, label]);\n\n  // Whatever placed it — recharts' own rule or the boundary flip above — the box then\n  // clamps itself into the viewport, 8px off each edge. The width cap alone did not\n  // keep it on screen: on a 390px phone recharts opened a near-full-width tooltip to\n  // the RIGHT of a pointer 35% into the plot, and the values ran off the edge\n  // (lenkbank, on 0.15.2). Measured after placement, minus the shift it already has,\n  // so a re-measure never compounds; an unmeasured box (no layout) is left alone.\n  const [nudge, setNudge] = useState(0);\n  const nudgeRef = useRef(0);\n  // recharts slides its wrapper to each new position with a CSS transition, so the box\n  // measured on commit is still where it WAS; measure again once the slide ends.\n  const [settled, setSettled] = useState(0);\n  useEffect(() => {\n    const wrapper = tipRef.current?.closest<HTMLElement>(\".recharts-tooltip-wrapper\");\n    if (!visible || !wrapper) return;\n    const onEnd = () => setSettled((n) => n + 1);\n    wrapper.addEventListener(\"transitionend\", onEnd);\n    return () => wrapper.removeEventListener(\"transitionend\", onEnd);\n  }, [visible]);\n  useLayoutEffect(() => {\n    const el = tipRef.current;\n    if (!visible || !el) {\n      nudgeRef.current = 0;\n      setNudge(0);\n      return;\n    }\n    const rect = el.getBoundingClientRect();\n    if (rect.width === 0) return;\n    const margin = 8;\n    const viewport = document.documentElement.clientWidth || window.innerWidth;\n    const left = rect.left - nudgeRef.current;\n    const right = left + rect.width;\n    let next = 0;\n    if (right > viewport - margin) next = viewport - margin - right;\n    if (left + next < margin) next = margin - left;\n    if (next !== nudgeRef.current) {\n      nudgeRef.current = next;\n      setNudge(next);\n    }\n  }, [visible, x, payload, label, flip, settled]);\n  if (!visible || !items) return null;\n  return (\n    <div\n      ref={tipRef}\n      style={\n        boundaryRef || nudge\n          ? {\n              transform: [\n                boundaryRef ? (flip ? \"translateX(calc(-100% - 12px))\" : \"translateX(12px)\") : \"\",\n                nudge ? `translateX(${nudge}px)` : \"\",\n              ]\n                .filter(Boolean)\n                .join(\" \"),\n            }\n          : undefined\n      }\n      // Capped at the viewport: six long series names (lenkbank's German motion\n      // labels) made the box wider than a 390px chart, and recharts, which keeps a box\n      // inside the plot only when it fits, let it run off the edge with the values cut.\n      // Names wrap inside the cap; the values never do.\n      className=\"min-w-[9rem] max-w-[min(20rem,calc(100vw-2rem))] rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] px-2.5 py-2 text-xs shadow-xl\"\n    >\n      {!hideLabel && label != null && (\n        <div className=\"mb-1.5 font-medium text-[var(--text-primary)]\">\n          {labelFormatter ? labelFormatter(label) : label}\n        </div>\n      )}\n      <div className=\"grid gap-1.5\">\n        {items.map((item, i) => {\n          // Bars/lines/areas identify a series by dataKey; pies/treemaps key off\n          // `name` (the nameKey value). Prefer whichever the config knows.\n          const dk = item.dataKey != null ? String(item.dataKey) : undefined;\n          const nm = item.name != null ? String(item.name) : undefined;\n          const cfgKey = dk && config[dk] ? dk : nm && config[nm] ? nm : (dk ?? nm ?? String(i));\n          const series = config[cfgKey];\n          const fill = typeof item.payload?.fill === \"string\" ? item.payload.fill : undefined;\n          // The data point's own `fill` before recharts' `item.color`: a treemap tile,\n          // or a bar with a per-cell colour, IS the colour the reader is pointing at,\n          // while `item.color` is the series-wide one — every tile's swatch came out\n          // `--chart-1` whatever colour the tile was.\n          const color = paintedColor(cfgKey, series) ?? fill ?? item.color ?? \"#64748b\";\n          const name = series?.label ?? nm ?? cfgKey;\n          const raw = tooltipValue(item.value);\n          let shown: ReactNode;\n          if (formatValue) shown = formatValue(raw);\n          else if (raw == null) shown = NO_VALUE;\n          else shown = valueFormatter ? valueFormatter(raw) : raw;\n          return (\n            <div key={`${cfgKey}-${i}`} className=\"flex items-center gap-2\">\n              <span\n                className={cn(\n                  \"shrink-0 rounded-[2px]\",\n                  indicator === \"dot\" ? \"h-2.5 w-2.5 rounded-full\" : \"h-2.5 w-1\",\n                )}\n                style={{ backgroundColor: color }}\n              />\n              <span className=\"min-w-0 break-words text-[var(--text-muted)]\">{name}</span>\n              <span\n                data-private\n                className=\"ms-auto shrink-0 whitespace-nowrap font-mono font-medium tabular-nums text-[var(--text-primary)]\"\n              >\n                {shown}\n              </span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\ninterface LegendPayloadItem {\n  value?: string;\n  dataKey?: string | number;\n  color?: string;\n}\n\ninterface ChartLegendContentProps {\n  payload?: LegendPayloadItem[];\n  onItemClick?: (key: string) => void;\n  /**\n   * TOGGLE mode (recommended): the series currently switched off. Each entry is a\n   * toggle button — pressed while its series is shown — and a hidden one is drawn\n   * faded with its label struck through. Several can be off at once; pair with\n   * `toggleHidden(hidden, key)` in `onItemClick` and `hide` on the chart's series.\n   */\n  hiddenKeys?: ReadonlySet<string> | readonly string[];\n  /**\n   * ISOLATE mode: the one series shown in full, every other entry dimmed. Kept for\n   * the charts built on it; a legend where each entry switches its own series is\n   * what readers expect from a legend, so prefer `hiddenKeys`.\n   */\n  activeKey?: string | null;\n}\n\nexport function ChartLegendContent({\n  payload,\n  onItemClick,\n  hiddenKeys,\n  activeKey,\n}: ChartLegendContentProps) {\n  const hidden = hiddenKeys ? new Set(hiddenKeys) : null;\n  const config = useChart();\n  if (!payload?.length) return null;\n  return (\n    <div className=\"flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3\">\n      {payload.map((item, i) => {\n        const dk = item.dataKey != null ? String(item.dataKey) : undefined;\n        const vv = item.value != null ? String(item.value) : undefined;\n        const cfgKey = dk && config[dk] ? dk : vv && config[vv] ? vv : (dk ?? vv ?? String(i));\n        const series = config[cfgKey];\n        const color = paintedColor(cfgKey, series) ?? item.color ?? \"#64748b\";\n        const label = series?.label ?? vv ?? cfgKey;\n        const off = hidden?.has(cfgKey) ?? false;\n        const dimmed = off || (activeKey != null && activeKey !== cfgKey);\n        const className = cn(\n          \"flex items-center gap-1.5 text-[var(--text-secondary)] transition-opacity\",\n          onItemClick ? \"cursor-pointer hover:opacity-80\" : \"cursor-default\",\n          dimmed && \"opacity-40\",\n        );\n        const swatch = (\n          <span\n            aria-hidden\n            className=\"h-2.5 w-2.5 shrink-0 rounded-[3px]\"\n            style={{ backgroundColor: color } as CSSProperties}\n          />\n        );\n        // A legend with no `onItemClick` is a KEY, not a control — and that is every\n        // legend in kastlan, where this rendered N focusable buttons per chart that did\n        // nothing when activated. A keyboard user paid the tab stops for all of them,\n        // and a screen reader announced each one as a button, promising an action there\n        // was none of. The interactive branch is unchanged.\n        return onItemClick ? (\n          <button\n            key={`${cfgKey}-${i}`}\n            type=\"button\"\n            onClick={() => onItemClick(cfgKey)}\n            // Toggles report their state: in toggle mode pressed = the series is shown;\n            // in isolate mode pressed = the isolated one. With neither supplied the\n            // legend knows nothing about state, and a pressed=\"false\" it cannot vouch\n            // for would lie — so it says nothing.\n            aria-pressed={\n              hidden ? !off : activeKey === undefined ? undefined : activeKey === cfgKey\n            }\n            className={className}\n          >\n            {swatch}\n            <span className={cn(off && \"line-through\")}>{label}</span>\n          </button>\n        ) : (\n          <span key={`${cfgKey}-${i}`} className={className}>\n            {swatch}\n            {label}\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/chart.tsx"],"sourcesContent":["// shadcn/ui chart kit — vendored (MIT) and adapted for this app:\n//  - Recharts 3 instead of 2\n//  - the original keys its styling off shadcn theme tokens (--muted-foreground,\n//    --border, bg-background …). This app has no shadcn token layer, so those\n//    are mapped onto this kit's own tokens (--text-muted, --border, --bg-surface\n//    …), which follow the active palette preset and flip with the theme by\n//    themselves — hence no `dark:` variants anywhere below.\n// The value on show is the *structure*: config-driven colors injected as CSS\n// vars, muted axis/grid styling, and a polished tooltip/legend — the things\n// that make shadcn charts read as \"designed\" rather than \"default Recharts\".\nimport { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentProps, CSSProperties, ReactNode, RefObject } from \"react\";\nimport {\n  Legend as RechartsLegend,\n  ResponsiveContainer,\n  Tooltip as RechartsTooltip,\n} from \"recharts\";\nimport { cn } from \"../lib/cn\";\nimport { isRtl } from \"../lib/direction\";\n\nexport interface ChartSeriesConfig {\n  label: ReactNode;\n  color: string;\n}\n\nexport type ChartConfig = Record<string, ChartSeriesConfig>;\n\nconst ChartContext = createContext<ChartConfig | null>(null);\n\nexport function useChart(): ChartConfig {\n  const ctx = useContext(ChartContext);\n  if (!ctx) throw new Error(\"useChart must be used within a <ChartContainer />\");\n  return ctx;\n}\n\ninterface ChartContainerProps extends ComponentProps<\"div\"> {\n  config: ChartConfig;\n  children: ComponentProps<typeof ResponsiveContainer>[\"children\"];\n}\n\n/**\n * The shell every chart in the kit is drawn inside.\n *\n * **The plot is not mirrored in RTL.** An x axis is a number line or a timeline, and\n * both run left-to-right in Hebrew and Arabic charts as much as in English ones; a\n * time axis flipped to run right-to-left is the surprise, not the courtesy. So no\n * `reversed` on any axis, and the SVG is pinned to `direction: ltr` — without that it\n * inherits the page's `rtl`, which flips what `text-anchor: end` means, and the tick\n * labels of a left-hand y axis are drawn INTO the plot instead of beside it. Text\n * inside the SVG still shapes by its own script; only the anchoring is physical.\n * The HTML around the plot — legend, tooltip, the zoom reset button — follows the\n * page's direction like any other markup. A consumer who does want a mirrored\n * category axis passes `reversed` on its own `XAxis`.\n */\nexport function ChartContainer({ id, className, children, config, ...props }: ChartContainerProps) {\n  const uid = useId();\n  // The id is pasted into an UNQUOTED `[data-chart=…]` selector below, so it has to be\n  // a CSS identifier: one stray space or `#` and the browser discards the whole rule,\n  // taking every series colour with it — silently, because an invalid rule is not an\n  // error anywhere. `useId()` gives `:r0:`, and a consumer-supplied id gives whatever\n  // they typed, so both are filtered rather than just the colons.\n  const chartId = `chart-${(id ?? uid).replace(/[^A-Za-z0-9_-]/g, \"\")}`;\n  return (\n    <ChartContext.Provider value={config}>\n      <div\n        data-chart={chartId}\n        className={cn(\n          // touch-pan-y lets a vertical finger drag still scroll the page while\n          // a horizontal drag is handed to recharts for tooltip scrubbing,\n          // instead of the page scrolling underneath the gesture (feedback #292).\n          \"flex w-full touch-pan-y justify-center text-xs\",\n          // physical anchoring for the unmirrored plot (see the doc comment above)\n          \"[&_.recharts-surface]:[direction:ltr]\",\n          // muted axis labels + gridlines; one class each, since the tokens\n          // already carry the light/dark values\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-[var(--text-muted)]\",\n          \"[&_.recharts-cartesian-grid_line]:stroke-[var(--border)]/70\",\n          // hairline hover cursor instead of the heavy default\n          \"[&_.recharts-curve.recharts-tooltip-cursor]:stroke-[var(--border-strong)]\",\n          \"[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-[var(--bg-hover)]\",\n          // kill the focus outlines & white sector strokes Recharts adds\n          \"[&_.recharts-sector]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent\",\n          \"[&_.recharts-layer]:outline-none [&_.recharts-surface]:outline-none [&_.recharts-dot[stroke='#fff']]:stroke-transparent\",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          {children}\n        </ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\n/**\n * A config key, which becomes the tail of a custom-property NAME.\n *\n * `dangerouslySetInnerHTML` means what it says: nothing below is escaped by React, and\n * a `ChartConfig` is not necessarily written by hand — kastlan builds one from category\n * rows in its database, so these keys are user data. A key containing `}` closes this\n * rule, and whatever follows it in that key becomes a NEW rule — one that applies to\n * the whole document rather than to this one chart.\n */\nconst CSS_IDENT = /^[A-Za-z_][A-Za-z0-9_-]*$/;\n\n/**\n * A config colour, which becomes a declaration VALUE.\n *\n * Every form a palette actually produces: both hex spellings, the functional notations\n * — with the argument list restricted to the characters those functions can legally\n * contain, so no `;`, no `}` and no nested `url(` — and `var(--token)`, which is what\n * this kit's own `paletteFor`/`CHART_COLORS` return. `var()`'s optional FALLBACK is\n * deliberately not accepted: its second argument is an arbitrary value, i.e. the same\n * hole in a shape that looks safe.\n */\nconst CSS_COLOR =\n  /^(?:#[0-9a-fA-F]{3}|#[0-9a-fA-F]{6}|(?:rgba?|hsla?)\\([0-9A-Za-z.,%/ -]*\\)|var\\(--[A-Za-z0-9_-]+\\))$/;\n\n/**\n * The colour an entry is painted with, or `undefined` when the style block refuses it.\n *\n * The one gate both sides go through: {@link ChartStyle} emits exactly these, and the\n * legend and tooltip swatches show exactly these. They used to read `config[key].color`\n * directly, so an entry the style block had skipped still showed its configured colour\n * in the key — a swatch promising a colour the series was never painted in.\n */\nfunction paintedColor(key: string, entry: ChartSeriesConfig | undefined): string | undefined {\n  if (!entry?.color) return undefined;\n  return CSS_IDENT.test(key) && CSS_COLOR.test(entry.color) ? entry.color : undefined;\n}\n\n// Inject each series colour as a `--color-<key>` custom property scoped to this\n// chart, so chart JSX can refer to `var(--color-total)` and the legend/tooltip\n// stay in sync from one source of truth.\nfunction ChartStyle({ id, config }: { id: string; config: ChartConfig }) {\n  const entries = Object.entries(config).filter(([key, c]) => {\n    if (!c.color) return false;\n    // Skipping the entry costs that one series its `var(--color-…)` and leaves the rest\n    // of the chart painted; emitting it unchecked costs the page. The warning is so the\n    // consumer finds out from their console rather than from a colourless bar.\n    if (!CSS_IDENT.test(key)) {\n      console.warn(`[ui-kit] chart config key is not a CSS identifier, skipped: ${key}`);\n      return false;\n    }\n    if (!CSS_COLOR.test(c.color)) {\n      console.warn(`[ui-kit] chart config colour for \"${key}\" is not a colour, skipped: ${c.color}`);\n      return false;\n    }\n    return true;\n  });\n  if (!entries.length) return null;\n  const css = `[data-chart=${id}] {\\n${entries\n    .map(([key, c]) => `  --color-${key}: ${c.color};`)\n    .join(\"\\n\")}\\n}`;\n  return <style dangerouslySetInnerHTML={{ __html: css }} />;\n}\n\n/**\n * recharts' `Tooltip`, with `filterNull` defaulting to **false**.\n *\n * recharts drops every payload entry whose value is `null`/`undefined` before the\n * content sees it, so the missing-value path {@link ChartTooltipContent} documents —\n * the em dash, `formatValue(undefined)` — never ran under the default: a series with a\n * gap at the cursor simply vanished from the tooltip, which reads as \"this series does\n * not exist here\" rather than \"it has no value here\". Kept, the entry prints \"—\".\n *\n * The other half of that filter — dropping series drawn with `hide` — is redone by\n * `ChartTooltipContent` itself (honouring `includeHidden`), so a legend toggle still\n * takes a series out of the tooltip. Pass `filterNull` to get recharts' behaviour back.\n */\nexport function ChartTooltip(props: ComponentProps<typeof RechartsTooltip>) {\n  return <RechartsTooltip filterNull={false} {...props} />;\n}\nexport const ChartLegend = RechartsLegend;\n\ninterface TooltipPayloadItem {\n  dataKey?: string | number;\n  name?: string | number;\n  value?: number | string;\n  color?: string;\n  /** A series drawn with `hide` — dropped here, see {@link ChartTooltip}. */\n  hide?: boolean;\n  payload?: Record<string, unknown>;\n}\n\n/**\n * What a series has no value for at this point: a gap in a history, a projection that\n * has not happened yet, a field that did not exist at an earlier capture.\n *\n * An em dash rather than an empty cell, so the row still lines up with its siblings and\n * the reader can see that the series WAS asked and had nothing, rather than wondering\n * whether it was dropped. It is a mark, not a word, so there is nothing here to\n * translate and no label prop to resolve; a caller who wants words passes\n * `formatValue`, which is handed the `undefined` and decides.\n */\nconst NO_VALUE = \"—\";\n\n/**\n * The number this payload item carries, or `undefined` when it carries none.\n *\n * This was `item.value ?? 0`, so every one of the absences above printed a confident\n * \"0\" that appears nowhere in the data — a fabricated figure in a tooltip, which is the\n * one place a reader goes to check an exact number. keksdose found it and wrapped the\n * component rather than trust it. `\"\"` and a non-numeric string are the same absence\n * spelled differently (recharts hands a string value straight through from the data),\n * and are answered the same way.\n */\nfunction tooltipValue(value: number | string | undefined): number | undefined {\n  if (value == null || value === \"\") return undefined;\n  const n = typeof value === \"string\" ? Number(value) : value;\n  return Number.isFinite(n) ? n : undefined;\n}\n\ninterface ChartTooltipContentProps {\n  active?: boolean;\n  payload?: TooltipPayloadItem[];\n  label?: string | number;\n  indicator?: \"dot\" | \"line\";\n  hideLabel?: boolean;\n  labelFormatter?: (label: string | number) => ReactNode;\n  /** Formats one series' value for display. NOT called when the series has no value at\n   *  this point — {@link ChartTooltipContentProps.formatValue} is the one that is. */\n  valueFormatter?: (value: number) => ReactNode;\n  /** Formats one series' value INCLUDING its absence: handed `undefined` for a gap, a\n   *  projection that has not happened yet, or a field that did not exist at an earlier\n   *  capture, and whatever it returns is rendered as-is. Only the caller knows whether\n   *  that absence reads as a dash, a \"not yet\" or a genuine zero, so this is how it\n   *  says. Supplying it wins over `valueFormatter` for every value.\n   *\n   *  It sits NEXT to `valueFormatter` rather than widening it because that prop's\n   *  parameter is contextually typed at every call site there is — `(v) => money(v)` —\n   *  so widening it to `number | undefined` is a compile error in all three consuming\n   *  apps, which is a breaking change this module does not get to make by itself. */\n  formatValue?: (value: number | undefined) => ReactNode;\n  /** Cursor position within the chart, injected by recharts. Used with\n   *  {@link boundaryRef} to decide whether to flip the tooltip. */\n  coordinate?: { x?: number; y?: number };\n  /** When set, the tooltip flips to the LEFT of the cursor if it would otherwise\n   *  spill past the right edge of this (usually horizontally-scrolling) container\n   *  — e.g. a wide chart whose rightmost bars sat off-screen (feedback #77). */\n  boundaryRef?: RefObject<HTMLElement | null>;\n  /** Injected by recharts: keep series drawn with `hide` in the tooltip. */\n  includeHidden?: boolean;\n  /**\n   * `\"floating\"` (the default): the box recharts moves with the cursor. `\"readout\"`: the\n   * same heading and values as a flat row for a FIXED place outside the plot — a\n   * `SeriesChart` whose `tooltip.placement` is `\"above\"`/`\"below\"` portals it there, so\n   * a finger on a phone no longer sits on the box it is trying to read (keksdose #359).\n   * No border, shadow, width cap or viewport nudge; the values flow in a grid whose\n   * column count depends on the row's width alone, so the row is the same height\n   * whatever is being pointed at — and, idle, it shows {@link idleKeys} with \"—\".\n   */\n  variant?: \"floating\" | \"readout\";\n  /** Readout only: the series to list while nothing is active, so the row keeps the\n   *  height it will have once something is. */\n  idleKeys?: readonly string[];\n  /** Readout only: the heading while nothing is active. Default \"—\". */\n  idleLabel?: ReactNode;\n}\n\nexport function ChartTooltipContent({\n  active,\n  payload,\n  label,\n  indicator = \"dot\",\n  hideLabel = false,\n  labelFormatter,\n  valueFormatter,\n  formatValue,\n  coordinate,\n  boundaryRef,\n  includeHidden = false,\n  variant = \"floating\",\n  idleKeys,\n  idleLabel,\n}: ChartTooltipContentProps) {\n  const config = useChart();\n  const tipRef = useRef<HTMLDivElement>(null);\n  const readout = variant === \"readout\";\n  // `ChartTooltip` keeps null values (so they can print \"—\"), which also keeps the\n  // series a legend toggle switched off with `hide`; those go here instead.\n  const items = includeHidden ? payload : payload?.filter((item) => item.hide !== true);\n  const shown = Boolean(active && items?.length);\n  // Everything below that measures and moves the box is about a FLOATING one.\n  const visible = shown && !readout;\n  // Recharts anchors the tooltip at coordinate.x inside the full (scrolled) chart\n  // width; subtract the container's scrollLeft to get its on-screen x, then flip\n  // left if the tooltip's own width would run past the visible right edge.\n  //\n  // Both the cursor and the flip are PHYSICAL (the plot is never mirrored, see\n  // `ChartContainer`), but an RTL scroller counts `scrollLeft` from its right edge —\n  // 0 at the start, negative going left — so there the content's left edge sits\n  // `scrollWidth - clientWidth + scrollLeft` px to the left of the visible one.\n  //\n  // Measured in a layout effect (the DOM is not readable during render), so it commits\n  // before paint. `payload` and `label` are deps because they change the tooltip's own\n  // width, and recharts hands a fresh `payload` on every tooltip render, so a scroll\n  // followed by any re-render is re-measured just as it was when this ran in render.\n  const [flip, setFlip] = useState(false);\n  const x = coordinate?.x;\n  useLayoutEffect(() => {\n    const boundary = boundaryRef?.current;\n    if (!visible || !boundary || x == null) {\n      setFlip(false);\n      return;\n    }\n    const offset = isRtl(boundary)\n      ? boundary.scrollWidth - boundary.clientWidth + boundary.scrollLeft\n      : boundary.scrollLeft;\n    const visibleX = x - offset;\n    const tipWidth = tipRef.current?.offsetWidth ?? 160;\n    setFlip(visibleX + tipWidth + 12 > boundary.clientWidth);\n  }, [visible, x, boundaryRef, payload, label]);\n\n  // Whatever placed it — recharts' own rule or the boundary flip above — the box then\n  // clamps itself into the viewport, 8px off each edge. The width cap alone did not\n  // keep it on screen: on a 390px phone recharts opened a near-full-width tooltip to\n  // the RIGHT of a pointer 35% into the plot, and the values ran off the edge\n  // (lenkbank, on 0.15.2). Measured after placement, minus the shift it already has,\n  // so a re-measure never compounds; an unmeasured box (no layout) is left alone.\n  const [nudge, setNudge] = useState(0);\n  const nudgeRef = useRef(0);\n  // recharts slides its wrapper to each new position with a CSS transition, so the box\n  // measured on commit is still where it WAS; measure again once the slide ends.\n  const [settled, setSettled] = useState(0);\n  useEffect(() => {\n    const wrapper = tipRef.current?.closest<HTMLElement>(\".recharts-tooltip-wrapper\");\n    if (!visible || !wrapper) return;\n    const onEnd = () => setSettled((n) => n + 1);\n    wrapper.addEventListener(\"transitionend\", onEnd);\n    return () => wrapper.removeEventListener(\"transitionend\", onEnd);\n  }, [visible]);\n  useLayoutEffect(() => {\n    const el = tipRef.current;\n    if (!visible || !el) {\n      nudgeRef.current = 0;\n      setNudge(0);\n      return;\n    }\n    const rect = el.getBoundingClientRect();\n    if (rect.width === 0) return;\n    const margin = 8;\n    const viewport = document.documentElement.clientWidth || window.innerWidth;\n    const left = rect.left - nudgeRef.current;\n    const right = left + rect.width;\n    let next = 0;\n    if (right > viewport - margin) next = viewport - margin - right;\n    if (left + next < margin) next = margin - left;\n    if (next !== nudgeRef.current) {\n      nudgeRef.current = next;\n      setNudge(next);\n    }\n  }, [visible, x, payload, label, flip, settled]);\n  // One series' line — the floating box stacks them; the readout lays them in a grid,\n  // where a long name is cut rather than wrapped so every cell stays one line high.\n  const tooltipRow = (item: TooltipPayloadItem, i: number, inRow: boolean) => {\n    // Bars/lines/areas identify a series by dataKey; pies/treemaps key off\n    // `name` (the nameKey value). Prefer whichever the config knows.\n    const dk = item.dataKey != null ? String(item.dataKey) : undefined;\n    const nm = item.name != null ? String(item.name) : undefined;\n    const cfgKey = dk && config[dk] ? dk : nm && config[nm] ? nm : (dk ?? nm ?? String(i));\n    const series = config[cfgKey];\n    const fill = typeof item.payload?.fill === \"string\" ? item.payload.fill : undefined;\n    // The data point's own `fill` before recharts' `item.color`: a treemap tile,\n    // or a bar with a per-cell colour, IS the colour the reader is pointing at,\n    // while `item.color` is the series-wide one — every tile's swatch came out\n    // `--chart-1` whatever colour the tile was.\n    const color = paintedColor(cfgKey, series) ?? fill ?? item.color ?? \"#64748b\";\n    const name = series?.label ?? nm ?? cfgKey;\n    const raw = tooltipValue(item.value);\n    let text: ReactNode;\n    // An idle readout cell has asked nothing yet, so there is no absence for\n    // `formatValue` to word — it is the bare mark.\n    if (inRow && !shown) text = NO_VALUE;\n    else if (formatValue) text = formatValue(raw);\n    else if (raw == null) text = NO_VALUE;\n    else text = valueFormatter ? valueFormatter(raw) : raw;\n    return (\n      <div\n        key={`${cfgKey}-${i}`}\n        // A readout cell is capped so a wide row does not push its value a column away\n        // from its name.\n        className={cn(\"flex items-center\", inRow ? \"min-w-0 max-w-[12rem] gap-1.5\" : \"gap-2\")}\n      >\n        <span\n          className={cn(\n            \"shrink-0 rounded-[2px]\",\n            indicator === \"dot\" ? \"h-2.5 w-2.5 rounded-full\" : \"h-2.5 w-1\",\n          )}\n          style={{ backgroundColor: color }}\n        />\n        <span\n          className={cn(\"min-w-0 text-[var(--text-muted)]\", inRow ? \"truncate\" : \"break-words\")}\n        >\n          {name}\n        </span>\n        <span\n          data-private\n          // Isolated, so an RTL page does not turn \"-26.6\" into \"26.6-\": a figure has no\n          // strong direction of its own, and one formatted with an RTL mark keeps it.\n          dir=\"auto\"\n          className=\"ms-auto shrink-0 whitespace-nowrap font-mono font-medium tabular-nums text-[var(--text-primary)]\"\n        >\n          {text}\n        </span>\n      </div>\n    );\n  };\n\n  if (readout) {\n    // Idle, the row lists every series with no value — the same cells it will have, so\n    // nothing under it moves on the first tap.\n    const rows: TooltipPayloadItem[] = shown\n      ? items!\n      : (idleKeys ?? Object.keys(config)).map((key) => ({ dataKey: key }));\n    return (\n      <div className=\"text-xs\" data-chart-readout={shown ? \"active\" : \"idle\"}>\n        {/* A full 24 px line: the zoom's reset button sits at the top corner of a chart\n            whose row is above it, and has to fit beside the heading, not over a value. */}\n        <div data-readout-heading className=\"truncate font-medium leading-6 text-[var(--text-primary)]\">\n          {shown && !hideLabel && label != null\n            ? labelFormatter\n              ? labelFormatter(label)\n              : label\n            : (idleLabel ?? NO_VALUE)}\n        </div>\n        <div className=\"grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-x-4 gap-y-1\">\n          {rows.map((item, i) => tooltipRow(item, i, true))}\n        </div>\n      </div>\n    );\n  }\n  if (!visible || !items) return null;\n  return (\n    <div\n      ref={tipRef}\n      style={\n        boundaryRef || nudge\n          ? {\n              transform: [\n                boundaryRef ? (flip ? \"translateX(calc(-100% - 12px))\" : \"translateX(12px)\") : \"\",\n                nudge ? `translateX(${nudge}px)` : \"\",\n              ]\n                .filter(Boolean)\n                .join(\" \"),\n            }\n          : undefined\n      }\n      // Capped at the viewport: six long series names (lenkbank's German motion\n      // labels) made the box wider than a 390px chart, and recharts, which keeps a box\n      // inside the plot only when it fits, let it run off the edge with the values cut.\n      // Names wrap inside the cap; the values never do.\n      className=\"min-w-[9rem] max-w-[min(20rem,calc(100vw-2rem))] rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] px-2.5 py-2 text-xs shadow-xl\"\n    >\n      {!hideLabel && label != null && (\n        <div className=\"mb-1.5 font-medium text-[var(--text-primary)]\">\n          {labelFormatter ? labelFormatter(label) : label}\n        </div>\n      )}\n      <div className=\"grid gap-1.5\">{items.map((item, i) => tooltipRow(item, i, false))}</div>\n    </div>\n  );\n}\n\ninterface LegendPayloadItem {\n  value?: string;\n  dataKey?: string | number;\n  color?: string;\n}\n\ninterface ChartLegendContentProps {\n  payload?: LegendPayloadItem[];\n  onItemClick?: (key: string) => void;\n  /**\n   * TOGGLE mode (recommended): the series currently switched off. Each entry is a\n   * toggle button — pressed while its series is shown — and a hidden one is drawn\n   * faded with its label struck through. Several can be off at once; pair with\n   * `toggleHidden(hidden, key)` in `onItemClick` and `hide` on the chart's series.\n   */\n  hiddenKeys?: ReadonlySet<string> | readonly string[];\n  /**\n   * ISOLATE mode: the one series shown in full, every other entry dimmed. Kept for\n   * the charts built on it; a legend where each entry switches its own series is\n   * what readers expect from a legend, so prefer `hiddenKeys`.\n   */\n  activeKey?: string | null;\n}\n\nexport function ChartLegendContent({\n  payload,\n  onItemClick,\n  hiddenKeys,\n  activeKey,\n}: ChartLegendContentProps) {\n  const hidden = hiddenKeys ? new Set(hiddenKeys) : null;\n  const config = useChart();\n  if (!payload?.length) return null;\n  return (\n    <div className=\"flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3\">\n      {payload.map((item, i) => {\n        const dk = item.dataKey != null ? String(item.dataKey) : undefined;\n        const vv = item.value != null ? String(item.value) : undefined;\n        const cfgKey = dk && config[dk] ? dk : vv && config[vv] ? vv : (dk ?? vv ?? String(i));\n        const series = config[cfgKey];\n        const color = paintedColor(cfgKey, series) ?? item.color ?? \"#64748b\";\n        const label = series?.label ?? vv ?? cfgKey;\n        const off = hidden?.has(cfgKey) ?? false;\n        const dimmed = off || (activeKey != null && activeKey !== cfgKey);\n        const className = cn(\n          \"flex items-center gap-1.5 text-[var(--text-secondary)] transition-opacity\",\n          onItemClick ? \"cursor-pointer hover:opacity-80\" : \"cursor-default\",\n          dimmed && \"opacity-40\",\n        );\n        const swatch = (\n          <span\n            aria-hidden\n            className=\"h-2.5 w-2.5 shrink-0 rounded-[3px]\"\n            style={{ backgroundColor: color } as CSSProperties}\n          />\n        );\n        // A legend with no `onItemClick` is a KEY, not a control — and that is every\n        // legend in kastlan, where this rendered N focusable buttons per chart that did\n        // nothing when activated. A keyboard user paid the tab stops for all of them,\n        // and a screen reader announced each one as a button, promising an action there\n        // was none of. The interactive branch is unchanged.\n        return onItemClick ? (\n          <button\n            key={`${cfgKey}-${i}`}\n            type=\"button\"\n            onClick={() => onItemClick(cfgKey)}\n            // Toggles report their state: in toggle mode pressed = the series is shown;\n            // in isolate mode pressed = the isolated one. With neither supplied the\n            // legend knows nothing about state, and a pressed=\"false\" it cannot vouch\n            // for would lie — so it says nothing.\n            aria-pressed={\n              hidden ? !off : activeKey === undefined ? undefined : activeKey === cfgKey\n            }\n            className={className}\n          >\n            {swatch}\n            <span className={cn(off && \"line-through\")}>{label}</span>\n          </button>\n        ) : (\n          <span key={`${cfgKey}-${i}`} className={className}>\n            {swatch}\n            {label}\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/checkbox.js

@@ -6,7 +6,7 @@ import { cn } from "../lib/cn.js";
 import { assignRef, hasMessage, mergeDescribedBy } from "./choice-parts.js";
 const BOX = "peer size-4 shrink-0 cursor-pointer appearance-none rounded-[4px] border border-[var(--border-strong)] bg-[var(--bg-surface)] shadow-sm transition-colors checked:border-[var(--brand)] checked:bg-[var(--brand)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)] disabled:cursor-not-allowed";
 const BOX_MIXED = "border-[var(--brand)] bg-[var(--brand)]";
-const BOX_INVALID = "border-[var(--danger-border)] ring-1 ring-[var(--danger-border)] checked:border-[var(--danger-border)] focus-visible:ring-[var(--danger)]";
+const BOX_INVALID = "border-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] checked:border-[var(--danger-border-strong)] focus-visible:ring-[var(--danger)]";
 const ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
 const Checkbox = forwardRef(function Checkbox2({
   label,

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useId, useRef } from \"react\";\nimport { Check, Minus } from \"lucide-react\";\nimport type { ChangeEvent, InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { assignRef, hasMessage, mergeDescribedBy } from \"./choice-parts\";\n\n/**\n * A checkbox that is still `<input type=\"checkbox\">`.\n *\n * The three consuming apps had three answers: ~30 raw inputs in Keksdose leaning on\n * `tokens.css`'s `accent-color`, a label-plus-box `CheckboxField` in Lenkbank, and a\n * Radix `<button role=\"checkbox\">` in Kastlan. The native element is the one that\n * needs no ARIA to be a checkbox — it submits with its form, answers to `required`,\n * resets with the form and takes a `<label for>` click — so it stays underneath, and\n * only its paint is replaced (`appearance-none`, a token-coloured box, and a glyph\n * laid over it that ignores the pointer so the click still lands on the input).\n *\n * `accent-color` alone was not enough: it tints the native box but cannot change its\n * border, so an INVALID checkbox had no way to say so, and the unchecked box kept the\n * browser's own grey outline in both themes.\n */\n\n// The box. 16px, like every raw checkbox it replaces, so a migration moves nothing.\n//\n// `focus-visible`, with an offset in the surface colour: a --brand ring touching a\n// --brand-filled (checked) box would be a ring painted in the colour it sits on —\n// present in the DOM and invisible on screen. The offset is what separates the two.\nconst BOX =\n  \"peer size-4 shrink-0 cursor-pointer appearance-none rounded-[4px] border border-[var(--border-strong)] bg-[var(--bg-surface)] shadow-sm transition-colors \" +\n  \"checked:border-[var(--brand)] checked:bg-[var(--brand)] \" +\n  \"focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)] \" +\n  \"disabled:cursor-not-allowed\";\n\n// A mixed box wears the checked fill whether or not the underlying input is checked:\n// `indeterminate` is a property the browser keeps separately from `checked`, and the\n// dash means \"some\", which is neither answer.\nconst BOX_MIXED = \"border-[var(--brand)] bg-[var(--brand)]\";\n\n// The same geometry as FIELD_INVALID — a border plus a 1px ring, so the highlight\n// survives fractional display scaling on every edge (see the note in ui.tsx). The\n// focus ring turns danger too, so focusing a wrong box does not repaint it as fine.\nconst BOX_INVALID =\n  \"border-[var(--danger-border)] ring-1 ring-[var(--danger-border)] checked:border-[var(--danger-border)] focus-visible:ring-[var(--danger)]\";\n\nconst ERROR_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--danger)]\";\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  /**\n   * The words beside the box. Rendered as a `<label for>` rather than a label that\n   * wraps the input, so `description` and `error` can sit under it without becoming\n   * part of the accessible NAME — a wrapping label would have the screen reader read\n   * the whole paragraph as the checkbox's name.\n   */\n  label?: ReactNode;\n  /** Secondary text under the label (\"Used when no account is chosen\"). Pointed at by\n   *  `aria-describedby`, merged with any the caller passed. Kastlan's\n   *  `CheckboxField` `description` variant. */\n  description?: ReactNode;\n  /**\n   * \"Some but not all\" — the header box of a list whose rows are partly selected.\n   * A DOM property with no HTML attribute, so it is set on the element after every\n   * render; it does not touch `checked`, and a click clears it (the browser's rule,\n   * and the caller's `onChange` decides what the click means).\n   */\n  indeterminate?: boolean;\n  /** See {@link Input}'s `invalid`: paints the box and sets `aria-invalid` together,\n   *  so the two cannot be spelled separately. */\n  invalid?: boolean;\n  /** What is wrong, in the caller's words (\"Accept the terms to continue\"). Rendered\n   *  under the label, attached with `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /** The checked state as a boolean — the `(next) => …` shape Lenkbank's\n   *  `CheckboxField` and Radix's `onCheckedChange` both used, so a migration does not\n   *  have to unwrap `event.target.checked` at every call site. Fires alongside\n   *  `onChange`, never instead of it. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>` itself. `className` styles the OUTERMOST element —\n   *  the row when there is a label, the box's own wrapper when there is not — which\n   *  is where layout (`self-end pb-2` to sit on a field's baseline) belongs. */\n  inputClassName?: string;\n  /**\n   * Must be ticked to submit — a consent, an acceptance before paying. Reaches the\n   * `<input>` as the native `required` (so a `<form>` refuses to submit without it and a\n   * screen reader announces \"required\"), and draws the kit's required mark after the\n   * label, the same `aria-hidden` star as {@link Label}'s: the word is announced from\n   * the control, so a star inside the name would only be read out as noise. Write the\n   * label WITHOUT a literal \"*\". No mark without a label.\n   */\n  required?: boolean;\n}\n\n/**\n * A native checkbox in the kit's tokens, with an optional label, description and\n * error.\n *\n * Without `label`, `description` or `error` it renders the box and nothing else, so\n * it drops into a table cell or a caller's own `<label>` exactly as the raw input\n * did — give it an `aria-label` there. Every other prop reaches the `<input>`\n * (`checked`, `defaultChecked`, `name`, `required`, `data-*`, `aria-*`), so it works\n * controlled, uncontrolled, and inside a plain `<form>`.\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    label,\n    description,\n    indeterminate = false,\n    invalid,\n    error,\n    onCheckedChange,\n    onChange,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    required,\n    ...rest\n  },\n  ref,\n) {\n  const generated = useId();\n  const inputId = id ?? generated;\n  const descriptionId = `${inputId}-description`;\n  const errorId = `${inputId}-error`;\n  const showError = hasMessage(error);\n  const showDescription = hasMessage(description);\n  const isInvalid = Boolean(invalid) || showError;\n  // Nothing to lay out beside the box: render the box alone, as the raw input was.\n  const bare = label === undefined && !showDescription && !showError;\n\n  const local = useRef<HTMLInputElement | null>(null);\n  const setRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      local.current = node;\n      assignRef(ref, node);\n    },\n    [ref],\n  );\n  // After EVERY render, not only when the prop changes: a click clears the property\n  // in the DOM, and a controlled caller that keeps `indeterminate` true expects the\n  // dash back on the next render even though the prop never changed.\n  useEffect(() => {\n    if (local.current) local.current.indeterminate = indeterminate;\n  });\n\n  const box = (\n    <span className={cn(\"relative inline-flex shrink-0\", bare && className)}>\n      <input\n        ref={setRef}\n        id={bare ? id : inputId}\n        disabled={disabled}\n        required={required}\n        {...rest}\n        // After the spread, like Switch: a props object spread at a checkbox must not\n        // be able to turn it into something else.\n        type=\"checkbox\"\n        // OR-ed with the spread so a caller's own `aria-invalid` survives — Input's rule.\n        aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n        aria-describedby={mergeDescribedBy(\n          rest[\"aria-describedby\"],\n          showDescription && descriptionId,\n          showError && errorId,\n        )}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          onChange?.(e);\n          onCheckedChange?.(e.target.checked);\n        }}\n        className={cn(BOX, indeterminate && BOX_MIXED, isInvalid && BOX_INVALID, inputClassName)}\n      />\n      {/* The glyph is drawn over the box, not inside it (an input has no children),\n          and ignores the pointer so a click on the tick still toggles the input. The\n          tick is shown by `peer-checked`, so an UNCONTROLLED box shows it too; the\n          dash replaces it outright while `indeterminate` holds. */}\n      {indeterminate ? (\n        <Minus\n          aria-hidden\n          strokeWidth={3}\n          className=\"pointer-events-none absolute inset-0 m-auto size-3 text-[var(--brand-contrast)]\"\n        />\n      ) : (\n        <Check\n          aria-hidden\n          strokeWidth={3}\n          className=\"pointer-events-none invisible absolute inset-0 m-auto size-3 text-[var(--brand-contrast)] peer-checked:visible\"\n        />\n      )}\n    </span>\n  );\n\n  if (bare) return box;\n\n  return (\n    <div\n      className={cn(\n        // `items-start` + a 20px cell for the box: the box centres on the label's FIRST\n        // line (text-sm is 20px tall), so a label that wraps keeps the box at the top\n        // rather than floating to the middle of a paragraph.\n        \"flex items-start gap-2\",\n        // The whole row fades, the way ToggleGroup and the fields do, so the label does\n        // not stay at full strength beside a box you cannot change.\n        disabled && \"opacity-60\",\n        className,\n      )}\n    >\n      <span className=\"flex h-5 shrink-0 items-center\">{box}</span>\n      <span className=\"min-w-0\">\n        {label !== undefined && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              \"block text-sm leading-5 text-[var(--text-primary)]\",\n              // `select-none`: a double-click to toggle twice would otherwise select the\n              // words, and a drag that starts on them starts a native text drag.\n              disabled ? \"cursor-not-allowed\" : \"cursor-pointer select-none\",\n            )}\n          >\n            {label}\n            {required && (\n              <span aria-hidden className=\"ms-0.5 text-[var(--danger)]\">\n                *\n              </span>\n            )}\n          </label>\n        )}\n        {showDescription && (\n          <span id={descriptionId} className=\"mt-0.5 block text-xs text-[var(--text-muted)]\">\n            {description}\n          </span>\n        )}\n        {showError && (\n          <span id={errorId} className={cn(\"block\", ERROR_CLASS)}>\n            {error}\n          </span>\n        )}\n      </span>\n    </div>\n  );\n});\nCheckbox.displayName = \"Checkbox\";\n"],"mappings":"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","names":["Checkbox"]}
+{"version":3,"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useId, useRef } from \"react\";\nimport { Check, Minus } from \"lucide-react\";\nimport type { ChangeEvent, InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { assignRef, hasMessage, mergeDescribedBy } from \"./choice-parts\";\n\n/**\n * A checkbox that is still `<input type=\"checkbox\">`.\n *\n * The three consuming apps had three answers: ~30 raw inputs in Keksdose leaning on\n * `tokens.css`'s `accent-color`, a label-plus-box `CheckboxField` in Lenkbank, and a\n * Radix `<button role=\"checkbox\">` in Kastlan. The native element is the one that\n * needs no ARIA to be a checkbox — it submits with its form, answers to `required`,\n * resets with the form and takes a `<label for>` click — so it stays underneath, and\n * only its paint is replaced (`appearance-none`, a token-coloured box, and a glyph\n * laid over it that ignores the pointer so the click still lands on the input).\n *\n * `accent-color` alone was not enough: it tints the native box but cannot change its\n * border, so an INVALID checkbox had no way to say so, and the unchecked box kept the\n * browser's own grey outline in both themes.\n */\n\n// The box. 16px, like every raw checkbox it replaces, so a migration moves nothing.\n//\n// `focus-visible`, with an offset in the surface colour: a --brand ring touching a\n// --brand-filled (checked) box would be a ring painted in the colour it sits on —\n// present in the DOM and invisible on screen. The offset is what separates the two.\nconst BOX =\n  \"peer size-4 shrink-0 cursor-pointer appearance-none rounded-[4px] border border-[var(--border-strong)] bg-[var(--bg-surface)] shadow-sm transition-colors \" +\n  \"checked:border-[var(--brand)] checked:bg-[var(--brand)] \" +\n  \"focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)] \" +\n  \"disabled:cursor-not-allowed\";\n\n// A mixed box wears the checked fill whether or not the underlying input is checked:\n// `indeterminate` is a property the browser keeps separately from `checked`, and the\n// dash means \"some\", which is neither answer.\nconst BOX_MIXED = \"border-[var(--brand)] bg-[var(--brand)]\";\n\n// The same geometry as FIELD_INVALID — a border plus a 1px ring, so the highlight\n// survives fractional display scaling on every edge (see the note in ui.tsx). The\n// focus ring turns danger too, so focusing a wrong box does not repaint it as fine.\nconst BOX_INVALID =\n  \"border-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] checked:border-[var(--danger-border-strong)] focus-visible:ring-[var(--danger)]\";\n\nconst ERROR_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--danger)]\";\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  /**\n   * The words beside the box. Rendered as a `<label for>` rather than a label that\n   * wraps the input, so `description` and `error` can sit under it without becoming\n   * part of the accessible NAME — a wrapping label would have the screen reader read\n   * the whole paragraph as the checkbox's name.\n   */\n  label?: ReactNode;\n  /** Secondary text under the label (\"Used when no account is chosen\"). Pointed at by\n   *  `aria-describedby`, merged with any the caller passed. Kastlan's\n   *  `CheckboxField` `description` variant. */\n  description?: ReactNode;\n  /**\n   * \"Some but not all\" — the header box of a list whose rows are partly selected.\n   * A DOM property with no HTML attribute, so it is set on the element after every\n   * render; it does not touch `checked`, and a click clears it (the browser's rule,\n   * and the caller's `onChange` decides what the click means).\n   */\n  indeterminate?: boolean;\n  /** See {@link Input}'s `invalid`: paints the box and sets `aria-invalid` together,\n   *  so the two cannot be spelled separately. */\n  invalid?: boolean;\n  /** What is wrong, in the caller's words (\"Accept the terms to continue\"). Rendered\n   *  under the label, attached with `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /** The checked state as a boolean — the `(next) => …` shape Lenkbank's\n   *  `CheckboxField` and Radix's `onCheckedChange` both used, so a migration does not\n   *  have to unwrap `event.target.checked` at every call site. Fires alongside\n   *  `onChange`, never instead of it. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>` itself. `className` styles the OUTERMOST element —\n   *  the row when there is a label, the box's own wrapper when there is not — which\n   *  is where layout (`self-end pb-2` to sit on a field's baseline) belongs. */\n  inputClassName?: string;\n  /**\n   * Must be ticked to submit — a consent, an acceptance before paying. Reaches the\n   * `<input>` as the native `required` (so a `<form>` refuses to submit without it and a\n   * screen reader announces \"required\"), and draws the kit's required mark after the\n   * label, the same `aria-hidden` star as {@link Label}'s: the word is announced from\n   * the control, so a star inside the name would only be read out as noise. Write the\n   * label WITHOUT a literal \"*\". No mark without a label.\n   */\n  required?: boolean;\n}\n\n/**\n * A native checkbox in the kit's tokens, with an optional label, description and\n * error.\n *\n * Without `label`, `description` or `error` it renders the box and nothing else, so\n * it drops into a table cell or a caller's own `<label>` exactly as the raw input\n * did — give it an `aria-label` there. Every other prop reaches the `<input>`\n * (`checked`, `defaultChecked`, `name`, `required`, `data-*`, `aria-*`), so it works\n * controlled, uncontrolled, and inside a plain `<form>`.\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    label,\n    description,\n    indeterminate = false,\n    invalid,\n    error,\n    onCheckedChange,\n    onChange,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    required,\n    ...rest\n  },\n  ref,\n) {\n  const generated = useId();\n  const inputId = id ?? generated;\n  const descriptionId = `${inputId}-description`;\n  const errorId = `${inputId}-error`;\n  const showError = hasMessage(error);\n  const showDescription = hasMessage(description);\n  const isInvalid = Boolean(invalid) || showError;\n  // Nothing to lay out beside the box: render the box alone, as the raw input was.\n  const bare = label === undefined && !showDescription && !showError;\n\n  const local = useRef<HTMLInputElement | null>(null);\n  const setRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      local.current = node;\n      assignRef(ref, node);\n    },\n    [ref],\n  );\n  // After EVERY render, not only when the prop changes: a click clears the property\n  // in the DOM, and a controlled caller that keeps `indeterminate` true expects the\n  // dash back on the next render even though the prop never changed.\n  useEffect(() => {\n    if (local.current) local.current.indeterminate = indeterminate;\n  });\n\n  const box = (\n    <span className={cn(\"relative inline-flex shrink-0\", bare && className)}>\n      <input\n        ref={setRef}\n        id={bare ? id : inputId}\n        disabled={disabled}\n        required={required}\n        {...rest}\n        // After the spread, like Switch: a props object spread at a checkbox must not\n        // be able to turn it into something else.\n        type=\"checkbox\"\n        // OR-ed with the spread so a caller's own `aria-invalid` survives — Input's rule.\n        aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n        aria-describedby={mergeDescribedBy(\n          rest[\"aria-describedby\"],\n          showDescription && descriptionId,\n          showError && errorId,\n        )}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          onChange?.(e);\n          onCheckedChange?.(e.target.checked);\n        }}\n        className={cn(BOX, indeterminate && BOX_MIXED, isInvalid && BOX_INVALID, inputClassName)}\n      />\n      {/* The glyph is drawn over the box, not inside it (an input has no children),\n          and ignores the pointer so a click on the tick still toggles the input. The\n          tick is shown by `peer-checked`, so an UNCONTROLLED box shows it too; the\n          dash replaces it outright while `indeterminate` holds. */}\n      {indeterminate ? (\n        <Minus\n          aria-hidden\n          strokeWidth={3}\n          className=\"pointer-events-none absolute inset-0 m-auto size-3 text-[var(--brand-contrast)]\"\n        />\n      ) : (\n        <Check\n          aria-hidden\n          strokeWidth={3}\n          className=\"pointer-events-none invisible absolute inset-0 m-auto size-3 text-[var(--brand-contrast)] peer-checked:visible\"\n        />\n      )}\n    </span>\n  );\n\n  if (bare) return box;\n\n  return (\n    <div\n      className={cn(\n        // `items-start` + a 20px cell for the box: the box centres on the label's FIRST\n        // line (text-sm is 20px tall), so a label that wraps keeps the box at the top\n        // rather than floating to the middle of a paragraph.\n        \"flex items-start gap-2\",\n        // The whole row fades, the way ToggleGroup and the fields do, so the label does\n        // not stay at full strength beside a box you cannot change.\n        disabled && \"opacity-60\",\n        className,\n      )}\n    >\n      <span className=\"flex h-5 shrink-0 items-center\">{box}</span>\n      <span className=\"min-w-0\">\n        {label !== undefined && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              \"block text-sm leading-5 text-[var(--text-primary)]\",\n              // `select-none`: a double-click to toggle twice would otherwise select the\n              // words, and a drag that starts on them starts a native text drag.\n              disabled ? \"cursor-not-allowed\" : \"cursor-pointer select-none\",\n            )}\n          >\n            {label}\n            {required && (\n              <span aria-hidden className=\"ms-0.5 text-[var(--danger)]\">\n                *\n              </span>\n            )}\n          </label>\n        )}\n        {showDescription && (\n          <span id={descriptionId} className=\"mt-0.5 block text-xs text-[var(--text-muted)]\">\n            {description}\n          </span>\n        )}\n        {showError && (\n          <span id={errorId} className={cn(\"block\", ERROR_CLASS)}>\n            {error}\n          </span>\n        )}\n      </span>\n    </div>\n  );\n});\nCheckbox.displayName = \"Checkbox\";\n"],"mappings":"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","names":["Checkbox"]}

package/dist/components/chip.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, KeyboardEvent, Ref, MouseEvent, ReactElement, ComponentPropsWithoutRef } from 'react';
+import { ReactNode, ReactElement, KeyboardEvent, Ref, MouseEvent, ComponentPropsWithoutRef } from 'react';
 import { LucideIcon } from 'lucide-react';
 
 /**
@@ -91,7 +91,13 @@ interface ChipBaseProps {
      * drawn, so write it in normal case.
      */
     caps?: boolean;
-    icon?: LucideIcon;
+    /**
+     * The leading glyph: a lucide component (`icon={Check}`, drawn at the chip's size), or
+     * — since 0.15.4 — a ready element (`icon={<Check className="text-[var(--success)]" />}`)
+     * for a glyph whose colour or stroke carries a state; it is sized to the same box
+     * (keksdose live #358 built that slot by hand inside `children`).
+     */
+    icon?: LucideIcon | ReactElement;
     /**
      * Marks the chip as the current one — `aria-current` on a link, `aria-pressed` on a
      * toggle.

package/dist/components/chip.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, useRef, useState } from "react";
+import { forwardRef, isValidElement, useId, useRef, useState } from "react";
 import { Check, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { horizontalStep } from "../lib/direction.js";
@@ -225,8 +225,17 @@ const Chip = forwardRef(function Chip2({
       }
     ),
     dot && /* @__PURE__ */ jsx("span", { "aria-hidden": true, "data-chip-dot": "", className: cn("shrink-0 rounded-full", DOT_SIZE[size], DOT[tone]) }),
-    Icon && /* @__PURE__ */ jsx(Icon, { className: cn(s.icon, "shrink-0"), "aria-hidden": true }),
-    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children })
+    Icon && (isValidElement(Icon) ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(s.icon, "inline-flex shrink-0 [&>svg]:size-full"), children: Icon }) : /* @__PURE__ */ jsx(Icon, { className: cn(s.icon, "shrink-0"), "aria-hidden": true })),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "min-w-0",
+          typeof children === "string" || typeof children === "number" ? "truncate" : "inline-flex items-center gap-1 [&>svg]:size-[1em] [&>svg]:shrink-0"
+        ),
+        children
+      }
+    )
   ] });
   const remove = onRemove ? /* @__PURE__ */ jsx(
     "button",