@multiplatform.one/forms 7.34.4 → 7.36.0

package/src/fields/RadioGroup/index.tsx

@@ -4,6 +4,7 @@ import {
   ensureFocusVisibleRing,
   ensureKeyboardModalityTracking,
   radiusClassProps,
+  labelFontSizeFor,
   useReadableTextOn,
   wasKeyboardFocus,
   type ControlStateProps,
@@ -13,7 +14,7 @@ import {
   transitionProps,
 } from "@multiplatform.one/theme";
 import type { AnyFormApi } from "../../types";
-import type { FontSizeTokens, LabelProps, SizeTokens, TamaguiElement } from "tamagui";
+import type { LabelProps, SizeTokens, TamaguiElement } from "tamagui";
 import {
   Label,
   type RadioGroupProps as TamaguiRadioGroupProps,
@@ -180,8 +181,6 @@ export interface RadioGroupProps {
   pointy?: boolean;
   /** When true, renders a skeleton placeholder instead of the radio group */
   skeleton?: boolean;
-  /** When true, uses compact sizing */
-  compact?: boolean;
   /**
    * When true, renders each option as a selection card (LC-22): radio in a
    * leading slot, bold label to its right, muted `option.description` under
@@ -284,12 +283,12 @@ function RadioOptionItem({
       borderColor={selected ? formSelectedColors.mark : formControlColors.boundary}
       {...(kbFocus ? ensureFocusVisibleRing() : { outlineWidth: 0 as const })}
       data-radio-kb-focus={kbFocus ? "true" : "false"}
-      {...transitionProps(knobProps.transition)}
+      {...transitionProps(knobProps.motion.control)}
     >
       <RadioIndicatorFrame
         borderRadius={radioDiscRadius}
         backgroundColor={onMark ?? "$color1"}
-        {...transitionProps(knobProps.transition)}
+        {...transitionProps(knobProps.motion.control)}
       />
     </RadioGlyph>
   );
@@ -304,7 +303,7 @@ function RadioOptionItem({
       // none is checked) stays in the page tab order; arrows move + select.
       {...(isWeb && isTabStop !== undefined ? { tabIndex: isTabStop ? 0 : -1 } : undefined)}
       borderRadius={radioDiscRadius}
-      transition={knobProps.transition}
+      {...transitionProps(knobProps.motion.control, ["borderWidth"])}
       disabled={groupDisabled || option.disabled}
       // LC-40 DISABLED-VISIBLE: ring is text-free chrome — dim it while the
       // sibling label stays readable (read-only never dims).
@@ -383,7 +382,6 @@ export function RadioGroup({
   radioGroupProps,
   children,
   skeleton,
-  compact,
   card,
   accessibilityLabel,
   accessibilityHint,
@@ -410,7 +408,6 @@ export function RadioGroup({
   const { resolvedForm, knobProps, control, text, elevation, disabledState, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
@@ -523,7 +520,7 @@ export function RadioGroup({
       checkedEnabled >= 0 ? checkedEnabled : options.findIndex((o) => !(disabled || o.disabled));
 
     if (card) {
-      const layout = getCheckboxCardLayout(knobProps.space);
+      const layout = getCheckboxCardLayout(knobProps.sizeToken);
       const descriptionSize = getCardDescriptionSize(size || knobProps.sizeToken);
       return (
         <Container gap="$2">
@@ -562,12 +559,9 @@ export function RadioGroup({
                   index === tabStopIndex,
                 )}
                 <CheckboxCardContent>
-                  {/* fontWeight after size: the size variant's font weight
-                      would otherwise override the styled bold default */}
                   <CheckboxCardLabel
                     id={labelId}
-                    size={(size || knobProps.sizeToken) as FontSizeTokens}
-                    fontWeight="600"
+                    size={labelFontSizeFor(String(size || knobProps.sizeToken))}
                   >
                     {option.label}
                   </CheckboxCardLabel>
@@ -608,7 +602,7 @@ export function RadioGroup({
                       importantForAccessibility: "no-hide-descendants" as const,
                     }
                   : undefined)}
-                size={(size || knobProps.sizeToken) as FontSizeTokens}
+                size={labelFontSizeFor(String(size || knobProps.sizeToken))}
                 {...knobProps.body}
                 color={knobProps.textAccentColor}
                 hoverStyle={{ color: knobProps.textAccentColor, ...text.hoverKnobProps }}

package/src/fields/Rating/Rating.spec.tsx

@@ -139,10 +139,7 @@ describe("Rating", () => {
       expect(empty).toBeTruthy();
       expect(filled!.getAttribute("data-color")).toContain("accentBackground");
       expect(empty!.getAttribute("data-color")).not.toContain("accentBackground");
-      // DF-06 / WCAG 1.4.11: empty stars are graphical objects — $color7 is
-      // below the 3:1 boundary floor; the empty ring uses the same boundary
-      // token as Radio.
-      expect(empty!.getAttribute("data-color")).toContain("color10");
+      expect(empty!.getAttribute("data-color")).toContain("boundaryColor");
     });
 
     // Material Rating is a radio group: one checked value, stars 1..N fill as

package/src/fields/Rating/index.tsx

@@ -1,3 +1,5 @@
+import { transitionProps } from "@multiplatform.one/theme";
+import { cssAnimationConfig } from "@multiplatform.one/theme";
 import type { KnobProps } from "@multiplatform.one/theme";
 import {
   ensureKeyboardModalityTracking,
@@ -95,22 +97,11 @@ function PointyStar({
   );
 }
 
-// CSS timing strings for web transitions (mirrors theme animation config)
-const cssTimings: 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",
-};
-
 /** LC-25: discrete fill jumps tween; omit when animation knob is none or scrubbing. */
 function getTransitionStyle(transition: TransitionProp | undefined, live: boolean) {
   if (!isWeb || live || !transition) return undefined;
-  const timing = cssTimings[transition as string] ?? cssTimings.quick;
+  const timing =
+    cssAnimationConfig[transition as keyof typeof cssAnimationConfig] ?? cssAnimationConfig.quick;
   return {
     transition: [`transform ${timing}`, `opacity ${timing}`, `color ${timing}`].join(", "),
   };
@@ -137,7 +128,7 @@ function ensureRatingInkStyles() {
   // the root's `fill` and the shape INHERITS it, so arming both would leave
   // the shape chasing an already-animating value and stretch the tween well
   // past the token.
-  style.textContent = Object.entries(cssTimings)
+  style.textContent = Object.entries(cssAnimationConfig)
     .map(
       ([token, timing]) =>
         `.${inkClassName(token)} svg * { transition: fill ${timing}, stroke ${timing}; }`,
@@ -205,14 +196,14 @@ function StarRow({
   // scrub, omit transition so fill tracks the pointer 1:1. `transition` is
   // undefined exactly at animation="none" (which prefers-reduced-motion maps
   // onto), and Axiom 3 says that position is NO motion — not a default one.
-  const motionTransition = knobProps.transition as TransitionProp | undefined;
+  const motionTransition = knobProps.motion.control.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
+      ? (motionTransition as string) in cssAnimationConfig
         ? (motionTransition as string)
         : "quick"
       : undefined;
@@ -393,7 +384,7 @@ function StarRow({
             {...(!isWeb ? { accessible: true } : {})}
             data-rating-star={isFilled ? "filled" : "empty"}
             data-rating-index={starNumber}
-            {...(!isWeb && !live ? { transition: motionTransition } : {})}
+            {...(!isWeb && !live ? transitionProps(knobProps.motion.control) : {})}
             {...(inkToken ? { className: inkClassName(inkToken) } : undefined)}
             style={getTransitionStyle(live ? undefined : motionTransition, live)}
           >
@@ -453,8 +444,6 @@ export interface RatingProps {
   pointy?: boolean;
   /** When true, renders a skeleton placeholder instead of the rating */
   skeleton?: boolean;
-  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-  compact?: boolean;
 }
 
 export function Rating({
@@ -478,9 +467,8 @@ export function Rating({
   starIcon,
   pointy,
   skeleton,
-  compact,
 }: RatingProps) {
-  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp });
   const inTableCell = useIsInTableCell();
   const resolvedPointy = pointy ?? knobProps.pointy;
   // Sane bare default (UX-009): an omitted starIcon renders the package star
@@ -502,8 +490,7 @@ export function Rating({
   const filledColor = getVariable(
     (theme as any)[markToken]?.get("web") ?? theme.color10?.get("web") ?? theme.color?.get("web"),
   );
-  // DF-06 / WCAG 1.4.11: empty stars are graphical objects. $color7 is below
-  // the 3:1 boundary floor; Radio's empty ring uses the same boundary token.
+  // DF-06 / WCAG 1.4.11: empty stars need the build-held 3:1 boundary ink.
   const emptyColor = getVariable(
     (theme as any)[emptyToken]?.get("web") ?? theme.color10?.get("web") ?? theme.color?.get("web"),
   );

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

@@ -0,0 +1,111 @@
+import { createRef, forwardRef, useImperativeHandle, type ComponentProps } from "react";
+import { act, fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { Form } from "../../Form";
+import { SearchInput, type SearchInputHandle } from "./index";
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+const host = vi.hoisted(() => ({
+  focus: vi.fn(),
+  blur: vi.fn(),
+  autoFocus: undefined as boolean | undefined,
+}));
+
+vi.mock("../../InputParts", async (importOriginal) => {
+  const original = await importOriginal<typeof import("../../InputParts")>();
+  const NativeArea = forwardRef<SearchInputHandle, { autoFocus?: boolean }>(
+    function NativeArea(props, ref) {
+      useImperativeHandle(ref, () => ({ focus: host.focus, blur: host.blur }), []);
+      host.autoFocus = props.autoFocus;
+      return null;
+    },
+  );
+  const Input = Object.assign(
+    (props: ComponentProps<typeof original.Input>) => <original.Input {...props} />,
+    original.Input,
+    { Area: NativeArea },
+  );
+  return { ...original, Input };
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  host.autoFocus = undefined;
+});
+
+describe("SearchInput native focus API (FZ-7606)", () => {
+  it("delegates focus and blur to the native input handle", () => {
+    const ref = createRef<SearchInputHandle>();
+    renderWithProviders(<SearchInput ref={ref} />);
+    expect(host.focus).not.toHaveBeenCalled();
+    act(() => ref.current!.focus());
+    expect(host.focus).toHaveBeenCalledTimes(1);
+    act(() => ref.current!.blur());
+    expect(host.blur).toHaveBeenCalledTimes(1);
+  });
+
+  it("delegates in the form-integrated branch", () => {
+    const ref = createRef<SearchInputHandle>();
+    renderWithProviders(
+      <Form formOptions={{ defaultValues: { q: "" } }} onSubmit={() => {}} submitText="Go">
+        <SearchInput ref={ref} name="q" label="Find" />
+      </Form>,
+    );
+    act(() => ref.current!.focus());
+    expect(host.focus).toHaveBeenCalledTimes(1);
+    act(() => ref.current!.blur());
+    expect(host.blur).toHaveBeenCalledTimes(1);
+  });
+
+  it("passes autoFocus to the native input and respects inputProps overrides", () => {
+    const { rerender } = renderWithProviders(<SearchInput autoFocus />);
+    expect(host.autoFocus).toBe(true);
+    rerender(<SearchInput autoFocus inputProps={{ autoFocus: false }} />);
+    expect(host.autoFocus).toBe(false);
+    rerender(<SearchInput inputProps={{ autoFocus: true }} />);
+    expect(host.autoFocus).toBe(true);
+  });
+
+  it("does not focus while disabled and uses current disabled state", () => {
+    const ref = createRef<SearchInputHandle>();
+    const { rerender } = renderWithProviders(<SearchInput ref={ref} disabled />);
+    act(() => ref.current!.focus());
+    expect(host.focus).not.toHaveBeenCalled();
+    rerender(<SearchInput ref={ref} />);
+    act(() => ref.current!.focus());
+    expect(host.focus).toHaveBeenCalledTimes(1);
+    rerender(<SearchInput ref={ref} disabled />);
+    act(() => ref.current!.focus());
+    expect(host.focus).toHaveBeenCalledTimes(1);
+    act(() => ref.current!.blur());
+    expect(host.blur).toHaveBeenCalledTimes(1);
+  });
+
+  it("tolerates a missing input while skeleton and focuses when ready", () => {
+    const ref = createRef<SearchInputHandle>();
+    const { rerender, unmount } = renderWithProviders(<SearchInput ref={ref} skeleton />);
+    act(() => {
+      ref.current!.focus();
+      ref.current!.blur();
+    });
+    expect(host.focus).not.toHaveBeenCalled();
+    expect(host.blur).not.toHaveBeenCalled();
+    rerender(<SearchInput ref={ref} />);
+    act(() => ref.current!.focus());
+    expect(host.focus).toHaveBeenCalledTimes(1);
+    unmount();
+    expect(ref.current).toBeNull();
+  });
+
+  it("still returns focus to the native input after clearing", () => {
+    const ref = createRef<SearchInputHandle>();
+    const { getByRole } = renderWithProviders(<SearchInput ref={ref} defaultValue="query" />);
+    fireEvent.click(getByRole("button", { name: "Clear search" }));
+    expect(host.focus).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -1,13 +1,14 @@
 import { readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { fireEvent } from "@testing-library/react";
+import { createRef } from "react";
+import { act, fireEvent } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { SIZE_RECIPE_TOKENS, sizeRecipeForToken } from "@multiplatform.one/theme";
+import { SIZE_RECIPE_TOKENS, Surface, sizeRecipeForToken } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { useTheme } from "tamagui";
 import { Form } from "../../Form";
-import { SearchInput } from "./index";
+import { SearchInput, type SearchInputHandle } from "./index";
 
 const SEARCH_INPUT_SRC = readFileSync(
   join(dirname(fileURLToPath(import.meta.url)), "index.tsx"),
@@ -235,14 +236,14 @@ describe("SearchInput", () => {
     expect(chrome).toMatch(/mp-search-input/);
   });
 
-  it("default painted box is 44 tall; end-cap is the size-recipe square", () => {
+  it("default painted box is 40 tall; end-cap is the size-recipe square", () => {
     const result = renderWithProviders(<SearchInput defaultValue="abc" />);
     const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
     const clear = result.container.querySelector("[aria-label='Clear search']") as HTMLElement;
     if (!box || !clear) throw new Error("box or clear not found");
-    expect(box.getAttribute("data-visual-height")).toBe("44");
-    expect(clear.getAttribute("data-end-cap")).toBe("44");
-    expect(box.getAttribute("data-press-floor")).toBe("box");
+    expect(box.getAttribute("data-visual-height")).toBe("40");
+    expect(clear.getAttribute("data-end-cap")).toBe("40");
+    expect(box.getAttribute("data-press-floor")).toBe("slop");
   });
 
   it("end-cap square is generated from the size recipe at every token", () => {
@@ -260,22 +261,23 @@ describe("SearchInput", () => {
     }
   });
 
-  it("compact steps density and leaves size on the recipe; size ejects height", () => {
-    const compact = renderWithProviders(<SearchInput compact />);
-    const compactBox = compact.container.querySelector("[data-ring-target='box']") as HTMLElement;
-    expect(compactBox.getAttribute("data-density")).toBe("compact");
-    // LC-76: compact is density only — default size stays the medium recipe.
-    expect(compactBox.getAttribute("data-size")).toBe("$4");
+  it("size is Tamagui's own token, clamped by a Surface ceiling", () => {
+    const plain = renderWithProviders(<SearchInput />);
+    const plainBox = plain.container.querySelector("[data-ring-target='box']") as HTMLElement;
+    expect(plainBox.getAttribute("data-size-token")).toBe("$true");
+    expect(plainBox.hasAttribute("data-density")).toBe(false);
 
     const sized = renderWithProviders(<SearchInput size="$5" />);
     const sizedBox = sized.container.querySelector("[data-ring-target='box']") as HTMLElement;
-    expect(sizedBox.getAttribute("data-density")).toBe("comfortable");
-    expect(sizedBox.getAttribute("data-size")).toBe("$5");
+    expect(sizedBox.getAttribute("data-size-token")).toBe("$5");
 
-    const both = renderWithProviders(<SearchInput compact size="$5" />);
-    const bothBox = both.container.querySelector("[data-ring-target='box']") as HTMLElement;
-    expect(bothBox.getAttribute("data-density")).toBe("compact");
-    expect(bothBox.getAttribute("data-size")).toBe("$5");
+    const clamped = renderWithProviders(
+      <Surface size="$3">
+        <SearchInput size="$5" />
+      </Surface>,
+    );
+    const clampedBox = clamped.container.querySelector("[data-ring-target='box']") as HTMLElement;
+    expect(clampedBox.getAttribute("data-size-token")).toBe("$3");
   });
 
   it("renders skeleton without a searchbox (LC-20)", () => {
@@ -306,3 +308,88 @@ describe("SearchInput", () => {
     expect(onChange).toHaveBeenCalledWith("abc");
   });
 });
+
+describe("SearchInput focus API (FZ-7606)", () => {
+  it("focuses and blurs the searchbox through its public ref", () => {
+    const ref = createRef<SearchInputHandle>();
+    const onFocus = vi.fn();
+    const onBlur = vi.fn();
+    const { getByRole, container } = renderWithProviders(
+      <SearchInput ref={ref} inputProps={{ onFocus, onBlur }} />,
+    );
+    const input = getByRole("searchbox");
+    expect(document.activeElement).not.toBe(input);
+    act(() => ref.current!.focus());
+    expect(document.activeElement).toBe(input);
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    expect(
+      container.querySelector("[data-ring-target='box']")?.contains(document.activeElement),
+    ).toBe(true);
+    act(() => ref.current!.blur());
+    expect(document.activeElement).not.toBe(input);
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+
+  it("focuses the form-integrated field", () => {
+    const ref = createRef<SearchInputHandle>();
+    const { getByRole } = renderWithProviders(
+      <Form formOptions={{ defaultValues: { q: "" } }} onSubmit={() => {}} submitText="Go">
+        <SearchInput ref={ref} name="q" label="Find" />
+      </Form>,
+    );
+    act(() => ref.current!.focus());
+    expect(document.activeElement).toBe(getByRole("searchbox"));
+    act(() => ref.current!.blur());
+    expect(document.activeElement).not.toBe(getByRole("searchbox"));
+  });
+
+  it("autoFocus focuses the field on mount", () => {
+    const { getByRole } = renderWithProviders(<SearchInput autoFocus />);
+    expect(document.activeElement).toBe(getByRole("searchbox"));
+  });
+
+  it("preserves inputProps autoFocus and its consumer override", () => {
+    const { getByRole, unmount } = renderWithProviders(
+      <SearchInput inputProps={{ autoFocus: true }} />,
+    );
+    expect(document.activeElement).toBe(getByRole("searchbox"));
+    unmount();
+    const overridden = renderWithProviders(
+      <SearchInput autoFocus inputProps={{ autoFocus: false }} />,
+    );
+    expect(document.activeElement).not.toBe(overridden.getByRole("searchbox"));
+  });
+
+  it("does not focus a disabled field", () => {
+    const ref = createRef<SearchInputHandle>();
+    const { getByRole } = renderWithProviders(<SearchInput ref={ref} disabled autoFocus />);
+    act(() => ref.current!.focus());
+    expect(document.activeElement).not.toBe(getByRole("searchbox"));
+  });
+
+  it("allows focusing a read-only field", () => {
+    const ref = createRef<SearchInputHandle>();
+    const { getByRole } = renderWithProviders(<SearchInput ref={ref} readOnly />);
+    act(() => ref.current!.focus());
+    expect(document.activeElement).toBe(getByRole("searchbox"));
+  });
+
+  it("is safe while a skeleton and targets the input when ready", () => {
+    const ref = createRef<SearchInputHandle>();
+    const { rerender, getByRole, unmount } = renderWithProviders(
+      <SearchInput ref={ref} skeleton autoFocus />,
+    );
+    expect(() => {
+      ref.current!.focus();
+      ref.current!.blur();
+    }).not.toThrow();
+    rerender(<SearchInput ref={ref} autoFocus />);
+    const input = getByRole("searchbox");
+    expect(document.activeElement).toBe(input);
+    act(() => ref.current!.blur());
+    act(() => ref.current!.focus());
+    expect(document.activeElement).toBe(input);
+    unmount();
+    expect(ref.current).toBeNull();
+  });
+});

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

@@ -1,8 +1,9 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Paragraph, YStack } from "tamagui";
-import { SearchInput } from "./index";
+import { Button } from "../../Button";
+import { SearchInput, type SearchInputHandle } from "./index";
 
 const meta: Meta<typeof SearchInput> = {
   title: "Forms/SearchInput",
@@ -13,7 +14,7 @@ const meta: Meta<typeof SearchInput> = {
     debounceMs: { control: "number" },
     clearable: { control: "boolean" },
     disabled: { control: "boolean" },
-    compact: { control: "boolean" },
+    autoFocus: { control: "boolean" },
     chromeless: { control: "boolean" },
     size: { control: "select", options: ["$2", "$3", "$4", "$5"] },
     defaultValue: { control: "text" },
@@ -96,14 +97,14 @@ export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
       <SearchInput size="$2" placeholder="Small" />
-      <SearchInput size="$3" placeholder="Medium (default)" defaultValue="bulbasaur" />
+      <SearchInput size="$3" placeholder="Medium ($3)" defaultValue="bulbasaur" />
       <SearchInput size="$4" placeholder="Large" />
     </YStack>
   ),
 };
 
 export const ToolbarCompact: Story = {
-  name: "Toolbar (compact + chromeless)",
+  name: "Toolbar ($3 + chromeless)",
   render: () => (
     <YStack
       maxWidth={400}
@@ -112,7 +113,7 @@ export const ToolbarCompact: Story = {
       borderColor="$borderColor"
       padding="$2"
     >
-      <SearchInput compact chromeless size="$3" onSearch={(text) => action("onSearch")(text)} />
+      <SearchInput chromeless size="$3" onSearch={(text) => action("onSearch")(text)} />
     </YStack>
   ),
 };
@@ -148,3 +149,22 @@ export const WithError: Story = {
     </YStack>
   ),
 };
+
+function ImperativeFocusExample(args: React.ComponentProps<typeof SearchInput>) {
+  const ref = useRef<SearchInputHandle>(null);
+  return (
+    <YStack gap="$3">
+      <SearchInput {...args} ref={ref} label="Search" />
+      <Button onPress={() => ref.current?.focus()}>Focus search</Button>
+      <Button onPress={() => ref.current?.blur()}>Blur search</Button>
+    </YStack>
+  );
+}
+
+export const ImperativeFocus: Story = {
+  render: (args) => <ImperativeFocusExample {...args} />,
+};
+
+export const AutoFocus: Story = {
+  args: { autoFocus: true, label: "Search" },
+};