@multiplatform.one/forms 7.6.3 → 7.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/forms",
-  "version": "7.6.3",
+  "version": "7.7.1",
   "description": "Cross-platform form components with URL state management",
   "keywords": [
     "cross-platform",
@@ -70,9 +70,9 @@
     "perfect-freehand": "^1.2.3",
     "react-native-svg": "15.15.4",
     "tamagui": "2.7.6",
-    "@multiplatform.one/router": "7.6.3",
-    "@multiplatform.one/table-primitives": "7.6.3",
-    "@multiplatform.one/theme": "7.6.3"
+    "@multiplatform.one/router": "7.7.1",
+    "@multiplatform.one/table-primitives": "7.7.1",
+    "@multiplatform.one/theme": "7.7.1"
   },
   "devDependencies": {
     "@tamagui/build": "2.7.6",
@@ -80,7 +80,6 @@
     "@tamagui/vite-plugin": "2.7.6",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/react": "~19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/coverage-v8": "^4.1.5",
@@ -95,13 +94,14 @@
     "react-i18next": "^16.6.6",
     "react-native-web": "^0.21.2",
     "vitest": "^4.1.5",
-    "@multiplatform.one/config": "7.6.3",
-    "@multiplatform.one/storybook": "7.6.3",
-    "@multiplatform.one/test-utils": "7.6.3"
+    "@multiplatform.one/config": "7.7.1",
+    "@multiplatform.one/storybook": "7.7.1",
+    "@multiplatform.one/test-utils": "7.7.1"
   },
   "peerDependencies": {
-    "expo-haptics": "55.0.17",
+    "@react-native-community/datetimepicker": ">=8.0.1",
     "expo-document-picker": "*",
+    "expo-haptics": "55.0.17",
     "expo-image-picker": "*",
     "expo-maps": "*",
     "i18next": "^25.0.0",
@@ -110,6 +110,9 @@
     "react-i18next": ">=14"
   },
   "peerDependenciesMeta": {
+    "@react-native-community/datetimepicker": {
+      "optional": true
+    },
     "expo-document-picker": {
       "optional": true
     },

package/src/Button/Button.labelInk.spec.tsx

@@ -51,7 +51,7 @@ const WHITE_PAGE_SURFACES = ["background", "color1"] as const;
 
 function houseRender(ui: React.ReactElement, theme: "light" | "dark" = "light") {
   return render(
-    <TamaguiProvider config={houseConfig} defaultTheme={theme} disableInjectCSS>
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={theme} disableInjectCSS>
       <YStack backgroundColor="$background">{ui}</YStack>
     </TamaguiProvider>,
   );

package/src/Button/Button.sizeLadder.spec.tsx

@@ -0,0 +1,124 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * MPO-46 AC-1: the painted Button, not the recipe source, matches the
+ * measured Tamagui v5 table at $2/$3/$4/$6. Radius used to sit on the
+ * borderRadius knob (flat 9px); it must step with the size token, and
+ * gap must equal that painted radius at every size and every knob stop.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button } from "./index";
+
+afterEach(cleanup);
+
+const MEASURED = {
+  $2: { paddingHorizontal: 7, fontSize: 12, radius: 5 },
+  $3: { paddingHorizontal: 13, fontSize: 13, radius: 7 },
+  $4: { paddingHorizontal: 18, fontSize: 14, radius: 9 },
+  $6: { paddingHorizontal: 32, fontSize: 18, radius: 16 },
+} as const;
+
+const KNOB_STOPS = {
+  none: 0,
+  small: 5,
+  medium: 9,
+  large: 16,
+  full: 50,
+} as const;
+
+function lastPx(el: Element, re: RegExp): number | null {
+  let found: number | null = null;
+  for (const c of String((el as HTMLElement).className || "").split(/\s+/)) {
+    const m = c.match(re);
+    if (m) found = Number(m[1]);
+  }
+  return found;
+}
+
+const RADIUS_TOKEN_PX: Record<string, number> = {
+  "0": 0,
+  "2": 5,
+  "3": 7,
+  "4": 9,
+  "5": 10,
+  "6": 16,
+  "12": 50,
+};
+
+function radiusPx(el: HTMLElement): number | null {
+  let found: number | null = null;
+  for (const c of String(el.className || "").split(/\s+/)) {
+    const px = c.match(/^_btlr-(\d+)px$/);
+    if (px) found = Number(px[1]);
+    const tok = c.match(/^_btlr-t-radius-(\d+)$/);
+    if (tok) found = RADIUS_TOKEN_PX[tok[1]] ?? found;
+  }
+  return found;
+}
+
+function padXPx(el: HTMLElement): number | null {
+  return lastPx(el, /^_px-(\d+)px$/) ?? lastPx(el, /^_p[lr]-(\d+)px$/);
+}
+
+function gapPx(el: HTMLElement): number | null {
+  return lastPx(el, /^_gap-(\d+)px$/);
+}
+
+function labelPx(el: HTMLElement): number | null {
+  for (const node of Array.from(el.querySelectorAll("*"))) {
+    const n = lastPx(node, /^_fos-(\d+)px$/) ?? lastPx(node, /^_fs-(\d+)px$/);
+    if (n != null) return n;
+  }
+  return lastPx(el, /^_fos-(\d+)px$/) ?? lastPx(el, /^_fs-(\d+)px$/);
+}
+
+function renderSize(size: keyof typeof MEASURED) {
+  renderWithProviders(
+    <Button size={size} icon={<span>i</span>}>
+      Restart
+    </Button>,
+  );
+  return screen.getByRole("button");
+}
+
+describe("MPO-46 painted Button size ladder", () => {
+  it("padX, label and radius at $2/$3/$4/$6 match the reference table", () => {
+    for (const token of ["$2", "$3", "$4", "$6"] as const) {
+      const row = MEASURED[token];
+      const frame = renderSize(token);
+      expect(padXPx(frame), `${token} padX (${frame.className})`).toBe(row.paddingHorizontal);
+      expect(labelPx(frame), `${token} label`).toBe(row.fontSize);
+      expect(radiusPx(frame), `${token} radius (${frame.className})`).toBe(row.radius);
+      cleanup();
+    }
+  });
+
+  it("gap equals radius at every size step", () => {
+    for (const token of ["$2", "$3", "$4", "$6"] as const) {
+      const frame = renderSize(token);
+      expect(gapPx(frame), `${token} gap`).toBe(MEASURED[token].radius);
+      expect(gapPx(frame), `${token} gap==radius`).toBe(radiusPx(frame));
+      cleanup();
+    }
+  });
+
+  it("gap equals radius at every borderRadius knob stop", () => {
+    for (const [stop, px] of Object.entries(KNOB_STOPS) as [keyof typeof KNOB_STOPS, number][]) {
+      renderWithProviders(
+        <Preset overrides={{ borderRadius: stop }}>
+          <Button size="$4" icon={<span>i</span>}>
+            Restart
+          </Button>
+        </Preset>,
+      );
+      const frame = screen.getByRole("button");
+      expect(radiusPx(frame), `${stop} radius`).toBe(px);
+      expect(gapPx(frame), `${stop} gap`).toBe(px);
+      cleanup();
+    }
+  });
+});

package/src/Button/Button.spec.tsx

@@ -3,10 +3,10 @@
  *
  * LC-65 SIZE-RECIPE (Button arm): medium/$4 paints at 44px — since MPO-13
  * the recipe table IS the measured Tamagui $size ramp ($4/$true = 44), so
- * the recipe fragment and the raw token finally agree. Radius stays on the
- * borderRadius knob (same class across size steps). jsdom cannot cascade
- * Tamagui CSS, so assertions read the atomic height/radius classes the
- * frame emits.
+ * the recipe fragment and the raw token finally agree. Radius steps with
+ * the size token (MPO-46); the borderRadius knob is an override, not a
+ * flat 9px across heights. jsdom cannot cascade Tamagui CSS, so
+ * assertions read the atomic height/radius classes the frame emits.
  *
  * Desktop/jsdom: the touch floor (control.height >= 44) does not fire here;
  * at $4 it is a no-op anyway (desktop 44 = floor 44, touch lifts to 48).
@@ -48,7 +48,7 @@ describe("Button LC-65 SIZE-RECIPE", () => {
     expect(frame.className).not.toMatch(/_h-t-size-4/);
   });
 
-  it("radius does not change between size steps", () => {
+  it("radius steps with the size token (MPO-46)", () => {
     renderWithProviders(
       <Preset overrides={{ size: "small" }}>
         <Button>Save</Button>
@@ -59,16 +59,6 @@ describe("Button LC-65 SIZE-RECIPE", () => {
     const smallRadius = frameRadiusClasses(small);
     cleanup();
 
-    renderWithProviders(
-      <Preset overrides={{ size: "medium" }}>
-        <Button>Save</Button>
-      </Preset>,
-    );
-    const medium = screen.getByRole("button");
-    expect(medium.className).toMatch(/_h-44px/);
-    const mediumRadius = frameRadiusClasses(medium);
-    cleanup();
-
     renderWithProviders(
       <Preset overrides={{ size: "large" }}>
         <Button>Save</Button>
@@ -79,8 +69,8 @@ describe("Button LC-65 SIZE-RECIPE", () => {
     const largeRadius = frameRadiusClasses(large);
 
     expect(smallRadius.length).toBeGreaterThan(0);
-    expect(smallRadius).toEqual(mediumRadius);
-    expect(largeRadius).toEqual(mediumRadius);
+    expect(largeRadius.length).toBeGreaterThan(0);
+    expect(smallRadius).not.toEqual(largeRadius);
   });
 
   it("recipeFamily controlCompact has smaller padding than control at the same size token", () => {

package/src/Button/Button.stories.tsx

@@ -147,6 +147,20 @@ export const CompoundPattern: Story = {
  * Size recipes (Polaris/Primer/Linear 28/32/40), density ≠ size, selected =
  * fill, nested scale-down, 44px via slop not painted chrome.
  */
+export const SizeLadder: Story = {
+  name: "Size ladder $2–$6 (MPO-46)",
+  render: () => (
+    <YStack gap="$4" padding="$4">
+      <XStack gap="$3" alignItems="flex-end" flexWrap="wrap">
+        <Button size="$2">Restart</Button>
+        <Button size="$3">Restart</Button>
+        <Button size="$4">Restart</Button>
+        <Button size="$6">Restart</Button>
+      </XStack>
+    </YStack>
+  ),
+};
+
 export const Anatomy: Story = {
   name: "Anatomy (size / density / selected / nested)",
   render: () => (

package/src/Button/index.tsx

@@ -14,6 +14,8 @@ import {
   pressTargetHitSlop,
   radiusClassProps,
   recipeFamilies,
+  resolveControlRadius,
+  SIZE_RECIPE_RADIUS_TOKEN_TO_STOP,
   sizeRecipeForToken,
   sizeRecipeFromHeight,
   solidButtonIntents,
@@ -21,6 +23,7 @@ import {
   type HitSlopInsets,
   type RecipeFamilyName,
   type SizeRecipe,
+  type SizeRecipeRadiusStop,
 } from "@multiplatform.one/theme";
 import { getSize } from "@tamagui/get-token";
 import { useFormField } from "../shared/utils";
@@ -51,8 +54,9 @@ import { useControlGrouped } from "../shared/groupContext";
 
 /**
  * Coordinated size recipe (Polaris slim/medium/large, Primer s/m/l, Linear
- * 28/32/40, Spectrum S/M, M3 XS/S). Height, pad, type, and icon step together.
- * Radius is NOT on the recipe — it stays on the borderRadius knob.
+ * 28/32/40, Spectrum S/M, M3 XS/S). Height, pad, type, icon, gap and radius
+ * step together from the size table. The borderRadius knob is an override
+ * that retargets both painted radius and inner gap (`resolveControlRadius`).
  * Density is a different axis (pad/gap only).
  *
  * GENERATED (LC-75 / LC-80): Button consumes `recipeFamilies.control` — the
@@ -443,7 +447,15 @@ export function Button({
     buttonDensityFamily(recipeFamily, densityTight),
   );
   const padX = recipe.paddingHorizontal;
-  const innerGap = recipe.gap;
+  const radiusToken = knobProps.borderRadius.borderRadius;
+  const radiusStop: SizeRecipeRadiusStop | undefined =
+    typeof radiusToken === "string"
+      ? SIZE_RECIPE_RADIUS_TOKEN_TO_STOP[
+          radiusToken as keyof typeof SIZE_RECIPE_RADIUS_TOKEN_TO_STOP
+        ]
+      : undefined;
+  const paintedRadius = resolveControlRadius(recipe, radiusStop ?? "medium");
+  const innerGap = paintedRadius.gap;
   if (skeleton) {
     return (
       <View
@@ -651,6 +663,9 @@ export function Button({
       opacity={1}
       transition={knobProps.transition}
       {...knobProps.borderRadius}
+      {...(radiusStop === "medium" || radiusStop == null
+        ? { borderRadius: paintedRadius.radius }
+        : undefined)}
       borderWidth={resolvedBorderWidth}
       // MPO-19 X3: the borderRadius knob fragment carries `$borderColor` for
       // bordered chrome, but a filled Button's edge is transparent by contract
@@ -660,7 +675,12 @@ export function Button({
       size={resolvedSize}
       {...(chromeless ? undefined : knobProps.elevationChrome)}
       elevation={knobProps.elevation}
-      outlined={outlined}
+      // The frame's `outlined` variant declares only a `true` branch, so a
+      // literal `false` is not consumed and React receives it as a DOM
+      // attribute ("Received `false` for a non-boolean attribute"). Every
+      // knob-driven caller passes `knobProps.outlined`, which is a real
+      // boolean, so this fired on most screens.
+      outlined={outlined || undefined}
       circular={!nested && isCircular ? true : undefined}
       chromeless={selectedFill ? false : chromeless}
       selected={selectedFill || undefined}

package/src/Chip/Chip.spec.tsx

@@ -1,6 +1,7 @@
 import { fireEvent } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
 import { CHIP_DISMISS_MIN_TARGET_FINE, Chip, chipDismissFloorOutset } from "./index";
 
 describe("Chip", () => {
@@ -131,6 +132,20 @@ describe("Chip", () => {
     expect(dismiss.querySelector(".mp-chip-dismiss-ring")).not.toBeNull();
   });
 
+  it("unselected frame stays 1px under borderWidth none and large (chip-frame pin)", () => {
+    for (const stop of ["none", "large"] as const) {
+      const result = renderWithProviders(
+        <Preset overrides={{ borderWidth: stop }}>
+          <Chip>Tag</Chip>
+        </Preset>,
+      );
+      const frame = result.container.querySelector("[data-mp-chip]") as HTMLElement;
+      expect(frame).not.toBeNull();
+      expect(String(frame.className)).toMatch(/bw-1|borderWidth-1/);
+      expect(String(frame.className)).not.toMatch(/bw-2|borderWidth-2/);
+    }
+  });
+
   it("selected chip marks fill, not a selection outline (LC-71)", () => {
     const result = renderWithProviders(
       <Chip selected variant="outline">

package/src/Chip/Chip.stories.tsx

@@ -0,0 +1,251 @@
+import { action } from "@multiplatform.one/storybook";
+import { CheckIcon, LightningIcon, TagIcon } from "@phosphor-icons/react";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { Text, XStack, YStack } from "tamagui";
+import { Chip, type ChipColor, type ChipSize, type ChipVariantProp } from "./index";
+
+const meta: Meta<typeof Chip> = {
+  title: "Forms/Chip",
+  component: Chip,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Forms chip (`data-mp-chip`): solid / subtle / outline (filled / outlined / ghost aliases), semantic color, selected fill, leading icon, dismiss, optional stacked-group corners. Distinct from Components/Chip.",
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Chip>;
+
+export const Default: Story = {
+  name: "Main",
+  render: () => <Chip>Default Chip</Chip>,
+};
+
+export const Variants: Story = {
+  render: () => {
+    const variants: ChipVariantProp[] = ["subtle", "solid", "outline"];
+    return (
+      <YStack gap="$3">
+        {variants.map((variant) => (
+          <XStack key={variant} gap="$2" alignItems="center">
+            <Text width={80} fontSize="$2" color="$color10">
+              {variant}
+            </Text>
+            <Chip variant={variant}>Chip</Chip>
+            <Chip variant={variant} color="blue">
+              Blue
+            </Chip>
+          </XStack>
+        ))}
+      </YStack>
+    );
+  },
+};
+
+export const Colors: Story = {
+  render: () => {
+    const colors: ChipColor[] = ["gray", "red", "green", "blue", "yellow", "orange", "purple"];
+    return (
+      <YStack gap="$4">
+        {(["subtle", "outline", "solid"] as ChipVariantProp[]).map((variant) => (
+          <YStack key={variant} gap="$2">
+            <Text fontWeight="400" fontSize="$2">
+              {variant}
+            </Text>
+            <XStack gap="$2" flexWrap="wrap">
+              {colors.map((color) => (
+                <Chip key={color} variant={variant} color={color}>
+                  {color}
+                </Chip>
+              ))}
+            </XStack>
+          </YStack>
+        ))}
+      </YStack>
+    );
+  },
+};
+
+export const Sizes: Story = {
+  render: () => {
+    const sizes: ChipSize[] = ["$2", "$3", "$4", "$5"];
+    return (
+      <XStack gap="$2" alignItems="center">
+        {sizes.map((size) => (
+          <Chip key={size} size={size}>
+            Size {size}
+          </Chip>
+        ))}
+      </XStack>
+    );
+  },
+};
+
+export const Selected: Story = {
+  render: () => (
+    <XStack gap="$2" flexWrap="wrap" alignItems="center">
+      <Chip variant="outline" selected={false} onPress={() => action("press")("idle")}>
+        Idle
+      </Chip>
+      <Chip variant="outline" selected onPress={() => action("press")("on")}>
+        Selected
+      </Chip>
+      <Chip variant="outline" selected onPress={() => action("press")("blue")} color="blue">
+        Blue selected
+      </Chip>
+    </XStack>
+  ),
+};
+
+export const Filter: Story = {
+  render: function FilterDemo() {
+    const [on, setOn] = useState<Record<string, boolean>>({
+      Fire: true,
+      Water: false,
+      Grass: true,
+      Electric: false,
+    });
+    return (
+      <XStack gap="$2" flexWrap="wrap">
+        {Object.keys(on).map((label) => (
+          <Chip
+            key={label}
+            variant="outline"
+            selected={on[label]}
+            onPress={() => setOn((s) => ({ ...s, [label]: !s[label] }))}
+          >
+            {label}
+          </Chip>
+        ))}
+      </XStack>
+    );
+  },
+};
+
+export const WithIcon: Story = {
+  render: () => (
+    <XStack gap="$2" flexWrap="wrap" alignItems="center">
+      <Chip icon={<TagIcon />}>Tagged</Chip>
+      <Chip icon={<LightningIcon />} color="yellow" variant="solid">
+        Electric
+      </Chip>
+      <Chip icon={<CheckIcon />} color="green" selected onPress={() => {}}>
+        Ready
+      </Chip>
+      <Chip icon={<TagIcon />} onDismiss={() => action("onDismiss")("Tagged")} color="purple">
+        Removable
+      </Chip>
+    </XStack>
+  ),
+};
+
+export const Dismissible: Story = {
+  render: () => (
+    <XStack gap="$2" flexWrap="wrap">
+      <Chip onDismiss={() => action("onDismiss")("React")}>React</Chip>
+      <Chip onDismiss={() => action("onDismiss")("TypeScript")} color="blue">
+        TypeScript
+      </Chip>
+      <Chip onDismiss={() => action("onDismiss")("Tamagui")} color="purple">
+        Tamagui
+      </Chip>
+    </XStack>
+  ),
+};
+
+export const DismissibleSizes: Story = {
+  render: () => (
+    <XStack gap="$2" flexWrap="wrap" alignItems="center">
+      <Chip size="$2" onDismiss={() => action("onDismiss")("$2")}>
+        Size $2
+      </Chip>
+      <Chip size="$3" onDismiss={() => action("onDismiss")("$3")} color="blue">
+        Size $3
+      </Chip>
+      <Chip size="$4" onDismiss={() => action("onDismiss")("$4")} color="green">
+        Size $4
+      </Chip>
+      <Chip size="$5" onDismiss={() => action("onDismiss")("$5")} color="purple">
+        Size $5
+      </Chip>
+    </XStack>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <XStack gap="$2">
+      <Chip disabled>Disabled</Chip>
+      <Chip disabled onDismiss={() => {}}>
+        Disabled Dismissible
+      </Chip>
+      <Chip disabled selected onPress={() => {}}>
+        Disabled selected
+      </Chip>
+    </XStack>
+  ),
+};
+
+/** stacked-group corners (LC-72) — forms Chip only; Components/Chip has no groupPosition. */
+export const Grouped: Story = {
+  render: () => (
+    <XStack>
+      <Chip groupPosition="first" variant="outline">
+        First
+      </Chip>
+      <Chip groupPosition="middle" variant="outline">
+        Middle
+      </Chip>
+      <Chip groupPosition="last" variant="outline">
+        Last
+      </Chip>
+    </XStack>
+  ),
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <YStack gap="$6">
+      <YStack gap="$2">
+        <Text fontWeight="400">Variants</Text>
+        <XStack gap="$2" flexWrap="wrap">
+          <Chip variant="solid">Solid</Chip>
+          <Chip variant="subtle">Subtle</Chip>
+          <Chip variant="outline">Outline</Chip>
+        </XStack>
+      </YStack>
+      <YStack gap="$2">
+        <Text fontWeight="400">Aliases</Text>
+        <XStack gap="$2" flexWrap="wrap">
+          <Chip variant="filled">Filled</Chip>
+          <Chip variant="ghost">Ghost</Chip>
+          <Chip variant="outlined">Outlined</Chip>
+        </XStack>
+      </YStack>
+      <YStack gap="$2">
+        <Text fontWeight="400">Dismissible</Text>
+        <XStack gap="$2">
+          <Chip onDismiss={() => action("dismiss")()}>Dismissible</Chip>
+          <Chip onDismiss={() => action("dismiss")()} color="blue">
+            Blue Dismissible
+          </Chip>
+        </XStack>
+      </YStack>
+      <YStack gap="$2">
+        <Text fontWeight="400">Disabled</Text>
+        <XStack gap="$2">
+          <Chip disabled>Disabled</Chip>
+          <Chip disabled onDismiss={() => {}}>
+            Disabled with dismiss
+          </Chip>
+        </XStack>
+      </YStack>
+    </YStack>
+  ),
+};

package/src/Chip/index.tsx

@@ -485,7 +485,11 @@ export function Chip({
           }
         : undefined)}
       borderColor={borderColor}
-      {...(selected ? { borderWidth: 0 } : undefined)}
+      // Chip-frame law: borderWidth is pinned at 1 (ignore the knob). The
+      // radius fragment also carries borderWidth, so this must land AFTER
+      // `{...knobProps.borderRadius}` or large would paint 2 and grow the
+      // box. Selected fill drops the stroke (LC-71).
+      borderWidth={selected ? 0 : 1}
       // LC-40 DISABLED-VISIBLE: hue tint washes to the muted neutral tiers
       // while the label pins to the lowest AA step (keepLabel); dimWhole
       // dims the chip as its own assembly.