@multiplatform.one/forms 7.11.0 → 7.15.0

package/src/Form/submissionController.ts

@@ -0,0 +1,59 @@
+interface SubmissionForm {
+  handleSubmit(): Promise<void>;
+  state: { isSubmitting: boolean; isSubmitSuccessful: boolean };
+}
+
+type SubmissionOutcome = "success" | "invalid" | "failed" | "busy";
+type SubmissionSnapshot = Readonly<{ error: string | null; submitting: boolean }>;
+
+const controllers = new WeakMap<SubmissionForm, ReturnType<typeof createSubmissionController>>();
+
+/** Keep UI submission failures shared without changing the caller's FormApi. */
+export function getFormSubmission(form: SubmissionForm) {
+  let controller = controllers.get(form);
+  if (!controller) {
+    controller = createSubmissionController(form);
+    controllers.set(form, controller);
+  }
+  return controller;
+}
+
+function createSubmissionController(form: SubmissionForm) {
+  let snapshot: SubmissionSnapshot = { error: null, submitting: false };
+  const listeners = new Set<() => void>();
+
+  const update = (error: string | null, submitting = snapshot.submitting) => {
+    if (snapshot.error === error && snapshot.submitting === submitting) return;
+    snapshot = { error, submitting };
+    listeners.forEach((listener) => listener());
+  };
+  const reportError = (error: unknown) => {
+    const text = error instanceof Error ? error.message : String(error);
+    update(text || "network unreachable");
+  };
+
+  return {
+    getSnapshot: () => snapshot,
+    subscribe(listener: () => void) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    clearError: () => update(null),
+    reportError,
+    submit(): Promise<SubmissionOutcome> {
+      // Set the guard before invoking user code, including synchronous throws.
+      if (snapshot.submitting || form.state.isSubmitting) return Promise.resolve("busy");
+      update(null, true);
+      return Promise.resolve()
+        .then(() => form.handleSubmit())
+        .then((): SubmissionOutcome => (form.state.isSubmitSuccessful ? "success" : "invalid"))
+        .catch((error): SubmissionOutcome => {
+          reportError(error);
+          return "failed";
+        })
+        .finally(() => update(snapshot.error, false));
+    },
+  };
+}

package/src/Form/submissionDiscard.spec.tsx

