@multiplatform.one/forms 7.4.1 → 7.6.0

package/src/fields/Progress/index.tsx

@@ -18,6 +18,7 @@ import {
 import { Field, FieldLayout, useFieldDescribedBy } from "../../fieldLayout";
 import { Skeleton } from "../../Skeleton";
 import { formControlColors } from "../../shared/colorRamps";
+import { useIsInTableCell } from "../../shared/tableCellContext";
 import { bidiIsolate, t } from "../../shared/t";
 import {
   getElevationWrapperProps,
@@ -73,7 +74,8 @@ function clampProgress(value: unknown, max: number): number {
 
 function indicatorMotion(transition: KnobProps["transition"]) {
   // `transition` only — the tamagui 1.x `animation` prop is silently dropped
-  // on 2.x (convention lint).
+  // on 2.x (convention lint). Named motion rides the knob; `none` is an
+  // explicit stop so Tamagui's Indicator default cannot keep tweening (LC-32).
   if (!transition) return { transition: "none" as const };
   return { transition };
 }
@@ -114,6 +116,12 @@ export interface ProgressProps {
   value?: number;
   defaultValue?: number;
   max?: number;
+  /**
+   * Canonical change prop (LC-14). Progress is display-only — the field
+   * never mutates from user input — but the contract still accepts
+   * `onChange(value)` so wiring it never silently no-ops at the type layer.
+   */
+  onChange?: (value: number) => void;
   onBlur?: (...args: any[]) => void;
   progressProps?: Omit<TamaguiProgressProps, "value" | "max" | "id" | "children">;
   /**
@@ -129,7 +137,8 @@ export interface ProgressProps {
   compact?: boolean;
   /**
    * Visible percent beside the track (Primer / Polaris text pairing).
-   * Defaults on when a field label is present; unlabeled embeds stay bar-only.
+   * Defaults on when a field label is present; unlabeled embeds and table
+   * cells stay bar-only unless this is forced on.
    */
   showValue?: boolean;
 }
@@ -177,7 +186,6 @@ function ProgressTrack({
 
   const progressElement = (
     <ProgressFrame
-      width="100%"
       size={trackSize}
       overflow="hidden"
       outlined={knobProps.outlined}
@@ -187,6 +195,10 @@ function ProgressTrack({
       aria-label={name}
       aria-describedby={describedBy}
       aria-readonly={readOnly || undefined}
+      // Tamagui's size variant pins minWidth ≈ height×20 (~220px). Zero it
+      // after `size` so the track fills the cell / form column (LC-18).
+      width="100%"
+      minWidth={0}
       {...progressProps}
       id={id}
       value={progressValue}
@@ -264,6 +276,7 @@ export function Progress({
   value,
   defaultValue,
   max,
+  onChange: _onChange,
   onBlur,
   progressProps,
   intent,
@@ -278,17 +291,23 @@ export function Progress({
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const resolvedMax = resolveMax(max);
-  const showValue = showValueProp ?? Boolean(label);
-  const elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
+  const inTableCell = useIsInTableCell();
+  const showValue = showValueProp ?? (Boolean(label) && !inTableCell);
+  const elevationWrapperProps = inTableCell ? {} : getElevationWrapperProps(knobProps, elevation);
   const trackSize = size ?? knobProps.sizeToken;
 
+  const skeletonTrack = (
+    <XStack {...knobProps.gap} alignItems="center" width="100%">
+      <Skeleton variant="rounded" width="100%" height={trackHeightPx(trackSize)} flex={1} />
+      {showValue ? <Skeleton variant="text" width={40} /> : null}
+    </XStack>
+  );
+
   if (skeleton) {
+    if (inTableCell) return skeletonTrack;
     return (
       <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
-        <XStack {...knobProps.gap} alignItems="center" width="100%">
-          <Skeleton variant="rounded" width="100%" height={trackHeightPx(trackSize)} flex={1} />
-          {showValue ? <Skeleton variant="text" width={40} /> : null}
-        </XStack>
+        {skeletonTrack}
       </FieldLayout>
     );
   }
@@ -318,6 +337,8 @@ export function Progress({
   );
 
   if (!resolvedForm || !name) {
+    const track = renderTrack(value ?? defaultValue ?? 0, undefined, !!error);
+    if (inTableCell) return track;
     return (
       <FieldLayout
         id={id}
@@ -329,7 +350,7 @@ export function Progress({
         size={size}
         knobProps={knobProps}
       >
-        {renderTrack(value ?? defaultValue ?? 0, undefined, !!error)}
+        {track}
       </FieldLayout>
     );
   }
@@ -343,6 +364,12 @@ export function Progress({
     >
       {(field) => {
         const resolvedError = getFieldError(field, error);
+        const track = renderTrack(
+          (field.state.value as number) ?? 0,
+          mergeFieldHandler(field, "handleBlur", onBlur),
+          !!resolvedError,
+        );
+        if (inTableCell) return track;
         return (
           <FieldLayout
             id={id}
@@ -354,11 +381,7 @@ export function Progress({
             size={size}
             knobProps={knobProps}
           >
-            {renderTrack(
-              (field.state.value as number) ?? 0,
-              mergeFieldHandler(field, "handleBlur", onBlur),
-              !!resolvedError,
-            )}
+            {track}
           </FieldLayout>
         );
       }}

package/src/fields/RadioGroup/RadioGroup.spec.tsx

@@ -4,6 +4,7 @@ import { TamaguiProvider, YStack, createTamagui } from "tamagui";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import {
+  Preset,
   createThemesBuilder,
   defaultAccentTheme,
   defaultBaseTheme,
@@ -102,6 +103,26 @@ describe("RadioGroup Components", () => {
         expect(onValueChange).toHaveBeenCalledTimes(1);
         expect(onValueChange).toHaveBeenCalledWith("option1");
       });
+
+      it("clicking the painted glyph still selects", async () => {
+        // RadioGlyph is pointerEvents=none so RN presses reach role=radio
+        // (same inner-View steal as CheckboxGlyphBox).
+        const onChange = vi.fn();
+        const result = renderWithProviders(
+          <RadioGroup
+            label="Choose Option"
+            name="option"
+            options={mockOptions}
+            onChange={onChange}
+          />,
+        );
+        const glyph = result.container.querySelector("[data-radio-kb-focus]");
+        expect(glyph).toBeTruthy();
+        await act(async () => {
+          if (glyph) fireEvent.click(glyph);
+        });
+        expect(onChange).toHaveBeenCalledWith("option1");
+      });
     });
 
     describe("with form context", () => {
@@ -490,5 +511,42 @@ describe("RadioGroup Components", () => {
         }
       });
     });
+
+    describe("radio disc identity (R-IDENTITY)", () => {
+      const disc = (container: HTMLElement) =>
+        container.querySelector('[data-radius-part="radio disc"]');
+      const classOf = (el: Element) => (el as HTMLElement).className?.toString() ?? "";
+
+      it("declares R-IDENTITY / radio disc on the glyph", () => {
+        const result = renderWithProviders(
+          <RadioGroup label="Choose" name="option" options={mockOptions} />,
+        );
+        const el = disc(result.container);
+        expect(el?.getAttribute("data-radius-class")).toBe("R-IDENTITY");
+        expect(el?.getAttribute("data-radius-part")).toBe("radio disc");
+      });
+
+      it("stays round when pointy is set", () => {
+        const result = renderWithProviders(
+          <RadioGroup label="Choose" name="option" pointy options={mockOptions} />,
+        );
+        const el = disc(result.container);
+        expect(el).toBeTruthy();
+        expect(classOf(el!)).toMatch(/1000/);
+        expect(el?.getAttribute("data-radius-class")).toBe("R-IDENTITY");
+      });
+
+      it("stays round at borderRadius none", () => {
+        const result = renderWithProviders(
+          <Preset overrides={{ borderRadius: "none" }}>
+            <RadioGroup label="Choose" name="option" options={mockOptions} />
+          </Preset>,
+        );
+        const el = disc(result.container);
+        expect(el).toBeTruthy();
+        expect(classOf(el!)).toMatch(/1000/);
+        expect(el?.getAttribute("data-radius-class")).toBe("R-IDENTITY");
+      });
+    });
   });
 });

package/src/fields/RadioGroup/RadioGroup.stories.tsx

@@ -1,8 +1,10 @@
 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";
 import { Label, Paragraph, RadioGroup as TamaguiRadioGroup, Text, XStack, YStack } from "tamagui";
+import { Preset } from "@multiplatform.one/theme";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { RadioGroup } from "./index";
@@ -215,21 +217,27 @@ export const WithChildren: Story = {
   ),
 };
 
+/**
+ * Radio disc is R-IDENTITY: `pointy` and `borderRadius:none` leave it round
+ * (Clay 2026-08-28; checkbox is the inverse).
+ */
 export const Pointy: Story = {
+  name: "Identity (always round)",
   render: () => (
     <YStack gap="$4" maxWidth={400}>
       <RadioGroup
-        label="Pointy (hard angles)"
+        label="pointy prop (ignored — disc stays round)"
         pointy
         options={sampleOptions}
         defaultValue="option1"
       />
-      <RadioGroup
-        label="Regular (default)"
-        pointy={false}
-        options={sampleOptions}
-        defaultValue="option1"
-      />
+      <Preset overrides={{ borderRadius: "none" }}>
+        <RadioGroup
+          label="borderRadius none (disc stays round)"
+          options={sampleOptions}
+          defaultValue="option1"
+        />
+      </Preset>
     </YStack>
   ),
 };
@@ -337,3 +345,30 @@ export const Comparison: Story = {
 export const SkeletonState: Story = {
   render: () => <RadioGroup label="Notification Preference" options={sampleOptions} skeleton />,
 };
+
+type InTableRow = { id: string; label: string; value: string };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: "option1" },
+      { id: "2", label: "Beta", value: "option2" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "RadioGroup",
+        field: "radiogroup",
+        fieldProps: { options: sampleOptions },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

package/src/fields/RadioGroup/index.tsx

@@ -3,6 +3,7 @@ import { useCallback, useRef, useState } from "react";
 import {
   ensureFocusVisibleRing,
   ensureKeyboardModalityTracking,
+  radiusClassProps,
   useReadableTextOn,
   wasKeyboardFocus,
   type ControlStateProps,
@@ -47,6 +48,14 @@ import {
 /** Minimum pressable target for an individual radio control (WCAG 2.5.5 / SP-FIXED). */
 const radioTargetSize = 44;
 
+/**
+ * Radio disc is R-IDENTITY (Clay 2026-08-28): always a circle, including at
+ * `borderRadius:none`. Checkbox is the inverse (never circular). The 44px
+ * hit target stays transparent; this radius is the visible glyph + pip.
+ */
+const radioDiscRadius = 1000;
+const radioDiscIdentity = radiusClassProps("R-IDENTITY", "radio disc");
+
 // The pressable/focusable role=radio element is a 44px transparent target;
 // the visible circle is the inner RadioGlyph. Sizing the target (not the
 // glyph) keeps visual density while flooring the touch target.
@@ -81,6 +90,10 @@ const RadioGlyph = styled(View, {
   borderColor: formControlColors.boundary,
   alignItems: "center",
   justifyContent: "center",
+  // Paint-only: on RN the inner View / indicator steals the responder from
+  // the 44px role=radio frame (same steal as CheckboxGlyphBox). `none` lets
+  // the press reach RadioItemFrame.
+  pointerEvents: "none",
   variants: {
     size: {
       "...size": (val: SizeTokens) => {
@@ -102,6 +115,7 @@ const RadioGlyph = styled(View, {
 const radioRingWidth = (knobBorderWidth: number | undefined) => Math.max(knobBorderWidth ?? 1, 2);
 
 const RadioIndicatorFrame = styled(TamaguiRadioGroup.Indicator, {
+  pointerEvents: "none",
   borderRadius: 1000,
   // Primer / Spectrum inner mark on a FILLED disc (LC-71 selected=fill): the
   // inverse center is ~1/3 of the outer control (Primer radial-gradient 33%,
@@ -149,7 +163,10 @@ export interface RadioGroupProps {
     "value" | "defaultValue" | "id" | "onValueChange" | "children"
   >;
   children?: ReactNode;
-  /** Force hard-angled radio buttons. Defaults to `true` when the theme knob `borderRadius` is `"none"`. */
+  /**
+   * Ignored. The radio disc is R-IDENTITY (always round), including at
+   * `borderRadius:none`. Kept so existing callers do not type-error.
+   */
   pointy?: boolean;
   /** When true, renders a skeleton placeholder instead of the radio group */
   skeleton?: boolean;
@@ -170,8 +187,6 @@ interface RadioOptionItemProps {
   a11y?: { "aria-labelledby"?: string; "aria-describedby"?: string };
   selected: boolean;
   isTabStop?: boolean;
-  itemRadius: number;
-  indicatorRadius: number;
   knobProps: KnobProps;
   control: KnobRecipe<ControlStateProps>;
   disabledChrome?: DisabledChromeProps;
@@ -191,8 +206,6 @@ function RadioOptionItem({
   a11y,
   selected,
   isTabStop,
-  itemRadius,
-  indicatorRadius,
   knobProps,
   control,
   disabledChrome,
@@ -228,7 +241,8 @@ function RadioOptionItem({
     <RadioGlyph
       size={knobProps.sizeToken as SizeTokens}
       borderWidth={radioRingWidth(knobProps.borderRadius.borderWidth)}
-      borderRadius={itemRadius}
+      borderRadius={radioDiscRadius}
+      {...radioDiscIdentity}
       outlined={knobProps.outlined}
       // Direct props (not a selected variant): fill must win over hover/press
       // fragments the way ToggleGroup's selected fill does.
@@ -239,7 +253,7 @@ function RadioOptionItem({
       {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
     >
       <RadioIndicatorFrame
-        borderRadius={indicatorRadius}
+        borderRadius={radioDiscRadius}
         backgroundColor={onMark ?? "$color1"}
         {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
       />
@@ -255,7 +269,7 @@ function RadioOptionItem({
       // tab stops. Only the checked radio (or the first enabled one when
       // none is checked) stays in the page tab order; arrows move + select.
       {...(isWeb && isTabStop !== undefined ? { tabIndex: isTabStop ? 0 : -1 } : undefined)}
-      borderRadius={itemRadius === 0 ? 0 : 1000}
+      borderRadius={radioDiscRadius}
       transition={knobProps.transition}
       disabled={groupDisabled || option.disabled}
       // LC-40 DISABLED-VISIBLE: ring is text-free chrome — dim it while the
@@ -295,7 +309,7 @@ function RadioOptionItem({
       ref={isWeb ? frameRef : undefined}
     >
       {elevationWrapperProps.elevation ? (
-        <View {...elevationWrapperProps} borderRadius={itemRadius}>
+        <View {...elevationWrapperProps} borderRadius={radioDiscRadius} pointerEvents="none">
           {glyph}
         </View>
       ) : (
@@ -327,7 +341,6 @@ export function RadioGroup({
   orientation = "vertical",
   radioGroupProps,
   children,
-  pointy,
   skeleton,
   compact,
   card,
@@ -345,9 +358,6 @@ export function RadioGroup({
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
-  const resolvedPointy = pointy ?? knobProps.pointy;
-  const itemRadius = resolvedPointy ? 0 : 1000;
-  const indicatorRadius = resolvedPointy ? 0 : 1000;
   // Uncontrolled state for card-mode whole-card press (and standalone use) —
   // without this, card body presses only fire parent handlers while Tamagui's
   // defaultValue-driven group stays stale.
@@ -384,7 +394,7 @@ export function RadioGroup({
   // Render skeleton placeholder
   if (skeleton) {
     // Mirror the real anatomy (LC-20 SKELETON-MIRRORS-ANATOMY): each row is a
-    // 20px control at the same radius the real radio uses (pill / pointy-0),
+    // 20px circular disc (R-IDENTITY — never squares at none / pointy),
     // then a label bar separated by the real control↔label gap. Label widths
     // are DETERMINISTIC per index (never %, never random): a percentage width
     // inside an auto-width horizontal row resolves against a width computed
@@ -406,10 +416,10 @@ export function RadioGroup({
                 justifyContent="center"
               >
                 <Skeleton
-                  variant={itemRadius === 0 ? "rounded" : "circular"}
+                  variant="circular"
                   width={20}
                   height={20}
-                  borderRadius={itemRadius}
+                  borderRadius={radioDiscRadius}
                 />
               </View>
               <Skeleton variant="text" width={labelWidths[i % labelWidths.length]} height={14} />
@@ -433,8 +443,6 @@ export function RadioGroup({
       a11y={a11y}
       selected={!!selected}
       isTabStop={isTabStop}
-      itemRadius={itemRadius}
-      indicatorRadius={indicatorRadius}
       knobProps={knobProps}
       control={control}
       disabledChrome={disabledState.chromeKnobProps}

package/src/fields/Rating/Rating.spec.tsx

@@ -11,6 +11,7 @@ import { configWithoutAnimations } from "@tamagui/config";
 import { animationsCSS } from "@tamagui/config/v5-css";
 import { TamaguiProvider, createTamagui } from "tamagui";
 import { Form } from "../../Form";
+import { TableCellContext } from "../../shared/tableCellContext";
 import { Rating } from "./index";
 
 const MockStarIcon = ({ size, weight, color }: { size: number; weight: string; color: string }) => (
@@ -126,7 +127,7 @@ describe("Rating", () => {
     // resolves the shared accent mark token; the empty star stays neutral
     // chrome. Stock test themes carry no $accentBackground, so mount the
     // house builder themes for real resolution.
-    it("fills selected stars with the accent mark and empty stars with neutral chrome", () => {
+    it("fills selected stars with the accent mark and empty stars with boundary chrome", () => {
       const { container } = render(
         <TamaguiProvider config={houseConfig} defaultTheme="light" disableInjectCSS>
           <Rating label="Rate" value={0.6} starIcon={MockStarIcon} />
@@ -138,6 +139,10 @@ describe("Rating", () => {
       expect(empty).toBeTruthy();
       expect(filled!.getAttribute("data-color")).toContain("accentBackground");
       expect(empty!.getAttribute("data-color")).not.toContain("accentBackground");
+      // DF-06 / WCAG 1.4.11: empty stars are graphical objects — $color7 is
+      // below the 3:1 boundary floor; the empty ring uses the same boundary
+      // token as Radio.
+      expect(empty!.getAttribute("data-color")).toContain("color10");
     });
 
     // Material Rating is a radio group: one checked value, stars 1..N fill as
@@ -229,6 +234,59 @@ describe("Rating", () => {
       fireEvent.keyDown(star2, { key: "ArrowRight" });
       expect(onChange).toHaveBeenCalledWith(0.6);
     });
+
+    it("Home and End commit the first and last star", () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <Rating label="Kbd" value={0.4} starIcon={MockStarIcon} onChange={onChange} />,
+      );
+      const star2 = result.container.querySelector("[data-rating-index='2']") as HTMLElement;
+      fireEvent.keyDown(star2, { key: "Home" });
+      expect(onChange).toHaveBeenCalledWith(0.2);
+      fireEvent.keyDown(star2, { key: "End" });
+      expect(onChange).toHaveBeenCalledWith(1);
+    });
+
+    it("clamps a negative value to zero filled stars", () => {
+      const result = renderWithProviders(<Rating label="Neg" value={-2} starIcon={MockStarIcon} />);
+      expect(result.container.querySelectorAll("[data-rating-star='filled']").length).toBe(0);
+      expect(result.container.querySelectorAll("[data-rating-star='empty']").length).toBe(5);
+    });
+
+    it("renders no stars when maxStars is not positive", () => {
+      const result = renderWithProviders(
+        <Rating label="None" value={1} maxStars={0} starIcon={MockStarIcon} />,
+      );
+      expect(result.container.querySelectorAll("[data-rating-star]").length).toBe(0);
+    });
+
+    it("squares star wells when pointy and rounds them otherwise", () => {
+      const pointed = renderWithProviders(
+        <Rating label="Pointy" value={0.6} pointy starIcon={MockStarIcon} />,
+      );
+      expect(
+        pointed.container.querySelector("[data-rating-row]")?.getAttribute("data-rating-pointy"),
+      ).toBe("true");
+      const rounded = renderWithProviders(
+        <Rating label="Round" value={0.6} pointy={false} starIcon={MockStarIcon} />,
+      );
+      expect(
+        rounded.container.querySelector("[data-rating-row]")?.getAttribute("data-rating-pointy"),
+      ).toBeNull();
+    });
+
+    it("does not grow 44px wells or paint a live value inside a table cell", () => {
+      const result = renderWithProviders(
+        <TableCellContext.Provider value={{ inTableCell: true, isHeader: false, editable: true }}>
+          <Rating label="Score" value={0.6} starIcon={MockStarIcon} />
+        </TableCellContext.Provider>,
+      );
+      const row = result.container.querySelector("[data-rating-row]");
+      expect(row?.getAttribute("data-rating-cell")).toBe("true");
+      expect(result.container.querySelector("[data-rating-value]")).toBeNull();
+      expect(result.container.querySelector("[data-rating-grow]")).toBeNull();
+      expect(result.container.querySelector("label")).toBeNull();
+    });
   });
 
   describe("with form context", () => {
@@ -253,5 +311,17 @@ describe("Rating", () => {
       expect(onChange).not.toHaveBeenCalled();
       expect(result.container.querySelector("[data-rating-row]")?.getAttribute("role")).toBe("img");
     });
+
+    it("commits through the canonical onChange when a star is pressed", () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <Form formOptions={{ defaultValues: { rating: 0.2 } }} submitText="Submit">
+          <Rating name="rating" label="Rate" starIcon={MockStarIcon} onChange={onChange} />
+        </Form>,
+      );
+      const star = result.container.querySelector("[data-rating-index='4']") as HTMLElement;
+      fireEvent.click(star);
+      expect(onChange).toHaveBeenCalledWith(0.8);
+    });
   });
 });

package/src/fields/Rating/Rating.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 { StarIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
@@ -233,3 +234,30 @@ export const Interactive: Story = {
 export const SkeletonState: Story = {
   render: () => <Rating label="Rating" skeleton starIcon={StarIcon} />,
 };
+
+type InTableRow = { id: string; label: string; value: number };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: 4 },
+      { id: "2", label: "Beta", value: 3 },
+      { id: "3", label: "Gamma", value: 0 },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "Rating",
+        field: "rating",
+        fieldProps: { maxRating: 5 },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};