@eifi1/ui-kit 0.51.3 → 0.51.5

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\";\nimport { TYPOGRAPHIC_MINUS } from \"../lib/minus\";\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-muted\",\n          \"[&_.recharts-cartesian-grid_line]:stroke-subtle/70\",\n          // hairline hover cursor instead of the heavy default\n          \"[&_.recharts-curve.recharts-tooltip-cursor]:stroke-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 ?? \"var(--text-muted)\";\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    // The bare number's minus is U+2212, as every kit figure's (0.49, KIT-1).\n    else text = valueFormatter ? valueFormatter(raw) : String(raw).replace(/-/g, TYPOGRAPHIC_MINUS);\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-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-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-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-subtle 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-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 ?? \"var(--text-muted)\";\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-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 { Legend as RechartsLegend, ResponsiveContainer, Tooltip as RechartsTooltip } from \"recharts\";\nimport { cn } from \"../lib/cn\";\nimport { isRtl } from \"../lib/direction\";\nimport { TYPOGRAPHIC_MINUS } from \"../lib/minus\";\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-muted\",\n          \"[&_.recharts-cartesian-grid_line]:stroke-subtle/70\",\n          // hairline hover cursor instead of the heavy default\n          \"[&_.recharts-curve.recharts-tooltip-cursor]:stroke-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 = /^(?:#[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.map(([key, c]) => `  --color-${key}: ${c.color};`).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 ?? \"var(--text-muted)\";\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    // The bare number's minus is U+2212, as every kit figure's (0.49, KIT-1).\n    else text = valueFormatter ? valueFormatter(raw) : String(raw).replace(/-/g, TYPOGRAPHIC_MINUS);\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(\"shrink-0 rounded-[2px]\", indicator === \"dot\" ? \"h-2.5 w-2.5 rounded-full\" : \"h-2.5 w-1\")}\n          style={{ backgroundColor: color }}\n        />\n        <span className={cn(\"min-w-0 text-muted\", inRow ? \"truncate\" : \"break-words\")}>{name}</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-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-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-subtle 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-primary\">{labelFormatter ? labelFormatter(label) : label}</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({ payload, onItemClick, hiddenKeys, activeKey }: 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 ?? \"var(--text-muted)\";\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-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={hidden ? !off : activeKey === undefined ? undefined : activeKey === cfgKey}\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-group.js

