@multiplatform.one/forms 7.4.1 → 7.5.0

package/src/fields/Checkbox/Checkbox.spec.tsx

@@ -1,4 +1,4 @@
-import { act, fireEvent, render } from "@testing-library/react";
+import { act, cleanup, fireEvent, render } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import {
@@ -6,6 +6,7 @@ import {
   defaultAccentTheme,
   defaultBaseTheme,
   defaultBuilderOptions,
+  Preset,
 } from "@multiplatform.one/theme";
 import * as Theme from "@multiplatform.one/theme";
 import { configWithoutAnimations } from "@tamagui/config";
@@ -14,7 +15,7 @@ import { TamaguiProvider, createTamagui } from "tamagui";
 import { Form } from "../../Form";
 import { Checkbox } from "./Checkbox";
 import { CheckboxGroup } from "./CheckboxGroup";
-import { Checkboxes } from "./index";
+import { Checkboxes, clampCheckboxGlyphRadius, isCircularCheckboxRadius } from "./index";
 
 // House builder themes for the LC-05 mark assertion — created at MODULE
 // scope: tamagui registers a config's theme variables globally at
@@ -71,6 +72,20 @@ describe("Checkbox", () => {
       expect(onCheckedChange).toHaveBeenCalledWith(true);
     });
 
+    it("clicking the painted box still toggles", () => {
+      // The painted square is pointerEvents=none so RN presses reach the
+      // role=checkbox frame (inner View/SVG otherwise steal the responder).
+      // jsdom still delivers the click on [data-checkbox-box] via bubbling.
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <Checkbox name="cb" label="Accept" defaultValue={false} onChange={onChange} />,
+      );
+      const box = result.container.querySelector('[data-checkbox-box="true"]');
+      expect(box).toBeTruthy();
+      fireEvent.click(box!);
+      expect(onChange).toHaveBeenCalledWith(true);
+    });
+
     it("fires canonical onChange and the deprecated onCheckedChange alias once each", () => {
       const onChange = vi.fn();
       const onCheckedChange = vi.fn();
@@ -387,3 +402,87 @@ describe("CheckboxGroup", () => {
     });
   });
 });
+
+function glyphRadiusClasses(container: HTMLElement): string[] {
+  const box = container.querySelector('[data-checkbox-box="true"]');
+  return String(box?.className || "")
+    .split(" ")
+    .filter((c) => c.startsWith("_btlr-"));
+}
+
+const RADIUS_STOPS = ["none", "small", "medium", "large", "full"] as const;
+
+describe("clampCheckboxGlyphRadius (DG-RAD-05 / R2)", () => {
+  it("squares when pointy, even if the token is full", () => {
+    expect(clampCheckboxGlyphRadius("$12", { pointy: true })).toBe(0);
+    expect(clampCheckboxGlyphRadius("$0")).toBe(0);
+  });
+
+  it("caps every stop at $2 — never $12, never h/2", () => {
+    expect(clampCheckboxGlyphRadius("$2")).toBe("$2");
+    expect(clampCheckboxGlyphRadius("$4")).toBe("$2");
+    expect(clampCheckboxGlyphRadius("$6")).toBe("$2");
+    expect(clampCheckboxGlyphRadius("$8")).toBe("$2");
+    expect(clampCheckboxGlyphRadius("$12")).toBe("$2");
+  });
+
+  it("treats 5px on a 20px glyph as square and h/2 as circular", () => {
+    expect(isCircularCheckboxRadius(5, 20)).toBe(false);
+    expect(isCircularCheckboxRadius(10, 20)).toBe(true);
+    expect(isCircularCheckboxRadius(50, 20)).toBe(true);
+  });
+});
+
+describe("Checkbox never circular at any radius stop (R2)", () => {
+  it("glyph is square at none and capped at $2 through full — never a disc", () => {
+    for (const stop of RADIUS_STOPS) {
+      const result = renderWithProviders(
+        <Preset overrides={{ borderRadius: stop }}>
+          <Checkbox label="Terms" name="t" />
+        </Preset>,
+      );
+      const classes = glyphRadiusClasses(result.container);
+      expect(
+        classes.some((c) => c.includes("100000") || c.includes("radius-12")),
+        `stop ${stop} must not paint a circle: ${classes.join(" ")}`,
+      ).toBe(false);
+      if (stop === "none") {
+        expect(
+          classes.some((c) => c.includes("radius-0") || c === "_btlr-0px"),
+          `none must be 0, got ${classes.join(" ")}`,
+        ).toBe(true);
+      } else {
+        expect(classes, `stop ${stop}`).toEqual(["_btlr-t-radius-2"]);
+      }
+      cleanup();
+    }
+  });
+
+  it("compound Checkboxes glyph stays capped at full", () => {
+    const result = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <Checkboxes values={{ a: true }} onValuesChange={() => {}}>
+          <Checkboxes.Checkbox aria-label="A">
+            <Checkboxes.Checkbox.Indicator />
+          </Checkboxes.Checkbox>
+        </Checkboxes>
+      </Preset>,
+    );
+    const classes = glyphRadiusClasses(result.container);
+    expect(classes.some((c) => c.includes("radius-12") || c.includes("100000"))).toBe(false);
+    expect(classes).toEqual(["_btlr-t-radius-2"]);
+  });
+
+  it("role=checkbox hit target is not a disc (Tamagui size variant override)", () => {
+    const result = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <Checkbox label="Terms" name="t" />
+      </Preset>,
+    );
+    const root = result.getCheckbox();
+    const classes = String(root?.className || "")
+      .split(" ")
+      .filter((c) => c.startsWith("_btlr-"));
+    expect(classes.some((c) => c.includes("100000") || c.includes("radius-12"))).toBe(false);
+  });
+});