@@ -0,0 +1,41 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { expect, it } from "vitest";
+import { Button } from "../Button";
+import { Input } from "../fields/Input";
+import { Form } from "./index";
+
+const refusal = "The record changed. Refresh and retry.";
+
+it("keeps a refusal while editing, then clears it on discard or reset", async () => {
+  const view = renderWithProviders(
+    <Form
+      formOptions={{ defaultValues: { name: "Original" } }}
+      onSubmit={async () => {
+        throw new Error(refusal);
+      }}
+      saveBar={{ forceVisible: true }}
+    >
+      <Input name="name" label="Name" />
+      <Button action="submit">Submit action</Button>
+      <Button action="reset">Reset form</Button>
+    </Form>,
+  );
+  fireEvent.change(view.getByLabelText("Name"), { target: { value: "Edited" } });
+  await act(async () => fireEvent.click(view.getByRole("button", { name: "Submit action" })));
+  await waitFor(() => expect(view.getByText(/Couldn't save/)).toBeTruthy());
+  await act(async () => fireEvent.click(view.getByRole("button", { name: "Discard" })));
+  const keep = await view.findByRole("button", { name: "Keep editing" });
+  await act(async () => fireEvent.click(keep));
+  expect(view.getByText(/Couldn't save/)).toBeTruthy();
+  expect((view.getByLabelText("Name") as HTMLInputElement).value).toBe("Edited");
+  await act(async () => fireEvent.click(view.getByRole("button", { name: "Discard" })));
+  const confirm = await view.findByRole("button", { name: "Discard changes" });
+  await act(async () => fireEvent.click(confirm));
+  await waitFor(() => expect(view.queryByText(/Couldn't save/)).toBeNull());
+  expect((view.getByLabelText("Name") as HTMLInputElement).value).toBe("Original");
+  await act(async () => fireEvent.click(view.getByRole("button", { name: "Submit action" })));
+  await waitFor(() => expect(view.getByText(/Couldn't save/)).toBeTruthy());
+  await act(async () => fireEvent.click(view.getByRole("button", { name: "Reset form" })));
+  await waitFor(() => expect(view.queryByText(/Couldn't save/)).toBeNull());
+});

package/src/Form/submissionPaths.spec.tsx

@@ -0,0 +1,214 @@
+// @vitest-environment jsdom
+/**
+ * MPO-275: every way into a form's submission shares one guarded execution and
+ * one outcome. The routes are a native submit button, implicit Enter in the
+ * only field, Button action=submit, the save bar's Save, and Ctrl-S / Cmd-S.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { ReactElement } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Button } from "../Button";
+import * as saveBarStories from "../ContextualSaveBar/ContextualSaveBar.stories";
+import { Input } from "../fields/Input";
+import { Form, useFormContext } from "./index";
+
+afterEach(cleanup);
+
+const routes = ["html", "enter", "action", "save", "ctrl-s", "cmd-s"] as const;
+type Route = (typeof routes)[number];
+const saveBarRoutes: readonly Route[] = ["save", "ctrl-s", "cmd-s"];
+
+let formState = () => ({ isDirty: false, submissionAttempts: 0 });
+
+function StateProbe() {
+  const form = useFormContext();
+  formState = () => ({
+    isDirty: form.state.isDirty,
+    submissionAttempts: form.state.submissionAttempts,
+  });
+  return null;
+}
+
+function PathForm({
+  route,
+  onSubmit,
+  onSaved,
+  defaultName = "Original",
+  required = false,
+}: {
+  route: Route;
+  onSubmit: (values: Record<string, unknown>) => unknown;
+  onSaved?: (values: Record<string, unknown>) => void;
+  defaultName?: string;
+  required?: boolean;
+}) {
+  return (
+    <Form
+      formOptions={{ defaultValues: { name: defaultName } }}
+      onSubmit={onSubmit as never}
+      saveBar={{ forceVisible: true, onSaved }}
+    >
+      <StateProbe />
+      <Input name="name" label="Name" required={required} />
+      {route === "html" ? <button type="submit">Submit HTML</button> : null}
+      <Button action="submit">Submit action</Button>
+    </Form>
+  );
+}
+
+type View = ReturnType<typeof renderWithProviders>;
+
+const nameInput = (view: View) => view.getByLabelText(/^Name/) as HTMLInputElement;
+
+async function activate(route: Route, view: View) {
+  switch (route) {
+    case "html":
+      await act(async () => fireEvent.click(view.getByRole("button", { name: "Submit HTML" })));
+      return;
+    case "enter": {
+      const user = userEvent.setup();
+      await user.type(nameInput(view), "{Enter}");
+      return;
+    }
+    case "action":
+      await act(async () => fireEvent.click(view.getByRole("button", { name: "Submit action" })));
+      return;
+    case "save":
+      await act(async () => fireEvent.click(view.getByRole("button", { name: "Save" })));
+      return;
+    case "ctrl-s":
+      await act(async () => fireEvent.keyDown(document, { key: "s", ctrlKey: true }));
+      return;
+    case "cmd-s":
+      await act(async () => fireEvent.keyDown(document, { key: "s", metaKey: true }));
+      return;
+  }
+}
+
+describe("every submission path shares one outcome (MPO-275)", () => {
+  it.each(routes)(
+    "%s: a retry clears the failure while it runs, and a failed retry shows its own",
+    async (route) => {
+      let rejectRetry!: (error: Error) => void;
+      const submit = vi
+        .fn()
+        .mockRejectedValueOnce(new Error("First refusal."))
+        .mockImplementationOnce(
+          () =>
+            new Promise((_, reject) => {
+              rejectRetry = reject;
+            }),
+        );
+      const saved = vi.fn();
+      const view = renderWithProviders(
+        <PathForm route={route} onSubmit={submit} onSaved={saved} />,
+      );
+      fireEvent.change(nameInput(view), { target: { value: "Edited" } });
+
+      await activate(route, view);
+      await waitFor(() =>
+        expect(view.getByText(/Couldn't save/).textContent).toContain("First refusal."),
+      );
+      expect(submit).toHaveBeenCalledTimes(1);
+
+      await activate(route, view);
+      await waitFor(() => expect(submit).toHaveBeenCalledTimes(2));
+      await waitFor(() => expect(view.queryByText(/First refusal/)).toBeNull());
+
+      await act(async () => rejectRetry(new Error("Second refusal.")));
+      await waitFor(() =>
+        expect(view.getByText(/Couldn't save/).textContent).toContain("Second refusal."),
+      );
+      expect(view.queryByText(/First refusal/)).toBeNull();
+      expect(submit).toHaveBeenCalledTimes(2);
+      expect(nameInput(view).value).toBe("Edited");
+      expect(saved).not.toHaveBeenCalled();
+    },
+  );
+
+  it.each(routes)(
+    "%s: a validation refusal keeps the field error, the summary and the attempt count",
+    async (route) => {
+      const submit = vi.fn();
+      const saved = vi.fn();
+      const view = renderWithProviders(
+        <PathForm route={route} onSubmit={submit} onSaved={saved} defaultName="" required />,
+      );
+
+      await activate(route, view);
+      await waitFor(() =>
+        expect(view.container.querySelector('[data-testid="error-summary"]')?.textContent).toMatch(
+          /Name is required/,
+        ),
+      );
+      expect(nameInput(view).getAttribute("aria-invalid")).toBe("true");
+      expect(formState().submissionAttempts).toBe(1);
+      expect(submit).not.toHaveBeenCalled();
+      expect(saved).not.toHaveBeenCalled();
+      expect(view.queryByText(/Couldn't save/)).toBeNull();
+    },
+  );
+
+  it.each(routes)(
+    "%s: a success calls the handler once and keeps its path's success policy",
+    async (route) => {
+      const submit = vi.fn().mockResolvedValue(undefined);
+      const saved = vi.fn();
+      const view = renderWithProviders(
+        <PathForm route={route} onSubmit={submit} onSaved={saved} />,
+      );
+      fireEvent.change(nameInput(view), { target: { value: "Edited" } });
+
+      await activate(route, view);
+      await waitFor(() => expect(submit).toHaveBeenCalledTimes(1));
+      const viaSaveBar = saveBarRoutes.includes(route);
+      await waitFor(() => expect(saved).toHaveBeenCalledTimes(viaSaveBar ? 1 : 0));
+      expect(formState().isDirty).toBe(!viaSaveBar);
+      expect(nameInput(view).value).toBe("Edited");
+      expect(view.queryByText(/Couldn't save/)).toBeNull();
+      expect(submit).toHaveBeenCalledTimes(1);
+    },
+  );
+});
+
+describe("the SubmissionPaths story counts onSubmit calls (MPO-275)", () => {
+  function mountStory() {
+    const story = saveBarStories.SubmissionPaths as { render?: () => ReactElement };
+    if (!story.render) throw new Error("SubmissionPaths has no render");
+    return renderWithProviders(story.render());
+  }
+
+  const calls = (view: View) => view.getByTestId("submit-calls").textContent;
+
+  it("adds exactly one call per activation on every path and shows the same refusal", async () => {
+    const view = mountStory();
+    expect(calls(view)).toBe("onSubmit calls: 0");
+    const user = userEvent.setup();
+
+    const paths: Array<[string, () => Promise<unknown>]> = [
+      ["enter", () => user.type(view.getByLabelText("Service name"), "{Enter}")],
+      [
+        "action",
+        () => act(async () => fireEvent.click(view.getByRole("button", { name: "Submit" }))),
+      ],
+      ["save", () => act(async () => fireEvent.click(view.getByRole("button", { name: "Save" })))],
+      ["ctrl-s", () => act(async () => fireEvent.keyDown(document, { key: "s", ctrlKey: true }))],
+      ["cmd-s", () => act(async () => fireEvent.keyDown(document, { key: "s", metaKey: true }))],
+    ];
+
+    let expected = 0;
+    for (const [, run] of paths) {
+      await run();
+      expected += 1;
+      await waitFor(() => expect(calls(view)).toBe(`onSubmit calls: ${expected}`));
+      await waitFor(() =>
+        expect(view.getByText(/Couldn't save/).textContent).toContain(
+          "The record changed. Refresh and retry.",
+        ),
+      );
+    }
+    expect((view.getByLabelText("Service name") as HTMLInputElement).value).toBe("service-example");
+  });
+});

package/src/InputParts/index.tsx

@@ -29,6 +29,7 @@ import {
   ensureFocusVisibleRing,
   FOCUS_RING_CLIPPED_OFFSET,
   FOCUS_RING_HALO_OFFSET,
+  useTouchSurface,
   isTouchSurface,
   recipeFamilies,
   resolveGlyphPaint,
@@ -70,12 +71,14 @@ function useNativeFieldA11yProps() {
 const defaultContextValues = {
   size: "$true" as FontSizeTokens,
   scaleIcon: 1,
+  touch: !isWeb && isTouchSurface(),
   color: undefined as ColorTokens | string | undefined,
 };
 
 export const InputContext = createStyledContext<{
   size: FontSizeTokens;
   scaleIcon: number;
+  touch: boolean;
   color?: ColorTokens | string;
 }>(defaultContextValues);
 
@@ -91,8 +94,10 @@ function endCapVariantsFromHeights(heightVariants: Record<string, { height: numb
 
 const sizeRecipeEndCapVariants = endCapVariantsFromHeights(recipeFamilies.control.heightVariants);
 
-function sizeRecipeBoxFallback(val: unknown) {
-  const recipe = sizeRecipeForToken(String(val ?? "$true"), { touch: isTouchSurface() });
+function sizeRecipeBoxFallback(val: unknown, extras: { props: { touch?: boolean } }) {
+  const recipe = sizeRecipeForToken(String(val ?? "$true"), {
+    touch: extras.props.touch ?? (!isWeb && isTouchSurface()),
+  });
   return {
     height: recipe.height,
     paddingHorizontal: recipe.paddingHorizontal,
@@ -100,19 +105,25 @@ function sizeRecipeBoxFallback(val: unknown) {
   };
 }
 
-function sizeRecipeTypeFallback(val: unknown) {
+function sizeRecipeTypeFallback(val: unknown, extras: { props: { touch?: boolean } }) {
   return {
-    fontSize: sizeRecipeForToken(String(val ?? "$true"), { touch: isTouchSurface() }).fontSize,
+    fontSize: sizeRecipeForToken(String(val ?? "$true"), {
+      touch: extras.props.touch ?? (!isWeb && isTouchSurface()),
+    }).fontSize,
   };
 }
 
-function sizeRecipeIconFallback(val: unknown) {
-  const { iconSize } = sizeRecipeForToken(String(val ?? "$true"), { touch: isTouchSurface() });
+function sizeRecipeIconFallback(val: unknown, extras: { props: { touch?: boolean } }) {
+  const { iconSize } = sizeRecipeForToken(String(val ?? "$true"), {
+    touch: extras.props.touch ?? (!isWeb && isTouchSurface()),
+  });
   return { width: iconSize, height: iconSize };
 }
 
-function sizeRecipeEndCapFallback(val: unknown) {
-  const { height } = sizeRecipeForToken(String(val ?? "$true"), { touch: isTouchSurface() });
+function sizeRecipeEndCapFallback(val: unknown, extras: { props: { touch?: boolean } }) {
+  const { height } = sizeRecipeForToken(String(val ?? "$true"), {
+    touch: extras.props.touch ?? (!isWeb && isTouchSurface()),
+  });
   return { height, width: height, paddingHorizontal: 0 };
 }
 
@@ -350,6 +361,7 @@ const InputGroupFrame = styled(XGroup, {
   ...(isWeb ? { className: "mp-composite-ring" } : {}),
 
   variants: {
+    touch: { true: {}, false: {} },
     unstyled: {
       false: defaultInputGroupStyles,
     },
@@ -431,6 +443,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
     paddingHorizontal?: unknown;
   };
   const [focused, setFocused] = useState(false);
+  const hydrationTouch = useTouchSurface();
   const { knobProps, control, disabledState } = useResolvedKnobs();
   const grouped = useControlGrouped();
   const inTableCell = useIsInTableCell();
@@ -476,7 +489,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
   });
   const sizeToken = String((props as { size?: unknown }).size ?? knobProps.sizeToken);
   const familyRecipe = sizeRecipeForToken(sizeToken, {
-    touch: isTouchSurface(),
+    touch: hydrationTouch,
     family: recipeFamily,
   });
   const controlFragment =
@@ -520,6 +533,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
           onPress,
           disabled,
           <InputGroupFrame
+            touch={hydrationTouch}
             ref={forwardedRef}
             borderWidth={0}
             borderRadius={0}
@@ -559,6 +573,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
       onPress,
       disabled,
       <InputGroupFrame
+        touch={hydrationTouch}
         ref={forwardedRef}
         borderWidth={0}
         borderRadius={0}
@@ -600,6 +615,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
         onPress,
         disabled,
         <InputGroupFrame
+          touch={hydrationTouch}
           ref={forwardedRef}
           {...knobProps.body}
           size={knobProps.sizeToken}
@@ -721,8 +737,10 @@ export function mapInputModeToKeyboardType(inputMode?: string): MappedKeyboardTy
   return INPUT_MODE_TO_KEYBOARD[inputMode as keyof typeof INPUT_MODE_TO_KEYBOARD];
 }
 
-export const inputSizeVariant: SizeVariantSpreadFunction<any> = (val = "$true") => {
-  const recipe = sizeRecipeForToken(String(val || "$true"), { touch: isTouchSurface() });
+export const inputSizeVariant: SizeVariantSpreadFunction<any> = (val = "$true", extras) => {
+  const recipe = sizeRecipeForToken(String(val || "$true"), {
+    touch: extras?.props.touch ?? (!isWeb && isTouchSurface()),
+  });
   return {
     fontSize: recipe.fontSize,
     // LC-84: Area is chromeless — inset lives on Input.Box / ThemedTextArea.
@@ -759,6 +777,7 @@ const InputFrame = styled(TInput, {
     outlineColor: "transparent",
   },
   variants: {
+    touch: { true: {}, false: {} },
     size: {
       ...(recipeFamilies.control.typeVariants ?? sizeRecipeTypeVariants),
       "...size": sizeRecipeTypeFallback,
@@ -776,6 +795,7 @@ const InputAreaImpl = InputFrame.styleable<{
   onChangeText?: (text: string) => void;
 }>((areaProps, ref) => {
   const { setFocused } = FocusContext.useStyledContext();
+  const hydrationTouch = useTouchSurface();
   const { size } = InputContext.useStyledContext();
   const {
     secureTextEntry,
@@ -848,6 +868,7 @@ const InputAreaImpl = InputFrame.styleable<{
       {...(inTableCell ? { minWidth: 0 } : undefined)}
     >
       <InputFrame
+        touch={hydrationTouch}
         aria-describedby={fieldDescribedBy}
         {...nativeA11yProps}
         ref={ref}
@@ -930,6 +951,7 @@ const InputSection = styled(XGroup.Item, {
   alignItems: "center",
   context: InputContext,
   variants: {
+    touch: { true: {}, false: {} },
     scaleIcon: {
       ":number": {} as any,
     },
@@ -956,6 +978,7 @@ const InputButton = styled(TButton, {
   },
 
   variants: {
+    touch: { true: {}, false: {} },
     scaleIcon: {
       ":number": {} as any,
     },
@@ -1000,6 +1023,7 @@ const InputGlyphButton = styled(View, {
   focusVisibleStyle: { outlineWidth: 0 },
 
   variants: {
+    touch: { true: {}, false: {} },
     scaleIcon: {
       ":number": {} as any,
     },
@@ -1027,6 +1051,7 @@ const InputButtonImpl = InputButton.styleable<{ glyphRing?: boolean }>((buttonPr
     className?: string;
   };
   const { size: contextSize, color: contextColor } = InputContext.useStyledContext();
+  const hydrationTouch = useTouchSurface();
   const { knobProps } = useResolvedKnobs();
   const theme = useTheme();
   const size = (sizeProp ?? contextSize) as FontSizeTokens;
@@ -1068,11 +1093,12 @@ const InputButtonImpl = InputButton.styleable<{ glyphRing?: boolean }>((buttonPr
     // knob's: a $2 field inside a $4 knob would otherwise ship a 44px stop
     // on a 32px frame. LC-77 keeps the sub-floor case pressable via the
     // caller's hitSlop, never by inflating the cap.
-    const square = sizeRecipeForToken(String(size ?? "$true"), { touch: isTouchSurface() }).height;
+    const square = sizeRecipeForToken(String(size ?? "$true"), { touch: hydrationTouch }).height;
     const disabled = (props as { disabled?: boolean }).disabled === true;
     if (isWeb) ensureCompositeFocusRing();
     return (
       <InputGlyphButton
+        touch={hydrationTouch}
         ref={ref as never}
         role="button"
         size={size}
@@ -1104,6 +1130,7 @@ const InputButtonImpl = InputButton.styleable<{ glyphRing?: boolean }>((buttonPr
   const square = knobProps.control.height;
   return (
     <InputButton
+      touch={hydrationTouch}
       ref={decorativeRef}
       size={size}
       height={square}
@@ -1134,6 +1161,7 @@ export const InputIconFrame = styled(View, {
   context: InputContext,
 
   variants: {
+    touch: { true: {}, false: {} },
     scaleIcon: {
       ":number": {} as any,
     },
@@ -1154,6 +1182,7 @@ const InputIcon = InputIconFrame.styleable<{
   adornment?: "leading" | "trailing";
 }>((iconProps, ref) => {
   const { children, color: colorProp, scaleIcon: scaleIconProp, ...props } = iconProps;
+  const hydrationTouch = useTouchSurface();
   const { size = "$true", color: contextColor, scaleIcon = 1 } = InputContext.useStyledContext();
   const { knobProps } = useResolvedKnobs();
   const resolvedScaleIcon = scaleIconProp ?? scaleIcon;
@@ -1170,6 +1199,7 @@ const InputIcon = InputIconFrame.styleable<{
   const getThemedIcon = useGetThemedIcon({ size: iconSize, color: color as any });
   return (
     <InputIconFrame
+      touch={hydrationTouch}
       ref={ref}
       size={size}
       {...knobProps.controlIcon}
@@ -1192,6 +1222,7 @@ export const InputContainerFrame = styled(View, {
   flexDirection: "column",
 
   variants: {
+    touch: { true: {}, false: {} },
     size: {
       // Size is shared with the child parts; layout spacing belongs to space.
       "...size": () => ({}),
@@ -1213,10 +1244,12 @@ export const InputContainerFrame = styled(View, {
 });
 
 const InputContainerImpl = InputContainerFrame.styleable((props, forwardedRef) => {
+  const hydrationTouch = useTouchSurface();
   const { knobProps } = useResolvedKnobs();
   const inTableCell = useIsInTableCell();
   return (
     <InputContainerFrame
+      touch={hydrationTouch}
       ref={forwardedRef}
       size={knobProps.sizeToken}
       {...knobProps.body}
@@ -1238,6 +1271,7 @@ const InputContainerImpl = InputContainerFrame.styleable((props, forwardedRef) =
 const InputLabelFrame = styled(Label, {
   context: InputContext,
   variants: {
+    touch: { true: {}, false: {} },
     scaleIcon: {
       ":number": {} as any,
     },
@@ -1263,6 +1297,7 @@ const InputInfoFrame = styled(Text, {
   color: formCommonColors.text,
 
   variants: {
+    touch: { true: {}, false: {} },
     scaleIcon: {
       ":number": {} as any,
     },
@@ -1328,6 +1363,7 @@ const InputXGroup = styled(XGroup, {
   context: InputContext,
 
   variants: {
+    touch: { true: {}, false: {} },
     scaleIcon: {
       ":number": {} as any,
     },

package/src/Label/Label.stories.tsx

@@ -1,7 +1,23 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Input as TamaguiInput, YStack } from "tamagui";
+import { YStack } from "tamagui";
+import { Input as InputParts } from "../InputParts";
 import { Label } from "./index";
 
+/**
+ * The house Input chrome without the field's own label: the Label under test
+ * is the one above it. The `Input` field brings its own label, so it cannot
+ * stand here.
+ */
+function Control({ disabled, ...area }: { id: string; placeholder?: string; disabled?: boolean }) {
+  return (
+    <InputParts>
+      <InputParts.Box disabled={disabled}>
+        <InputParts.Area disabled={disabled} {...area} />
+      </InputParts.Box>
+    </InputParts>
+  );
+}
+
 const meta: Meta<typeof Label> = {
   title: "Forms/Label",
   component: Label,
@@ -34,7 +50,7 @@ export const WithControl: Story = {
       <Label htmlFor="label-story-input" required>
         Email address
       </Label>
-      <TamaguiInput id="label-story-input" placeholder="you@example.com" />
+      <Control id="label-story-input" placeholder="you@example.com" />
     </YStack>
   ),
 };
@@ -46,13 +62,13 @@ export const RequiredAndOptional: Story = {
         <Label htmlFor="label-required" required>
           Email address
         </Label>
-        <TamaguiInput id="label-required" />
+        <Control id="label-required" />
       </YStack>
       <YStack gap="$1.5">
         <Label htmlFor="label-optional" required={false} requiredMarking="optional">
           Nickname
         </Label>
-        <TamaguiInput id="label-optional" />
+        <Control id="label-optional" />
       </YStack>
     </YStack>
   ),
@@ -64,7 +80,7 @@ export const ErrorState: Story = {
       <Label htmlFor="label-error" required error>
         Email address
       </Label>
-      <TamaguiInput id="label-error" />
+      <Control id="label-error" />
     </YStack>
   ),
 };
@@ -75,7 +91,7 @@ export const Disabled: Story = {
       <Label htmlFor="label-disabled" disabled>
         Email address
       </Label>
-      <TamaguiInput id="label-disabled" disabled />
+      <Control id="label-disabled" disabled />
     </YStack>
   ),
 };
@@ -86,7 +102,7 @@ export const AsPageHeading: Story = {
       <Label htmlFor="label-heading" asPageHeading>
         Event name
       </Label>
-      <TamaguiInput id="label-heading" />
+      <Control id="label-heading" />
     </YStack>
   ),
 };
@@ -97,7 +113,7 @@ export const Hidden: Story = {
       <Label htmlFor="label-hidden" hidden>
         Search
       </Label>
-      <TamaguiInput id="label-hidden" placeholder="Search" />
+      <Control id="label-hidden" placeholder="Search" />
     </YStack>
   ),
 };
@@ -107,18 +123,18 @@ export const EdgeCases: Story = {
     <YStack gap="$4" maxWidth={360}>
       <YStack gap="$1.5">
         <Label htmlFor="label-empty">{""}</Label>
-        <TamaguiInput id="label-empty" placeholder="empty label above" />
+        <Control id="label-empty" placeholder="empty label above" />
       </YStack>
       <YStack gap="$1.5">
         <Label htmlFor="label-long">
           This is an extremely long label that keeps going and going to check wrapping behaviour of
           label text over multiple lines without breaking the layout of the associated control
         </Label>
-        <TamaguiInput id="label-long" placeholder="long label above" />
+        <Control id="label-long" placeholder="long label above" />
       </YStack>
       <YStack gap="$1.5">
         <Label htmlFor="label-rtl">تسمية باللغة العربية</Label>
-        <TamaguiInput id="label-rtl" placeholder="rtl label above" />
+        <Control id="label-rtl" placeholder="rtl label above" />
       </YStack>
     </YStack>
   ),