@multiplatform.one/forms 7.66.0 → 7.68.0

package/src/FloatingPanel/index.native.tsx

@@ -55,6 +55,11 @@
  * than OVERLAY_BREAKPOINT (a tablet) it opens at the long-press point, the
  * same free overlay the web draws at the pointer; a phone keeps the sheet,
  * as web does at ≤640.
+ *
+ * Regular width (FZ-8116, LC-266): on an iPad or any window wider than
+ * OVERLAY_BREAKPOINT the sheet is the wrong form. The panel opens over its
+ * field the way the web float does (LC-105, LC-112), sized by `widthMode`;
+ * compact windows (iPhone, Slide Over) keep the sheet. `sheet` forces it.
  */
 
 import { nativeAnimationConfig, type MotionStop } from "@multiplatform.one/theme";
@@ -83,27 +88,25 @@ import {
   type GestureResponderEvent,
 } from "react-native";
 import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
-import {
-  OVERLAY_BREAKPOINT,
-  Surface,
-  useResolvedKnobs,
-  motionDurationMs,
-} from "@multiplatform.one/theme";
+import { Surface, useResolvedKnobs, motionDurationMs } from "@multiplatform.one/theme";
 import { View, YStack } from "tamagui";
 import { useInsideOverlay, useOverlayZIndex } from "../shared/overlayStack";
 import { OverlayWindow } from "../shared/OverlayWindow";
 import { t } from "../shared/t";
+import { overlaySizeClass } from "../shared/overlaySizeClass";
 import { useKeyboardInset } from "../shared/useKeyboardInset";
 import type { FloatingPanelProps } from "./index";
-import { resolveCompactFace } from "./compactFace";
+import { menuMinWidth, resolveCompactFace } from "./compactFace";
 import {
   placeAtPoint,
+  placeBesideTrigger,
   placeOverTrigger,
   type PanelBounds,
   type PanelPoint,
   type TriggerRect,
 } from "./pointAnchor";
-import { panelViewportPadding } from "./useFloatingPanel";
+import { RegularPanel } from "./RegularPanel";
+import { panelViewportPadding, resolvePanelWidthMode } from "./useFloatingPanel";
 import { TrailingActionOverlay, TriggerWithTrailingAction } from "./trailingAction";
 
 // Re-export the hook + constants so Select / Combobox / external consumers
