@eifi1/ui-kit 0.33.1 → 0.35.0

package/src/components/switch.tsx

@@ -1,10 +1,11 @@
-import { forwardRef, useId } from "react";
-import type { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
+import { useId } from "react";
+import type { ChangeEvent, InputHTMLAttributes, ReactNode, Ref } from "react";
 import { cn } from "../lib/cn";
-import { hasMessage, mergeDescribedBy } from "./choice-parts";
+import { hasContent } from "../lib/presence";
 import {
   DISABLED_REASON_LINE_CLASS,
   LockedReason,
+  mergeDescribedBy,
   useDisabledReasonLine,
   useLockReason,
   type DisabledReasonDisplay,
@@ -49,9 +50,9 @@ export type SwitchSize = keyof typeof SIZES;
 // difference in SHAPE, so the state never rests on colour alone.
 const TRACK =
   "peer block shrink-0 cursor-pointer appearance-none rounded-full bg-[var(--border-strong)] transition-colors " +
-  "checked:bg-[var(--brand)] " +
+  "checked:bg-brand " +
   // The kit's focus frame (§5), stood off the track so it never merges with the fill.
-  `focus:outline-none ${FOCUS_RING} focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] ` +
+  `focus:outline-none ${FOCUS_RING} focus-visible:ring-offset-2 focus-visible:ring-offset-surface ` +
   "disabled:cursor-not-allowed";
 
 // The thumb, laid over the input and ignoring the pointer so every click still reaches
@@ -59,7 +60,7 @@ const TRACK =
 // match the fill in some presets, and the contrast token is the one guaranteed to read
 // against --brand.
 const THUMB =
-  "pointer-events-none absolute start-0.5 top-1/2 -translate-y-1/2 rounded-full bg-[var(--bg-surface)] shadow-sm " +
+  "pointer-events-none absolute start-0.5 top-1/2 -translate-y-1/2 rounded-full bg-surface shadow-sm " +
   "transition-[inset-inline-start,background-color] motion-reduce:transition-none " +
   "peer-checked:bg-[var(--brand-contrast)]";
 
@@ -119,6 +120,9 @@ export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
    * own). No provider, or an unlocked one: no effect. Button's `commit`, for K3.
    */
   commit?: CommitScope;
+  /** The `<input type="checkbox" role="switch">`. A React 19 ref prop since 0.34 (MOD-4,
+   *  refactor audit 2026-10); it was `forwardRef`. */
+  ref?: Ref<HTMLInputElement>;
 }
 
 /**
@@ -128,27 +132,25 @@ export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  * `onChange`/`onCheckedChange`), uncontrolled (`defaultChecked`) and in a plain
  * `<form>` (`name`, `value`).
  */
-export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
-  {
-    size = "md",
-    label,
-    description,
-    switchPosition = "end",
-    onCheckedChange,
-    onChange,
-    className,
-    inputClassName,
-    id,
-    disabled,
-    required,
-    disabledReason,
-    disabledReasonDisplay,
-    commit,
-    onClick,
-    ...rest
-  },
+export function Switch({
   ref,
-) {
+  size = "md",
+  label,
+  description,
+  switchPosition = "end",
+  onCheckedChange,
+  onChange,
+  className,
+  inputClassName,
+  id,
+  disabled,
+  required,
+  disabledReason,
+  disabledReasonDisplay,
+  commit,
+  onClick,
+  ...rest
+}: SwitchProps) {
   const generated = useId();
   const inputId = id ?? generated;
   const lock = useLockReason(commit, disabledReason);
@@ -158,7 +160,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
   // click, as for `disabled`.
   const looksDisabled = Boolean(disabled) || locked;
   const descriptionId = `${inputId}-description`;
-  const showDescription = hasMessage(description);
+  const showDescription = hasContent(description);
   const bare = label === undefined && !showDescription;
   const geometry = SIZES[size];
 
@@ -227,21 +229,21 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
         <label
           htmlFor={inputId}
           className={cn(
-            "block text-sm leading-5 text-[var(--text-primary)]",
+            "block text-sm leading-5 text-primary",
             looksDisabled ? "cursor-not-allowed" : "cursor-pointer select-none",
             dimParts && "opacity-60",
           )}
         >
           {label}
           {required && (
-            <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>
       )}
@@ -268,5 +270,4 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
       )}
     </div>
   );
-});
-Switch.displayName = "Switch";
+}

package/src/components/table.tsx

