@eifi1/ui-kit 0.33.1 → 0.34.0

package/src/components/progress-bar.tsx

@@ -1,9 +1,10 @@
 import { useId } from "react";
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
 import { cn } from "../lib/cn";
-import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { toneTextClass } from "./signed-amount";
 import type { TextTone } from "./signed-amount";
+import { DEFAULT_PROGRESS_BAR_LABELS } from "./progress-bar-labels";
 
 /** The words a progress bar adds of its own. */
 export interface ProgressBarLabels {
@@ -13,10 +14,8 @@ export interface ProgressBarLabels {
   overLimit: (amount: string) => string;
 }
 
-export const DEFAULT_PROGRESS_BAR_LABELS: ProgressBarLabels = {
-  unlimited: "Unlimited",
-  overLimit: (amount) => `${amount} over the limit`,
-};
+// Defined in ./progress-bar-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_PROGRESS_BAR_LABELS };
 
 /**
  * `income` / `expense` are the money pair (`--money-income` / `--money-expense`), the
@@ -44,14 +43,14 @@ export type ProgressBarTone =
 export type ProgressBarSize = "sm" | "slim" | "md" | "lg";
 
 const FILL: Record<ProgressBarTone, string> = {
-  brand: "bg-[var(--brand)]",
+  brand: "bg-brand",
   neutral: "bg-[var(--text-muted)]",
-  success: "bg-[var(--success)]",
-  warning: "bg-[var(--warning)]",
-  danger: "bg-[var(--danger)]",
-  info: "bg-[var(--info)]",
-  income: "bg-[var(--money-income)]",
-  expense: "bg-[var(--money-expense)]",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger",
+  info: "bg-info",
+  income: "bg-money-income",
+  expense: "bg-money-expense",
 };
 
 const TRACK_HEIGHT: Record<ProgressBarSize, string> = { sm: "h-1", slim: "h-1.5", md: "h-2", lg: "h-3" };
@@ -204,7 +203,11 @@ export interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<"div">,
    * The `aria-valuetext` is not touched: a screen reader is not a screen-share.
    */
   sensitive?: boolean;
-  labels?: Partial<ProgressBarLabels>;
+  labels?: LabelOverride<ProgressBarLabels>;
+  /** The element the rest of the props go on — the `progressbar` (or `meter`) itself,
+   *  the box round the figure for an unlimited one — a `div` or a `span` as `as` says,
+   *  hence `HTMLElement` (0.34, API-2, refactor audit 2026-10). */
+  ref?: Ref<HTMLElement>;
 }
 
 /**
@@ -248,12 +251,15 @@ export function ProgressBar({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
+  ref,
   ...rest
 }: ProgressBarProps) {
   // `as="span"`: the same bar from phrasing elements only, so it is valid inside a
   // <button> or <a> — ListItem's `content` puts a budget bar inside the row's target
   // (keksdose P2). Every span is made a block except those already laid out as flex.
   const Tag = as;
+  // Either element's ref, as List types its `ul`/`ol` one.
+  const tagRef = ref as Ref<HTMLDivElement & HTMLSpanElement> | undefined;
   const inlineClass = as === "span" ? "block [&_span:not(.flex):not(.inline-flex)]:block" : undefined;
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
   const text = useKitLabels("progressBar", DEFAULT_PROGRESS_BAR_LABELS, labels);
@@ -263,7 +269,7 @@ export function ProgressBar({
   const hintId = useId();
   const hintNode =
     hint != null ? (
-      <p id={hintId} data-part="hint" className="mt-1 text-xs text-[var(--text-muted)]">
+      <p id={hintId} data-part="hint" className="mt-1 text-xs text-muted">
         {hint}
       </p>
     ) : null;
@@ -278,14 +284,14 @@ export function ProgressBar({
           ? formatValue(value, Infinity, min)
           : new Intl.NumberFormat(kitLocale).format(value);
     return (
-      <Tag {...rest} className={cn("min-w-0", inlineClass, className)} data-state="unlimited">
+      <Tag {...rest} ref={tagRef} className={cn("min-w-0", inlineClass, className)} data-state="unlimited">
         <Tag className="flex items-baseline gap-2 text-sm">
           {label != null && (
-            <span id={labelId} className="min-w-0 text-[var(--text-secondary)]">
+            <span id={labelId} className="min-w-0 text-secondary">
               {label}
             </span>
           )}
-          <span data-part="unlimited" data-private={priv} className="ms-auto shrink-0 tabular-nums text-[var(--text-muted)]">
+          <span data-part="unlimited" data-private={priv} className="ms-auto shrink-0 tabular-nums text-muted">
             {shown !== undefined && `${shown} · `}
             {text.unlimited}
           </span>
@@ -347,7 +353,7 @@ export function ProgressBar({
     overage && !stacked && value !== undefined && Number.isFinite(value) && value > max ? value - max : 0;
   const overageNode =
     over > 0 ? (
-      <p id={`${hintId}-over`} data-part="overage" data-private={priv} className="mt-1 text-xs text-[var(--danger)]">
+      <p id={`${hintId}-over`} data-part="overage" data-private={priv} className="mt-1 text-xs text-danger">
         {typeof overage === "function"
           ? overage(over)
           : text.overLimit(new Intl.NumberFormat(kitLocale).format(over))}
@@ -364,14 +370,14 @@ export function ProgressBar({
       {(label != null || (showValue && valueText !== undefined)) && (
         <Tag className="mb-1 flex items-baseline gap-2 text-sm">
           {label != null && (
-            <span id={labelId} className="min-w-0 text-[var(--text-secondary)]">
+            <span id={labelId} className="min-w-0 text-secondary">
               {label}
             </span>
           )}
           {showValue && valueText !== undefined && (
             // Hidden: the same words are the bar's aria-valuetext, and reading them
             // twice in a row is noise.
-            <span aria-hidden data-part="value" data-private={priv} className="ms-auto shrink-0 tabular-nums text-[var(--text-muted)]">
+            <span aria-hidden data-part="value" data-private={priv} className="ms-auto shrink-0 tabular-nums text-muted">
               {valueText}
             </span>
           )}
@@ -379,6 +385,7 @@ export function ProgressBar({
       )}
       <Tag
         {...rest}
+        ref={tagRef}
         role={meter ? "meter" : "progressbar"}
         aria-label={name}
         aria-labelledby={labelledBy}
@@ -390,7 +397,7 @@ export function ProgressBar({
         aria-busy={!meter && indeterminate ? true : undefined}
         // `relative` + `overflow-hidden`: the indeterminate segment is positioned in
         // here and must not paint past the rounded ends.
-        className={cn("relative w-full overflow-hidden rounded-full bg-[var(--bg-active)]", TRACK_HEIGHT[size])}
+        className={cn("relative w-full overflow-hidden rounded-full bg-active", TRACK_HEIGHT[size])}
       >
         {stacked ? (
           // The parts in a flex row with a 2px gap, so two neighbouring steps of one
@@ -451,7 +458,9 @@ export function ProgressBar({
                 style={{ backgroundColor: seg.className ? undefined : seg.color }}
               />
               {seg.label != null && (
-                <span className="min-w-0 flex-1 truncate text-[var(--text-secondary)]">{seg.label}</span>
+                // Wraps from Large up (text size §10.17, round 0.34 T1); the value
+                // beside it keeps its width.
+                <span className="min-w-0 flex-1 truncate-until-large text-secondary">{seg.label}</span>
               )}
               <span
                 data-part="legend-value"

package/src/components/qr-code.tsx

@@ -1,10 +1,10 @@
 import { useMemo } from "react";
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithRef } from "react";
 import { cn } from "../lib/cn";
 import { encodeQr } from "../lib/qr-encode";
 import type { QrErrorCorrection } from "../lib/qr-encode";
 
-export interface QrCodeProps extends Omit<ComponentPropsWithoutRef<"svg">, "children" | "viewBox"> {
+export interface QrCodeProps extends Omit<ComponentPropsWithRef<"svg">, "children" | "viewBox"> {
   /** The text to encode (UTF-8) — an `otpauth://` URI, a URL, a pairing code. */
   value: string;
   /** The accessible name. Without it the code is decorative (`aria-hidden`): say what

package/src/components/reauth-dialog-labels.ts

@@ -0,0 +1,13 @@
+// The English words of ./reauth-dialog, in a module with no component code: the English
+// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
+// chunk like the other languages (0.34, KS U8). ./reauth-dialog re-exports them.
+
+import type { ReauthDialogLabels } from "./reauth-dialog";
+
+export const DEFAULT_REAUTH_DIALOG_LABELS: ReauthDialogLabels = {
+  title: "Confirm it’s you",
+  description: "Enter your current password to continue.",
+  password: "Current password",
+  submit: "Continue",
+  cancel: "Cancel",
+};

package/src/components/reauth-dialog.tsx

@@ -1,11 +1,13 @@
 import { useContext, useEffect, useId, useRef, useState } from "react";
 import type { KeyboardEvent, ReactNode } from "react";
 
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { CurrentPasswordInput, usePromisePending } from "./danger-confirm";
 import { DialogFrame } from "./dialog-frame";
 import { ModalCloseContext } from "./modal";
-import { Button, Spinner } from "./ui";
+import { Button } from "./button";
+import { Spinner } from "./spinner";
+import { DEFAULT_REAUTH_DIALOG_LABELS } from "./reauth-dialog-labels";
 
 /**
  * Every string the dialog renders — the `reauthDialog` namespace of
@@ -23,13 +25,8 @@ export interface ReauthDialogLabels {
   cancel: string;
 }
 
-export const DEFAULT_REAUTH_DIALOG_LABELS: ReauthDialogLabels = {
-  title: "Confirm it’s you",
-  description: "Enter your current password to continue.",
-  password: "Current password",
-  submit: "Continue",
-  cancel: "Cancel",
-};
+// Defined in ./reauth-dialog-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_REAUTH_DIALOG_LABELS };
 
 export interface ReauthDialogProps {
   /**
@@ -74,7 +71,7 @@ export interface ReauthDialogProps {
    *  flip to `false` animates it out and wipes the password. */
   open?: boolean;
   /** User-facing strings; see {@link ReauthDialogLabels}. */