@@ -88,10 +88,7 @@ function CheckboxGroup({
         /* @__PURE__ */ jsx(RequiredStarOnLegend.Provider, { value: true, children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(
-              layout === "horizontal" ? "flex flex-wrap gap-x-4 gap-y-2" : COLUMNS[columns],
-              listClassName
-            ),
+            className: cn(layout === "horizontal" ? "flex flex-wrap gap-x-4 gap-y-2" : COLUMNS[columns], listClassName),
             children: options.map((o) => /* @__PURE__ */ jsx(
               Checkbox,
               {

package/dist/components/checkbox-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/checkbox-group.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Checkbox } from \"./checkbox\";\nimport { hasContent } from \"../lib/presence\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport {\n  FIELD_ERROR_CLASS,\n  fieldHelpMark,\n  mergeDescribedBy,\n  RequiredStarOnLegend,\n  useInlineHint,\n  type FieldHelpProps,\n} from \"./field-parts\";\n\n/** One box of a {@link CheckboxGroup}. */\nexport interface CheckboxGroupOption<T extends string = string> {\n  value: T;\n  /** The words beside the box — its accessible name. */\n  label: ReactNode;\n  /** A line under the label (\"Imprint, Privacy Policy and Terms only\"), attached to the\n   *  box with `aria-describedby` — {@link Checkbox}'s `description`. */\n  hint?: ReactNode;\n  /** This box cannot be changed; the others can. */\n  disabled?: boolean;\n}\n\n/** Whether the legend is drawn. `\"sr-only\"` keeps it as the group's name for a screen\n *  reader where the dialog's title already says it to the eye. */\nexport type CheckboxGroupLegendVisibility = \"visible\" | \"sr-only\";\n\nexport interface CheckboxGroupProps<T extends string = string> extends FieldHelpProps {\n  /** The question the boxes answer — the fieldset's `<legend>`, which names the group.\n   *  Without one, pass `aria-label`. */\n  legend?: ReactNode;\n  /** Default `\"visible\"`. */\n  legendVisibility?: CheckboxGroupLegendVisibility;\n  \"aria-label\"?: string;\n  /** One box per option, in this order. */\n  options: CheckboxGroupOption<T>[];\n  /** The ticked values. Controlled. */\n  value: T[];\n  /**\n   * The new set on every tick. In the ORDER OF `options`, not the order the boxes were\n   * ticked, so a list saved from it does not change with the order someone clicked in\n   * (ChoiceCardGroup's rule). A value in `value` that no option carries — a grant for a\n   * locale the app no longer offers — is kept, after the known ones: a picker that\n   * dropped what it could not show would delete it on the next unrelated tick.\n   */\n  onChange: (value: T[]) => void;\n  /**\n   * `\"vertical\"` (default): one box per line. `\"horizontal\"`: a wrapping row, for a few\n   * short labels. With `columns`, vertical becomes a grid of that many columns from the\n   * `sm` breakpoint up and stays one column on a phone — the reviewer dialog's shape.\n   */\n  layout?: \"vertical\" | \"horizontal\";\n  /** Columns for a vertical group, from `sm` up (one on a phone). Default 1. */\n  columns?: 1 | 2 | 3 | 4;\n  /** Shared by every box — what a plain form submits the values under. */\n  name?: string;\n  /** Every box: the fieldset's own `disabled` (which disables them all natively), each\n   *  box faded as a disabled Checkbox is, and the legend with them. */\n  disabled?: boolean;\n  /**\n   * At least one box must be ticked. Draws the required star after the legend, and puts\n   * the native `required` on every box while NONE is ticked — so a form refuses an\n   * empty set — and on none once one is (ChoiceCardGroup's rule: checkboxes cannot say\n   * \"at least one\" natively).\n   */\n  required?: boolean;\n  /**\n   * Standing advice for the group, under the boxes, attached to the fieldset with\n   * `aria-describedby` before the error — the field anatomy every kit field keeps.\n   * A `help` beside it (0.36) is a \"?\" after the legend — with a visible legend only —\n   * and names nothing: the fieldset is then named by the legend's words alone.\n   */\n  hint?: ReactNode;\n  /** What is wrong with the set, in the caller's words. Under the boxes, on the\n   *  fieldset's `aria-describedby`, and paints every box invalid. */\n  error?: ReactNode;\n  /** Paints every box invalid without a message (the message lives elsewhere). */\n  invalid?: boolean;\n  /**\n   * The group SAVES on change — each tick is written straight away (a reviewer's\n   * per-locale grants). Under a locked {@link WriteLockProvider} every box is locked\n   * the focusable way with the lock's reason. See {@link Checkbox}'s `commit`.\n   */\n  commit?: CommitScope;\n  /** Why no box can be changed — every box gets it, and it wins over `disabled` (the\n   *  boxes stay focusable to say it). See {@link Checkbox}'s `disabledReason`. */\n  disabledReason?: ReactNode;\n  /** The fieldset's id. */\n  id?: string;\n  /** Classes for the fieldset — the outermost element, where layout belongs. */\n  className?: string;\n  /** Classes for the box list (the grid or the row). */\n  listClassName?: string;\n  /** Ids of something else on the page that describes the group; merged before the\n   *  group's own hint and error. */\n  \"aria-describedby\"?: string;\n}\n\n// Literal class strings so Tailwind's scanner sees each one.\nconst COLUMNS: Record<NonNullable<CheckboxGroupProps[\"columns\"]>, string> = {\n  1: \"flex flex-col gap-2\",\n  2: \"grid grid-cols-1 gap-2 sm:grid-cols-2\",\n  3: \"grid grid-cols-1 gap-2 sm:grid-cols-3\",\n  4: \"grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-4\",\n};\n\n/**\n * A set of kit {@link Checkbox}es answering one question, in a `<fieldset>`.\n *\n * Kurvenschmiede's reviewer dialog (features/admin/reviewer-dialog.tsx) builds this by\n * hand — a fieldset, an `sr-only` legend, a grid of checkboxes, a `toggle(code, on)`\n * that adds or filters a `string[]` — and keksdose's and kastlan's reviewer grants build\n * the same picker for the same per-locale grant. The hand-built ones differ in the parts\n * that are easy to get wrong: whether the legend names the group, whether a hint or an\n * error is attached to anything, what order the saved list comes out in, and whether a\n * value the picker cannot show survives a tick.\n *\n * Every box is a kit {@link Checkbox}, so the native checkbox semantics stay (each box\n * submits under `name` in a plain form). The legend is the group's name; the hint and\n * error describe the fieldset. For a choice of ONE, use radios ({@link ChoiceCardGroup},\n * {@link ToggleGroup}).\n */\nexport function CheckboxGroup<T extends string = string>({\n  legend,\n  legendVisibility = \"visible\",\n  \"aria-label\": ariaLabel,\n  options,\n  value,\n  onChange,\n  layout = \"vertical\",\n  columns = 1,\n  name,\n  disabled,\n  required,\n  hint,\n  help,\n  error,\n  invalid,\n  commit,\n  disabledReason,\n  id,\n  className,\n  listClassName,\n  \"aria-describedby\": ariaDescribedBy,\n}: CheckboxGroupProps<T>) {\n  const generated = useId();\n  const hintId = `${generated}-hint`;\n  const errorId = `${generated}-error`;\n  // §4: a FieldHint under the group is its words at Large and on a touch screen, not a\n  // lone \"?\" (DUP-2, refactor audit 2026-10). A HelpPopover stays a \"?\".\n  // A `help` \"?\" after a VISIBLE legend (0.36): the label line a group has. Its FieldHint\n  // hint is then its words at every size, as everywhere a help stands beside one.\n  const helpMark = fieldHelpMark(legend !== undefined && legendVisibility === \"visible\" ? help : undefined, legend);\n  const legendTextId = `${generated}-legend`;\n  const shownHint = useInlineHint(hint, helpMark !== undefined);\n  const showHint = hasContent(shownHint);\n  const showError = hasContent(error);\n  const isInvalid = Boolean(invalid) || showError;\n  const ticked = new Set(value);\n  // Resolved here rather than per box: a reason has to keep the fieldset from being\n  // natively `disabled` too, or it would take every box out of the tab order — the\n  // thing a reason exists to prevent.\n  const reason = useCommitReason(commit, disabledReason);\n  const locked = hasContent(reason);\n\n  const toggle = (v: T, on: boolean) => {\n    const next = new Set(value);\n    if (on) next.add(v);\n    else next.delete(v);\n    const known = new Set(options.map((o) => o.value));\n    onChange([\n      ...options.map((o) => o.value).filter((x) => next.has(x)),\n      // Values no option carries, kept in their own order — see `onChange`.\n      ...value.filter((x) => !known.has(x)),\n    ]);\n  };\n\n  return (\n    <fieldset\n      id={id}\n      aria-label={ariaLabel}\n      // With a help \"?\" inside the legend, the legend's WORDS name the group: a legend\n      // names its fieldset by its whole content, the \"?\"'s \"About …\" included.\n      aria-labelledby={helpMark !== undefined && ariaLabel === undefined ? legendTextId : undefined}\n      aria-describedby={mergeDescribedBy(ariaDescribedBy, showHint && hintId, showError && errorId)}\n      disabled={disabled && !locked}\n      // `relative` holds an `sr-only` legend (sr-only-containment.test); `min-w-0`\n      // undoes a fieldset's `min-width: min-content`, which would otherwise push a long\n      // label past a phone's edge instead of wrapping it.\n      className={cn(\"relative m-0 min-w-0 border-0 p-0\", className)}\n    >\n      {legend !== undefined && (\n        <legend\n          className={\n            legendVisibility === \"sr-only\"\n              ? \"sr-only\"\n              : cn(\"mb-2 p-0 text-sm font-medium text-primary\", (disabled || locked) && \"opacity-60\")\n          }\n        >\n          {helpMark === undefined ? legend : <span id={legendTextId}>{legend}</span>}\n          {required && (\n            <span aria-hidden className=\"ms-0.5 text-danger\">\n              *\n            </span>\n          )}\n          {helpMark !== undefined && <span className=\"ms-1 inline-flex align-middle font-normal\">{helpMark}</span>}\n        </legend>\n      )}\n      <RequiredStarOnLegend.Provider value={true}>\n        <div\n          className={cn(\n            layout === \"horizontal\" ? \"flex flex-wrap gap-x-4 gap-y-2\" : COLUMNS[columns],\n            listClassName,\n          )}\n        >\n          {options.map((o) => (\n            <Checkbox\n              key={o.value}\n              name={name}\n              value={o.value}\n              label={o.label}\n              description={o.hint}\n              checked={ticked.has(o.value)}\n              onCheckedChange={(on) => toggle(o.value, on)}\n              disabled={disabled || o.disabled}\n              invalid={isInvalid || undefined}\n              required={required && value.length === 0 ? true : undefined}\n              disabledReason={reason}\n            />\n          ))}\n        </div>\n      </RequiredStarOnLegend.Provider>\n      {showHint && (\n        // A `div`, not a `p`: a hint may be a node with a link in it.\n        <div id={hintId} className=\"mt-1.5 text-caption leading-tight text-muted\">\n          {shownHint}\n        </div>\n      )}\n      {showError && (\n        <p id={errorId} className={FIELD_ERROR_CLASS}>\n          {error}\n        </p>\n      )}\n    </fieldset>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/checkbox-group.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Checkbox } from \"./checkbox\";\nimport { hasContent } from \"../lib/presence\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport {\n  FIELD_ERROR_CLASS,\n  fieldHelpMark,\n  mergeDescribedBy,\n  RequiredStarOnLegend,\n  useInlineHint,\n  type FieldHelpProps,\n} from \"./field-parts\";\n\n/** One box of a {@link CheckboxGroup}. */\nexport interface CheckboxGroupOption<T extends string = string> {\n  value: T;\n  /** The words beside the box — its accessible name. */\n  label: ReactNode;\n  /** A line under the label (\"Imprint, Privacy Policy and Terms only\"), attached to the\n   *  box with `aria-describedby` — {@link Checkbox}'s `description`. */\n  hint?: ReactNode;\n  /** This box cannot be changed; the others can. */\n  disabled?: boolean;\n}\n\n/** Whether the legend is drawn. `\"sr-only\"` keeps it as the group's name for a screen\n *  reader where the dialog's title already says it to the eye. */\nexport type CheckboxGroupLegendVisibility = \"visible\" | \"sr-only\";\n\nexport interface CheckboxGroupProps<T extends string = string> extends FieldHelpProps {\n  /** The question the boxes answer — the fieldset's `<legend>`, which names the group.\n   *  Without one, pass `aria-label`. */\n  legend?: ReactNode;\n  /** Default `\"visible\"`. */\n  legendVisibility?: CheckboxGroupLegendVisibility;\n  \"aria-label\"?: string;\n  /** One box per option, in this order. */\n  options: CheckboxGroupOption<T>[];\n  /** The ticked values. Controlled. */\n  value: T[];\n  /**\n   * The new set on every tick. In the ORDER OF `options`, not the order the boxes were\n   * ticked, so a list saved from it does not change with the order someone clicked in\n   * (ChoiceCardGroup's rule). A value in `value` that no option carries — a grant for a\n   * locale the app no longer offers — is kept, after the known ones: a picker that\n   * dropped what it could not show would delete it on the next unrelated tick.\n   */\n  onChange: (value: T[]) => void;\n  /**\n   * `\"vertical\"` (default): one box per line. `\"horizontal\"`: a wrapping row, for a few\n   * short labels. With `columns`, vertical becomes a grid of that many columns from the\n   * `sm` breakpoint up and stays one column on a phone — the reviewer dialog's shape.\n   */\n  layout?: \"vertical\" | \"horizontal\";\n  /** Columns for a vertical group, from `sm` up (one on a phone). Default 1. */\n  columns?: 1 | 2 | 3 | 4;\n  /** Shared by every box — what a plain form submits the values under. */\n  name?: string;\n  /** Every box: the fieldset's own `disabled` (which disables them all natively), each\n   *  box faded as a disabled Checkbox is, and the legend with them. */\n  disabled?: boolean;\n  /**\n   * At least one box must be ticked. Draws the required star after the legend, and puts\n   * the native `required` on every box while NONE is ticked — so a form refuses an\n   * empty set — and on none once one is (ChoiceCardGroup's rule: checkboxes cannot say\n   * \"at least one\" natively).\n   */\n  required?: boolean;\n  /**\n   * Standing advice for the group, under the boxes, attached to the fieldset with\n   * `aria-describedby` before the error — the field anatomy every kit field keeps.\n   * A `help` beside it (0.36) is a \"?\" after the legend — with a visible legend only —\n   * and names nothing: the fieldset is then named by the legend's words alone.\n   */\n  hint?: ReactNode;\n  /** What is wrong with the set, in the caller's words. Under the boxes, on the\n   *  fieldset's `aria-describedby`, and paints every box invalid. */\n  error?: ReactNode;\n  /** Paints every box invalid without a message (the message lives elsewhere). */\n  invalid?: boolean;\n  /**\n   * The group SAVES on change — each tick is written straight away (a reviewer's\n   * per-locale grants). Under a locked {@link WriteLockProvider} every box is locked\n   * the focusable way with the lock's reason. See {@link Checkbox}'s `commit`.\n   */\n  commit?: CommitScope;\n  /** Why no box can be changed — every box gets it, and it wins over `disabled` (the\n   *  boxes stay focusable to say it). See {@link Checkbox}'s `disabledReason`. */\n  disabledReason?: ReactNode;\n  /** The fieldset's id. */\n  id?: string;\n  /** Classes for the fieldset — the outermost element, where layout belongs. */\n  className?: string;\n  /** Classes for the box list (the grid or the row). */\n  listClassName?: string;\n  /** Ids of something else on the page that describes the group; merged before the\n   *  group's own hint and error. */\n  \"aria-describedby\"?: string;\n}\n\n// Literal class strings so Tailwind's scanner sees each one.\nconst COLUMNS: Record<NonNullable<CheckboxGroupProps[\"columns\"]>, string> = {\n  1: \"flex flex-col gap-2\",\n  2: \"grid grid-cols-1 gap-2 sm:grid-cols-2\",\n  3: \"grid grid-cols-1 gap-2 sm:grid-cols-3\",\n  4: \"grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-4\",\n};\n\n/**\n * A set of kit {@link Checkbox}es answering one question, in a `<fieldset>`.\n *\n * Kurvenschmiede's reviewer dialog (features/admin/reviewer-dialog.tsx) builds this by\n * hand — a fieldset, an `sr-only` legend, a grid of checkboxes, a `toggle(code, on)`\n * that adds or filters a `string[]` — and keksdose's and kastlan's reviewer grants build\n * the same picker for the same per-locale grant. The hand-built ones differ in the parts\n * that are easy to get wrong: whether the legend names the group, whether a hint or an\n * error is attached to anything, what order the saved list comes out in, and whether a\n * value the picker cannot show survives a tick.\n *\n * Every box is a kit {@link Checkbox}, so the native checkbox semantics stay (each box\n * submits under `name` in a plain form). The legend is the group's name; the hint and\n * error describe the fieldset. For a choice of ONE, use radios ({@link ChoiceCardGroup},\n * {@link ToggleGroup}).\n */\nexport function CheckboxGroup<T extends string = string>({\n  legend,\n  legendVisibility = \"visible\",\n  \"aria-label\": ariaLabel,\n  options,\n  value,\n  onChange,\n  layout = \"vertical\",\n  columns = 1,\n  name,\n  disabled,\n  required,\n  hint,\n  help,\n  error,\n  invalid,\n  commit,\n  disabledReason,\n  id,\n  className,\n  listClassName,\n  \"aria-describedby\": ariaDescribedBy,\n}: CheckboxGroupProps<T>) {\n  const generated = useId();\n  const hintId = `${generated}-hint`;\n  const errorId = `${generated}-error`;\n  // §4: a FieldHint under the group is its words at Large and on a touch screen, not a\n  // lone \"?\" (DUP-2, refactor audit 2026-10). A HelpPopover stays a \"?\".\n  // A `help` \"?\" after a VISIBLE legend (0.36): the label line a group has. Its FieldHint\n  // hint is then its words at every size, as everywhere a help stands beside one.\n  const helpMark = fieldHelpMark(legend !== undefined && legendVisibility === \"visible\" ? help : undefined, legend);\n  const legendTextId = `${generated}-legend`;\n  const shownHint = useInlineHint(hint, helpMark !== undefined);\n  const showHint = hasContent(shownHint);\n  const showError = hasContent(error);\n  const isInvalid = Boolean(invalid) || showError;\n  const ticked = new Set(value);\n  // Resolved here rather than per box: a reason has to keep the fieldset from being\n  // natively `disabled` too, or it would take every box out of the tab order — the\n  // thing a reason exists to prevent.\n  const reason = useCommitReason(commit, disabledReason);\n  const locked = hasContent(reason);\n\n  const toggle = (v: T, on: boolean) => {\n    const next = new Set(value);\n    if (on) next.add(v);\n    else next.delete(v);\n    const known = new Set(options.map((o) => o.value));\n    onChange([\n      ...options.map((o) => o.value).filter((x) => next.has(x)),\n      // Values no option carries, kept in their own order — see `onChange`.\n      ...value.filter((x) => !known.has(x)),\n    ]);\n  };\n\n  return (\n    <fieldset\n      id={id}\n      aria-label={ariaLabel}\n      // With a help \"?\" inside the legend, the legend's WORDS name the group: a legend\n      // names its fieldset by its whole content, the \"?\"'s \"About …\" included.\n      aria-labelledby={helpMark !== undefined && ariaLabel === undefined ? legendTextId : undefined}\n      aria-describedby={mergeDescribedBy(ariaDescribedBy, showHint && hintId, showError && errorId)}\n      disabled={disabled && !locked}\n      // `relative` holds an `sr-only` legend (sr-only-containment.test); `min-w-0`\n      // undoes a fieldset's `min-width: min-content`, which would otherwise push a long\n      // label past a phone's edge instead of wrapping it.\n      className={cn(\"relative m-0 min-w-0 border-0 p-0\", className)}\n    >\n      {legend !== undefined && (\n        <legend\n          className={\n            legendVisibility === \"sr-only\"\n              ? \"sr-only\"\n              : cn(\"mb-2 p-0 text-sm font-medium text-primary\", (disabled || locked) && \"opacity-60\")\n          }\n        >\n          {helpMark === undefined ? legend : <span id={legendTextId}>{legend}</span>}\n          {required && (\n            <span aria-hidden className=\"ms-0.5 text-danger\">\n              *\n            </span>\n          )}\n          {helpMark !== undefined && <span className=\"ms-1 inline-flex align-middle font-normal\">{helpMark}</span>}\n        </legend>\n      )}\n      <RequiredStarOnLegend.Provider value={true}>\n        <div\n          className={cn(layout === \"horizontal\" ? \"flex flex-wrap gap-x-4 gap-y-2\" : COLUMNS[columns], listClassName)}\n        >\n          {options.map((o) => (\n            <Checkbox\n              key={o.value}\n              name={name}\n              value={o.value}\n              label={o.label}\n              description={o.hint}\n              checked={ticked.has(o.value)}\n              onCheckedChange={(on) => toggle(o.value, on)}\n              disabled={disabled || o.disabled}\n              invalid={isInvalid || undefined}\n              required={required && value.length === 0 ? true : undefined}\n              disabledReason={reason}\n            />\n          ))}\n        </div>\n      </RequiredStarOnLegend.Provider>\n      {showHint && (\n        // A `div`, not a `p`: a hint may be a node with a link in it.\n        <div id={hintId} className=\"mt-1.5 text-caption leading-tight text-muted\">\n          {shownHint}\n        </div>\n      )}\n      {showError && (\n        <p id={errorId} className={FIELD_ERROR_CLASS}>\n          {error}\n        </p>\n      )}\n    </fieldset>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/chip-input.js

@@ -201,7 +201,10 @@ function ChipInput({
                 "aria-label": label ? void 0 : ariaLabelAttr,
                 "aria-describedby": describedBy || void 0,
                 "aria-invalid": isInvalid || !!rejected || void 0,
-                className: cn("w-0 min-w-[6rem] flex-1 bg-transparent py-0.5 text-sm text-primary outline-none placeholder:text-placeholder disabled:cursor-default", FIELD_TOUCH_TEXT)
+                className: cn(
+                  "w-0 min-w-[6rem] flex-1 bg-transparent py-0.5 text-sm text-primary outline-none placeholder:text-placeholder disabled:cursor-default",
+                  FIELD_TOUCH_TEXT
+                )
               }
             ),
             /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", "aria-atomic": true, className: "sr-only-fixed", children: message })

package/dist/components/chip-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/chip-input.tsx"],"sourcesContent":["// A field whose value is a list, entered as chips. Moved out of chip.tsx as it was\n// (MOD-9, refactor audit 2026-10). It renders `Chip`, so chip.tsx re-exports only its\n// TYPES: re-exporting `ChipInput` itself would make chip ⇄ chip-input a runtime cycle\n// (check:graph, import-x/no-cycle). The barrel exports this module.\nimport { useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { isImeEnter } from \"../lib/ime\";\nimport { claimEscape } from \"../hooks/use-dismiss\";\nimport { FIELD_INVALID, FIELD_TOUCH_TEXT } from \"./field-base\";\nimport { FIELD_ERROR_CLASS, mergeRefs } from \"./field-parts\";\nimport { useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_CHIP_INPUT_LABELS } from \"./chip-labels\";\nimport { Chip, type ChipSize, type ChipTone } from \"./chip\";\n\n/* ── ChipInput ────────────────────────────────────────────────────────────── */\n\nexport interface ChipInputLabels {\n  /** Announced after a value is added. Receives the value. */\n  added: (value: string) => string;\n  /** Announced after a value is removed. Receives the value. */\n  removed: (value: string) => string;\n  /** Accessible name for each chip's dismiss button. */\n  remove: string;\n  /** Shown when `max` is reached. Receives the limit. */\n  atLimit: (max: number) => string;\n  /** Shown when a duplicate is rejected. Receives the value. */\n  duplicate: (value: string) => string;\n}\n\n// Defined in ./chip-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_CHIP_INPUT_LABELS };\n\n/**\n * `onChange` is the field's own — the whole LIST, not a DOM event — so the wrapper\n * div's `onChange` is omitted rather than shadowed. `placeholder` is likewise this\n * component's, forwarded to the inner `<input>`; the div has none of its own.\n */\nexport interface ChipInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"placeholder\" | \"children\"> {\n  value: string[];\n  onChange: (next: string[]) => void;\n  placeholder?: string;\n  /** Visible label, rendered above the field: a ReactNode, as on every kit field (a\n   *  string until 0.34, refactor audit 2026-10, API-9). Without one, name the field with\n   *  `aria-label`. */\n  label?: ReactNode;\n  /** Reject or rewrite a value on commit. Return a string to reject WITH that message. */\n  validate?: (raw: string) => string | null;\n  /** Characters that commit the current text, besides Enter. Default: comma. */\n  separators?: string[];\n  allowDuplicates?: boolean;\n  max?: number;\n  tone?: ChipTone;\n  size?: ChipSize;\n  disabled?: boolean;\n  invalid?: boolean;\n  /** Error text. Wires `aria-describedby` and implies `invalid`. */\n  error?: ReactNode;\n  labels?: LabelOverride<ChipInputLabels>;\n  className?: string;\n  /** The `<input>` the next value is typed into — the element that takes focus, which\n   *  react-hook-form's focus-on-error calls `focus()` on (API-3, refactor audit 2026-10).\n   *  Not the wrapper, which takes the rest of the props. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * A field whose value is a LIST, entered as chips.\n *\n * The keyboard model is the whole component; the pills are the easy part. Per the WAI\n * pattern for a \"tag\" input:\n *\n *   Enter, or any separator  commit the typed text\n *   Backspace on empty text  move focus to the last chip (does NOT delete it)\n *   ← →  while on a chip     move between chips, in reading order (mirrored in RTL)\n *   Backspace / Delete       remove the focused chip, focus its neighbour\n *   Escape                   clear what is typed but keep the committed chips\n *   paste                    splits on the separators, so a pasted CSV becomes chips\n *\n * The Backspace-on-empty behaviour is the one worth arguing about. Deleting immediately\n * is more common and is a trap: it is a destructive action with no feedback on a key\n * people hit by reflex, and the value it destroys may have taken a while to type. Moving\n * focus first makes the second Backspace a deliberate one, and it is what lets a\n * keyboard user reach a chip at all.\n */\nexport function ChipInput({\n  value,\n  onChange,\n  placeholder,\n  label,\n  validate,\n  separators = [\",\"],\n  allowDuplicates = false,\n  max,\n  tone = \"neutral\",\n  size = \"md\",\n  disabled = false,\n  invalid = false,\n  error,\n  labels,\n  className,\n  \"aria-label\": ariaLabelAttr,\n  ref,\n  ...rest\n}: ChipInputProps) {\n  // `labels` over the provider's `chipInput` over English.\n  const text = useKitLabels(\"chipInput\", DEFAULT_CHIP_INPUT_LABELS, labels);\n  // A batch of pasted values is announced as one list, joined the way the language\n  // joins a list in a sentence (\"a, b and c added\") — hence the long conjunction,\n  // where a trigger's summary would use the narrow one.\n  const locale = useKitLocale();\n  const [draft, setDraft] = useState(\"\");\n  const [message, setMessage] = useState(\"\");\n  // The last refusal, shown under the field until the next edit. The live region alone\n  // told only a screen-reader user why Enter did nothing; everyone else saw the text\n  // simply stay put.\n  const [rejected, setRejected] = useState<string | null>(null);\n  const [focusedChip, setFocusedChip] = useState<number | null>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  // The field's own handle on its input (focus after a chip goes) and the caller's `ref`.\n  const setInput = useMemo(() => mergeRefs(inputRef, ref), [ref]);\n  const chipRefs = useRef<Array<HTMLElement | null>>([]);\n  const id = useId();\n  const listId = `${id}-list`;\n  const errorId = `${id}-error`;\n  const rejectedId = `${id}-rejected`;\n  const isInvalid = invalid || !!error;\n  const describedBy = [error ? errorId : null, rejected ? rejectedId : null]\n    .filter(Boolean)\n    .join(\" \");\n\n  const focusChip = (index: number | null) => {\n    setFocusedChip(index);\n    if (index === null) inputRef.current?.focus();\n    else chipRefs.current[index]?.focus();\n  };\n\n  /**\n   * Try to add every candidate, as ONE change.\n   *\n   * Batched rather than looped for a reason that bites immediately: `commit` closes over\n   * `value`, so calling it once per pasted item makes every call compute its result from\n   * the list as it was BEFORE the paste, and each `onChange` overwrites the last. A\n   * pasted \"one,two,three\" left only \"three\". Accumulating locally and emitting once is\n   * also the correct behaviour for an undo stack — a paste is one action.\n   */\n  const commitMany = (raws: string[]): { added: string[]; rejection: string | null } => {\n    const next = [...value];\n    const added: string[] = [];\n    let rejection: string | null = null;\n\n    for (const raw of raws) {\n      const candidate = raw.trim();\n      if (!candidate) continue;\n      if (max !== undefined && next.length >= max) {\n        rejection ??= text.atLimit(max);\n        break;\n      }\n      if (!allowDuplicates && next.includes(candidate)) {\n        rejection ??= text.duplicate(candidate);\n        continue;\n      }\n      const invalidReason = validate?.(candidate);\n      if (invalidReason) {\n        rejection ??= invalidReason;\n        continue;\n      }\n      next.push(candidate);\n      added.push(candidate);\n    }\n\n    if (added.length) onChange(next);\n    // A rejection is the more useful thing to say: \"three added\" is obvious from the\n    // chips appearing, whereas \"already in the list\" is the only sign of what did not.\n    const addedList = new Intl.ListFormat(locale, { type: \"conjunction\", style: \"long\" });\n    setMessage(rejection ?? (added.length ? text.added(addedList.format(added)) : \"\"));\n    setRejected(rejection);\n    return { added, rejection };\n  };\n\n  const commit = (raw: string): boolean => commitMany([raw]).added.length > 0;\n\n  const removeAt = (index: number) => {\n    const removed = value[index];\n    onChange(value.filter((_, i) => i !== index));\n    setMessage(text.removed(removed));\n    setRejected(null);\n    // Focus the neighbour that takes its place, or the input when the list empties —\n    // dropping focus to <body> here is how a keyboard user loses the field entirely.\n    const next = index >= value.length - 1 ? null : index;\n    requestAnimationFrame(() => focusChip(value.length - 1 === 0 ? null : next));\n  };\n\n  const onInputKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") {\n      // The Enter that confirms an IME composition is the IME's: it commits no chip\n      // and submits no form (BUG-9).\n      if (isImeEnter(e)) return;\n      // Only when there is something to commit: an empty Enter belongs to the form.\n      if (draft.trim()) {\n        e.preventDefault();\n        if (commit(draft)) setDraft(\"\");\n      }\n      return;\n    }\n    if (separators.includes(e.key)) {\n      e.preventDefault();\n      if (commit(draft)) setDraft(\"\");\n      return;\n    }\n    // Clearing the draft is this field's Escape, not a dialog's around it: claimed, so\n    // the dialog stays — the same in a Modal and a FullBleedDialog, which read it\n    // differently until 0.34 (Wave 2, DUP-1). With nothing typed the key goes on.\n    if (e.key === \"Escape\" && draft) {\n      claimEscape(e);\n      setDraft(\"\");\n      return;\n    }\n    if (e.key === \"Backspace\" && !draft && value.length) {\n      e.preventDefault();\n      focusChip(value.length - 1);\n    }\n  };\n\n  const onChipKeyDown = (e: KeyboardEvent<HTMLElement>, index: number) => {\n    if (e.key === \"Backspace\" || e.key === \"Delete\") {\n      e.preventDefault();\n      removeAt(index);\n      return;\n    }\n    // ←/→ follow the reading direction, not DOM order: in RTL the previous chip is to\n    // the RIGHT, and ArrowLeft moves on towards the input.\n    const step = horizontalStep(e.key, e.currentTarget);\n    if (step === -1 && index > 0) {\n      e.preventDefault();\n      focusChip(index - 1);\n      return;\n    }\n    if (step === 1) {\n      e.preventDefault();\n      focusChip(index === value.length - 1 ? null : index + 1);\n      return;\n    }\n    // Back to the input, a step inside the field: claimed like the draft's (DUP-1).\n    if (e.key === \"Escape\") {\n      claimEscape(e);\n      focusChip(null);\n    }\n  };\n\n  return (\n    // The rest lands on the OUTER box — the thing a `data-tour` step or a test id\n    // wants to point at — while the accessible name below goes on the `<input>`,\n    // because that is what a screen-reader user actually lands in. Spreading the two\n    // to the same element would have named a decorative wrapper and left the field\n    // anonymous.\n    <div {...rest} className={cn(\"space-y-1\", className)}>\n      {label && (\n        <label htmlFor={`${id}-input`} className=\"block text-sm text-secondary\">\n          {label}\n        </label>\n      )}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- a\n          pointer convenience that widens the input's hit area to the whole field; the\n          keyboard path is the <input> itself, which is in the tab order. */}\n      <div\n        // `relative` so the live region below can be `sr-only` without escaping to the\n        // initial containing block and inflating the document height.\n        className={cn(\n          \"relative flex flex-wrap items-center gap-1.5 rounded-md border border-subtle bg-surface px-2 py-1.5 shadow-sm\",\n          \"focus-within:border-brand focus-within:ring-1 focus-within:ring-brand\",\n          disabled && \"cursor-default bg-surface-2\",\n          isInvalid && FIELD_INVALID,\n        )}\n        onClick={() => !disabled && inputRef.current?.focus()}\n      >\n        {/* `display: contents` on the wrappers so the chips participate in the field's\n            own flex wrap rather than forming a nested row. The list semantics are\n            restored with explicit roles, because `contents` removes the ul/li boxes from\n            the accessibility tree in several engines. */}\n        {/* eslint-disable-next-line jsx-a11y/no-redundant-roles -- NOT redundant here: the\n            `contents` display below removes the ul and li boxes from the box tree, and\n            several engines drop the list semantics with them. The explicit role is what\n            puts \"list, 3 items\" back. */}\n        <ul id={listId} role=\"list\" className=\"contents\">\n          {value.map((v, i) => (\n            <li key={`${v}-${i}`} role=\"presentation\" className=\"contents\">\n              <Chip\n                ref={(el: HTMLElement | null) => {\n                  chipRefs.current[i] = el;\n                }}\n                tone={tone}\n                size={size}\n                disabled={disabled}\n                removeLabel={text.remove}\n                onRemove={disabled ? undefined : () => removeAt(i)}\n                // A ROVING tabIndex: only the focused chip is tabbable, so Tab leaves\n                // the field instead of walking through every value in it — the reason a\n                // list of twenty tags is otherwise a twenty-stop detour for a keyboard.\n                tabIndex={focusedChip === i ? 0 : -1}\n                role=\"listitem\"\n                aria-label={v}\n                onKeyDown={(e) => onChipKeyDown(e, i)}\n                onFocus={() => setFocusedChip(i)}\n                data-chip-index={i}\n              >\n                {v}\n              </Chip>\n            </li>\n          ))}\n        </ul>\n        <input\n          id={`${id}-input`}\n          ref={setInput}\n          value={draft}\n          onChange={(e) => {\n            setDraft(e.target.value);\n            setMessage(\"\");\n            setRejected(null);\n          }}\n          onKeyDown={onInputKeyDown}\n          onBlur={() => {\n            // Commit on blur: a value typed and then clicked away from is a value the\n            // user meant to add, and losing it silently is the commonest complaint\n            // about this pattern.\n            if (draft.trim() && commit(draft)) setDraft(\"\");\n          }}\n          onPaste={(e) => {\n            const pasted = e.clipboardData.getData(\"text\");\n            const pattern = new RegExp(`[${separators.map((s) => `\\\\${s}`).join(\"\")}\\n\\r]`);\n            if (!pattern.test(pasted)) return;\n            e.preventDefault();\n            if (commitMany(pasted.split(pattern)).added.length) setDraft(\"\");\n          }}\n          placeholder={value.length ? undefined : placeholder}\n          disabled={disabled}\n          // A visible `label` is already wired through `htmlFor`, so adding a name\n          // here would give the field two.\n          aria-label={label ? undefined : ariaLabelAttr}\n          aria-describedby={describedBy || undefined}\n          aria-invalid={isInvalid || !!rejected || undefined}\n          // `w-0` with flex-1: without a width the browser's default input size (20\n          // characters) became the field's minimum width and pushed it past a 240 px\n          // phone at 150 % (0.32's screenshot run).\n          className={cn(\"w-0 min-w-[6rem] flex-1 bg-transparent py-0.5 text-sm text-primary outline-none placeholder:text-placeholder disabled:cursor-default\", FIELD_TOUCH_TEXT)}\n        />\n        {/* Additions, removals and rejections move no focus, so nothing would announce\n            them. `sr-only-fixed` rather than `sr-only`: this sits inside a consumer's\n            markup and must not extend the document height. */}\n        <span role=\"status\" aria-live=\"polite\" aria-atomic className=\"sr-only-fixed\">\n          {message}\n        </span>\n      </div>\n      {/* Every field's error type (DUP-8: these were `text-xs`); the root's `space-y-1`\n          spaces them, so not the class's own `mt-1` as well. */}\n      {error && (\n        <p id={errorId} className={cn(FIELD_ERROR_CLASS, \"mt-0\")}>\n          {error}\n        </p>\n      )}\n      {rejected && (\n        <p id={rejectedId} className={cn(FIELD_ERROR_CLASS, \"mt-0\")} data-chip-input-rejected=\"\">\n          {rejected}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/chip-input.tsx"],"sourcesContent":["// A field whose value is a list, entered as chips. Moved out of chip.tsx as it was\n// (MOD-9, refactor audit 2026-10). It renders `Chip`, so chip.tsx re-exports only its\n// TYPES: re-exporting `ChipInput` itself would make chip ⇄ chip-input a runtime cycle\n// (check:graph, import-x/no-cycle). The barrel exports this module.\nimport { useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { isImeEnter } from \"../lib/ime\";\nimport { claimEscape } from \"../hooks/use-dismiss\";\nimport { FIELD_INVALID, FIELD_TOUCH_TEXT } from \"./field-base\";\nimport { FIELD_ERROR_CLASS, mergeRefs } from \"./field-parts\";\nimport { useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_CHIP_INPUT_LABELS } from \"./chip-labels\";\nimport { Chip, type ChipSize, type ChipTone } from \"./chip\";\n\n/* ── ChipInput ────────────────────────────────────────────────────────────── */\n\nexport interface ChipInputLabels {\n  /** Announced after a value is added. Receives the value. */\n  added: (value: string) => string;\n  /** Announced after a value is removed. Receives the value. */\n  removed: (value: string) => string;\n  /** Accessible name for each chip's dismiss button. */\n  remove: string;\n  /** Shown when `max` is reached. Receives the limit. */\n  atLimit: (max: number) => string;\n  /** Shown when a duplicate is rejected. Receives the value. */\n  duplicate: (value: string) => string;\n}\n\n// Defined in ./chip-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_CHIP_INPUT_LABELS };\n\n/**\n * `onChange` is the field's own — the whole LIST, not a DOM event — so the wrapper\n * div's `onChange` is omitted rather than shadowed. `placeholder` is likewise this\n * component's, forwarded to the inner `<input>`; the div has none of its own.\n */\nexport interface ChipInputProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"placeholder\" | \"children\"> {\n  value: string[];\n  onChange: (next: string[]) => void;\n  placeholder?: string;\n  /** Visible label, rendered above the field: a ReactNode, as on every kit field (a\n   *  string until 0.34, refactor audit 2026-10, API-9). Without one, name the field with\n   *  `aria-label`. */\n  label?: ReactNode;\n  /** Reject or rewrite a value on commit. Return a string to reject WITH that message. */\n  validate?: (raw: string) => string | null;\n  /** Characters that commit the current text, besides Enter. Default: comma. */\n  separators?: string[];\n  allowDuplicates?: boolean;\n  max?: number;\n  tone?: ChipTone;\n  size?: ChipSize;\n  disabled?: boolean;\n  invalid?: boolean;\n  /** Error text. Wires `aria-describedby` and implies `invalid`. */\n  error?: ReactNode;\n  labels?: LabelOverride<ChipInputLabels>;\n  className?: string;\n  /** The `<input>` the next value is typed into — the element that takes focus, which\n   *  react-hook-form's focus-on-error calls `focus()` on (API-3, refactor audit 2026-10).\n   *  Not the wrapper, which takes the rest of the props. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * A field whose value is a LIST, entered as chips.\n *\n * The keyboard model is the whole component; the pills are the easy part. Per the WAI\n * pattern for a \"tag\" input:\n *\n *   Enter, or any separator  commit the typed text\n *   Backspace on empty text  move focus to the last chip (does NOT delete it)\n *   ← →  while on a chip     move between chips, in reading order (mirrored in RTL)\n *   Backspace / Delete       remove the focused chip, focus its neighbour\n *   Escape                   clear what is typed but keep the committed chips\n *   paste                    splits on the separators, so a pasted CSV becomes chips\n *\n * The Backspace-on-empty behaviour is the one worth arguing about. Deleting immediately\n * is more common and is a trap: it is a destructive action with no feedback on a key\n * people hit by reflex, and the value it destroys may have taken a while to type. Moving\n * focus first makes the second Backspace a deliberate one, and it is what lets a\n * keyboard user reach a chip at all.\n */\nexport function ChipInput({\n  value,\n  onChange,\n  placeholder,\n  label,\n  validate,\n  separators = [\",\"],\n  allowDuplicates = false,\n  max,\n  tone = \"neutral\",\n  size = \"md\",\n  disabled = false,\n  invalid = false,\n  error,\n  labels,\n  className,\n  \"aria-label\": ariaLabelAttr,\n  ref,\n  ...rest\n}: ChipInputProps) {\n  // `labels` over the provider's `chipInput` over English.\n  const text = useKitLabels(\"chipInput\", DEFAULT_CHIP_INPUT_LABELS, labels);\n  // A batch of pasted values is announced as one list, joined the way the language\n  // joins a list in a sentence (\"a, b and c added\") — hence the long conjunction,\n  // where a trigger's summary would use the narrow one.\n  const locale = useKitLocale();\n  const [draft, setDraft] = useState(\"\");\n  const [message, setMessage] = useState(\"\");\n  // The last refusal, shown under the field until the next edit. The live region alone\n  // told only a screen-reader user why Enter did nothing; everyone else saw the text\n  // simply stay put.\n  const [rejected, setRejected] = useState<string | null>(null);\n  const [focusedChip, setFocusedChip] = useState<number | null>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  // The field's own handle on its input (focus after a chip goes) and the caller's `ref`.\n  const setInput = useMemo(() => mergeRefs(inputRef, ref), [ref]);\n  const chipRefs = useRef<Array<HTMLElement | null>>([]);\n  const id = useId();\n  const listId = `${id}-list`;\n  const errorId = `${id}-error`;\n  const rejectedId = `${id}-rejected`;\n  const isInvalid = invalid || !!error;\n  const describedBy = [error ? errorId : null, rejected ? rejectedId : null].filter(Boolean).join(\" \");\n\n  const focusChip = (index: number | null) => {\n    setFocusedChip(index);\n    if (index === null) inputRef.current?.focus();\n    else chipRefs.current[index]?.focus();\n  };\n\n  /**\n   * Try to add every candidate, as ONE change.\n   *\n   * Batched rather than looped for a reason that bites immediately: `commit` closes over\n   * `value`, so calling it once per pasted item makes every call compute its result from\n   * the list as it was BEFORE the paste, and each `onChange` overwrites the last. A\n   * pasted \"one,two,three\" left only \"three\". Accumulating locally and emitting once is\n   * also the correct behaviour for an undo stack — a paste is one action.\n   */\n  const commitMany = (raws: string[]): { added: string[]; rejection: string | null } => {\n    const next = [...value];\n    const added: string[] = [];\n    let rejection: string | null = null;\n\n    for (const raw of raws) {\n      const candidate = raw.trim();\n      if (!candidate) continue;\n      if (max !== undefined && next.length >= max) {\n        rejection ??= text.atLimit(max);\n        break;\n      }\n      if (!allowDuplicates && next.includes(candidate)) {\n        rejection ??= text.duplicate(candidate);\n        continue;\n      }\n      const invalidReason = validate?.(candidate);\n      if (invalidReason) {\n        rejection ??= invalidReason;\n        continue;\n      }\n      next.push(candidate);\n      added.push(candidate);\n    }\n\n    if (added.length) onChange(next);\n    // A rejection is the more useful thing to say: \"three added\" is obvious from the\n    // chips appearing, whereas \"already in the list\" is the only sign of what did not.\n    const addedList = new Intl.ListFormat(locale, { type: \"conjunction\", style: \"long\" });\n    setMessage(rejection ?? (added.length ? text.added(addedList.format(added)) : \"\"));\n    setRejected(rejection);\n    return { added, rejection };\n  };\n\n  const commit = (raw: string): boolean => commitMany([raw]).added.length > 0;\n\n  const removeAt = (index: number) => {\n    const removed = value[index];\n    onChange(value.filter((_, i) => i !== index));\n    setMessage(text.removed(removed));\n    setRejected(null);\n    // Focus the neighbour that takes its place, or the input when the list empties —\n    // dropping focus to <body> here is how a keyboard user loses the field entirely.\n    const next = index >= value.length - 1 ? null : index;\n    requestAnimationFrame(() => focusChip(value.length - 1 === 0 ? null : next));\n  };\n\n  const onInputKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") {\n      // The Enter that confirms an IME composition is the IME's: it commits no chip\n      // and submits no form (BUG-9).\n      if (isImeEnter(e)) return;\n      // Only when there is something to commit: an empty Enter belongs to the form.\n      if (draft.trim()) {\n        e.preventDefault();\n        if (commit(draft)) setDraft(\"\");\n      }\n      return;\n    }\n    if (separators.includes(e.key)) {\n      e.preventDefault();\n      if (commit(draft)) setDraft(\"\");\n      return;\n    }\n    // Clearing the draft is this field's Escape, not a dialog's around it: claimed, so\n    // the dialog stays — the same in a Modal and a FullBleedDialog, which read it\n    // differently until 0.34 (Wave 2, DUP-1). With nothing typed the key goes on.\n    if (e.key === \"Escape\" && draft) {\n      claimEscape(e);\n      setDraft(\"\");\n      return;\n    }\n    if (e.key === \"Backspace\" && !draft && value.length) {\n      e.preventDefault();\n      focusChip(value.length - 1);\n    }\n  };\n\n  const onChipKeyDown = (e: KeyboardEvent<HTMLElement>, index: number) => {\n    if (e.key === \"Backspace\" || e.key === \"Delete\") {\n      e.preventDefault();\n      removeAt(index);\n      return;\n    }\n    // ←/→ follow the reading direction, not DOM order: in RTL the previous chip is to\n    // the RIGHT, and ArrowLeft moves on towards the input.\n    const step = horizontalStep(e.key, e.currentTarget);\n    if (step === -1 && index > 0) {\n      e.preventDefault();\n      focusChip(index - 1);\n      return;\n    }\n    if (step === 1) {\n      e.preventDefault();\n      focusChip(index === value.length - 1 ? null : index + 1);\n      return;\n    }\n    // Back to the input, a step inside the field: claimed like the draft's (DUP-1).\n    if (e.key === \"Escape\") {\n      claimEscape(e);\n      focusChip(null);\n    }\n  };\n\n  return (\n    // The rest lands on the OUTER box — the thing a `data-tour` step or a test id\n    // wants to point at — while the accessible name below goes on the `<input>`,\n    // because that is what a screen-reader user actually lands in. Spreading the two\n    // to the same element would have named a decorative wrapper and left the field\n    // anonymous.\n    <div {...rest} className={cn(\"space-y-1\", className)}>\n      {label && (\n        <label htmlFor={`${id}-input`} className=\"block text-sm text-secondary\">\n          {label}\n        </label>\n      )}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- a\n          pointer convenience that widens the input's hit area to the whole field; the\n          keyboard path is the <input> itself, which is in the tab order. */}\n      <div\n        // `relative` so the live region below can be `sr-only` without escaping to the\n        // initial containing block and inflating the document height.\n        className={cn(\n          \"relative flex flex-wrap items-center gap-1.5 rounded-md border border-subtle bg-surface px-2 py-1.5 shadow-sm\",\n          \"focus-within:border-brand focus-within:ring-1 focus-within:ring-brand\",\n          disabled && \"cursor-default bg-surface-2\",\n          isInvalid && FIELD_INVALID,\n        )}\n        onClick={() => !disabled && inputRef.current?.focus()}\n      >\n        {/* `display: contents` on the wrappers so the chips participate in the field's\n            own flex wrap rather than forming a nested row. The list semantics are\n            restored with explicit roles, because `contents` removes the ul/li boxes from\n            the accessibility tree in several engines. */}\n        {/* eslint-disable-next-line jsx-a11y/no-redundant-roles -- NOT redundant here: the\n            `contents` display below removes the ul and li boxes from the box tree, and\n            several engines drop the list semantics with them. The explicit role is what\n            puts \"list, 3 items\" back. */}\n        <ul id={listId} role=\"list\" className=\"contents\">\n          {value.map((v, i) => (\n            <li key={`${v}-${i}`} role=\"presentation\" className=\"contents\">\n              <Chip\n                ref={(el: HTMLElement | null) => {\n                  chipRefs.current[i] = el;\n                }}\n                tone={tone}\n                size={size}\n                disabled={disabled}\n                removeLabel={text.remove}\n                onRemove={disabled ? undefined : () => removeAt(i)}\n                // A ROVING tabIndex: only the focused chip is tabbable, so Tab leaves\n                // the field instead of walking through every value in it — the reason a\n                // list of twenty tags is otherwise a twenty-stop detour for a keyboard.\n                tabIndex={focusedChip === i ? 0 : -1}\n                role=\"listitem\"\n                aria-label={v}\n                onKeyDown={(e) => onChipKeyDown(e, i)}\n                onFocus={() => setFocusedChip(i)}\n                data-chip-index={i}\n              >\n                {v}\n              </Chip>\n            </li>\n          ))}\n        </ul>\n        <input\n          id={`${id}-input`}\n          ref={setInput}\n          value={draft}\n          onChange={(e) => {\n            setDraft(e.target.value);\n            setMessage(\"\");\n            setRejected(null);\n          }}\n          onKeyDown={onInputKeyDown}\n          onBlur={() => {\n            // Commit on blur: a value typed and then clicked away from is a value the\n            // user meant to add, and losing it silently is the commonest complaint\n            // about this pattern.\n            if (draft.trim() && commit(draft)) setDraft(\"\");\n          }}\n          onPaste={(e) => {\n            const pasted = e.clipboardData.getData(\"text\");\n            const pattern = new RegExp(`[${separators.map((s) => `\\\\${s}`).join(\"\")}\\n\\r]`);\n            if (!pattern.test(pasted)) return;\n            e.preventDefault();\n            if (commitMany(pasted.split(pattern)).added.length) setDraft(\"\");\n          }}\n          placeholder={value.length ? undefined : placeholder}\n          disabled={disabled}\n          // A visible `label` is already wired through `htmlFor`, so adding a name\n          // here would give the field two.\n          aria-label={label ? undefined : ariaLabelAttr}\n          aria-describedby={describedBy || undefined}\n          aria-invalid={isInvalid || !!rejected || undefined}\n          // `w-0` with flex-1: without a width the browser's default input size (20\n          // characters) became the field's minimum width and pushed it past a 240 px\n          // phone at 150 % (0.32's screenshot run).\n          className={cn(\n            \"w-0 min-w-[6rem] flex-1 bg-transparent py-0.5 text-sm text-primary outline-none placeholder:text-placeholder disabled:cursor-default\",\n            FIELD_TOUCH_TEXT,\n          )}\n        />\n        {/* Additions, removals and rejections move no focus, so nothing would announce\n            them. `sr-only-fixed` rather than `sr-only`: this sits inside a consumer's\n            markup and must not extend the document height. */}\n        <span role=\"status\" aria-live=\"polite\" aria-atomic className=\"sr-only-fixed\">\n          {message}\n        </span>\n      </div>\n      {/* Every field's error type (DUP-8: these were `text-xs`); the root's `space-y-1`\n          spaces them, so not the class's own `mt-1` as well. */}\n      {error && (\n        <p id={errorId} className={cn(FIELD_ERROR_CLASS, \"mt-0\")}>\n          {error}\n        </p>\n      )}\n      {rejected && (\n        <p id={rejectedId} className={cn(FIELD_ERROR_CLASS, \"mt-0\")} data-chip-input-rejected=\"\">\n          {rejected}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/chip.js

@@ -313,7 +313,15 @@ function Chip({
     {
       ref: snap ? snapRef : void 0,
       "data-tone": tone,
-      className: cn(CHIP_PILL, s.tail, radius, surface, target && CHIP_TOUCH_LARGE, snap && "justify-center", className),
+      className: cn(
+        CHIP_PILL,
+        s.tail,
+        radius,
+        surface,
+        target && CHIP_TOUCH_LARGE,
+        snap && "justify-center",
+        className
+      ),
       children: [
         inner2,
         remove
@@ -416,10 +424,7 @@ function Chip({
     )
   );
 }
-function RenderedLink({
-  render,
-  ...props
-}) {
+function RenderedLink({ render, ...props }) {
   return render(props);
 }
 export {