@@ -2,7 +2,7 @@ import { Children, createContext, useCallback, useContext, useId, useLayoutEffec
 import type { ComponentPropsWithRef, ReactNode, Ref } from "react";
 import { cn } from "../lib/cn";
 import { useEdgeFade } from "../lib/strip-fade";
-import { assignRef } from "./choice-parts";
+import { assignRef } from "./field-parts";
 import { THIN_SCROLLBAR_CLASS, useScrollOverflow } from "./scroll-area";
 
 /** `none` (0.10.0): no cell padding at all — keksdose's VAT summary, a table set
@@ -243,7 +243,7 @@ const STACK_PHONE_CLASSES = cn(
   "max-sm:[&_tbody_td]:block max-sm:[&_tbody_td]:px-0 max-sm:[&_tbody_td]:py-0.5 max-sm:[&_tbody_td]:text-start",
   "max-sm:[&_tfoot_td]:block max-sm:[&_tfoot_td]:px-0 max-sm:[&_tfoot_td]:py-0.5",
   "max-sm:[&_tbody_td:first-child]:font-medium",
-  "max-sm:[&_td[data-label]]:before:block max-sm:[&_td[data-label]]:before:text-caption max-sm:[&_td[data-label]]:before:font-medium max-sm:[&_td[data-label]]:before:text-[var(--text-muted)] max-sm:[&_td[data-label]]:before:content-[attr(data-label)]",
+  "max-sm:[&_td[data-label]]:before:block max-sm:[&_td[data-label]]:before:text-caption max-sm:[&_td[data-label]]:before:font-medium max-sm:[&_td[data-label]]:before:text-muted max-sm:[&_td[data-label]]:before:content-[attr(data-label)]",
 );
 
 /**
@@ -352,9 +352,9 @@ export function Table({
           "relative w-full overflow-x-auto",
           // On the scroll wrapper itself, so its clipping keeps the rows inside the
           // rounded corners.
-          framed && "rounded-md border border-[var(--border)]",
+          framed && "rounded-md border border-subtle",
           THIN_SCROLLBAR_CLASS,
-          "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",
           wrapperClassName,
         )}
       >
@@ -363,7 +363,7 @@ export function Table({
           ref={setTableRef}
           aria-label={ariaLabel}
           className={cn(
-            "w-full caption-bottom border-collapse text-sm text-[var(--text-primary)]",
+            "w-full caption-bottom border-collapse text-sm text-primary",
             density === "compact" && "text-xs",
             layout === "fixed" && "table-fixed",
             layout === "auto" && "table-auto",
@@ -385,7 +385,7 @@ export interface TableHeadProps extends ComponentPropsWithRef<"thead"> {
 export function TableHead({ bordered = true, className, ...rest }: TableHeadProps) {
   return (
     <SectionContext.Provider value="head">
-      <thead {...rest} className={cn(bordered && "border-b border-[var(--border)]", className)} />
+      <thead {...rest} className={cn(bordered && "border-b border-subtle", className)} />
     </SectionContext.Provider>
   );
 }
@@ -461,7 +461,7 @@ export function TableEmpty({ children, colSpan, cellClassName, className, ...res
         className={cn(
           // `none` keeps the message off the edges regardless: it is text, not a figure.
           density === "none" ? "py-2" : CELL_PAD[density],
-          "text-center text-[var(--text-muted)]",
+          "text-center text-muted",
           cellClassName,
         )}
       >
@@ -478,18 +478,18 @@ export type TableFootProps = ComponentPropsWithRef<"tfoot">;
 export function TableFoot({ className, ...rest }: TableFootProps) {
   return (
     <SectionContext.Provider value="foot">
-      <tfoot {...rest} className={cn("border-t border-[var(--border-strong)] font-medium", className)} />
+      <tfoot {...rest} className={cn("border-t border-strong font-medium", className)} />
     </SectionContext.Provider>
   );
 }
 
 const ROW_VARIANT: Record<TableRowVariant, string | false> = {
   row: false,
-  group: "bg-[var(--bg-surface-2)] font-semibold",
+  group: "bg-surface-2 font-semibold",
   subtotal: "font-medium",
   // A 2px rule over the 1px divider the row above draws on its bottom: collapsed
   // borders meet on one line, the wider wins, and the heavier rule is what says "sum".
-  total: "border-t-2 border-t-[var(--border-strong)] font-semibold",
+  total: "border-t-2 border-t-strong font-semibold",
 };
 
 /** The deprecated HTML `valign` attribute is replaced by a class-backed one. */
@@ -516,9 +516,9 @@ export function TableRow({ valign, variant = "row", bordered, className, ref: re
       {...rest}
       data-variant={variant === "row" ? undefined : variant}
       className={cn(
-        body && (bordered ?? rowDividers) && "border-b border-[var(--border)]",
-        record && zebra && "even:bg-[var(--bg-surface-2)]",
-        record && hover && "transition-colors hover:bg-[var(--bg-hover)]",
+        body && (bordered ?? rowDividers) && "border-b border-subtle",
+        record && zebra && "even:bg-surface-2",
+        record && hover && "transition-colors hover:bg-hover",
         // A zebra row rests on the well, and `--bg-hover` sits only 1.00–1.02:1 from it
         // (0.33: the light well is the page colour): it hovers to the card instead, the
         // one fill that both steps 1.09–1.13:1 from the well and keeps every text role at
@@ -591,7 +591,7 @@ export function TableHeaderCell({
         numeric && "tabular-nums",
         VALIGN[valign ?? rowVAlign ?? (head ? "bottom" : "top")],
         HEADER_WEIGHT[weight],
-        head ? "text-[var(--text-muted)]" : "text-[var(--text-secondary)]",
+        head ? "text-muted" : "text-secondary",
         textSize && HEADER_SIZE[textSize],
         className,
       )}
@@ -637,7 +637,7 @@ export function TableCaption({ className, id, ...rest }: TableCaptionProps) {
     <caption
       {...rest}
       id={id ?? captionId}
-      className={cn("mt-2 text-start text-sm text-[var(--text-muted)]", className)}
+      className={cn("mt-2 text-start text-sm text-muted", className)}
     />
   );
 }