package/src/fields/Checkbox/Checkbox.stories.tsx

@@ -1,4 +1,5 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { CheckIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
@@ -346,3 +347,25 @@ export const CheckboxGroupInteractive: StoryObj = {
 export const SkeletonState: Story = {
   args: { label: "Accept terms", skeleton: true },
 };
+
+type InTableRow = { id: string; label: string; value: boolean };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: true },
+      { id: "2", label: "Beta", value: false },
+      { id: "3", label: "Gamma", value: false },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      { accessorKey: "value", header: "Checkbox", field: "checkbox" },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

package/src/fields/Checkbox/Checkbox.tsx

@@ -24,7 +24,6 @@ import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { formCommonColors, formSelectedColors } from "../../shared/colorRamps";
 import {
-  clampRadiusForControl,
   getElevationWrapperProps,
   getFieldError,
   mergeFieldHandler,
@@ -36,6 +35,7 @@ import {
   CheckboxGlyphBox,
   checkboxKbFocusHandlers,
   checkboxTargetFrameProps,
+  clampCheckboxGlyphRadius,
   getCheckboxBoxBorderWidth,
   getCheckboxGlyphSize,
   getCheckboxIconSize,
@@ -137,7 +137,7 @@ export function Checkbox({
   const resolvedSize =
     size || checkboxSizeMap[knobProps.sizeToken] || (knobProps.sizeToken as SizeTokens);
   const radiusToken = knobProps.borderRadius.borderRadius;
-  const cappedRadius = resolvedPointy ? 0 : clampRadiusForControl(radiusToken, 2);
+  const cappedRadius = clampCheckboxGlyphRadius(radiusToken, { pointy: resolvedPointy });
   const resolvedRadius =
     cappedRadius === 0
       ? { borderWidth: knobProps.borderRadius.borderWidth, borderRadius: 0 }
@@ -177,12 +177,25 @@ export function Checkbox({
     if (children) return children;
     return (
       <TamaguiCheckbox.Indicator
+        // Same native-responder steal as CheckboxGlyphBox — Indicator/SVG
+        // must not claim the press that belongs to the 44px frame.
+        pointerEvents="none"
         {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
       >
         {currentChecked === "indeterminate" ? (
-          <MinusRegular color={onMark ?? indicatorColor} weight={indicatorWeight} size={iconSize} />
+          <MinusRegular
+            color={onMark ?? indicatorColor}
+            weight={indicatorWeight}
+            size={iconSize}
+            pointerEvents="none"
+          />
         ) : (
-          <CheckRegular color={onMark ?? indicatorColor} weight={indicatorWeight} size={iconSize} />
+          <CheckRegular
+            color={onMark ?? indicatorColor}
+            weight={indicatorWeight}
+            size={iconSize}
+            pointerEvents="none"
+          />
         )}
       </TamaguiCheckbox.Indicator>
     );
@@ -225,7 +238,8 @@ export function Checkbox({
   const renderControlContent = (currentChecked: CheckedState | undefined) =>
     elevationWrapperProps.elevation && !inTableCell ? (
       <View
-        borderRadius={resolvedRadius.borderRadius ?? knobProps.borderRadius.borderRadius}
+        borderRadius={resolvedRadius.borderRadius ?? 0}
+        pointerEvents="none"
         {...elevationWrapperProps}
       >
         {glyphBox(currentChecked)}
@@ -258,7 +272,12 @@ export function Checkbox({
       <FieldLayout id={id} size={size} knobProps={knobProps} compactSpacing>
         <XStack gap={inlineGap} alignItems="center">
           <View width={targetSize} height={targetSize} alignItems="center" justifyContent="center">
-            <Skeleton variant="rounded" width={20} height={20} borderRadius={cappedRadius} />
+            <Skeleton
+              variant="rounded"
+              width={glyphSize}
+              height={glyphSize}
+              borderRadius={cappedRadius}
+            />
           </View>
           {label && <Skeleton variant="text" width={96} height={14} />}
         </XStack>

package/src/fields/Checkbox/CheckboxBox.tsx

@@ -8,10 +8,36 @@ import type { SizeTokens, TransitionProp } from "tamagui";
 import { View, getVariableValue, isWeb } from "tamagui";
 import { getSize } from "@tamagui/get-token";
 import { formControlColors, formSelectedColors } from "../../shared/colorRamps";
+import { clampRadiusForControl } from "../../shared/utils";
 
 /** WCAG 2.5.5 pressable floor. The painted box is smaller and sits inside. */
 export const CHECKBOX_TARGET_PX = 44;
 
+/**
+ * DG-RAD-05 / R2: the glyph rides the linear scale but NEVER `h/2`.
+ * `$2` = 5px, which stays square on the ~20px box. `$4` (9) already paints
+ * as a circle on that box; `$12` is a radio.
+ */
+export const CHECKBOX_GLYPH_MAX_RADIUS_TOKEN = 2;
+
+/**
+ * Per-component override for the checkbox glyph (RULINGS-2026-08-28 R2).
+ * `pointy` / `$0` → 0; every other stop caps at `$2`. Never `$12`, never h/2.
+ */
+export function clampCheckboxGlyphRadius(
+  radiusToken: string | undefined,
+  options?: { pointy?: boolean },
+): string | 0 {
+  if (options?.pointy) return 0;
+  return clampRadiusForControl(radiusToken, CHECKBOX_GLYPH_MAX_RADIUS_TOKEN);
+}
+
+/** Painted radius ≥ half the side reads as a circle (a radio, not a check). */
+export function isCircularCheckboxRadius(radiusPx: number, sidePx: number): boolean {
+  if (sidePx <= 0) return false;
+  return radiusPx >= sidePx / 2;
+}
+
 export function getCheckboxGlyphSize(size: SizeTokens): number {
   return Math.round(getVariableValue(getSize(size)) * 0.45);
 }
@@ -37,6 +63,9 @@ export const checkboxTargetFrameProps = {
   minHeight: CHECKBOX_TARGET_PX,
   padding: 0,
   borderWidth: 0,
+  // Tamagui's size variant sets borderRadius = size/8 on the role=checkbox
+  // frame. Override it: this node is an unpainted 44px target, never a disc.
+  borderRadius: 0,
   backgroundColor: "transparent" as const,
   alignItems: "center" as const,
   justifyContent: "center" as const,
@@ -130,6 +159,10 @@ export function CheckboxGlyphBox({
       alignItems="center"
       justifyContent="center"
       overflow="visible"
+      // Paint-only: on RN a nested View / Phosphor SVG steals the responder
+      // from the 44px role=checkbox frame, so the box itself never toggles
+      // (the Label Pressable still works). `none` lets the press fall through.
+      pointerEvents="none"
       {...(transition ? { transition } : undefined)}
       {...(kbFocus ? ensureFocusVisibleRing() : { outlineWidth: 0 as const })}
     >

package/src/fields/Checkbox/CheckboxCard.tsx

@@ -17,7 +17,6 @@ export const CheckboxCardFrame = styled(View, {
   width: "100%",
   paddingVertical: "$3",
   paddingHorizontal: "$3.5",
-  borderRadius: "$4",
   backgroundColor: formCardColors.background.base,
   borderColor: formCardColors.border.base,
   borderWidth: 1,

package/src/fields/Checkbox/CheckboxFieldFrame.tsx

@@ -5,6 +5,7 @@ export const CheckboxFieldFrame = styled(TamaguiCheckbox, {
   backgroundColor: "transparent",
   borderColor: "transparent",
   borderWidth: 0,
+  borderRadius: 0,
   outlineWidth: 0,
   hoverStyle: { backgroundColor: "transparent", borderColor: "transparent" },
   pressStyle: { backgroundColor: "transparent", borderColor: "transparent" },

package/src/fields/Checkbox/CheckboxGroup.tsx

@@ -12,14 +12,13 @@ import { Field, FieldLayout } from "../../fieldLayout";
 import { Skeleton } from "../../Skeleton";
 import type { AnyFormApi } from "../../types";
 import {
-  clampRadiusForControl,
   getFieldError,
   mergeFieldHandler,
   useFormField,
   useResolvedValidators,
 } from "../../shared/utils";
 import { Checkbox, getCheckboxInlineGap } from "./Checkbox";
-import { CHECKBOX_TARGET_PX } from "./CheckboxBox";
+import { CHECKBOX_TARGET_PX, clampCheckboxGlyphRadius, getCheckboxGlyphSize } from "./CheckboxBox";
 import {
   CheckboxCardContent,
   CheckboxCardDescription,
@@ -129,21 +128,29 @@ export function CheckboxGroup({
     const optionCount = options?.length ?? 3;
     const Container = orientation === "horizontal" ? XStack : YStack;
     const inlineGap = getCheckboxInlineGap(knobProps.space);
-    const controlRadius = clampRadiusForControl(knobProps.borderRadius.borderRadius, 2);
+    const controlRadius = clampCheckboxGlyphRadius(knobProps.borderRadius.borderRadius, {
+      pointy: knobProps.pointy,
+    });
+    const glyphSize = getCheckboxGlyphSize((size || knobProps.sizeToken) as SizeTokens);
     const labelWidths = [88, 64, 76];
     return (
       <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
         <Container gap="$2">
           {Array.from({ length: optionCount }, (_, i) => (
             <XStack key={i} gap={inlineGap} alignItems="center">
-              {/* Mirror the 44px pressable target box around the 20px glyph */}
+              {/* Mirror the 44px pressable target box around the glyph */}
               <View
                 width={CHECKBOX_TARGET_PX}
                 height={CHECKBOX_TARGET_PX}
                 alignItems="center"
                 justifyContent="center"
               >
-                <Skeleton variant="rounded" width={20} height={20} borderRadius={controlRadius} />
+                <Skeleton
+                  variant="rounded"
+                  width={glyphSize}
+                  height={glyphSize}
+                  borderRadius={controlRadius}
+                />
               </View>
               <Skeleton variant="text" width={labelWidths[i % labelWidths.length]} height={14} />
             </XStack>

package/src/fields/Checkbox/index.tsx

@@ -27,13 +27,13 @@ import {
 import { CheckboxFieldFrame } from "./CheckboxFieldFrame";
 import {
   CheckboxGlyphBox,
+  clampCheckboxGlyphRadius,
   checkboxKbFocusHandlers,
   checkboxTargetFrameProps,
   getCheckboxBoxBorderWidth,
   getCheckboxGlyphSize,
   getCheckboxIconSize,
 } from "./CheckboxBox";
-import { clampRadiusForControl } from "../../shared/utils";
 import { formSelectedColors } from "../../shared/colorRamps";
 
 // ─── Checkboxes Compound Component ────────────────────────────────────────────
@@ -136,7 +136,7 @@ const CheckboxesCheckbox = TamaguiCheckbox.styleable((checkboxProps, ref) => {
   const [hovered, setHovered] = useState(false);
   const isMarked = Boolean(values[focusItemValue]);
   const radiusToken = knobProps.borderRadius.borderRadius;
-  const cappedRadius = clampRadiusForControl(radiusToken, 2);
+  const cappedRadius = clampCheckboxGlyphRadius(radiusToken, { pointy: knobProps.pointy });
   const glyphSize = getCheckboxGlyphSize(knobProps.sizeToken);
   const boxBorderWidth = getCheckboxBoxBorderWidth(knobProps.borderRadius.borderWidth);
   const inFocusGroup = Boolean(focusItemValue);
@@ -226,8 +226,14 @@ const CheckboxesIndicator = TamaguiCheckbox.Indicator.styleable((indicatorProps,
   const { knobProps } = useResolvedKnobs();
   const iconSize = getCheckboxIconSize(getCheckboxGlyphSize(knobProps.sizeToken));
   return (
-    <TamaguiCheckbox.Indicator ref={ref} {...props}>
-      {children ?? <CheckRegular size={iconSize} {...(onMark ? { color: onMark } : undefined)} />}
+    <TamaguiCheckbox.Indicator ref={ref} {...props} pointerEvents="none">
+      {children ?? (
+        <CheckRegular
+          size={iconSize}
+          pointerEvents="none"
+          {...(onMark ? { color: onMark } : undefined)}
+        />
+      )}
     </TamaguiCheckbox.Indicator>
   );
 });
@@ -255,3 +261,9 @@ export { Checkbox } from "./Checkbox";
 export type { CheckboxProps } from "./Checkbox";
 export { CheckboxGroup } from "./CheckboxGroup";
 export type { CheckboxGroupProps, CheckboxGroupOption } from "./CheckboxGroup";
+export {
+  CHECKBOX_GLYPH_MAX_RADIUS_TOKEN,
+  CHECKBOX_TARGET_PX,
+  clampCheckboxGlyphRadius,
+  isCircularCheckboxRadius,
+} from "./CheckboxBox";

package/src/fields/ColorPicker/ColorPicker.spec.tsx

@@ -1,7 +1,11 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 import { act, fireEvent, waitFor } from "@testing-library/react";
 import { createElement } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
 import {
   AlphaStrip,
   HueStrip,
@@ -142,13 +146,13 @@ describe("ColorPicker", () => {
     expect(onValueChange).toHaveBeenCalledWith("");
   });
 
-  it("shows format validation error for invalid rgb value", async () => {
+  it("shows format validation error for unrecognized rgb value", async () => {
     const ColorPicker = await loadColorPicker();
     const result = renderWithProviders(
       <ColorPicker label="Color" name={undefined as never} format="rgb" defaultValue="not-rgb" />,
     );
 
-    expect(result.findTextElement("Invalid RGB color value")).toBeDefined();
+    expect(result.findTextElement("Color must be a recognized RGB value")).toBeDefined();
   });
 
   describe("color utilities", () => {
@@ -314,4 +318,91 @@ describe("ColorPicker", () => {
       );
     });
   });
+
+  describe("design-law 100%", () => {
+    const here = dirname(fileURLToPath(import.meta.url));
+
+    it("consumes FloatingPanel widthMode at-least-trigger (does not reimplement cover)", () => {
+      const source = readFileSync(resolve(here, "parts.tsx"), "utf8");
+      expect(source).toContain('widthMode="at-least-trigger"');
+      expect(source).not.toMatch(/^\s*fitContent\s*$/m);
+      expect(source).not.toContain("OVERLAY_ATTACH_GAP");
+    });
+
+    it("exports ColorPicker as a named export, not default", async () => {
+      const mod = await import("./index");
+      expect(typeof mod.ColorPicker).toBe("function");
+      expect("default" in mod).toBe(false);
+    });
+
+    it("states format errors without banned DG-COPY-02 words", async () => {
+      const ColorPicker = await loadColorPicker();
+      const result = renderWithProviders(
+        <ColorPicker label="Color" name={undefined as never} format="rgb" defaultValue="not-rgb" />,
+      );
+      const text = result.container.textContent ?? "";
+      expect(text.toLowerCase()).not.toMatch(/\binvalid\b|\bplease\b|\bsorry\b|\boops\b/);
+      expect(result.findTextElement("Color must be a recognized RGB value")).toBeDefined();
+    });
+
+    it("marks the editor host compose so a swatch pick does not dismiss (LC-21)", async () => {
+      const ColorPicker = await loadColorPicker();
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <ColorPicker
+          label="Color"
+          name={undefined as never}
+          defaultValue="#FF0000"
+          presetColors={["#00FF00", "#0000FF"]}
+          onChange={onChange}
+        />,
+      );
+      const triggerInput = result.container.querySelector("input");
+      await act(async () => {
+        if (triggerInput) fireEvent.click(triggerInput);
+      });
+      await waitFor(() => {
+        expect(document.body.querySelector('[aria-label="Hue"]')).toBeTruthy();
+      });
+      expect(document.body.querySelector('[data-dismiss-class="compose"]')).toBeTruthy();
+
+      const radios = document.body.querySelectorAll('[role="radio"]');
+      expect(radios.length).toBeGreaterThanOrEqual(2);
+      await act(async () => {
+        fireEvent.click(radios[0]);
+      });
+      expect(document.body.querySelector('[aria-label="Hue"]')).toBeTruthy();
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalled();
+      });
+      const first = String(onChange.mock.calls.at(-1)?.[0] ?? "").toUpperCase();
+      expect(first.startsWith("#00FF00")).toBe(true);
+
+      await act(async () => {
+        fireEvent.click(radios[1]);
+      });
+      expect(document.body.querySelector('[aria-label="Hue"]')).toBeTruthy();
+      await waitFor(() => {
+        expect(
+          String(onChange.mock.calls.at(-1)?.[0] ?? "")
+            .toUpperCase()
+            .startsWith("#0000FF"),
+        ).toBe(true);
+      });
+    });
+
+    it("swatches and cursors are square at radius none (R-BINARY)", () => {
+      const none = renderWithProviders(
+        <Preset overrides={{ borderRadius: "none" }}>
+          <HueStrip hue={0} onChangeHue={() => {}} height={100} orientation="vertical" />
+        </Preset>,
+      );
+      const handle = none.container.querySelector(
+        '[data-testid="color-handle"]',
+      ) as HTMLElement | null;
+      expect(handle).toBeTruthy();
+      const radius = getComputedStyle(handle!).borderRadius;
+      expect(radius === "0px" || radius === "0").toBe(true);
+    });
+  });
 });

package/src/fields/ColorPicker/ColorPicker.stories.tsx

@@ -1,4 +1,5 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
@@ -169,3 +170,31 @@ export const SkeletonState: Story = {
   render: (args) => <ColorPicker {...args} />,
   args: { label: "Brand Color", skeleton: true },
 };
+
+type InTableRow = { id: string; label: string; value: string };
+
+/** LC-06: ColorPicker stays hosted in DataTable; the cell opens a popover. */
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: "#3B82F6" },
+      { id: "2", label: "Beta", value: "#10B981" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "Color",
+        field: "colorpicker",
+        fieldProps: { format: "hex" },
+      },
+    ];
+    return (
+      <YStack width="100%" height={320}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};