@multiplatform.one/forms 6.6.0 → 7.0.0

package/src/fields/Rating/StarInk.native.tsx

@@ -0,0 +1,77 @@
+import { View } from "tamagui";
+import type { TransitionKeys, TransitionProp } from "tamagui";
+import type { StarInkProps } from "./types";
+
+/**
+ * Motion props for one ink layer.
+ *
+ * Axiom 4: the token comes from the knob, never a hardcoded duration, and it
+ * is scoped to `opacity` so the layer carries no collateral motion.
+ *
+ * Axiom 3 / LC-25: `transition` is undefined in exactly two places —
+ * `animation="none"` (where `prefers-reduced-motion` lands) and mid-scrub —
+ * and both mean NO motion. The prop is then omitted entirely rather than set
+ * to `"none"`: `"none"` is not a registered token on the RN driver, so it
+ * resolves to `{}` and falls back to a DEFAULT SPRING (LC-59), which is
+ * motion wearing the name of silence.
+ */
+export function inkMotionProps(transition: TransitionProp | undefined) {
+  // `TransitionProp` is the whole union (token, per-property map, tuple), but
+  // the per-property SLOT only accepts the token form. The knob always
+  // resolves to a token name — `resolveKnobs` sets `transition` straight from
+  // the `animation` knob — so this narrows rather than widens.
+  return transition ? { transition: { opacity: transition as TransitionKeys } } : {};
+}
+
+/**
+ * Native ink layer (LC-25 star fill).
+ *
+ * The web fix arms the tween with a descendant stylesheet, reaching the glyph
+ * without the icon cooperating. Native has no cascade to borrow, and the
+ * property that actually changes is not reachable any other way either: the
+ * star's ink is the `fill`/`stroke` PROP of a `react-native-svg` shape, while
+ * the RN driver only interpolates the style keys in its own table
+ * (`animatedStyleKey` = `transform`, `opacity`, plus a fixed colour set in
+ * `colorStyleKey`). An SVG paint prop is in neither, so NO `transition` on any
+ * wrapper — however it is spelled — can ever reach it. That is why the native
+ * star jumped while the web star tweened.
+ *
+ * What this component does own is the layer stack. Both glyph states stay
+ * mounted and their `opacity` cross-fades, so the ink change rides a key the
+ * driver actually animates while `starIcon` still only ever sees
+ * `{ size, weight, color }`. Opacity is not a layout property, so it animates
+ * on the native driver rather than being partitioned out (LC-59).
+ *
+ * Settled states are pixel-identical to the un-animated render: the visible
+ * layer sits at opacity 1 and the other at 0, so only the transit itself is
+ * new. Mid-transit the two layers composite to ~0.75 alpha at the crossover —
+ * the usual cross-fade dip, and the price of not being able to interpolate
+ * the paint itself.
+ */
+export function StarInk({
+  StarIcon,
+  size,
+  filled,
+  filledColor,
+  emptyColor,
+  transition,
+}: StarInkProps) {
+  const motion = inkMotionProps(transition);
+  return (
+    <View width={size} height={size}>
+      <View data-rating-ink="empty" opacity={filled ? 0 : 1} {...motion}>
+        <StarIcon size={size} weight="regular" color={emptyColor} />
+      </View>
+      <View
+        data-rating-ink="filled"
+        position="absolute"
+        top={0}
+        left={0}
+        opacity={filled ? 1 : 0}
+        {...motion}
+      >
+        <StarIcon size={size} weight="fill" color={filledColor} />
+      </View>
+    </View>
+  );
+}

package/src/fields/Rating/StarInk.tsx

@@ -0,0 +1,23 @@
+import type { StarInkProps } from "./types";
+
+/**
+ * Web ink layer: the glyph the contract renders, and nothing else.
+ *
+ * The tween is armed from OUTSIDE, by the `mp1-rating-ink-<token>` descendant
+ * stylesheet in `index.tsx` (`svg * { transition: fill …, stroke … }`). A
+ * descendant selector reaches the shape without the icon having to expose a
+ * `style`/`className` slot, so there is nothing to declare here — adding a
+ * wrapper would only put a node between the class and the glyph.
+ *
+ * The native counterpart has no cascade to borrow and owns its own layer
+ * stack instead; see `StarInk.native.tsx`.
+ */
+export function StarInk({ StarIcon, size, filled, filledColor, emptyColor }: StarInkProps) {
+  return (
+    <StarIcon
+      size={size}
+      weight={filled ? "fill" : "regular"}
+      color={filled ? filledColor : emptyColor}
+    />
+  );
+}

