feat(core): wire checkbox and radioGroup recipe rendering

Author: RtlZeroMemory

packages/core/src/renderer/__tests__/checkboxRecipeRendering.test.ts

@@ -0,0 +1,78 @@
+import { assert, describe, test } from "@rezi-ui/testkit";
+import { coerceToLegacyTheme } from "../../theme/interop.js";
+import { darkTheme } from "../../theme/presets.js";
+import { ui } from "../../widgets/ui.js";
+import { type DrawOp, renderOps } from "./recipeRendering.test-utils.js";
+
+const dsTheme = coerceToLegacyTheme(darkTheme);
+
+function findTextOp(ops: readonly DrawOp[], text: string): DrawOp | undefined {
+  return ops.find((op) => op.kind === "drawText" && op.text === text);
+}
+
+describe("checkbox recipe rendering", () => {
+  test("uses recipe colors with semantic-token themes", () => {
+    const ops = renderOps(ui.checkbox({ id: "cb", checked: false, label: "Option" }), {
+      viewport: { cols: 40, rows: 3 },
+      theme: dsTheme,
+    });
+    const indicator = findTextOp(ops, "[ ]");
+    const label = findTextOp(ops, "Option");
+    assert.ok(indicator && indicator.kind === "drawText");
+    assert.ok(label && label.kind === "drawText");
+    if (!indicator || indicator.kind !== "drawText" || !label || label.kind !== "drawText") return;
+    assert.deepEqual(indicator.style?.fg, dsTheme.colors["fg.secondary"]);
+    assert.deepEqual(label.style?.fg, dsTheme.colors["fg.primary"]);
+  });
+
+  test("renders checked indicator with selected recipe style", () => {
+    const uncheckedOps = renderOps(ui.checkbox({ id: "u", checked: false, label: "U" }), {
+      viewport: { cols: 30, rows: 2 },
+      theme: dsTheme,
+    });
+    const checkedOps = renderOps(ui.checkbox({ id: "c", checked: true, label: "C" }), {
+      viewport: { cols: 30, rows: 2 },
+      theme: dsTheme,
+    });
+    const unchecked = findTextOp(uncheckedOps, "[ ]");
+    const checked = findTextOp(checkedOps, "[x]");
+    assert.ok(unchecked && unchecked.kind === "drawText");
+    assert.ok(checked && checked.kind === "drawText");
+    if (!unchecked || unchecked.kind !== "drawText" || !checked || checked.kind !== "drawText")
+      return;
+    assert.notDeepEqual(checked.style?.fg, unchecked.style?.fg);
+    assert.deepEqual(checked.style?.fg, dsTheme.colors["accent.primary"]);
+  });
+
+  test("uses disabled recipe colors", () => {
+    const ops = renderOps(
+      ui.checkbox({ id: "d", checked: true, label: "Disabled", disabled: true }),
+      {
+        viewport: { cols: 40, rows: 2 },
+        theme: dsTheme,
+      },
+    );
+    const indicator = findTextOp(ops, "[x]");
+    const label = findTextOp(ops, "Disabled");
+    assert.ok(indicator && indicator.kind === "drawText");
+    assert.ok(label && label.kind === "drawText");
+    if (!indicator || indicator.kind !== "drawText" || !label || label.kind !== "drawText") return;
+    assert.deepEqual(indicator.style?.fg, dsTheme.colors["disabled.fg"]);
+    assert.deepEqual(label.style?.fg, dsTheme.colors["disabled.fg"]);
+  });
+
+  test("uses focus recipe styling when focused", () => {
+    const ops = renderOps(ui.checkbox({ id: "f", checked: false, label: "Focus me" }), {
+      viewport: { cols: 40, rows: 2 },
+      theme: dsTheme,
+      focusedId: "f",
+    });
+    const indicator = findTextOp(ops, "[ ]");
+    const label = findTextOp(ops, "Focus me");
+    assert.ok(indicator && indicator.kind === "drawText");
+    assert.ok(label && label.kind === "drawText");
+    if (!indicator || indicator.kind !== "drawText" || !label || label.kind !== "drawText") return;
+    assert.equal(indicator.style?.bold, true);
+    assert.equal(label.style?.bold, true);
+  });
+});

packages/core/src/renderer/renderToDrawlist/widgets/basic.ts

@@ -1485,6 +1485,8 @@ export function renderBasicWidget(
         checked?: unknown;
         label?: unknown;
         disabled?: unknown;
+        dsTone?: unknown;
+        dsSize?: unknown;
       };
       const id = typeof props.id === "string" ? props.id : null;
       const focused = id !== null && focusState.focusedId === id;