-  labels?: Partial<ReauthDialogLabels>;
+  labels?: LabelOverride<ReauthDialogLabels>;
 }
 
 /**

package/src/components/row-actions-labels.ts

@@ -0,0 +1,10 @@
+// The English words of ./row-actions, in a module with no component code: the English
+// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
+// chunk like the other languages (0.34, KS U8). ./row-actions re-exports them.
+
+import type { RowActionsLabels } from "./row-actions";
+
+export const DEFAULT_ROW_ACTIONS_LABELS: RowActionsLabels = {
+  actions: "Actions",
+  actionsFor: (name) => `Actions for ${name}`,
+};

package/src/components/row-actions.tsx

@@ -4,13 +4,16 @@ import { MoreHorizontal } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
 import { useLargeText } from "../hooks/use-large-text";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { Popover } from "./popover";
-import { Button, CompactControls, IconButton } from "./ui";
+import { Button } from "./button";
+import { CompactControls } from "./field-parts";
+import { IconButton } from "./icon-button";
 import { useCommitReason, type CommitScope } from "./write-lock";
-import type { IconButtonGlyphSize, IconButtonSize } from "./ui";
+import type { IconButtonGlyphSize, IconButtonSize } from "./icon-button";
 import type { TooltipSide } from "./tooltip";
 import type { DataTableColumn } from "./data-table";
+import { DEFAULT_ROW_ACTIONS_LABELS } from "./row-actions-labels";
 
 /**
  * A row's actions — inline icons at Normal, one "⋯" menu at Large and above
@@ -141,10 +144,8 @@ export interface RowActionsLabels {
   actionsFor: (name: string) => string;
 }
 
-export const DEFAULT_ROW_ACTIONS_LABELS: RowActionsLabels = {
-  actions: "Actions",
-  actionsFor: (name) => `Actions for ${name}`,
-};
+// Defined in ./row-actions-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_ROW_ACTIONS_LABELS };
 
 /**
  * - `"auto"` (default): the icons inline at Normal; the "⋯" menu at Large and Extra
@@ -181,7 +182,7 @@ export interface RowActionsProps {
   /** The inline tooltips' side, IconButton's `tooltipSide` — `"start"` for a table's last
    *  column, so a bubble does not run off the row's end. Per row: every inline action. */
   tooltipSide?: TooltipSide;
