@eifi1/ui-kit 0.33.0 → 0.34.0

package/src/components/chart.tsx

@@ -73,10 +73,10 @@ export function ChartContainer({ id, className, children, config, ...props }: Ch
           "[&_.recharts-surface]:[direction:ltr]",
           // muted axis labels + gridlines; one class each, since the tokens
           // already carry the light/dark values
-          "[&_.recharts-cartesian-axis-tick_text]:fill-[var(--text-muted)]",
-          "[&_.recharts-cartesian-grid_line]:stroke-[var(--border)]/70",
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted",
+          "[&_.recharts-cartesian-grid_line]:stroke-subtle/70",
           // hairline hover cursor instead of the heavy default
-          "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-[var(--border-strong)]",
+          "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-strong",
           "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-[var(--bg-hover)]",
           // kill the focus outlines & white sector strokes Recharts adds
           "[&_.recharts-sector]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent",
@@ -367,7 +367,7 @@ export function ChartTooltipContent({
     // or a bar with a per-cell colour, IS the colour the reader is pointing at,
     // while `item.color` is the series-wide one — every tile's swatch came out
     // `--chart-1` whatever colour the tile was.
-    const color = paintedColor(cfgKey, series) ?? fill ?? item.color ?? "#64748b";
+    const color = paintedColor(cfgKey, series) ?? fill ?? item.color ?? "var(--text-muted)";
     const name = series?.label ?? nm ?? cfgKey;
     const raw = tooltipValue(item.value);
     let text: ReactNode;
@@ -392,7 +392,7 @@ export function ChartTooltipContent({
           style={{ backgroundColor: color }}
         />
         <span
-          className={cn("min-w-0 text-[var(--text-muted)]", inRow ? "truncate" : "break-words")}
+          className={cn("min-w-0 text-muted", inRow ? "truncate" : "break-words")}
         >
           {name}
         </span>
@@ -401,7 +401,7 @@ export function ChartTooltipContent({
           // Isolated, so an RTL page does not turn "-26.6" into "26.6-": a figure has no
           // strong direction of its own, and one formatted with an RTL mark keeps it.
           dir="auto"
-          className="ms-auto shrink-0 whitespace-nowrap font-mono font-medium tabular-nums text-[var(--text-primary)]"
+          className="ms-auto shrink-0 whitespace-nowrap font-mono font-medium tabular-nums text-primary"
         >
           {text}
         </span>
@@ -419,7 +419,7 @@ export function ChartTooltipContent({
       <div className="text-xs" data-chart-readout={shown ? "active" : "idle"}>
         {/* A full 24 px line: the zoom's reset button sits at the top corner of a chart
             whose row is above it, and has to fit beside the heading, not over a value. */}
-        <div data-readout-heading className="truncate font-medium leading-6 text-[var(--text-primary)]">
+        <div data-readout-heading className="truncate font-medium leading-6 text-primary">
           {shown && !hideLabel && label != null
             ? labelFormatter
               ? labelFormatter(label)
@@ -452,10 +452,10 @@ export function ChartTooltipContent({
       // labels) made the box wider than a 390px chart, and recharts, which keeps a box
       // inside the plot only when it fits, let it run off the edge with the values cut.
       // Names wrap inside the cap; the values never do.
-      className="min-w-[9rem] max-w-[min(20rem,calc(100vw-2rem))] rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] px-2.5 py-2 text-xs shadow-xl"
+      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"
     >
       {!hideLabel && label != null && (
-        <div className="mb-1.5 font-medium text-[var(--text-primary)]">
+        <div className="mb-1.5 font-medium text-primary">
           {labelFormatter ? labelFormatter(label) : label}
         </div>
       )}
@@ -504,12 +504,12 @@ export function ChartLegendContent({
         const vv = item.value != null ? String(item.value) : undefined;
         const cfgKey = dk && config[dk] ? dk : vv && config[vv] ? vv : (dk ?? vv ?? String(i));
         const series = config[cfgKey];
-        const color = paintedColor(cfgKey, series) ?? item.color ?? "#64748b";
+        const color = paintedColor(cfgKey, series) ?? item.color ?? "var(--text-muted)";
         const label = series?.label ?? vv ?? cfgKey;
         const off = hidden?.has(cfgKey) ?? false;
         const dimmed = off || (activeKey != null && activeKey !== cfgKey);
         const className = cn(
-          "flex items-center gap-1.5 text-[var(--text-secondary)] transition-opacity",
+          "flex items-center gap-1.5 text-secondary transition-opacity",
           onItemClick ? "cursor-pointer hover:opacity-80" : "cursor-default",
           dimmed && "opacity-40",
         );

package/src/components/checkbox-group.tsx

@@ -2,9 +2,9 @@ import { useId } from "react";
 import type { ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { Checkbox } from "./checkbox";
-import { hasMessage, mergeDescribedBy } from "./choice-parts";
+import { hasContent } from "../lib/presence";
 import { useCommitReason, type CommitScope } from "./write-lock";
-import { RequiredStarOnLegend } from "./field-parts";
+import { FIELD_ERROR_CLASS, mergeDescribedBy, RequiredStarOnLegend, useInlineHint } from "./field-parts";
 
 /** One box of a {@link CheckboxGroup}. */
 export interface CheckboxGroupOption<T extends string = string> {
@@ -140,15 +140,18 @@ export function CheckboxGroup<T extends string = string>({
   const generated = useId();
   const hintId = `${generated}-hint`;
   const errorId = `${generated}-error`;
-  const showHint = hasMessage(hint);
-  const showError = hasMessage(error);
+  // §4: a FieldHint under the group is its words at Large and on a touch screen, not a
+  // lone "?" (DUP-2, refactor audit 2026-10). A HelpPopover stays a "?".
+  const shownHint = useInlineHint(hint);
+  const showHint = hasContent(shownHint);
+  const showError = hasContent(error);
   const isInvalid = Boolean(invalid) || showError;
   const ticked = new Set(value);
   // Resolved here rather than per box: a reason has to keep the fieldset from being
   // natively `disabled` too, or it would take every box out of the tab order — the
   // thing a reason exists to prevent.
   const reason = useCommitReason(commit, disabledReason);
-  const locked = hasMessage(reason);
+  const locked = hasContent(reason);
 
   const toggle = (v: T, on: boolean) => {
     const next = new Set(value);
@@ -178,12 +181,12 @@ export function CheckboxGroup<T extends string = string>({
           className={
             legendVisibility === "sr-only"
               ? "sr-only"
-              : cn("mb-2 p-0 text-sm font-medium text-[var(--text-primary)]", (disabled || locked) && "opacity-60")
+              : cn("mb-2 p-0 text-sm font-medium text-primary", (disabled || locked) && "opacity-60")
           }
         >
           {legend}
           {required && (
-            <span aria-hidden className="ms-0.5 text-[var(--danger)]">
+            <span aria-hidden className="ms-0.5 text-danger">
               *
             </span>
           )}
@@ -215,12 +218,12 @@ export function CheckboxGroup<T extends string = string>({
       </RequiredStarOnLegend.Provider>
       {showHint && (
         // A `div`, not a `p`: a hint may be a node with a link in it.
-        <div id={hintId} className="mt-1.5 text-caption leading-tight text-[var(--text-muted)]">
-          {hint}
+        <div id={hintId} className="mt-1.5 text-caption leading-tight text-muted">
+          {shownHint}
         </div>
       )}
       {showError && (
-        <p id={errorId} className="mt-1 text-caption leading-tight text-[var(--danger)]">
+        <p id={errorId} className={FIELD_ERROR_CLASS}>
           {error}
         </p>
       )}

package/src/components/checkbox.tsx

@@ -1,11 +1,14 @@
-import { forwardRef, useCallback, useContext, useEffect, useId, useRef } from "react";
+import { useCallback, useContext, useEffect, useId, useRef } from "react";
 import { Check, Minus } from "lucide-react";
-import type { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
+import type { ChangeEvent, InputHTMLAttributes, ReactNode, Ref } from "react";
 import { cn } from "../lib/cn";
-import { assignRef, hasMessage, mergeDescribedBy } from "./choice-parts";
+import { hasContent } from "../lib/presence";
 import {
+  assignRef,
   DISABLED_REASON_LINE_CLASS,
+  FIELD_ERROR_CLASS,
   LockedReason,
+  mergeDescribedBy,
   RequiredStarOnLegend,
   useDisabledReasonLine,
   useLockReason,
@@ -38,9 +41,9 @@ import type { CommitScope } from "./write-lock";
 // touching a --brand-filled (checked) box would be a ring painted in the colour it sits
 // on — present in the DOM and invisible on screen. The offset is what separates the two.
 const BOX =
-  "peer size-4 shrink-0 cursor-pointer appearance-none rounded border border-[var(--border-strong)] bg-[var(--bg-surface)] shadow-sm transition-colors " +
-  "checked:border-[var(--brand)] checked:bg-[var(--brand)] " +
-  `focus:outline-none ${FOCUS_RING} focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)] ` +
+  "peer size-4 shrink-0 cursor-pointer appearance-none rounded border border-strong bg-surface shadow-sm transition-colors " +
+  "checked:border-brand checked:bg-brand " +
+  `focus:outline-none ${FOCUS_RING} focus-visible:ring-offset-1 focus-visible:ring-offset-surface ` +
   "disabled:cursor-not-allowed";
 
 /**
@@ -58,15 +61,13 @@ const LABEL_TOUCH_LARGE =
 // A mixed box wears the checked fill whether or not the underlying input is checked:
 // `indeterminate` is a property the browser keeps separately from `checked`, and the
 // dash means "some", which is neither answer.
-const BOX_MIXED = "border-[var(--brand)] bg-[var(--brand)]";
+const BOX_MIXED = "border-brand bg-brand";
 
 // The same geometry as FIELD_INVALID — a border plus a 1px ring, so the highlight
-// survives fractional display scaling on every edge (see the note in ui.tsx). The
+// survives fractional display scaling on every edge (see the note on FIELD_BASE in field-base.tsx). The
 // focus ring turns danger too, so focusing a wrong box does not repaint it as fine.
 const BOX_INVALID =
-  "border-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] checked:border-[var(--danger-border-strong)] focus-visible:ring-[var(--danger)]";
-
-const ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
+  "border-danger-strong ring-1 ring-danger-strong checked:border-danger-strong focus-visible:ring-[var(--danger)]";
 
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
   /**
@@ -136,6 +137,9 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
    * No provider, or an unlocked one: no effect. Button's `commit`, for keksdose K3.
    */
   commit?: CommitScope;
+  /** The `<input type="checkbox">`. A React 19 ref prop since 0.34 (MOD-4, refactor
+   *  audit 2026-10); it was `forwardRef`. */
+  ref?: Ref<HTMLInputElement>;
 }
 
 /**
@@ -148,28 +152,26 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
  * (`checked`, `defaultChecked`, `name`, `required`, `data-*`, `aria-*`), so it works
  * controlled, uncontrolled, and inside a plain `<form>`.
  */
-export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
-  {
-    label,
-    description,
-    indeterminate = false,
-    invalid,
-    error,
-    onCheckedChange,
-    onChange,
-    className,
-    inputClassName,
-    id,
-    disabled,
-    required,
-    disabledReason,
-    disabledReasonDisplay,
-    commit,
-    onClick,
-    ...rest
-  },
+export function Checkbox({
   ref,
-) {
+  label,
+  description,
+  indeterminate = false,
+  invalid,
+  error,
+  onCheckedChange,
+  onChange,
+  className,
+  inputClassName,
+  id,
+  disabled,
+  required,
+  disabledReason,
+  disabledReasonDisplay,
+  commit,
+  onClick,
+  ...rest
+}: CheckboxProps) {
   const generated = useId();
   const inputId = id ?? generated;
   const lock = useLockReason(commit, disabledReason);
@@ -182,8 +184,8 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Che
   const starOnLegend = useContext(RequiredStarOnLegend);
   const descriptionId = `${inputId}-description`;
   const errorId = `${inputId}-error`;
-  const showError = hasMessage(error);
-  const showDescription = hasMessage(description);
+  const showError = hasContent(error);
+  const showDescription = hasContent(description);
   const isInvalid = Boolean(invalid) || showError;
   // Nothing to lay out beside the box: render the box alone, as the raw input was.
   const bare = label === undefined && !showDescription && !showError;
@@ -259,13 +261,13 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Che
         <Minus
           aria-hidden
           strokeWidth={3}
-          className="pointer-events-none absolute inset-0 m-auto size-3 text-[var(--brand-contrast)]"
+          className="pointer-events-none absolute inset-0 m-auto size-3 text-brand-contrast"
         />
       ) : (
         <Check
           aria-hidden
           strokeWidth={3}
-          className="pointer-events-none invisible absolute inset-0 m-auto size-3 text-[var(--brand-contrast)] peer-checked:visible"
+          className="pointer-events-none invisible absolute inset-0 m-auto size-3 text-brand-contrast peer-checked:visible"
         />
       )}
     </span>
@@ -307,7 +309,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Che
           <label
             htmlFor={inputId}
             className={cn(
-              "block text-sm leading-5 text-[var(--text-primary)]",
+              "block text-sm leading-5 text-primary",
               // `select-none`: a double-click to toggle twice would otherwise select the
               // words, and a drag that starts on them starts a native text drag.
               looksDisabled ? "cursor-not-allowed" : "cursor-pointer select-none",
@@ -317,14 +319,14 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Che
           >
             {label}
             {required && !starOnLegend && (
-              <span aria-hidden className="ms-0.5 text-[var(--danger)]">
+              <span aria-hidden className="ms-0.5 text-danger">
                 *
               </span>
             )}
           </label>
         )}
         {showDescription && (
-          <span id={descriptionId} className={cn("mt-0.5 block text-xs text-[var(--text-muted)]", dimParts && "opacity-60")}>
+          <span id={descriptionId} className={cn("mt-0.5 block text-xs text-muted", dimParts && "opacity-60")}>
             {description}
           </span>
         )}
@@ -334,12 +336,11 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Che
           </span>
         )}
         {showError && (
-          <span id={errorId} className={cn("block", ERROR_CLASS)}>
+          <span id={errorId} className={cn("block", FIELD_ERROR_CLASS)}>
             {error}
           </span>
         )}
       </span>
     </div>
   );
-});
-Checkbox.displayName = "Checkbox";
+}