@multiplatform.one/frappe-ui 7.4.1 → 7.6.0

package/src/fieldRegistry.spec.tsx

@@ -8,7 +8,8 @@
  * asserted by inspecting the element they produce (the adapters under test
  * are plain functions without hooks, so calling them directly is safe).
  */
-import { Combobox, ImageField } from "@multiplatform.one/forms";
+import { Button, Combobox, ImageField } from "@multiplatform.one/forms";
+import type { FrappeFieldType } from "@multiplatform.one/frappe";
 import type React from "react";
 import { describe, expect, it } from "vitest";
 import {
@@ -18,6 +19,7 @@ import {
   type ChildTableFieldDef,
   type FieldRenderProps,
 } from "./fieldRegistry";
+import { Icon } from "./fields/Icon";
 import { Link } from "./fields/Link";
 import { Rating } from "./fields/Rating";
 
@@ -81,6 +83,16 @@ describe("fieldtypeToTableField (cell context)", () => {
     expect(element.props.compact).toBe(true);
   });
 
+  it("maps Icon to the Icon picker cell (compact), honoring render context", () => {
+    const render = customRenderOf(fieldtypeToTableField("Icon"));
+    const element = render("mail", {}, () => {});
+    expect(element.type).toBe(Icon);
+    expect(element.props.value).toBe("mail");
+    expect(element.props.compact).toBe(true);
+    const readOnlyElement = render("mail", {}, () => {}, { readOnly: true, disabled: false });
+    expect(readOnlyElement.props.readOnly).toBe(true);
+  });
+
   it("Rating star count comes from df.options (stock cint(df.options) || 5)", () => {
     const render = customRenderOf(fieldtypeToTableField("Rating", "7"));
     const element = render(0.5, {}, () => {});
@@ -224,4 +236,122 @@ describe("form adapters (registry context)", () => {
   it("unregistered fieldtypes resolve to undefined (SchemaForm renders the honest fallback)", () => {
     expect(getFieldComponent("Some Custom Type")).toBeUndefined();
   });
+
+  it("Attach and Attach Image forward the library feed (MPO-53 AC-11 clobber guard)", () => {
+    // 035867446 rewrote these adapters and silently dropped the
+    // library/libraryFiles/libraryFolder pass-through, severing Attach's
+    // choose-from-library tab from every schema-driven form. The feed is part
+    // of the adapter contract; this pins it.
+    const files = [
+      { name: "inv-1", file_name: "invoice.pdf", folder: "Home", file_url: "/files/invoice.pdf" },
+    ];
+    for (const fieldtype of ["Attach", "Attach Image"]) {
+      const Component = getFieldComponent(fieldtype)!;
+      const element = (Component as Function)(
+        propsFor({ value: null, libraryFiles: files, libraryFolder: "Home" }),
+      ) as InspectableElement;
+      expect(element.props.library).toBe(true);
+      expect(element.props.libraryFiles).toBe(files);
+      expect(element.props.libraryFolder).toBe("Home");
+    }
+    const AttachComponent = getFieldComponent("Attach")!;
+    const disabledTab = (AttachComponent as Function)(
+      propsFor({ value: null, library: false }),
+    ) as InspectableElement;
+    expect(disabledTab.props.library).toBe(false);
+  });
+
+  it("Icon is registered and adapts to the Icon picker", () => {
+    const IconComponent = getFieldComponent("Icon")!;
+    expect(IconComponent).toBeDefined();
+    const element = (IconComponent as Function)(
+      propsFor({
+        value: "mail",
+        fieldMeta: { type: "Icon", name: "workspace_icon" },
+      }),
+    ) as InspectableElement;
+    expect(element.type).toBe(Icon);
+    expect(element.props.value).toBe("mail");
+  });
+
+  it("union-minus-registry holds no real fieldtype (layout breaks only)", () => {
+    // Every FrappeFieldType member from public/frappe/src/doctype.ts. A real
+    // fieldtype missing from the registry renders the unsupported-type string
+    // (the MPO-51 Icon hole, reopened once already by 035867446's registry
+    // rewrite), so this list is asserted against the registry wholesale.
+    const frappeFieldTypes: readonly FrappeFieldType[] = [
+      "Autocomplete",
+      "Attach",
+      "Attach Image",
+      "Barcode",
+      "Button",
+      "Check",
+      "Code",
+      "Color",
+      "Column Break",
+      "Currency",
+      "Data",
+      "Date",
+      "Datetime",
+      "Duration",
+      "Dynamic Link",
+      "Float",
+      "Geolocation",
+      "HTML",
+      "HTML Editor",
+      "Heading",
+      "Icon",
+      "Image",
+      "Int",
+      "JSON",
+      "Link",
+      "Long Text",
+      "Markdown Editor",
+      "Password",
+      "Percent",
+      "Phone",
+      "Rating",
+      "Read Only",
+      "Section Break",
+      "Select",
+      "Signature",
+      "Small Text",
+      "Tab Break",
+      "Table",
+      "Table MultiSelect",
+      "Text",
+      "Text Editor",
+      "Time",
+    ];
+    const unregistered = frappeFieldTypes.filter((fieldtype) => !getFieldComponent(fieldtype));
+    // The three layout breaks never get adapters — FormSection / FormGrid /
+    // Tabs serve them structurally.
+    const layoutBreaks = ["Column Break", "Section Break", "Tab Break"];
+    for (const layoutBreak of layoutBreaks) {
+      expect(unregistered).toContain(layoutBreak);
+    }
+    expect(unregistered).not.toContain("Icon");
+    // "Button" is transiently tolerated here: its adapter (a8f8f52bd) was
+    // reverted by the same 035867446 rewrite and is being restored on
+    // lane/MPO-51-button-fieldtype. Drop it from this allowlist when that
+    // lands — the Button spec below pins the adapter itself.
+    for (const fieldtype of unregistered) {
+      expect([...layoutBreaks, "Button"]).toContain(fieldtype);
+    }
+  });
+
+  it("Button is in the FrappeFieldType union and adapts to the house Button", () => {
+    const fieldtype: FrappeFieldType = "Button";
+    expect(fieldtype).toBe("Button");
+    const ButtonComponent = getFieldComponent("Button")!;
+    expect(ButtonComponent).toBeDefined();
+    const element = (ButtonComponent as Function)(
+      propsFor({
+        label: "Make Payment Entry",
+        fieldMeta: { type: "Button", name: "make_payment_entry" },
+      }),
+    ) as InspectableElement;
+    expect(element.type).toBe(Button);
+    expect(element.props.children).toBe("Make Payment Entry");
+  });
 });

package/src/fieldRegistry.ts

@@ -9,7 +9,7 @@
 import React, { useMemo } from "react";
 import type { ComponentType } from "react";
 import { useDocTypeMeta } from "@multiplatform.one/frappe";
-import { CheckboxGroup, Combobox, ImageField } from "@multiplatform.one/forms";
+import { Button, CheckboxGroup, Combobox, ImageField, Skeleton } from "@multiplatform.one/forms";
 
 import { Barcode } from "./fields/Barcode";
 import { useFrappeConfig } from "./FrappeProvider";
@@ -26,6 +26,7 @@ import { TimePicker } from "./fields/TimePicker";
 import { Geolocation } from "./fields/Geolocation";
 import { Heading } from "./fields/Heading";
 import { Html } from "./fields/HTML";
+import { Icon } from "./fields/Icon";
 import { Link } from "./fields/Link";
 import { LongText } from "./fields/LongText";
 import { MarkdownEditorField } from "./fields/MarkdownEditor";
@@ -165,6 +166,10 @@ function disabledInputBlock(props: FieldRenderProps) {
   return props.disabled ? { inputProps: { readOnly: true, tabIndex: -1 } } : undefined;
 }
 
+function disabledTextAreaBlock(props: FieldRenderProps) {
+  return props.disabled ? { textAreaProps: { readOnly: true, tabIndex: -1 } } : undefined;
+}
+
 function DataAdapter(props: FieldRenderProps) {
   return React.createElement(Data, {
     label: props.label,
@@ -391,6 +396,20 @@ function ColorAdapter(props: FieldRenderProps) {
   });
 }
 
+function IconAdapter(props: FieldRenderProps) {
+  const rawOptions = props.fieldMeta?.options ?? props.options ?? "";
+  return React.createElement(Icon, {
+    label: props.label,
+    value: props.value ?? "",
+    onChange: props.onChange,
+    disabled: props.disabled,
+    required: props.required,
+    error: props.error,
+    options: typeof rawOptions === "string" ? rawOptions : undefined,
+    ...passthroughProps(props),
+  });
+}
+
 function SmallTextAdapter(props: FieldRenderProps) {
   return React.createElement(SmallText, {
     label: props.label,
@@ -400,7 +419,7 @@ function SmallTextAdapter(props: FieldRenderProps) {
     required: props.required,
     error: props.error,
     ...passthroughProps(props),
-    ...disabledInputBlock(props),
+    ...disabledTextAreaBlock(props),
   });
 }
 
@@ -413,14 +432,20 @@ function LongTextAdapter(props: FieldRenderProps) {
     required: props.required,
     error: props.error,
     ...passthroughProps(props),
-    ...disabledInputBlock(props),
+    ...disabledTextAreaBlock(props),
   });
 }
 
 function TextEditorAdapter(props: FieldRenderProps) {
   return React.createElement(
     React.Suspense,
-    { fallback: React.createElement("div", null, "Loading editor...") },
+    {
+      fallback: React.createElement(Skeleton, {
+        width: "100%",
+        height: 160,
+        "aria-label": "Loading editor",
+      }),
+    },
     React.createElement(LazyTextEditor, {
       label: props.label,
       value: props.value ?? "",
@@ -635,6 +660,41 @@ function HeadingAdapter(props: FieldRenderProps) {
   });
 }
 
+/**
+ * Frappe `Button` is an ACTION field: it carries no stored value, so it is
+ * not a layout break and must not be swallowed by schemaForm. The house
+ * Button is the renderer slot; label copy is the DocField author's
+ * (DG-ACT-02) and the adapter never sets `accent`, so a form's own submit
+ * keeps the one primary (DG-ACT-01).
+ *
+ * LC-14: `onChange` is the canonical channel for fields that hold a VALUE.
+ * A Button holds none, so the adapter never fires it — a press would
+ * otherwise write a doc field that does not exist. Press wiring arrives on
+ * `onPress` through a field override (DG-CTRL-06, the eject hatch); with no
+ * override the button renders inert rather than inventing a doc write.
+ *
+ * Restored after the MPO-60 fieldRegistry rewrite (035867446) merged over
+ * the MPO-51 registration (a8f8f52bd, gitlab.com !77) and silently dropped
+ * it — CI runs only `turbo run build` (MPO-78), so the red spec never
+ * surfaced.
+ */
+function ButtonAdapter(props: FieldRenderProps) {
+  const disabled = Boolean(props.disabled || props.readOnly);
+  const reason =
+    (typeof props.disabledReason === "string" && props.disabledReason.trim()) ||
+    props.helperText ||
+    (typeof props.fieldMeta?.description === "string" ? props.fieldMeta.description : undefined) ||
+    (props.readOnly ? "Read only" : undefined);
+  return React.createElement(Button, {
+    disabled,
+    disabledReason: disabled ? String(reason ?? "Unavailable") : undefined,
+    skeleton: props.skeleton,
+    compact: props.compact,
+    onPress: disabled ? undefined : props.onPress,
+    children: props.label,
+  });
+}
+
 // ---------------------------------------------------------------------------
 // Adapter components — new field types (forms integration)
 // ---------------------------------------------------------------------------
@@ -770,6 +830,11 @@ function FileUploadAdapter(props: FieldRenderProps) {
     disabled: props.disabled,
     required: props.required,
     error: props.error,
+    // Attach's choose-from-library tab (FileBrowser, MPO-53 AC-11). The feed
+    // rides the registry so schema-driven Attach fields reach the library.
+    library: props.library !== false,
+    libraryFiles: props.libraryFiles,
+    libraryFolder: props.libraryFolder,
     ...passthroughProps(props),
   });
 }
@@ -782,6 +847,9 @@ function FileUploadImageAdapter(props: FieldRenderProps) {
     disabled: props.disabled,
     required: props.required,
     error: props.error,
+    library: props.library !== false,
+    libraryFiles: props.libraryFiles,
+    libraryFolder: props.libraryFolder,
     ...passthroughProps(props),
     isImage: true,
   });
@@ -940,6 +1008,25 @@ export function fieldtypeToTableField(
       return { field: "timepicker" };
     case "Color":
       return { field: "colorpicker" };
+    case "Icon":
+      return {
+        field: "custom",
+        fieldProps: {
+          render: (
+            value: unknown,
+            _rowData: unknown,
+            onCellChange: (v: unknown) => void,
+            context?: DataTableCellRenderContext,
+          ) =>
+            React.createElement(Icon, {
+              value: value === null || value === undefined ? "" : String(value),
+              onChange: onCellChange,
+              compact: true,
+              readOnly: context?.readOnly,
+              disabled: context?.disabled,
+            }),
+        },
+      };
     case "Rating": {
       // Frappe stores Rating as a 0–1 fraction of the star count (df.options,
       // default 5). The generic rating cell treats values as star counts, so
@@ -1265,6 +1352,12 @@ export function initDefaultRegistry(): void {
   // Color
   registerField("Color", ColorAdapter);
 
+  // Icon — picker over the DG-IDN-06 drawn set (MPO-51). MPO-22's Icon
+  // line points here instead of restating the gap. Registration was first
+  // landed by 3b0cf9902 and silently reverted by 035867446 (MPO-60), whose
+  // registry rewrite was cut from a pre-MPO-51 base; this restores it.
+  registerField("Icon", IconAdapter);
+
   // Text types
   registerField("Small Text", SmallTextAdapter);
   registerField("Long Text", LongTextAdapter);
@@ -1298,6 +1391,9 @@ export function initDefaultRegistry(): void {
   // Heading
   registerField("Heading", HeadingAdapter);
 
+  // Button — desk action field (MPO-51). Not a layout break; not a value.
+  registerField("Button", ButtonAdapter);
+
   // Rating
   registerField("Rating", RatingAdapter);
 

package/src/fields/Barcode/Barcode.stories.tsx

@@ -1,6 +1,9 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import { useState } from "react";
 import { YStack } from "tamagui";
+import { fieldtypeToTableField } from "../../fieldRegistry";
+import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { Barcode, type BarcodeProps } from ".";
 
 export default {
@@ -73,3 +76,32 @@ ContractProbe.args = {
   value: "5901234123457",
   enableScan: false,
 } as Partial<StoryProps>;
+
+type BarcodeRow = { id: string; label: string; value: string };
+
+export const InTable = {
+  name: "In table",
+  render: function InTableRender() {
+    const [data, setData] = useState<BarcodeRow[]>([
+      { id: "1", label: "Alpha", value: "5901234123457" },
+      { id: "2", label: "Beta", value: "0123456789012" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<BarcodeRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      { accessorKey: "value", header: "SKU", ...fieldtypeToTableField("Barcode") },
+    ];
+    return (
+      <FrappeStoryProvider>
+        <YStack width="100%" height={320}>
+          <DataTable
+            data={data}
+            columns={columns}
+            enablePagination={false}
+            onDataChange={setData}
+          />
+        </YStack>
+      </FrappeStoryProvider>
+    );
+  },
+};

package/src/fields/Check/Check.spec.tsx

@@ -0,0 +1,27 @@
+// Design-law: Check is a thin Checkbox adapter. Never circular at any radius.
+import { Preset } from "@multiplatform.one/theme";
+import { cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Check } from "./index";
+
+afterEach(cleanup);
+
+describe("Check design-law — compose forms Checkbox", () => {
+  it("renders the house checkbox glyph box", () => {
+    const result = renderWithProviders(<Check label="Accept" />);
+    expect(result.container.querySelector("[data-checkbox-box='true']")).toBeTruthy();
+  });
+
+  it("stays non-circular at radius=full (checkbox override)", () => {
+    const result = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <Check label="Accept" value />
+      </Preset>,
+    );
+    const box = result.container.querySelector("[data-checkbox-box='true']") as HTMLElement | null;
+    expect(box).toBeTruthy();
+    const radius = box?.style.borderRadius || getComputedStyle(box as Element).borderRadius;
+    expect(radius).not.toMatch(/50%|9999|999px/);
+  });
+});

package/src/fields/Check/Check.stories.tsx

@@ -1,6 +1,9 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import { useState } from "react";
 import { YStack } from "tamagui";
+import { fieldtypeToTableField } from "../../fieldRegistry";
+import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { Check, type CheckProps } from ".";
 
 export default {
@@ -58,3 +61,58 @@ AllStates.parameters = {
     },
   },
 };
+
+interface CheckCellRow {
+  id: string;
+  label: string;
+  value: boolean;
+}
+
+const checkCellRows: CheckCellRow[] = [
+  { id: "1", label: "Alpha", value: true },
+  { id: "2", label: "Beta", value: false },
+  { id: "3", label: "Gamma", value: false },
+];
+
+const checkCellColumns: DataTableColumn<CheckCellRow>[] = [
+  { accessorKey: "label", header: "Row" },
+  {
+    accessorKey: "value",
+    header: "Check",
+    ...fieldtypeToTableField("Check"),
+  } as DataTableColumn<CheckCellRow>,
+];
+
+function InTableStory() {
+  const [data, setData] = useState(checkCellRows);
+  return (
+    <YStack width="100%" height={280}>
+      <DataTable
+        data={data}
+        columns={checkCellColumns as DataTableColumn<Record<string, any>>[]}
+        enablePagination={false}
+        onDataChange={(next: Record<string, any>[]) => {
+          setData(next as CheckCellRow[]);
+          action("onDataChange")(next);
+        }}
+        aria-label="Check cell editor table"
+      />
+    </YStack>
+  );
+}
+
+/** 3-row DataTable mapped through fieldtypeToTableField("Check") — in-cell checkbox. */
+export const InTable = () => (
+  <FrappeStoryProvider>
+    <InTableStory />
+  </FrappeStoryProvider>
+);
+InTable.storyName = "In table";
+InTable.parameters = {
+  docs: {
+    description: {
+      story:
+        "Check inside a table cell: the registry maps the fieldtype to an in-cell checkbox. Three rows of mock DocType data; toggles commit through onDataChange.",
+    },
+  },
+};

package/src/fields/Check/index.tsx

@@ -1,3 +1,9 @@
+/**
+ * Frappe Check field — thin adapter over forms Checkbox.
+ *
+ * Design-law lives on this file: compose Checkbox, do not fork its chrome.
+ * Radius stays NEVER circular (Checkbox clamp / per-component override).
+ */
 import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
 import { Checkbox as FormsCheckbox } from "@multiplatform.one/forms";
 import type { DeepKeys } from "@tanstack/form-core";
@@ -75,7 +81,7 @@ export function Check<
       id={fieldProps.id}
       size={fieldProps.size}
       checked={value}
-      onCheckedChange={(checked) => onChange?.(checked === true)}
+      onChange={(checked) => onChange?.(checked === true)}
       onBlur={onBlur}
       disabled={disabled}
       checkboxProps={checkboxProps as any}

package/src/fields/CodeEditor/CodeEditor.stories.tsx

@@ -1,8 +1,11 @@
 import { Form, type AnyFormApi } from "@multiplatform.one/forms";
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { Theme, YStack } from "tamagui";
+import { fieldtypeToTableField } from "../../fieldRegistry";
+import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { CodeEditorField, frappeCodeLanguage, type CodeEditorFieldProps } from ".";
 
 const PYTHON_FIXTURE = `import frappe
@@ -141,3 +144,32 @@ DarkScheme.args = {
   value: PYTHON_FIXTURE,
   language: "python",
 } as Partial<StoryProps>;
+
+type CodeRow = { id: string; label: string; value: string };
+
+export const InTable = {
+  name: "In table",
+  render: function InTableRender() {
+    const [data, setData] = useState<CodeRow[]>([
+      { id: "1", label: "Alpha", value: PYTHON_FIXTURE },
+      { id: "2", label: "Beta", value: JSON_FIXTURE },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<CodeRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      { accessorKey: "value", header: "Script", ...fieldtypeToTableField("Code") },
+    ];
+    return (
+      <FrappeStoryProvider>
+        <YStack width="100%" height={320}>
+          <DataTable
+            data={data}
+            columns={columns}
+            enablePagination={false}
+            onDataChange={setData}
+          />
+        </YStack>
+      </FrappeStoryProvider>
+    );
+  },
+};

package/src/fields/Color/Color.spec.tsx

@@ -0,0 +1,21 @@
+// Design-law: Color is a thin ColorPicker adapter. Do not fork picker chrome.
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Color } from "./index";
+
+afterEach(cleanup);
+
+describe("Color design-law — compose forms ColorPicker", () => {
+  it("renders the house color field (hex input, no forked chrome)", () => {
+    const result = renderWithProviders(<Color label="Brand" value="#10B981" onChange={vi.fn()} />);
+    const input = result.container.querySelector("input") as HTMLInputElement | null;
+    expect(input).toBeTruthy();
+    expect(screen.getByText("Brand")).toBeTruthy();
+  });
+
+  it("forwards skeleton and hides the input", () => {
+    const result = renderWithProviders(<Color label="Brand" skeleton />);
+    expect(result.container.querySelector("input")).toBeNull();
+  });
+});

package/src/fields/Color/Color.stories.tsx

@@ -1,6 +1,9 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import { useState } from "react";
 import { YStack } from "tamagui";
+import { fieldtypeToTableField } from "../../fieldRegistry";
+import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { Color, type ColorProps } from ".";
 
 export default {
@@ -68,3 +71,33 @@ AllStates.parameters = {
     },
   },
 };
+
+interface ColorRow {
+  id: string;
+  label: string;
+  value: string;
+}
+
+export const InTable = () => {
+  const [data, setData] = useState<ColorRow[]>([
+    { id: "1", label: "Alpha", value: "#10B981" },
+    { id: "2", label: "Beta", value: "#F59E0B" },
+    { id: "3", label: "Gamma", value: "" },
+  ]);
+  const columns: DataTableColumn<ColorRow>[] = [
+    { accessorKey: "label", header: "Row" },
+    {
+      accessorKey: "value",
+      header: "Color",
+      ...fieldtypeToTableField("Color"),
+    },
+  ];
+  return (
+    <FrappeStoryProvider>
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    </FrappeStoryProvider>
+  );
+};
+InTable.storyName = "In table";

package/src/fields/Color/index.tsx

@@ -1,3 +1,9 @@
+/**
+ * Frappe Color field — thin adapter over forms ColorPicker.
+ *
+ * Design-law lives on this file: compose ColorPicker, do not fork its chrome.
+ * Canonical change is `onChange` (LC-14); a chosen hex is value data.
+ */
 import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
 import { ColorPicker as FormsColorPicker } from "@multiplatform.one/forms";
 import type { DeepKeys } from "@tanstack/form-core";
@@ -68,7 +74,7 @@ export function Color<
       form={form}
       validators={validators}
       value={value as string | undefined}
-      onValueChange={onChange as ((v: string) => void) | undefined}
+      onChange={onChange as ((v: string) => void) | undefined}
       defaultValue={defaultValue as string}
       label={fieldProps.label}
       labelProps={fieldProps.labelProps}

package/src/fields/Data/Data.spec.tsx

@@ -0,0 +1,26 @@
+// Design-law: Data is a thin Input adapter. Do not fork Input chrome.
+import { cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Data } from "./index";
+
+afterEach(cleanup);
+
+describe("Data design-law — compose forms Input", () => {
+  it("renders the house Input box (data-ring-target=box)", () => {
+    const result = renderWithProviders(<Data label="Name" />);
+    expect(result.container.querySelector("input")).toBeTruthy();
+    expect(result.container.querySelector("[data-ring-target='box']")).toBeTruthy();
+  });
+
+  it("forwards skeleton and hides the input", () => {
+    const result = renderWithProviders(<Data label="Name" skeleton />);
+    expect(result.container.querySelector("input")).toBeNull();
+  });
+
+  it("forwards readOnly onto the input", () => {
+    const result = renderWithProviders(<Data label="Name" readOnly value="locked" />);
+    const input = result.container.querySelector("input") as HTMLInputElement | null;
+    expect(input?.readOnly || input?.getAttribute("aria-readonly")).toBeTruthy();
+  });
+});