-  labels?: Partial<RowActionsLabels>;
+  labels?: LabelOverride<RowActionsLabels>;
 }
 
 function visibleActions(actions: RowActionList): RowAction[] {
@@ -522,7 +523,7 @@ function InlineAction({
 }
 
 /** The actions column's hidden header, in the provider's words. */
-function RowActionsHeader({ text, labels }: { text?: string; labels?: Partial<RowActionsLabels> }) {
+function RowActionsHeader({ text, labels }: { text?: string; labels?: LabelOverride<RowActionsLabels> }) {
   const resolved = useKitLabels("rowActions", DEFAULT_ROW_ACTIONS_LABELS, labels);
   return <span className="sr-only">{text ?? resolved.actions}</span>;
 }
@@ -549,7 +550,7 @@ export interface RowActionsColumnOptions<T> {
    * the plain-text places fall back to the column's `key`.
    */
   headerText?: string;
-  labels?: Partial<RowActionsLabels>;
+  labels?: LabelOverride<RowActionsLabels>;
   /** Anything else for the column (`mobileHidden`, `cellProps`…), merged last. */
   column?: Partial<DataTableColumn<T>>;
 }

package/src/components/scroll-area.tsx

@@ -1,6 +1,7 @@
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { ComponentPropsWithoutRef, Ref, RefObject } from "react";
 import { cn } from "../lib/cn";
+import { mergeRefs } from "./field-parts";
 
 /**
  * Whether `ref`'s element currently overflows its box — the one fact a scroll
@@ -93,14 +94,7 @@ export function ScrollArea({
 }: ScrollAreaProps) {
   const inner = useRef<HTMLDivElement | null>(null);
   const overflowing = useScrollOverflow(inner);
-  const setRef = useCallback(
-    (el: HTMLDivElement | null) => {
-      inner.current = el;
-      if (typeof ref === "function") ref(el);
-      else if (ref) ref.current = el;
-    },
-    [ref],
-  );
+  const setRef = useMemo(() => mergeRefs(inner, ref), [ref]);
   const named = label !== undefined || labelledBy !== undefined;
 
   return (
@@ -121,7 +115,7 @@ export function ScrollArea({
         // a row with its own background would cover exactly the part of the ring that
         // says where focus is. An outline paints above it, and the negative offset
         // keeps it inside a parent that clips.
-        "focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
+        "focus-visible:outline-focus focus-visible:-outline-offset-2 focus-visible:outline-brand",
         className,
       )}
     />

package/src/components/search-field.tsx

@@ -1,8 +1,9 @@
-import { forwardRef, useRef } from "react";
-import type { InputHTMLAttributes } from "react";
+import { useMemo, useRef } from "react";
+import type { InputHTMLAttributes, Ref } from "react";
 import { Search, X } from "lucide-react";
 import { cn } from "../lib/cn";
-import { FIELD_BASE, FIELD_TOUCH_TEXT } from "./ui";
+import { FIELD_BASE, FIELD_TOUCH_TEXT } from "./field-base";
+import { mergeRefs } from "./field-parts";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels";
 
 interface SearchFieldOwnProps
@@ -15,15 +16,6 @@ interface SearchFieldOwnProps
    *  four this replaced wanted the string, and one of them held it in a URL param
    *  rather than in state. */
   onChange: (value: string) => void;
-  /**
-   * The field's accessible name.
-   *
-   * @deprecated Pass `aria-label` instead — the DOM spelling this kit standardised on
-   * when it found three names for one idea (`ariaLabel`, `aria-label`, and this).
-   * Unchanged and still supported; it names the field only when `aria-label` is
-   * absent, so a consumer can migrate one call site at a time.
-   */
-  label?: string;
   /** Names the clear button. Default: the catalogue's `common.clear`, in the
    *  provider's language. */
   clearLabel?: string;
@@ -62,20 +54,22 @@ interface SearchFieldOwnProps
 // itself) without even its baseline, because the header it sits in already draws
 // the line. No `text-*` size, on purpose — the input inherits the caller's.
 const SEARCH_INLINE =
-  "block w-full min-w-0 border-0 bg-transparent py-1 text-[var(--text-primary)] shadow-none placeholder:text-[var(--text-placeholder)] focus:outline-none focus:ring-0 " +
+  "block w-full min-w-0 border-0 bg-transparent py-1 text-primary shadow-none placeholder:text-placeholder focus:outline-none focus:ring-0 " +
   // FIELD_BASE carries the 16 px touch floor (§10.1); the inline look needs it too.
   FIELD_TOUCH_TEXT;
 
 /**
- * One of the two spellings is REQUIRED, and the union is how that survives the
- * deprecation. Making `label` merely optional would have been the easy change and the
- * wrong one: the whole reason this component exists is that two of the four boxes it
- * replaced were named by nothing but their placeholder — which disappears the moment
- * someone types, i.e. exactly when a screen-reader user is working in the field. A
- * caller now has a choice of spelling; it still has no option to pass neither.
+ * `aria-label` is REQUIRED: the whole reason this component exists is that two of the
+ * four boxes it replaced were named by nothing but their placeholder — which disappears
+ * the moment someone types, i.e. exactly when a screen-reader user is working in the
+ * field. The `label` spelling it also took from 0.5 was removed in 0.34.
  */
-export type SearchFieldProps = SearchFieldOwnProps &
-  ({ "aria-label": string; label?: string } | { label: string; "aria-label"?: string });
+export type SearchFieldProps = SearchFieldOwnProps & {
+  "aria-label": string;
+  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it
+   *  was `forwardRef`. */
+  ref?: Ref<HTMLInputElement>;
+};
 
 /**
  * The page-level filter box: a search icon, a `type="search"` input, and a clear
@@ -106,47 +100,40 @@ export type SearchFieldProps = SearchFieldOwnProps &
  * and matches the app's other icon buttons, and it returns focus to the input so
  * the next query can be typed straight away.
  */
-export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(
-  {
-    value,
-    onChange,
-    label,
-    clearLabel: clearLabelProp,
-    clearable = true,
-    className,
-    inputClassName,
-    placeholder,
-    variant = "field",
-    "aria-label": ariaLabel,
-    ...rest
-  },
+export function SearchField({
   ref,
-) {
+  value,
+  onChange,
+  clearLabel: clearLabelProp,
+  clearable = true,
+  className,
+  inputClassName,
+  placeholder,
+  variant = "field",
+  "aria-label": ariaLabel,
+  ...rest
+}: SearchFieldProps) {
   const innerRef = useRef<HTMLInputElement>(null);
+  const setRef = useMemo(() => mergeRefs(innerRef, ref), [ref]);
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
   const clearLabel = clearable ? (clearLabelProp ?? common.clear) : undefined;
-  // Whichever spelling the caller used. It is the accessible name AND the placeholder
-  // fallback, so a box named only by `aria-label` still says what it is before anyone
-  // has typed in it — the same deal `label` has always had.
-  const name = ariaLabel ?? label;
+  // The accessible name AND the placeholder fallback, so the box says what it is
+  // before anyone has typed in it.
+  const name = ariaLabel;
   const inline = variant === "inline";
   return (
     <div className={cn("relative", className)}>
       <Search
         aria-hidden
         className={cn(
-          "pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]",
+          "pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 text-placeholder",
           // Logical sides throughout, so a right-to-left page gets the icon at the
           // start of the line and the clear button at its end.
           inline ? "start-0" : "start-3",
         )}
       />
       <input
-        ref={(node) => {
-          innerRef.current = node;
-          if (typeof ref === "function") ref(node);
-          else if (ref) ref.current = node;
-        }}
+        ref={setRef}
         type="search"
         value={value}
         onChange={(e) => onChange(e.target.value)}
@@ -194,7 +181,7 @@ export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(functi
           }}
           aria-label={clearLabel}
           className={cn(
-            "absolute top-1/2 -translate-y-1/2 rounded p-1 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]",
+            "absolute top-1/2 -translate-y-1/2 rounded p-1 text-placeholder hover:text-secondary",
             inline ? "end-0" : "end-2",
           )}
         >
@@ -203,5 +190,4 @@ export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(functi
       )}
     </div>
   );
-});
-SearchField.displayName = "SearchField";
+}