@@ -1493,14 +1495,23 @@ export function renderBasicWidget(
       const label = typeof props.label === "string" ? props.label : "";
       const indicator = checked ? "[x]" : "[ ]";
       const colorTokens = getColorTokens(theme);
+      const dsTone = readWidgetTone(props.dsTone);
+      const dsSize = readWidgetSize(props.dsSize) ?? "md";
       builder.pushClip(rect.x, rect.y, rect.w, rect.h);
       if (colorTokens !== null) {
         const state = disabled
           ? ("disabled" as const)
           : focused
             ? ("focus" as const)
-            : ("default" as const);
-        const recipeResult = checkboxRecipe(colorTokens, { state, checked });
+            : checked
+              ? ("selected" as const)
+              : ("default" as const);
+        const recipeResult = checkboxRecipe(
+          colorTokens,
+          dsTone === undefined
+            ? { state, checked, size: dsSize }
+            : { state, checked, tone: dsTone, size: dsSize },
+        );
         const indicatorStyle = mergeTextStyle(parentStyle, recipeResult.indicator);
         const labelStyle = mergeTextStyle(parentStyle, recipeResult.label);
         builder.drawText(rect.x, rect.y, indicator, indicatorStyle);
@@ -1527,6 +1538,8 @@ export function renderBasicWidget(
         options?: unknown;
         direction?: unknown;
         disabled?: unknown;
+        dsTone?: unknown;
+        dsSize?: unknown;
       };
       const id = typeof props.id === "string" ? props.id : null;
       const focused = id !== null && focusState.focusedId === id;
@@ -1536,20 +1549,47 @@ export function renderBasicWidget(
       const options = Array.isArray(props.options)
         ? (props.options as readonly SelectOption[])
         : [];
-
-      const focusStyle = focused ? { underline: true, bold: true } : undefined;
-      const style = mergeTextStyle(
-        parentStyle,
-        disabled ? { fg: theme.colors.muted, ...focusStyle } : focusStyle,
-      );
+      const colorTokens = getColorTokens(theme);
+      const dsTone = readWidgetTone(props.dsTone);
+      const dsSize = readWidgetSize(props.dsSize) ?? "md";
 
       builder.pushClip(rect.x, rect.y, rect.w, rect.h);
       let cx = rect.x;
       let cy = rect.y;
       for (const opt of options) {
-        const mark = opt.value === value ? "(o)" : "( )";
+        const selected = opt.value === value;
+        const mark = selected ? "(o)" : "( )";
+        if (colorTokens !== null) {
+          const state = disabled
+            ? ("disabled" as const)
+            : focused && selected
+              ? ("focus" as const)
+              : selected
+                ? ("selected" as const)
+                : ("default" as const);
+          const recipeResult = checkboxRecipe(
+            colorTokens,
+            dsTone === undefined
+              ? { state, checked: selected, size: dsSize }
+              : { state, checked: selected, tone: dsTone, size: dsSize },
+          );
+          const indicatorStyle = mergeTextStyle(parentStyle, recipeResult.indicator);
+          const labelStyle = mergeTextStyle(parentStyle, recipeResult.label);
+          builder.drawText(cx, cy, mark, indicatorStyle);
+          if (opt.label.length > 0) {
+            builder.drawText(cx + measureTextCells(mark) + 1, cy, opt.label, labelStyle);
+          }
+        } else {
+          const focusStyle = focused ? { underline: true, bold: true } : undefined;
+          const style = mergeTextStyle(
+            parentStyle,
+            disabled ? { fg: theme.colors.muted, ...focusStyle } : focusStyle,
+          );
+          const chunk = `${mark} ${opt.label}`;
+          builder.drawText(cx, cy, chunk, style);
+        }
+
         const chunk = `${mark} ${opt.label}`;
-        builder.drawText(cx, cy, chunk, style);
         if (direction === "horizontal") {
           cx += measureTextCells(chunk) + 2;
         } else {

packages/core/src/ui/recipes.ts

@@ -513,6 +513,8 @@ export function dividerRecipe(colors: ColorTokens): DividerRecipeResult {
 export type CheckboxRecipeParams = Readonly<{
   state?: WidgetState;
   checked?: boolean;
+  tone?: WidgetTone;
+  size?: WidgetSize;
 }>;
 
 export type CheckboxRecipeResult = Readonly<{
@@ -528,6 +530,10 @@ export function checkboxRecipe(
 ): CheckboxRecipeResult {
   const state = params.state ?? "default";
   const checked = params.checked ?? false;
+  const tone = params.tone ?? "default";
+  const large = params.size === "lg";
+  const selected = checked || state === "selected";
+  const selectedColor = resolveToneColor(colors, tone);
 
   if (state === "disabled") {
     return {
@@ -539,12 +545,12 @@ export function checkboxRecipe(
   const isFocused = state === "focus";
   return {
     indicator: {
-      fg: checked ? colors.accent.primary : colors.fg.secondary,
-      bold: isFocused,
+      fg: selected ? selectedColor : colors.fg.secondary,
+      bold: isFocused || large,
     },
     label: {
       fg: colors.fg.primary,
-      bold: isFocused,
+      bold: isFocused || large,
     },
   };
 }

packages/core/src/widgets/types.ts

@@ -1398,6 +1398,10 @@ export type CheckboxProps = Readonly<{
   onChange?: (checked: boolean) => void;
   /** Whether the checkbox is disabled. */
   disabled?: boolean;
+  /** Design system: tone for checked/focus rendering. */
+  dsTone?: WidgetTone;
+  /** Design system: size preset. */
+  dsSize?: WidgetSize;
 }>;
 
 /** Props for radio group widget. */
@@ -1418,6 +1422,10 @@ export type RadioGroupProps = Readonly<{
   direction?: "horizontal" | "vertical";
   /** Whether the radio group is disabled. */
   disabled?: boolean;
+  /** Design system: tone for selected/focus rendering. */
+  dsTone?: WidgetTone;
+  /** Design system: size preset. */
+  dsSize?: WidgetSize;
 }>;
 
 /* ========== Navigation Widgets ========== */