@@ -160,6 +163,9 @@ export function FloatingPanel({
   triggerRow,
   triggerEcho = true,
   anchorMode,
+  sheet,
+  widthMode,
+  fitContent,
 }: FloatingPanelProps) {
   // The panel floats over the page: it never inherits a painted ancestor.
   const { knobProps } = useResolvedKnobs({ painted: false });
@@ -202,15 +208,18 @@ export function FloatingPanel({
     [disabled, onOpenChange],
   );
   const isContextMenu = openOn === "contextmenu";
-  const atPoint = isContextMenu && pressPoint !== null && windowWidth > OVERLAY_BREAKPOINT;
+  const regular = overlaySizeClass(windowWidth) === "regular";
+  const atPoint = isContextMenu && pressPoint !== null && regular;
   const insideOverlay = useInsideOverlay();
   const asMenu = !isContextMenu && resolveCompactFace(compactFace, insideOverlay) === "menu";
+  const asRegular = regular && !asMenu && !isContextMenu && sheet !== true;
+  const anchored = asMenu || asRegular;
   const triggerRef = useRef<RNView | null>(null);
   const [anchor, setAnchor] = useState<TriggerRect | null>(null);
   // The trigger's window rect, read each time the menu opens: it may have
   // moved (a scrolled sheet) since the last open.
   useLayoutEffect(() => {
-    if (!asMenu || !open) {
+    if (!anchored || !open) {
       setAnchor(null);
       return;
     }
@@ -230,7 +239,7 @@ export function FloatingPanel({
     return () => {
       live = false;
     };
-  }, [asMenu, open]);
+  }, [anchored, open]);
 
   const handleBackdropPress = useCallback(() => {
     if (backdropArmed) close();
@@ -582,11 +591,8 @@ export function FloatingPanel({
             <TriggerMenuPanel
               // An attached menu (an icon trigger, no echo row) opens under its
               // trigger instead of over it, the UIMenu pull-down (LC-262).
-              anchor={
-                anchor && anchorMode === "attach"
-                  ? { ...anchor, y: anchor.y + anchor.height }
-                  : anchor
-              }
+              anchor={anchor}
+              attach={anchorMode === "attach"}
               bounds={{
                 top: topInset + panelViewportPadding,
                 left: (safeArea?.left ?? 0) + panelViewportPadding,
@@ -627,6 +633,32 @@ export function FloatingPanel({
               {header}
               {children}
             </PointPanel>
+          ) : asRegular ? (
+            <RegularPanel
+              anchor={anchor}
+              bounds={{
+                top: topInset + panelViewportPadding,
+                left: (safeArea?.left ?? 0) + panelViewportPadding,
+                right: windowWidth - (safeArea?.right ?? 0) - panelViewportPadding,
+                bottom:
+                  windowHeight -
+                  Math.max(safeArea?.bottom ?? 0, keyboardInset) -
+                  panelViewportPadding,
+              }}
+              widthMode={resolvePanelWidthMode(widthMode, fitContent)}
+              echo={triggerEcho ? (triggerRow ?? trigger) : null}
+              echoLabel={triggerA11y?.label}
+              header={header}
+              scrollable={!!scrollable}
+              fill={!!sheetFill}
+              scrollViewProps={scrollViewProps}
+              framePadding={framePadding}
+              frameGap={frameGap}
+              onBackdropPress={handleBackdropPress}
+              onClose={close}
+            >
+              {children}
+            </RegularPanel>
           ) : (
             /*
           A plain padded column, not KeyboardAvoidingView: inside a Modal the
@@ -732,6 +764,7 @@ export function FloatingPanel({
  */
 function TriggerMenuPanel({
   anchor,
+  attach = false,
   bounds,
   echo,
   echoLabel,
@@ -742,6 +775,7 @@ function TriggerMenuPanel({
   children,
 }: {
   anchor: TriggerRect | null;
+  attach?: boolean;
   bounds: PanelBounds;
   echo: ReactNode;
   echoLabel?: string;
@@ -755,7 +789,7 @@ function TriggerMenuPanel({
   const [size, setSize] = useState<{ width: number; height: number } | null>(null);
   const placement =
     anchor && size
-      ? placeOverTrigger({
+      ? (attach ? placeBesideTrigger : placeOverTrigger)({
           trigger: anchor,
           width: size.width,
           height: size.height,
@@ -782,36 +816,47 @@ function TriggerMenuPanel({
           position: "absolute",
           left: placement?.left ?? bounds.left,
           top: placement?.top ?? bounds.top,
-          minWidth: anchor?.width ?? 0,
+          minWidth: menuMinWidth(anchor?.width ?? 0, bounds.right - bounds.left),
           maxWidth: bounds.right - bounds.left,
           maxHeight: placement?.maxHeight ?? bounds.bottom - bounds.top,
           opacity: placement ? 1 : 0,
         }}
       >
         <YStack
+          testID="floating-panel-menu-surface"
           {...knobProps.elevatedSurface}
           flexShrink={1}
           minHeight={0}
-          overflow="hidden"
           onAccessibilityEscape={onClose}
         >
-          {echo != null && anchor && anchor.height > 0 ? (
-            <Pressable
-              testID="floating-panel-menu-echo"
-              onPress={onClose}
-              accessibilityRole="button"
-              {...(echoLabel ? { accessibilityLabel: echoLabel } : undefined)}
-              aria-expanded
-              style={{ height: anchor.height, minWidth: anchor.width, justifyContent: "center" }}
+          <YStack
+            testID="floating-panel-menu-clip"
+            borderRadius={knobProps.elevatedSurface.borderRadius}
+            overflow="hidden"
+            flexShrink={1}
+            minHeight={0}
+          >
+            {echo != null && anchor && anchor.height > 0 ? (
+              <Pressable
+                testID="floating-panel-menu-echo"
+                onPress={onClose}
+                accessibilityRole="button"
+                {...(echoLabel ? { accessibilityLabel: echoLabel } : undefined)}
+                aria-expanded
+                style={{ height: anchor.height, minWidth: anchor.width, justifyContent: "center" }}
+              >
+                <RNView pointerEvents="none">{echo}</RNView>
+              </Pressable>
+            ) : null}
+            <RNScrollView
+              style={{ flexGrow: 0, flexShrink: 1 }}
+              keyboardShouldPersistTaps="handled"
             >
-              <RNView pointerEvents="none">{echo}</RNView>
-            </Pressable>
-          ) : null}
-          <RNScrollView style={{ flexGrow: 0, flexShrink: 1 }} keyboardShouldPersistTaps="handled">
-            <YStack padding={framePadding} gap={frameGap}>
-              {children}
-            </YStack>
-          </RNScrollView>
+              <YStack padding={framePadding} gap={frameGap}>
+                {children}
+              </YStack>
+            </RNScrollView>
+          </YStack>
         </YStack>
       </RNView>
     </RNView>

package/src/FloatingPanel/index.tsx

@@ -32,6 +32,7 @@ import { OverlayStackProvider, useInsideOverlay, useOverlayZIndex } from "../sha
 import { resolveCompactFace, type CompactFace } from "./compactFace";
 import { isNestedPanelAction, type PanelActionEvent } from "./nestedAction";
 import { PanelPortal } from "./PanelPortal";
+import { fixedContainingBlockOrigin } from "./containingBlock";
 import {
   contextMenuPoint,
   placeOverTrigger,
@@ -246,39 +247,6 @@ function useKeyboardFocusIntoPanel(
   }, [open, frameRef, keyboardOpenRef]);
 }
 
-/**
- * Viewport origin of the box a `position: fixed` panel is laid out against.
- * The top/left math is in viewport coordinates, which is only right while that
- * box is the viewport. An ancestor with a transform, filter, perspective,
- * paint containment or container query becomes the containing block instead.
- * PanelPortal lifts the panel out of scroll views, but a panel hosted in a
- * transformed dialog still lays out against that dialog. A `display: contents`
- * node has no box, so its computed `contain` (Tamagui's theme span) is ignored.
- */
-function fixedContainingBlockOrigin(element: HTMLElement): { top: number; left: number } {
-  for (let node = element.parentElement; node; node = node.parentElement) {
-    const cs = getComputedStyle(node);
-    if (cs.display === "contents") continue;
-    const set = (value: string | undefined, initial: string) => !!value && value !== initial;
-    const captures =
-      set(cs.transform, "none") ||
-      set(cs.perspective, "none") ||
-      set(cs.filter, "none") ||
-      set(cs.backdropFilter, "none") ||
-      set(cs.containerType, "normal") ||
-      /transform|perspective|filter/.test(cs.willChange) ||
-      /paint|layout|strict|content/.test(cs.contain);
-    if (captures) {
-      const rect = node.getBoundingClientRect();
-      return {
-        top: rect.top + node.clientTop - node.scrollTop,
-        left: rect.left + node.clientLeft - node.scrollLeft,
-      };
-    }
-  }
-  return { top: 0, left: 0 };
-}
-
 function isRtl(element?: HTMLElement | null): boolean {
   if (!isWeb || typeof document === "undefined") return false;
   const direction = element ? getComputedStyle(element).direction : "";

package/src/FloatingPanel/pointAnchor.spec.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from "vitest";
 import {
   contextMenuPoint,
   placeAtPoint,
+  placeBesideTrigger,
   placeOverTrigger,
   pointOpensUp,
   pointPanelLeft,
@@ -219,3 +220,31 @@ describe("placeOverTrigger (FZ-7830, LC-112 where no sheet may take it)", () =>
     expect(placed.left).toBe(10);
   });
 });
+
+describe("placeBesideTrigger (FZ-7830 round 3, LC-262: beside the trigger, never over it)", () => {
+  const phone: PanelBounds = { top: 57, left: 10, right: 380, bottom: 800 };
+  const field = { x: 16, y: 300, width: 358, height: 44 };
+
+  it("opens under the trigger when it fits", () => {
+    const placed = placeBesideTrigger({ trigger: field, width: 200, height: 180, bounds: phone });
+    expect(placed).toEqual({ left: 16, top: 344, width: 358, maxHeight: 180, shifted: false });
+  });
+
+  it("opens above the trigger when there is more room there, its bottom on the trigger's top", () => {
+    const low = { ...field, y: 700 };
+    const placed = placeBesideTrigger({ trigger: low, width: 200, height: 220, bounds: phone });
+    expect(placed.top + placed.maxHeight).toBe(700);
+    expect(placed.maxHeight).toBe(220);
+  });
+
+  it("never overlaps the trigger, scrolling what does not fit", () => {
+    for (const y of [60, 300, 500, 740]) {
+      const trigger = { ...field, y };
+      const placed = placeBesideTrigger({ trigger, width: 200, height: 2000, bounds: phone });
+      const overlaps = placed.top < y + field.height && placed.top + placed.maxHeight > y;
+      expect(overlaps, `trigger at ${y}`).toBe(false);
+      expect(placed.top).toBeGreaterThanOrEqual(phone.top);
+      expect(placed.top + placed.maxHeight).toBeLessThanOrEqual(phone.bottom);
+    }
+  });
+});

package/src/FloatingPanel/pointAnchor.ts

@@ -172,3 +172,33 @@ export function placeOverTrigger({
     shifted: left !== wantLeft || top !== trigger.y,
   };
 }
+
+/**
+ * A menu attached to its trigger (an icon trigger, or a short list inside a
+ * sheet, LC-262): under the trigger when it fits, above it when that side has
+ * more room, and never over it. What still does not fit scrolls.
+ */
+export function placeBesideTrigger({
+  trigger,
+  width,
+  height,
+  bounds,
+  rtl = false,
+}: {
+  trigger: TriggerRect;
+  width: number;
+  height: number;
+  bounds: PanelBounds;
+  rtl?: boolean;
+}): TriggerPlacement {
+  const room = Math.max(0, bounds.right - bounds.left);
+  const w = Math.min(Math.max(width, trigger.width), room);
+  const wantLeft = rtl ? trigger.x + trigger.width - w : trigger.x;
+  const left = Math.max(bounds.left, Math.min(wantLeft, bounds.right - w));
+  const below = Math.max(0, bounds.bottom - (trigger.y + trigger.height));
+  const above = Math.max(0, trigger.y - bounds.top);
+  const opensUp = height > below && above > below;
+  const maxHeight = Math.min(height, opensUp ? above : below);
+  const top = opensUp ? trigger.y - maxHeight : trigger.y + trigger.height;
+  return { left, top, width: w, maxHeight, shifted: left !== wantLeft || opensUp };
+}

package/src/FloatingPanel/regularPlacement.spec.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+import { placeRegularPanel } from "./regularPlacement";
+
+const bounds = { top: 20, left: 12, right: 808, bottom: 1160 };
+const trigger = { x: 40, y: 300, width: 360, height: 44 };
+
+describe("placeRegularPanel (FZ-8116)", () => {
+  it("covers the field from its top start corner (LC-105)", () => {
+    const p = placeRegularPanel({
+      trigger,
+      width: 200,
+      height: 240,
+      bounds,
+      widthMode: "at-least-trigger",
+    });
+    expect(p).toMatchObject({ left: 40, top: 300, width: 360, shifted: false });
+  });
+
+  it("is the field's width for match-trigger even when the content is wider", () => {
+    const p = placeRegularPanel({
+      trigger,
+      width: 500,
+      height: 240,
+      bounds,
+      widthMode: "match-trigger",
+    });
+    expect(p.width).toBe(360);
+  });
+
+  it("is the content's width for fit-content", () => {
+    const p = placeRegularPanel({
+      trigger,
+      width: 300,
+      height: 320,
+      bounds,
+      widthMode: "fit-content",
+    });
+    expect(p).toMatchObject({ left: 40, width: 300 });
+  });
+
+  it("hangs a fit-content panel from the field's end edge in RTL", () => {
+    const p = placeRegularPanel({
+      trigger,
+      width: 300,
+      height: 320,
+      bounds,
+      widthMode: "fit-content",
+      rtl: true,
+    });
+    expect(p.left).toBe(40 + 360 - 300);
+  });
+
+  it("slides up inside the bounds near the bottom of the window", () => {
+    const low = { ...trigger, y: 1080 };
+    const p = placeRegularPanel({
+      trigger: low,
+      width: 360,
+      height: 300,
+      bounds,
+      widthMode: "at-least-trigger",
+    });
+    expect(p.top + 300).toBeLessThanOrEqual(bounds.bottom);
+    expect(p.shifted).toBe(true);
+  });
+});

package/src/FloatingPanel/regularPlacement.ts

@@ -0,0 +1,40 @@
+import {
+  placeOverTrigger,
+  type PanelBounds,
+  type TriggerPlacement,
+  type TriggerRect,
+} from "./pointAnchor";
+import type { PanelWidthMode } from "./useFloatingPanel";
+
+/** Height of a regular-width panel whose list fills it (`sheetFill`): a search list. */
+export const regularFillHeight = 480;
+
+/**
+ * Where a FloatingPanel opens at regular width (FZ-8116): over its field, the
+ * web float's cover-trigger placement (LC-105), at the width its `widthMode`
+ * declares. `at-least-trigger` is never narrower than the field,
+ * `match-trigger` is the field's width, `fit-content` is the content's own
+ * width from the field's start edge.
+ */
+export function placeRegularPanel({
+  trigger,
+  width,
+  height,
+  bounds,
+  widthMode,
+  rtl = false,
+}: {
+  trigger: TriggerRect;
+  width: number;
+  height: number;
+  bounds: PanelBounds;
+  widthMode: PanelWidthMode;
+  rtl?: boolean;
+}): TriggerPlacement {
+  if (widthMode === "at-least-trigger") {
+    return placeOverTrigger({ trigger, width, height, bounds, rtl });
+  }
+  const w = widthMode === "match-trigger" ? trigger.width : width;
+  const box = { ...trigger, x: rtl ? trigger.x + trigger.width - w : trigger.x, width: w };
+  return placeOverTrigger({ trigger: box, width: w, height, bounds, rtl });
+}

package/src/Form/Form.stories.tsx

@@ -53,6 +53,7 @@ import { formatFieldError } from "../ErrorSummary";
 import type { AnyFormApi } from "../types";
 import { Form, FormActions } from "./index";
 import { H3 } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof Form> = {
   title: "Forms/Form",
@@ -95,7 +96,7 @@ export const Basic = () => (
     <Input label="Username" name="username" required />
     <Input label="Email" name="email" required />
     <FormActions>
-      <Button action="submit">Submit</Button>
+      <ActionButton kind="submit" formAction="submit" />
     </FormActions>
   </Form>
 );
@@ -292,7 +293,7 @@ export const DynamicFields = () => {
       })()}
 
       <FormActions>
-        <Button action="submit">Submit</Button>
+        <ActionButton kind="submit" formAction="submit" />
       </FormActions>
     </Form>
   );
@@ -313,7 +314,7 @@ export const ReadOnlyAndDisabledSubmit = () => (
     <Input label="Read Only" name="readOnlyField" readOnly />
     <Input label="Disabled" name="disabledField" disabled />
     <FormActions>
-      <Button action="submit">Submit</Button>
+      <ActionButton kind="submit" formAction="submit" />
     </FormActions>
   </Form>
 );
@@ -342,7 +343,7 @@ export const InputWithLinkResolver = () => (
       linkResolver={(v) => (v ? (`/items/${String(v)}` as any) : null)}
     />
     <FormActions>
-      <Button action="submit">Submit</Button>
+      <ActionButton kind="submit" formAction="submit" />
     </FormActions>
   </Form>
 );
@@ -999,7 +1000,7 @@ export const Layout = () => (
       </FormSection>
     </FormSectionStack>
     <FormActions>
-      <Button action="submit">Save</Button>
+      <ActionButton kind="save" formAction="submit" />
     </FormActions>
   </Form>
 );

package/src/errorSummaryStories.spec.tsx

@@ -86,17 +86,17 @@ describe("Forms/ErrorSummary stories", () => {
   });
 
   it("FocusesTheFieldOnPress starts clean and raises the summary on submit", () => {
-    const { container, getByText } = mount(FocusesTheFieldOnPress as StoryLike);
+    const { container, getByRole } = mount(FocusesTheFieldOnPress as StoryLike);
     expect(container.querySelector("[data-testid='error-summary']")).toBeNull();
-    fireEvent.click(getByText("Submit"));
+    fireEvent.click(getByRole("button", { name: "Submit" }));
     const summary = container.querySelector("[data-testid='error-summary']");
     expect(summary).toBeTruthy();
     expect(container.querySelectorAll("a").length).toBe(2);
   });
 
   it("FocusesTheFieldOnPress links target the ids its fields actually carry", () => {
-    const { container, getByText } = mount(FocusesTheFieldOnPress as StoryLike);
-    fireEvent.click(getByText("Submit"));
+    const { container, getByRole } = mount(FocusesTheFieldOnPress as StoryLike);
+    fireEvent.click(getByRole("button", { name: "Submit" }));
     const hrefs = Array.from(container.querySelectorAll("a")).map((a) => a.getAttribute("href"));
     expect(hrefs).toEqual(["#email", "#password"]);
     expect(container.querySelector("#email")).toBeTruthy();

package/src/fields/Barcode/BarcodeScanner.native.tsx

@@ -2,7 +2,8 @@ import { Camera, CameraView, useCameraPermissions } from "expo-camera";
 import { useEffect, useRef, useState } from "react";
 import { StyleSheet } from "react-native";
 import { Text, View, XStack, YStack } from "tamagui";
-import { Button } from "../../Button";
+import { Button, IconButton } from "../../Button";
+import { standardActions } from "../../standardActions";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import type { BarcodeScannerProps, CameraPreflightResult } from "./scannerTypes";
@@ -95,8 +96,8 @@ export function BarcodeScanner({
             {t("Camera permission denied. Please allow camera access.")}
           </Text>
           <XStack gap="$2">
-            <Button
-              size={knobProps.sizeToken}
+            <IconButton
+              icon={standardActions.retry.icon}
               onPress={() => {
                 setDenied(false);
                 requestPermission().then((res) => {
@@ -104,12 +105,12 @@ export function BarcodeScanner({
                 });
               }}
               aria-label={t("Retry camera")}
-            >
-              {t("Retry")}
-            </Button>
-            <Button size={knobProps.sizeToken} onPress={onClose} aria-label={t("Close scanner")}>
-              {t("Close")}
-            </Button>
+            />
+            <IconButton
+              icon={standardActions.close.icon}
+              onPress={onClose}
+              aria-label={t("Close scanner")}
+            />
           </XStack>
         </YStack>
       ) : !permission?.granted ? (

package/src/fields/Barcode/BarcodeScanner.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { Text, View, XStack, YStack, isWeb } from "tamagui";
-import { Button } from "../../Button";
+import { Button, IconButton } from "../../Button";
+import { standardActions } from "../../standardActions";
 import { queryPermissionState } from "../../shared/capabilityPreflight";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
@@ -173,16 +174,16 @@ export function BarcodeScanner({
             {errorMessage}
           </Text>
           <XStack gap="$2">
-            <Button
-              size={knobProps.sizeToken}
+            <IconButton
+              icon={standardActions.retry.icon}
               onPress={() => setAttempt((a) => a + 1)}
               aria-label={t("Retry camera")}
-            >
-              {t("Retry")}
-            </Button>
-            <Button size={knobProps.sizeToken} onPress={onClose} aria-label={t("Close scanner")}>
-              {t("Close")}
-            </Button>
+            />
+            <IconButton
+              icon={standardActions.close.icon}
+              onPress={onClose}
+              aria-label={t("Close scanner")}
+            />
           </XStack>
         </YStack>
       ) : (

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

@@ -6,10 +6,10 @@ import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { Checkbox as TamaguiCheckbox, XStack, YStack } from "tamagui";
 import { Label } from "../../Label";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Checkbox, Checkboxes, CheckboxGroup } from "./index";
 import { Paragraph } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof Checkbox> = {
   title: "Forms/Checkbox",
@@ -54,7 +54,7 @@ export const Main: Story = {
             validators={{ onChange: ({ value }) => (!value ? "Terms are required" : undefined) }}
           />
           <Checkbox label="Subscribe to newsletter" name="newsletter" />
-          <Button action="submit">Submit</Button>
+          <ActionButton kind="submit" formAction="submit" />
         </Form>
       );
     };
@@ -274,7 +274,7 @@ export const CheckboxGroupWithForm: StoryObj = {
               helperText="Select required permissions"
               required
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

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

@@ -3,9 +3,9 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { Preset, Paragraph } from "@multiplatform.one/theme";
 import { useForm } from "@tanstack/react-form";
 import { YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { CheckboxGroup } from "./CheckboxGroup";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof CheckboxGroup> = {
   title: "Forms/CheckboxGroup",
@@ -255,7 +255,7 @@ export const RequiredForm: Story = {
               ]}
               helperText="Submit empty to trigger required error"
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );