@multiplatform.one/forms 7.34.4 → 7.35.0

package/src/FormGrid.spec.tsx

@@ -1,5 +1,5 @@
 import { act } from "@testing-library/react";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, Surface } from "@multiplatform.one/theme";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { FieldGroup } from "./FieldGroup";
@@ -54,7 +54,7 @@ function stubContainerWidth(width: number) {
 
 describe("formSpacing tokens", () => {
   it("encodes section gap larger than field gap (DG-FORM-06)", () => {
-    expect(formFieldGap).toBe("$4");
+    expect(formFieldGap).toBe("$3");
     expect(formSectionGap).toBe("$8");
     expect(Number(formSectionGap.slice(1))).toBeGreaterThan(Number(formFieldGap.slice(1)));
   });
@@ -78,9 +78,8 @@ describe("FormGrid", () => {
     expect(grid?.getAttribute("data-columns")).toBe("1");
     expect(grid?.getAttribute("data-requested-columns")).toBe("1");
     expect(grid?.getAttribute("data-max-columns")).toBe("2");
-    expect(grid?.getAttribute("data-gap")).toBe("$4");
-    expect(grid?.getAttribute("data-density")).toBe("comfortable");
-    expect(grid?.getAttribute("data-size")).toBe("medium");
+    expect(grid?.getAttribute("data-gap")).toBe("$3");
+    expect(grid?.getAttribute("data-size-token")).toBe("$true");
   });
 
   it("caps columns at maxColumns", () => {
@@ -130,41 +129,43 @@ describe("FormGrid", () => {
     expect(grid.style.gridTemplateColumns).toBe("repeat(1, minmax(0, 1fr))");
   });
 
-  it("gap follows the space recipe, not sizeToken (density≠size)", () => {
+  it("gap is the within-group role at any size token, never sizeToken", () => {
     const result = renderWithProviders(
-      <Preset overrides={{ size: "large", space: "small" }}>
+      <Surface size="$5">
         <FormGrid>
           <div>a</div>
         </FormGrid>
-      </Preset>,
+      </Surface>,
     );
     const grid = result.container.querySelector("[data-mpo-form-grid]");
-    expect(grid?.getAttribute("data-gap")).toBe("$2");
-    expect(grid?.getAttribute("data-size")).toBe("large");
+    expect(grid?.getAttribute("data-gap")).toBe("$3");
+    expect(grid?.getAttribute("data-size-token")).toBe("$5");
   });
 
-  it("compact steps space down without reading sizeToken as gap", () => {
+  it("has no compact switch and no density attribute", () => {
     const result = renderWithProviders(
-      <FormGrid compact>
-        <div>a</div>
-      </FormGrid>,
+      <Surface size="$3">
+        <FormGrid>
+          <div>a</div>
+        </FormGrid>
+      </Surface>,
     );
     const grid = result.container.querySelector("[data-mpo-form-grid]");
-    expect(grid?.getAttribute("data-density")).toBe("compact");
-    expect(grid?.getAttribute("data-size")).toBe("medium");
-    expect(grid?.getAttribute("data-gap")).toBe("$2");
+    expect(grid?.hasAttribute("data-density")).toBe(false);
+    expect(grid?.getAttribute("data-size-token")).toBe("$3");
+    expect(grid?.getAttribute("data-gap")).toBe("$3");
   });
 
-  it("spreads the space-recipe gap fragment (not a raw 16)", () => {
+  it("spreads the role gap fragment (not a raw 16)", () => {
     const result = renderWithProviders(
-      <Preset overrides={{ space: "large" }}>
+      <Preset>
         <FormGrid>
           <div>a</div>
         </FormGrid>
       </Preset>,
     );
     const grid = result.container.querySelector("[data-mpo-form-grid]");
-    expect(grid?.getAttribute("data-gap")).toBe("$5");
+    expect(grid?.getAttribute("data-gap")).toBe("$3");
   });
 });
 
@@ -194,17 +195,17 @@ describe("FieldGroup", () => {
     ).toBe("2");
   });
 
-  it("field gap follows space, not size (density≠size)", () => {
+  it("field gap is the within-group role, not the size token", () => {
     const result = renderWithProviders(
-      <Preset overrides={{ size: "large", space: "small" }}>
+      <Surface size="$5">
         <FieldGroup legend="Billing">
           <div>card</div>
         </FieldGroup>
-      </Preset>,
+      </Surface>,
     );
     const group = result.container.querySelector("[data-mpo-field-group]");
-    expect(group?.getAttribute("data-field-gap")).toBe("$2");
-    expect(group?.getAttribute("data-size")).toBe("large");
+    expect(group?.getAttribute("data-field-gap")).toBe("$3");
+    expect(group?.getAttribute("data-size-token")).toBe("$5");
   });
 });
 
@@ -267,27 +268,27 @@ describe("FormSection semantic gaps (DG-FORM-06)", () => {
     const section = result.container.querySelector("[data-mpo-form-section]");
     const stack = result.container.querySelector("[data-mpo-form-section-stack]");
     // knob defaults: gap $4 (within-group), gapLg $5 (between-groups)
-    expect(section?.getAttribute("data-field-gap")).toBe("$4");
+    expect(section?.getAttribute("data-field-gap")).toBe("$3");
     expect(stack?.getAttribute("data-section-gap")).toBe("$5");
     const fieldStep = Number(section?.getAttribute("data-field-gap")?.slice(1));
     const sectionStep = Number(stack?.getAttribute("data-section-gap")?.slice(1));
     expect(sectionStep).toBeGreaterThan(fieldStep);
   });
 
-  it("space knob restyles both gaps while keeping section > field", () => {
+  it("a size token restyles neither gap: section > field stays on the roles", () => {
     const result = renderWithProviders(
-      <Preset overrides={{ space: "small" }}>
+      <Surface size="$3">
         <FormSectionStack>
           <FormSection label="A">
             <div>1</div>
           </FormSection>
         </FormSectionStack>
-      </Preset>,
+      </Surface>,
     );
     const section = result.container.querySelector("[data-mpo-form-section]");
     const stack = result.container.querySelector("[data-mpo-form-section-stack]");
-    expect(section?.getAttribute("data-field-gap")).toBe("$2");
-    expect(stack?.getAttribute("data-section-gap")).toBe("$3");
+    expect(section?.getAttribute("data-field-gap")).toBe("$3");
+    expect(stack?.getAttribute("data-section-gap")).toBe("$5");
   });
 
   it("explicit gap props eject from the knob defaults", () => {

package/src/FormGrid.stories.tsx

@@ -12,7 +12,6 @@ const meta: Meta<typeof FormGrid> = {
   argTypes: {
     columns: { control: { type: "number", min: 1, max: 2 } },
     maxColumns: { control: { type: "number", min: 1, max: 2 } },
-    compact: { control: "boolean" },
   },
   args: {
     columns: 1,

package/src/FormGrid.tsx

@@ -27,12 +27,10 @@ export interface FormGridProps {
    */
   maxColumns?: FormGridColumns;
   /**
-   * Gap between fields. Defaults to the space recipe (`knobProps.gap`) —
-   * density/space, never `sizeToken`. Number = px eject; token string allowed.
+   * Gap between fields. Defaults to the within-group role (`knobProps.gap`),
+   * never `sizeToken`. Number = px eject; token string allowed.
    */
   gap?: number | string;
-  /** Nested scale (LC-73). Omit to inherit the nearest Preset density. */
-  compact?: boolean;
   children: ReactNode;
 }
 
@@ -52,8 +50,8 @@ function resolveWideColumns(
  * the container is at least {@link FORM_GRID_COLLAPSE_WIDTH} wide (container measure
  * on web; viewport media on native).
  */
-export function FormGrid({ columns = 1, maxColumns = 2, gap, compact, children }: FormGridProps) {
-  const { knobProps } = useResolvedKnobs(compact === undefined ? undefined : { compact });
+export function FormGrid({ columns = 1, maxColumns = 2, gap, children }: FormGridProps) {
+  const { knobProps } = useResolvedKnobs();
   const gapFragment = gap === undefined ? knobProps.gap : { gap };
   const resolvedGap = gapFragment.gap;
   const wideColumns = resolveWideColumns(columns, maxColumns);
@@ -65,8 +63,7 @@ export function FormGrid({ columns = 1, maxColumns = 2, gap, compact, children }
         maxColumns={maxColumns}
         gap={resolvedGap}
         gapFragment={gapFragment}
-        density={knobProps.density}
-        size={knobProps.size}
+        sizeToken={knobProps.sizeToken}
       >
         {children}
       </FormGridWeb>
@@ -79,8 +76,7 @@ export function FormGrid({ columns = 1, maxColumns = 2, gap, compact, children }
       maxColumns={maxColumns}
       gap={resolvedGap}
       gapFragment={gapFragment}
-      density={knobProps.density}
-      size={knobProps.size}
+      sizeToken={knobProps.sizeToken}
     >
       {children}
     </FormGridNative>
@@ -92,16 +88,14 @@ function FormGridWeb({
   maxColumns,
   gap,
   gapFragment,
-  density,
-  size,
+  sizeToken,
   children,
 }: {
   columns: FormGridColumns;
   maxColumns: FormGridColumns;
   gap: number | string;
   gapFragment: { gap: number | string };
-  density: string;
-  size: string;
+  sizeToken: string;
   children: ReactNode;
 }) {
   const ref = useRef<HTMLDivElement>(null);
@@ -151,8 +145,7 @@ function FormGridWeb({
       data-max-columns={maxColumns}
       data-requested-columns={columns}
       data-gap={String(gap)}
-      data-density={density}
-      data-size={size}
+      data-size-token={sizeToken}
       {...gapFragment}
       width="100%"
       minWidth={0}
@@ -168,16 +161,14 @@ function FormGridNative({
   maxColumns,
   gap,
   gapFragment,
-  density,
-  size,
+  sizeToken,
   children,
 }: {
   columns: FormGridColumns;
   maxColumns: FormGridColumns;
   gap: number | string;
   gapFragment: { gap: number | string };
-  density: string;
-  size: string;
+  sizeToken: string;
   children: ReactNode;
 }) {
   const media = useMedia();
@@ -222,8 +213,7 @@ function FormGridNative({
       data-max-columns={maxColumns}
       data-requested-columns={columns}
       data-gap={String(gap)}
-      data-density={density}
-      data-size={size}
+      data-size-token={sizeToken}
     >
       {rows.map((row, rowIndex) => (
         <XStack key={rowIndex} {...gapFragment}>

package/src/FormSection.tsx

@@ -14,7 +14,7 @@ export interface FormSectionProps {
   maxWidth?: number | "fluid";
   /**
    * Gap between fields inside the section. Defaults to the semantic
-   * within-group gap (`knobProps.gap`, DG-LAY-03) so the space knob
+   * within-group gap (`knobProps.gap`, DG-LAY-03) so the preset's scale
    * restyles form rhythm; explicit values eject.
    */
   gap?: number | string;
@@ -25,8 +25,6 @@ export interface FormSectionProps {
    * so assistive tech groups the fields. Native keeps a heading label.
    */
   fieldset?: boolean;
-  /** Nested scale (LC-73). Omit to inherit the nearest Preset density. */
-  compact?: boolean;
 }
 
 /**
@@ -35,7 +33,7 @@ export interface FormSectionProps {
  * Field gap defaults to the within-group semantic gap (`knobProps.gap`);
  * stack multiple sections with {@link FormSectionStack}, whose gap defaults
  * to the between-groups gap (`knobProps.gapLg`) — always one step larger, so
- * section rhythm stays larger than field rhythm at every space knob value
+ * section rhythm stays larger than field rhythm on every scale
  * (DG-FORM-06 / DG-LAY-03). Gallery **Fieldset** is this component (also
  * exported as {@link Fieldset}).
  */
@@ -46,10 +44,9 @@ export function FormSection({
   gap,
   testID,
   fieldset = true,
-  compact,
 }: FormSectionProps) {
   const useFieldset = fieldset && isWeb;
-  const { knobProps } = useResolvedKnobs(compact === undefined ? undefined : { compact });
+  const { knobProps } = useResolvedKnobs();
   const resolvedGap = gap ?? knobProps.gap.gap;
 
   return (
@@ -58,8 +55,7 @@ export function FormSection({
       data-mpo-form-section=""
       data-mpo-fieldset={useFieldset ? "" : undefined}
       data-field-gap={String(resolvedGap)}
-      data-density={knobProps.density}
-      data-size={knobProps.size}
+      data-size-token={knobProps.sizeToken}
       data-testid={testID}
       gap={resolvedGap as never}
       width="100%"
@@ -134,8 +130,7 @@ export function FormSectionStack({ children, gap }: FormSectionStackProps) {
     <YStack
       data-mpo-form-section-stack=""
       data-section-gap={String(resolvedGap)}
-      data-density={knobProps.density}
-      data-size={knobProps.size}
+      data-size-token={knobProps.sizeToken}
       gap={resolvedGap as never}
       width="100%"
     >

package/src/InputParts/InputParts.stories.tsx

@@ -57,7 +57,7 @@ export const Anatomy: Story = {
  */
 export const FocusRingOnTheBox: Story = {
   render: () => (
-    <YStack gap="$4" width={320}>
+    <YStack gap="$4" width={320} maxWidth="100%">
       <Paragraph size="$2">Tab in — the border box rings, the input does not.</Paragraph>
       <InputParts>
         <InputParts.Box>
@@ -74,7 +74,7 @@ export const FocusRingOnTheBox: Story = {
 /** Leading and trailing slots. The trailing end-cap is square by size recipe. */
 export const Adornments: Story = {
   render: () => (
-    <YStack gap="$4" width={320}>
+    <YStack gap="$4" width={320} maxWidth="100%">
       <InputParts>
         <InputParts.Box>
           <InputParts.Icon adornment="leading">
@@ -152,7 +152,7 @@ export const TrailingButton: Story = {
  */
 export const MetaReservesOneLine: Story = {
   render: () => (
-    <YStack gap="$5" width={320}>
+    <YStack gap="$5" width={320} maxWidth="100%">
       <InputParts>
         <InputParts.Label>Helper</InputParts.Label>
         <InputParts.Box>
@@ -211,7 +211,7 @@ export const MultiLine: Story = {
 /** Disabled chrome lives on the Box, not on the Area. */
 export const DisabledBox: Story = {
   render: () => (
-    <YStack gap="$4" width={320}>
+    <YStack gap="$4" width={320} maxWidth="100%">
       <InputParts>
         <InputParts.Box>
           <InputParts.Area placeholder="Enabled" />

package/src/InputParts/index.spec.tsx

@@ -138,3 +138,28 @@ describe("LC-84 TEXT-INSET — Area chromeless, keyboard map", () => {
     expect(area.getAttribute("autocomplete") === "tel" || area.autocomplete === "tel").toBe(true);
   });
 });
+
+describe("Input frame motion", () => {
+  it("limits the frame transition to control paint and transform", () => {
+    const { container } = renderWithProviders(
+      <Input>
+        <Input.Box>
+          <Input.Area />
+        </Input.Box>
+      </Input>,
+    );
+    const frame = container.querySelector<HTMLElement>("[data-mp-input-box]");
+    const properties = Array.from(
+      (frame?.style.transition ?? "").matchAll(/(?:^|,\s+)([a-z-]+)\s+\d+ms/g),
+      (match) => match[1],
+    );
+    expect(properties).toEqual([
+      "background-color",
+      "border-color",
+      "color",
+      "opacity",
+      "transform",
+    ]);
+    expect(frame?.style.transition).not.toMatch(/outline|height|all|box-shadow/);
+  });
+});

package/src/InputParts/index.tsx

@@ -1,3 +1,4 @@
+import { transitionProps } from "@multiplatform.one/theme";
 import { getFontSized } from "@tamagui/get-font-sized";
 import type { SizeVariantSpreadFunction } from "@tamagui/web";
 import { useCallback, useEffect, useState, type ReactNode } from "react";
@@ -8,6 +9,7 @@ import type {
   FontSizeTokens,
   InputKeyboardType,
   InputTextContentType,
+  SizeTokens,
   TamaguiElement,
 } from "tamagui";
 import {
@@ -157,42 +159,6 @@ export const useForwardFocus = (target: RefObject<TamaguiElement | null>) => {
 // Default group styles
 // ---------------------------------------------------------------------------
 
-/**
- * Tamagui named transitions (`quick`, etc.) compile to `transition: all …`.
- * That tweens outline-color/width on blur — in dark theme `$outlineColor` is
- * near-white, so the ring flashes white while settling. Scope the frame
- * transition to non-outline paint props instead.
- */
-const inputFrameCssTimings: Record<string, string> = {
-  bouncy: "ease-in 200ms",
-  lazy: "ease-in 600ms",
-  slow: "ease-in 500ms",
-  medium: "ease-in-out 250ms",
-  quick: "ease-in 100ms",
-  tooltip: "ease-in 400ms",
-  snappy: "ease-out 80ms",
-  gentle: "ease-in-out 450ms",
-};
-
-export function getInputFrameTransitionProps(transition: string | undefined) {
-  if (!transition) return undefined;
-  if (!isWeb) return { transition };
-  const timing = inputFrameCssTimings[transition] ?? inputFrameCssTimings.quick;
-  return {
-    // Prefer explicit CSS over Tamagui's `transition: all` named prop.
-    style: {
-      transition: [
-        `background-color ${timing}`,
-        `border-color ${timing}`,
-        `color ${timing}`,
-        `opacity ${timing}`,
-        `box-shadow ${timing}`,
-        `transform ${timing}`,
-      ].join(", "),
-    },
-  };
-}
-
 /** Resting outline: transparent + 0 width so blur never lands on theme `$outlineColor`. */
 const inputOutlineRest = {
   outlineWidth: 0,
@@ -642,9 +608,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
           {...(knobProps.elevation == null ? { elevation: undefined } : knobProps.elevationChrome)}
           {...knobProps.borderRadius}
           {...sizeTableRadius}
-          {...getInputFrameTransitionProps(
-            typeof knobProps.transition === "string" ? knobProps.transition : undefined,
-          )}
+          {...transitionProps(knobProps.motion.control)}
           hoverStyle={{
             borderColor: formInputColors.border.hover,
             ...control.hoverKnobProps,
@@ -815,7 +779,10 @@ const InputAreaImpl = InputFrame.styleable<{
 }>((areaProps, ref) => {
   const { setFocused } = FocusContext.useStyledContext();
   const hydrationTouch = useTouchSurface();
-  const { size } = InputContext.useStyledContext();
+  const { size: contextSize } = InputContext.useStyledContext();
+  // The styleable receives the group's context props; the hook alone can
+  // read the default `$true` here.
+  const size = (areaProps as { size?: FontSizeTokens }).size ?? contextSize;
   const {
     secureTextEntry,
     keyboardType,
@@ -850,7 +817,9 @@ const InputAreaImpl = InputFrame.styleable<{
     minHeight?: number | string;
     maxHeight?: number | string;
   };
-  const { knobProps } = useResolvedKnobs();
+  // The group's size token, so the text reads the same recipe as its box: a
+  // field given `size` directly (no Surface) must not type at `$true`.
+  const { knobProps } = useResolvedKnobs({ size: size as SizeTokens });
   const theme = useTheme();
   const fieldDescribedBy = useFieldDescribedBy();
   const nativeA11yProps = useNativeFieldA11yProps();
@@ -1071,9 +1040,9 @@ const InputButtonImpl = InputButton.styleable<{ glyphRing?: boolean }>((buttonPr
   };
   const { size: contextSize, color: contextColor } = InputContext.useStyledContext();
   const hydrationTouch = useTouchSurface();
-  const { knobProps } = useResolvedKnobs();
-  const theme = useTheme();
   const size = (sizeProp ?? contextSize) as FontSizeTokens;
+  const { knobProps } = useResolvedKnobs({ size: size as SizeTokens });
+  const theme = useTheme();
   const paint = resolveGlyphPaint(theme as never, colorProp ?? contextColor);
   const getThemedIcon = useGetThemedIcon({
     size: knobProps.controlIcon.width,
@@ -1272,7 +1241,7 @@ const InputContainerImpl = InputContainerFrame.styleable((props, forwardedRef) =
       ref={forwardedRef}
       size={knobProps.sizeToken}
       {...knobProps.body}
-      {...knobProps.gap}
+      {...knobProps.gapSm}
       // LC-06/LC-10 (UX-P12): inside a table cell the field root must adopt
       // the cell width — the raw web <input> carries an intrinsic width that
       // otherwise floors the whole column at ~200px and lays out past the

package/src/InputParts/layoutGap.spec.tsx

@@ -1,23 +1,24 @@
 import { createRef } from "react";
-import { Preset } from "@multiplatform.one/theme";
+import { Surface } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { cleanup } from "@testing-library/react";
+import type { SizeTokens } from "tamagui";
 import { afterEach, expect, it } from "vitest";
 import { Input } from "./index";
 
 afterEach(cleanup);
 
-function measure(size: "small" | "medium", space: "small" | "large", gap?: number) {
+function measure(size: SizeTokens, gap?: number) {
   const ref = createRef<HTMLElement>();
   const { getByTestId } = renderWithProviders(
-    <Preset overrides={{ size, space }}>
+    <Surface size={size}>
       <Input testID="root" ref={ref as never} {...(gap === undefined ? {} : { gap })}>
         <Input.Label>Location</Input.Label>
         <Input.Box>
           <Input.Area placeholder="Location" />
         </Input.Box>
       </Input>
-    </Preset>,
+    </Surface>,
   );
   const root = getByTestId("root");
   expect(ref.current).toBe(root);
@@ -30,14 +31,11 @@ function measure(size: "small" | "medium", space: "small" | "large", gap?: numbe
   return value;
 }
 
-it("lets space change the multi-slot layout gap at a fixed control size", () => {
-  expect(measure("medium", "small")).not.toBe(measure("medium", "large"));
-});
-
-it("keeps the layout gap stable when only control size changes", () => {
-  expect(measure("small", "small")).toBe(measure("medium", "small"));
+it("keeps the layout gap on the spacing role when the control size token changes", () => {
+  expect(measure("$3")).toBe(measure("$4"));
+  expect(measure("$5")).toBe(measure("$4"));
 });
 
 it("preserves the consumer gap eject and forwarded root ref", () => {
-  expect(measure("medium", "large", 11)).toBe("11px");
+  expect(measure("$4", 11)).toBe("11px");
 });

package/src/Label/Label.spec.tsx

@@ -1,8 +1,19 @@
+import { Preset } from "@multiplatform.one/theme";
+import { defaultConfig } from "@tamagui/config/v5";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
+import { createTamagui, TamaguiProvider } from "tamagui";
 import { describe, expect, it } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Input as TamaguiInput } from "tamagui";
 import { Label } from "./index";
 
+const bodyConfig = createTamagui({
+  ...configWithoutAnimations,
+  animations: animationsCSS,
+  fonts: { ...configWithoutAnimations.fonts, body: defaultConfig.fonts.body },
+});
+
 describe("Label", () => {
   it("associates with a control via htmlFor", () => {
     const { container } = renderWithProviders(
@@ -71,3 +82,25 @@ describe("Label", () => {
     expect(["400", "normal"]).toContain(String(weight));
   });
 });
+
+describe("label body stop and weight knob", () => {
+  for (const [fontWeight, expected] of [
+    ["regular", "400"],
+    ["bold", "700"],
+  ] as const) {
+    it(`uses body $true and ${fontWeight} weight`, () => {
+      const { container } = renderWithProviders(
+        <TamaguiProvider config={bodyConfig} defaultTheme="light">
+          <Preset overrides={{ fontWeight }}>
+            <Label htmlFor="w">Name</Label>
+          </Preset>
+        </TamaguiProvider>,
+        { tamagui: false },
+      );
+      const label = container.querySelector("label")!;
+      expect(label.className).toContain("_fos-f-size-true");
+      expect(getComputedStyle(label).fontSize).toBe("15px");
+      expect(getComputedStyle(label).fontWeight).toBe(expected);
+    });
+  }
+});

package/src/Label/index.tsx

@@ -73,7 +73,6 @@ export function Label({
       {...knobProps.body}
       {...knobProps.label}
       {...type}
-      fontWeight="400"
       color={color}
       cursor={disabled ? "not-allowed" : htmlFor ? "pointer" : "default"}
       display="flex"

package/src/MediaPicker/MediaPicker.stories.tsx

@@ -0,0 +1,65 @@
+import { Button, Image, Paragraph, YStack } from "@multiplatform.one/components";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { MediaPickerError, type MediaSource, type PickedMedia } from "./types";
+import { useMediaPicker } from "./useMediaPicker";
+
+export function MediaPickerDemo({ capture = false }: { capture?: boolean }) {
+  const { pick, pending } = useMediaPicker();
+  const [image, setImage] = useState<PickedMedia | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const choose = async (source: MediaSource) => {
+    setError(null);
+    try {
+      const result = await pick({ source, bytes: capture });
+      if (result) setImage(result);
+    } catch (reason) {
+      setError(
+        reason instanceof MediaPickerError ? reason.message : "The image could not be opened.",
+      );
+    }
+  };
+  return (
+    <YStack gap="$3" padding="$4">
+      <Paragraph>{capture ? "Attach an image" : "Profile photo"}</Paragraph>
+      {error ? (
+        <Paragraph theme="error" role="alert">
+          {error}
+        </Paragraph>
+      ) : null}
+      {image ? (
+        <YStack gap="$2">
+          <Image
+            source={{ uri: image.uri }}
+            width="$12"
+            height="$12"
+            objectFit="contain"
+            accessibilityLabel="Selected image"
+          />
+          <Paragraph>
+            {image.mimeType} · {image.width} × {image.height}
+          </Paragraph>
+          {image.bytes ? <Paragraph>{image.bytes.byteLength} bytes</Paragraph> : null}
+        </YStack>
+      ) : null}
+      {capture ? (
+        <Button disabled={pending} onPress={() => void choose("camera")}>
+          Take photo
+        </Button>
+      ) : null}
+      <Button disabled={pending} onPress={() => void choose("library")}>
+        Choose photo
+      </Button>
+    </YStack>
+  );
+}
+
+const meta: Meta<typeof MediaPickerDemo> = {
+  title: "Forms/MediaPicker",
+  component: MediaPickerDemo,
+  excludeStories: ["MediaPickerDemo"],
+};
+export default meta;
+type Story = StoryObj<typeof MediaPickerDemo>;
+export const ProfilePhoto: Story = { args: { capture: false } };
+export const CaptureImage: Story = { args: { capture: true } };