package/src/fields/Rating/index.tsx

@@ -1,13 +1,33 @@
 import type { KnobProps } from "@multiplatform.one/theme";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  ensureKeyboardModalityTracking,
+  keyboardFocusRingProps,
+  MIN_PRESS_TARGET,
+  pressTargetHitSlop,
+  pressTargetStyle,
+  useResolvedKnobs,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
+import { getSize } from "@tamagui/get-token";
 import { StarIcon as DefaultStarIcon } from "@phosphor-icons/react";
 import type { ComponentType, KeyboardEvent, ReactNode } from "react";
 import { useMemo, useRef, useState } from "react";
 import type { LabelProps, SizeTokens, TransitionProp } from "tamagui";
-import { getVariable, isWeb, styled, useTheme, View, XStack } from "tamagui";
-import Svg, { Path } from "react-native-svg";
+import {
+  getVariable,
+  getVariableValue,
+  isWeb,
+  SizableText,
+  styled,
+  useTheme,
+  View,
+  XStack,
+} from "tamagui";
+// Named import (not default) — same interop hazard as fields/Signature.
+import { Path, Svg } from "react-native-svg";
 import { Skeleton } from "../../Skeleton";
-import { Field, FieldLayout } from "../../fieldLayout";
+import { StarInk } from "./StarInk";
+import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
 import { formSelectedColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import {
@@ -18,6 +38,21 @@ import {
 } from "../../shared/utils";
 import type { AnyFormApi } from "../../types";
 
+/** Visual glyph follows the size token (Material small/medium/large). Floor 16. */
+function starGlyphSize(sizeToken: SizeTokens | string | undefined): number {
+  const token = (sizeToken ?? "$4") as SizeTokens;
+  const control = Number(getVariableValue(getSize(token)));
+  if (!Number.isFinite(control) || control <= 0) return 24;
+  return Math.max(16, Math.round(control * 0.55));
+}
+
+function filledCount(value: number, maxStars: number): number {
+  if (!(maxStars > 0)) return 0;
+  const n = Math.round(value * maxStars);
+  if (!Number.isFinite(n)) return 0;
+  return Math.max(0, Math.min(maxStars, n));
+}
+
 function starPath(size: number, innerRatio = 0.382): string {
   const cx = size / 2;
   const cy = size / 2;
@@ -89,6 +124,10 @@ function getTransitionStyle(transition: TransitionProp | undefined, live: boolea
 // color }) has no style passthrough to declare it on. A one-shot descendant
 // stylesheet (Spinner/Wheel pattern) arms the tween on whatever glyph the
 // contract renders, so the contract itself stays untouched.
+//
+// Native has no cascade, and the SVG paint prop is not a style key the RN
+// driver animates either, so it solves the same problem by cross-fading a
+// layer stack it owns — see `StarInk.native.tsx`.
 const INK_STYLE_ID = "mp1-rating-ink";
 const inkClassName = (token: string) => `mp1-rating-ink-${token}`;
 function ensureRatingInkStyles() {
@@ -110,21 +149,23 @@ function ensureRatingInkStyles() {
 }
 
 const StarWrapper = styled(View, {
+  alignItems: "center",
+  justifyContent: "center",
+  outlineWidth: 0,
+  focusStyle: { outlineWidth: 0 },
+  focusVisibleStyle: { outlineWidth: 0 },
   variants: {
-    filled: {
-      true: {
-        scale: 1.1,
-        rotate: "72deg",
-      },
-      false: {
-        scale: 1,
-        rotate: "0deg",
-      },
+    // Material iconActive: only the hovered/focused star scales — never a
+    // spin on every filled star.
+    active: {
+      true: { scale: 1.12 },
+      false: { scale: 1 },
     },
   } as const,
 });
 
 function StarRow({
+  id,
   filledStars,
   maxStars,
   disabled,
@@ -136,7 +177,10 @@ function StarRow({
   emptyColor,
   required,
   hasError,
+  starSize,
+  pointy,
 }: {
+  id?: string;
   filledStars: number;
   maxStars: number;
   disabled: boolean;
@@ -148,8 +192,12 @@ function StarRow({
   emptyColor: string;
   required?: boolean;
   hasError?: boolean;
+  starSize: number;
+  pointy: boolean;
 }) {
-  const { disabledState, control } = useResolvedKnobs();
+  const { disabledState } = useResolvedKnobs();
+  const describedBy = useFieldDescribedBy();
+  const fieldA11y = useFieldA11y();
   const [scrubFilled, setScrubFilled] = useState<number | null>(null);
   const scrubbing = scrubFilled != null;
   const displayFilled = scrubFilled ?? filledStars;
@@ -159,7 +207,9 @@ function StarRow({
   // onto), and Axiom 3 says that position is NO motion — not a default one.
   const motionTransition = knobProps.transition as TransitionProp | undefined;
   const live = scrubbing;
+  const allowMotion = Boolean(motionTransition);
   ensureRatingInkStyles();
+  if (isWeb) ensureKeyboardModalityTracking();
   const inkToken =
     isWeb && !live && motionTransition
       ? (motionTransition as string) in cssTimings
@@ -167,53 +217,96 @@ function StarRow({
         : "quick"
       : undefined;
 
-  // DG-A11Y keyboard operability: one roving tab stop (ToggleGroup pattern —
-  // a group of N buttons is one Tab entry, arrows move within). The stop
+  // Material radio group: one tab stop, arrows move AND select. The stop
   // follows the committed value star, or the focused star while inside.
   const starRefs = useRef<Array<HTMLElement | null>>([]);
   const [focusedStar, setFocusedStar] = useState<number | null>(null);
-  const tabStopStar = focusedStar ?? Math.min(Math.max(filledStars, 1), maxStars);
+  const [kbFocusStar, setKbFocusStar] = useState<number | null>(null);
+  const tabStopStar = focusedStar ?? Math.min(Math.max(filledStars, 1), Math.max(maxStars, 1));
+  const starOutset = Math.max(0, (MIN_PRESS_TARGET - starSize) / 2);
+  const itemRadius = pointy ? 0 : 1000;
+  const valueLabel = t("{{star}} of {{max}} stars", { star: displayFilled, max: maxStars });
   const focusStar = (starNumber: number) => {
     starRefs.current[starNumber - 1]?.focus?.();
   };
+  const commitStar = (starNumber: number) => {
+    if (!readOnly) onStarPress(starNumber);
+  };
   const handleStarKeyDown = (event: KeyboardEvent, starNumber: number) => {
     const key = event.key;
     if (key === "Enter" || key === " " || event.code === "Space") {
       event.preventDefault();
       event.stopPropagation();
-      if (!readOnly) onStarPress(starNumber);
+      commitStar(starNumber);
     } else if (key === "ArrowRight" || key === "ArrowUp") {
       event.preventDefault();
-      focusStar(Math.min(starNumber + 1, maxStars));
+      const next = Math.min(starNumber + 1, maxStars);
+      focusStar(next);
+      commitStar(next);
     } else if (key === "ArrowLeft" || key === "ArrowDown") {
       event.preventDefault();
-      focusStar(Math.max(starNumber - 1, 1));
+      const next = Math.max(starNumber - 1, 1);
+      focusStar(next);
+      commitStar(next);
     } else if (key === "Home") {
       event.preventDefault();
       focusStar(1);
+      commitStar(1);
     } else if (key === "End") {
       event.preventDefault();
       focusStar(maxStars);
+      commitStar(maxStars);
     }
   };
 
   const starFromPointer = (clientX: number, row: HTMLElement | null) => {
     if (!row) return null;
-    const rect = row.getBoundingClientRect();
-    if (rect.width <= 0) return null;
-    const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+    const stars = row.querySelectorAll("[data-rating-star]");
+    if (stars.length === 0) return null;
+    const first = stars[0]?.getBoundingClientRect();
+    const last = stars[stars.length - 1]?.getBoundingClientRect();
+    if (!first || !last) return null;
+    const width = last.right - first.left;
+    if (width <= 0) return null;
+    const ratio = Math.min(1, Math.max(0, (clientX - first.left) / width));
     return Math.max(1, Math.ceil(ratio * maxStars));
   };
 
+  const glyph = (isFilled: boolean) => (
+    <StarInk
+      StarIcon={StarIcon}
+      size={starSize}
+      filled={isFilled}
+      filledColor={filledColor}
+      emptyColor={emptyColor}
+      // Same gate the web ink class uses: no token while scrubbing, so
+      // the fill tracks the pointer 1:1 instead of lagging (LC-25).
+      transition={live ? undefined : motionTransition}
+    />
+  );
+
   return (
     <XStack
+      id={id}
       {...knobProps.gap}
       alignItems="center"
-      aria-required={required || undefined}
-      aria-invalid={hasError || undefined}
+      role={readOnly ? "img" : "radiogroup"}
+      aria-label={readOnly ? valueLabel : undefined}
+      aria-required={!readOnly && required ? true : undefined}
+      aria-invalid={!readOnly && hasError ? true : undefined}
+      aria-disabled={disabled || undefined}
       aria-readonly={readOnly || undefined}
+      aria-describedby={describedBy}
+      {...(!isWeb
+        ? {
+            accessible: true,
+            accessibilityLabel: fieldA11y?.label ?? valueLabel,
+            accessibilityHint: fieldA11y?.description,
+          }
+        : {})}
       data-rating-row
       data-rating-live={live ? "true" : undefined}
+      data-rating-glyph={starSize}
       {...(isWeb && !disabled && !readOnly
         ? {
             onPointerMove: ((e: any) => {
@@ -228,38 +321,66 @@ function StarRow({
           }
         : {})}
     >
-      {Array.from({ length: maxStars }, (_, i) => {
+      {Array.from({ length: Math.max(0, maxStars) }, (_, i) => {
         const starNumber = i + 1;
         const isFilled = starNumber <= displayFilled;
+        const isChecked = filledStars > 0 && starNumber === filledStars;
+        const isActive =
+          allowMotion && (scrubbing ? starNumber === displayFilled : starNumber === focusedStar);
+        const showRing = kbFocusStar === starNumber;
+
+        if (readOnly) {
+          return (
+            <View
+              key={starNumber}
+              width={starSize}
+              height={starSize}
+              data-rating-star={isFilled ? "filled" : "empty"}
+              data-rating-index={starNumber}
+            >
+              {glyph(isFilled)}
+            </View>
+          );
+        }
+
         return (
           <StarWrapper
             key={starNumber}
             ref={(node: any) => {
               starRefs.current[i] = node;
             }}
-            onPress={() => !readOnly && onStarPress(starNumber)}
-            cursor={readOnly ? "default" : "pointer"}
+            onPress={() => onStarPress(starNumber)}
+            cursor={disabled ? "default" : "pointer"}
             // LC-40 DISABLED-VISIBLE: stars are text-free chrome — dim via the
             // recipe (read-only stays full-contrast, only pointer changes).
             {...(disabled ? disabledState.chromeKnobProps : undefined)}
-            filled={isFilled}
-            role="button"
+            active={isActive}
+            role="radio"
             aria-label={t("{{star}} of {{max}} stars", { star: starNumber, max: maxStars })}
             aria-disabled={disabled || undefined}
-            aria-pressed={isFilled}
-            // Keyboard operability (DG-A11Y-01): roving tabindex + Enter/Space
-            // activation + arrow-key movement; disabled drops out of the tab
-            // order (unexplained-disable house pattern, same as native).
+            aria-checked={isChecked}
+            borderRadius={itemRadius}
+            {...pressTargetStyle()}
+            marginHorizontal={-starOutset}
+            marginVertical={-starOutset}
+            hitSlop={pressTargetHitSlop(starSize)}
+            // Keyboard: roving tabindex + Enter/Space + arrows select (native
+            // radio). Disabled drops out of the tab order.
             {...(isWeb && !disabled
               ? {
                   tabIndex: starNumber === tabStopStar ? 0 : -1,
-                  onFocus: () => setFocusedStar(starNumber),
-                  onBlur: () => setFocusedStar(null),
+                  onFocus: () => {
+                    setFocusedStar(starNumber);
+                    if (wasKeyboardFocus()) setKbFocusStar(starNumber);
+                  },
+                  onBlur: () => {
+                    setFocusedStar((prev) => (prev === starNumber ? null : prev));
+                    setKbFocusStar((prev) => (prev === starNumber ? null : prev));
+                  },
                   onKeyDown: ((e: KeyboardEvent) =>
                     handleStarKeyDown(e, starNumber)) as unknown as () => void,
                 }
               : {})}
-            focusVisibleStyle={control.focusVisibleKnobProps}
             // RN only exposes plain Views to the a11y tree when `accessible` is set
             {...(!isWeb ? { accessible: true } : {})}
             data-rating-star={isFilled ? "filled" : "empty"}
@@ -268,14 +389,28 @@ function StarRow({
             {...(inkToken ? { className: inkClassName(inkToken) } : undefined)}
             style={getTransitionStyle(live ? undefined : motionTransition, live)}
           >
-            <StarIcon
-              size={24}
-              weight={isFilled ? "fill" : "regular"}
-              color={isFilled ? filledColor : emptyColor}
-            />
+            <View
+              borderRadius={itemRadius}
+              {...(showRing
+                ? { ...keyboardFocusRingProps, outlineOffset: 2, "data-rating-ring": "true" }
+                : {})}
+            >
+              {glyph(isFilled)}
+            </View>
           </StarWrapper>
         );
       })}
+      {maxStars > 0 ? (
+        <SizableText
+          {...knobProps.label}
+          {...knobProps.body}
+          aria-hidden
+          userSelect="none"
+          data-rating-value
+        >
+          {valueLabel}
+        </SizableText>
+      ) : null}
     </XStack>
   );
 }
@@ -309,7 +444,7 @@ export interface RatingProps {
   pointy?: boolean;
   /** When true, renders a skeleton placeholder instead of the rating */
   skeleton?: boolean;
-  /** When true, uses compact sizing */
+  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
   compact?: boolean;
 }
 
@@ -342,7 +477,9 @@ export function Rating({
   // instead of an invalid element crash on rounded themes.
   const ResolvedStarIcon = resolvedPointy ? PointyStar : (starIcon ?? DefaultStarIcon);
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
-  const filledStars = useMemo(() => Math.round(value * maxStars), [value, maxStars]);
+  const sizeToken = size ?? knobProps.sizeToken;
+  const starSize = starGlyphSize(sizeToken);
+  const filledStars = useMemo(() => filledCount(value, maxStars), [value, maxStars]);
 
   // Resolve color tokens to actual CSS values for Phosphor icons.
   // LC-05: the FILLED star is the selection mark, so it resolves the shared
@@ -372,7 +509,13 @@ export function Rating({
       <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
         <XStack {...knobProps.gap} alignItems="center">
           {Array.from({ length: maxStars }, (_, i) => (
-            <Skeleton key={i} variant="rounded" width={24} height={24} />
+            <Skeleton
+              key={i}
+              variant={resolvedPointy ? "rounded" : "circular"}
+              width={starSize}
+              height={starSize}
+              borderRadius={resolvedPointy ? 0 : undefined}
+            />
           ))}
         </XStack>
       </FieldLayout>
@@ -396,6 +539,7 @@ export function Rating({
         disabled={disabled}
       >
         <StarRow
+          id={id}
           knobProps={knobProps}
           filledStars={filledStars}
           maxStars={maxStars}
@@ -407,6 +551,8 @@ export function Rating({
           emptyColor={emptyColor}
           required={required}
           hasError={!!error}
+          starSize={starSize}
+          pointy={!!resolvedPointy}
         />
       </FieldLayout>
     );
@@ -422,7 +568,7 @@ export function Rating({
       {(field) => {
         const resolvedError = getFieldError(field, error);
         const fieldValue = (field.state.value as number) ?? 0;
-        const fieldFilledStars = Math.round(fieldValue * maxStars);
+        const fieldFilledStars = filledCount(fieldValue, maxStars);
         return (
           <FieldLayout
             id={id}
@@ -438,10 +584,12 @@ export function Rating({
             disabled={disabled}
           >
             <StarRow
+              id={id}
               knobProps={knobProps}
               filledStars={fieldFilledStars}
               maxStars={maxStars}
               disabled={!!disabled}
+              readOnly={readOnly}
               onStarPress={(i) =>
                 handleStarPress(i, fieldFilledStars, (v) => {
                   field.handleChange(v as any);
@@ -453,6 +601,8 @@ export function Rating({
               emptyColor={emptyColor}
               required={required}
               hasError={!!resolvedError}
+              starSize={starSize}
+              pointy={!!resolvedPointy}
             />
           </FieldLayout>
         );

package/src/fields/Rating/types.ts

@@ -0,0 +1,28 @@
+import type { ComponentType } from "react";
+import type { TransitionProp } from "tamagui";
+
+/**
+ * The swappable star glyph contract (`RatingProps.starIcon`). Kept to exactly
+ * these three props: anything the ink layer needs must be solved WITHOUT
+ * asking the icon to cooperate, or every custom icon silently breaks.
+ */
+export type StarIconType = ComponentType<{
+  size: number;
+  weight: "fill" | "regular";
+  color: string;
+}>;
+
+export interface StarInkProps {
+  StarIcon: StarIconType;
+  size: number;
+  filled: boolean;
+  filledColor: string;
+  emptyColor: string;
+  /**
+   * Knob motion token (Axiom 4). `undefined` means NO motion, and it is
+   * `undefined` in exactly two places: `animation="none"` — which is where
+   * `prefers-reduced-motion` lands — and for the duration of a pointer scrub,
+   * which must track the finger 1:1 rather than lag by a token (LC-25).
+   */
+  transition?: TransitionProp;
+}

package/src/fields/SearchInput/SearchInput.spec.tsx

@@ -125,6 +125,36 @@ describe("SearchInput", () => {
     expect(onSearch).toHaveBeenCalledWith("");
   });
 
+  it("LC-71: one ring box; magnifier is not a tab stop; clear is the second focusable", () => {
+    const result = renderWithProviders(<SearchInput defaultValue="abc" />);
+    const input = result.container.querySelector("input");
+    if (!input) throw new Error("input not found");
+    expect(result.container.querySelector(".mp-composite-ring")).toBeTruthy();
+    expect(input.className).toMatch(/mp-input-area/);
+    expect(input.className).toMatch(/mp-search-input/);
+    expect(input.getAttribute("type")).toBe("search");
+    const leading = result.container.querySelector(".mp-search-leading");
+    expect(leading).toBeTruthy();
+    expect(leading?.getAttribute("tabindex")).toBe("-1");
+    expect(leading?.getAttribute("aria-hidden")).toBe("true");
+    const clear = result.container.querySelector("[aria-label='Clear search']");
+    if (!clear) throw new Error("clear button not rendered");
+    expect(clear.getAttribute("tabindex")).toBe("0");
+    const extraStops = [...result.container.querySelectorAll("[tabindex='0']")].filter(
+      (el) => el !== input && el !== clear,
+    );
+    expect(extraStops).toHaveLength(0);
+  });
+
+  it("restores focus to the searchbox after clear", () => {
+    const result = renderWithProviders(<SearchInput defaultValue="abc" />);
+    const input = result.container.querySelector("input");
+    const clear = result.container.querySelector("[aria-label='Clear search']");
+    if (!input || !clear) throw new Error("input or clear not found");
+    fireEvent.click(clear);
+    expect(document.activeElement).toBe(input);
+  });
+
   it("Escape clears, Enter flushes the pending search", () => {
     const onSearch = vi.fn();
     const result = renderWithProviders(<SearchInput onSearch={onSearch} debounceMs={300} />);

package/src/fields/SearchInput/SearchInput.stories.tsx

@@ -83,11 +83,20 @@ export const Controlled: Story = {
   },
 };
 
+export const Filled: Story = {
+  args: { defaultValue: "pikachu" },
+  render: (args) => (
+    <YStack maxWidth={400}>
+      <SearchInput {...args} />
+    </YStack>
+  ),
+};
+
 export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
       <SearchInput size="$2" placeholder="Small" />
-      <SearchInput size="$3" placeholder="Medium (default)" />
+      <SearchInput size="$3" placeholder="Medium (default)" defaultValue="bulbasaur" />
       <SearchInput size="$4" placeholder="Large" />
     </YStack>
   ),