@multiplatform.one/forms 7.90.5 → 8.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/forms",
-  "version": "7.90.5",
+  "version": "8.0.0",
   "description": "Cross-platform form components with URL state management",
   "keywords": [
     "cross-platform",
@@ -37,8 +37,8 @@
   "types": "types/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
-    "./src/*": "./src/*",
     ".": {
+      "gnome": "./src/index.gnome.ts",
       "source": "./src/index.ts",
       "react-native": {
         "types": "./types/index.d.ts",
@@ -50,6 +50,19 @@
       "import": "./dist/esm/index.mjs",
       "require": "./dist/cjs/index.cjs",
       "default": "./dist/cjs/index.cjs"
+    },
+    "./native-twins": {
+      "source": "./src/nativeTwins.ts",
+      "react-native": {
+        "types": "./types/nativeTwins.d.ts",
+        "import": "./dist/esm/nativeTwins.native.js",
+        "require": "./dist/cjs/nativeTwins.native.js",
+        "default": "./dist/esm/nativeTwins.native.js"
+      },
+      "types": "./types/nativeTwins.d.ts",
+      "import": "./dist/esm/nativeTwins.mjs",
+      "require": "./dist/cjs/nativeTwins.cjs",
+      "default": "./dist/cjs/nativeTwins.cjs"
     }
   },
   "publishConfig": {
@@ -57,10 +70,10 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
-    "@multiplatform.one/platform": "^7.90.5",
-    "@multiplatform.one/router": "^7.90.5",
-    "@multiplatform.one/table-primitives": "^7.90.5",
-    "@multiplatform.one/theme": "^7.90.5",
+    "@multiplatform.one/platform": "^8.0.0",
+    "@multiplatform.one/router": "^8.0.0",
+    "@multiplatform.one/table-primitives": "^8.0.0",
+    "@multiplatform.one/theme": "^8.0.0",
     "@phosphor-icons/react": "^2.1.10",
     "@tamagui/get-font-sized": "2.7.6",
     "@tamagui/get-token": "2.7.6",
@@ -80,9 +93,9 @@
   },
   "devDependencies": {
     "@expo/ui": "~55.0.17",
-    "@multiplatform.one/config": "7.90.5",
-    "@multiplatform.one/storybook": "7.90.5",
-    "@multiplatform.one/test-utils": "7.90.5",
+    "@multiplatform.one/config": "8.0.0",
+    "@multiplatform.one/storybook": "8.0.0",
+    "@multiplatform.one/test-utils": "8.0.0",
     "@tamagui/build": "2.7.6",
     "@tamagui/config": "2.7.6",
     "@tamagui/vite-plugin": "2.7.6",

package/src/Button/index.tsx

@@ -42,7 +42,6 @@ import {
   useElevatedSurface,
   useGlyphTintOnSurface,
   useResolvedKnobs,
-  useTopBarSurface,
   useTouchSurface,
   type ControlTier,
   type SizeRecipeFamilyName,
@@ -430,8 +429,7 @@ export interface ButtonProps extends Omit<
    * plated case: a translucent material circle for a control floating over
    * an image or video, where a bare glyph would be lost on the picture.
    * `plate="primary"` is the overlay's one confirm (LC-260): an accent-filled
-   * circle with an on-fill glyph, the iOS 26 sheet's checkmark. In the page's
-   * top bar it is a bar glyph like back and "…" (FZ-8989).
+   * circle with an on-fill glyph, the iOS 26 sheet's checkmark.
    */
   plate?: "media" | "primary";
   /**
@@ -600,10 +598,7 @@ export function Button({
     (s) => ({ isValid: s.isValid ?? true }),
   );
 
-  // LC-176 (FZ-8989): the filled ✓ is an overlay's one confirm; the page's
-  // top bar draws its confirm as a bar glyph beside back and "…".
-  const topBar = useTopBarSurface();
-  const primaryPlate = plate === "primary" && !topBar;
+  const primaryPlate = plate === "primary";
   const intent =
     ((accent || primaryPlate) && "accent") ||
     (error && "error") ||

package/src/ContextualSaveBar/index.tsx

@@ -89,7 +89,7 @@ function statusCopy(args: {
   if (args.isSubmitting) return { text: t("Saving…"), failed: false };
   if (args.saveError) {
     return {
-      text: t("Couldn't save — {{error}} Edits are kept on this page.", {
+      text: t("Couldn't save. {{error}} Edits are kept on this page.", {
         error: /[.!?。！？]$/u.test(args.saveError.trimEnd())
           ? args.saveError.trimEnd()
           : `${args.saveError.trimEnd()}.`,

package/src/FloatingPanel/FloatingPanel.stories.tsx

@@ -214,7 +214,7 @@ function ScrollClipPair({ where }: { where: string }) {
         placeholder="Pick a fruit"
         options={scrollClipOptions}
         value={value}
-        onValueChange={(next) => setValue(Array.isArray(next) ? next[0] : next)}
+        onChange={(next) => setValue(Array.isArray(next) ? next[0] : next)}
       />
       <FloatingPanel
         open={open}

package/src/FloatingPanel/index.native.tsx

@@ -142,7 +142,7 @@ import {
   type TriggerRect,
 } from "./pointAnchor";
 import { RegularPanel } from "./RegularPanel";
-import { panelViewportPadding, resolvePanelWidthMode } from "./useFloatingPanel";
+import { panelViewportPadding } from "./useFloatingPanel";
 import { TrailingActionOverlay, TriggerWithTrailingAction } from "./trailingAction";
 import { iconCoverRect } from "./coverRect";
 import {
@@ -211,7 +211,6 @@ export function FloatingPanel({
   panelWidth = "content",
   sheet,
   widthMode,
-  fitContent,
 }: FloatingPanelProps) {
   // The panel floats over the page: it never inherits a painted ancestor.
   const { knobProps } = useResolvedKnobs({ painted: false });
@@ -741,7 +740,7 @@ export function FloatingPanel({
                   Math.max(safeArea?.bottom ?? 0, keyboardInset) -
                   panelViewportPadding,
               }}
-              widthMode={resolvePanelWidthMode(widthMode, fitContent)}
+              widthMode={widthMode ?? "at-least-trigger"}
               echo={triggerEcho ? (triggerRow ?? trigger) : null}
               echoLabel={triggerA11y?.label}
               header={header}

package/src/FloatingPanel/index.tsx

@@ -70,7 +70,6 @@ export {
   panelTransition,
   panelViewportPadding,
   panelAnchorOffset,
-  resolvePanelWidthMode,
 } from "./useFloatingPanel";
 export type {
   PanelWidthMode,
@@ -182,12 +181,6 @@ export interface FloatingPanelProps {
    * `"content"` panel already takes (FZ-8220). A pinned width ignores it.
    */
   floor?: number;
-  /**
-   * @deprecated Pass `widthMode` instead — the boolean cannot express
-   * `"match-trigger"`. `true` → `"fit-content"`, `false`/undefined →
-   * `"at-least-trigger"`. An explicit `widthMode` always wins.
-   */
-  fitContent?: boolean;
   /**
    * Content padding for both sheet and web floating panel.
    * Use "none" for self-contained widgets (ColorPicker, DatePicker, TimePicker)
@@ -795,7 +788,6 @@ function FloatingPanelWeb({
   disabled,
   sizing = "grow",
   widthMode,
-  fitContent,
   panelWidth,
   floor,
   contentPadding = "default",
@@ -850,8 +842,7 @@ function FloatingPanelWeb({
     disabled,
     repositionRef: repositionFnRef,
     wheelGrowRef: isFill ? undefined : grownRef,
-    widthMode: widthMode ?? (isContextMenu && fitContent === undefined ? "fit-content" : undefined),
-    fitContent,
+    widthMode: widthMode ?? (isContextMenu ? "fit-content" : undefined),
     freeOverlay: pointMenu,
     cover,
     panelWidth,

package/src/FloatingPanel/panelWidthContract.spec.ts

@@ -27,14 +27,12 @@ const fieldShapedPickers = [
   "ColorPicker/parts.tsx",
   "DatePicker/parts.tsx",
   "DatePicker/DatetimePicker.catalog.tsx",
+  "Geolocation/index.tsx",
 ];
 
 /** Field-triggered pickers pinned to the field's width exactly. */
 const matchTriggerPickers = ["Icon/index.tsx"];
 
-/** Panels opened from an icon/button trigger, where fit-content is correct. */
-const buttonShapedPickers = ["Geolocation/index.tsx"];
-
 function read(relative: string): string {
   return readFileSync(resolve(fieldsDir, relative), "utf8");
 }
@@ -57,11 +55,4 @@ describe("FloatingPanel width contract (MPO-38, MPO-262)", () => {
       expect(source).not.toMatch(/fitContent=\{?true/);
     },
   );
-
-  it.each(buttonShapedPickers)("%s keeps fit-content deliberately", (relative) => {
-    const source = read(relative);
-    // Asserted, not merely tolerated: if this stops being true the exemption
-    // list is stale and someone must re-judge it rather than delete a line.
-    expect(source).toMatch(/fitContent/);
-  });
 });

package/src/FloatingPanel/useFloatingPanel.spec.tsx

@@ -30,20 +30,17 @@ import {
   panelAnchorOffset,
   panelCoverOffset,
   panelViewportPadding,
-  resolvePanelWidthMode,
   useFloatingPanel,
 } from "./useFloatingPanel";
 
 function Harness({
   open,
-  fitContent,
   widthMode,
   panelWidth,
   echo,
   floor,
 }: {
   open: boolean;
-  fitContent?: boolean;
   widthMode?: PanelWidthMode;
   panelWidth?: PanelWidth;
   echo?: boolean;
@@ -53,7 +50,6 @@ function Harness({
     open,
     onOpenChange: () => {},
     useAutoUpdate: false,
-    fitContent,
     widthMode,
     panelWidth,
     echo,
@@ -89,7 +85,6 @@ function mockRect(el: HTMLElement, rect: { x: number; y: number; width: number;
  *  floating element once floating-ui has positioned it. */
 async function openAgainstTrigger(
   props: {
-    fitContent?: boolean;
     widthMode?: PanelWidthMode;
     panelWidth?: PanelWidth;
     echo?: boolean;
@@ -276,15 +271,6 @@ describe("FloatingPanel panelWidth setting (LC-112, FZ-8438 r3)", () => {
 });
 
 describe("FloatingPanel width modes (MPO-38)", () => {
-  it("resolves the deprecated boolean onto the three modes", () => {
-    expect(resolvePanelWidthMode(undefined, undefined)).toBe("at-least-trigger");
-    expect(resolvePanelWidthMode(undefined, false)).toBe("at-least-trigger");
-    expect(resolvePanelWidthMode(undefined, true)).toBe("fit-content");
-    // An explicit mode always wins over the boolean, in both directions.
-    expect(resolvePanelWidthMode("match-trigger", true)).toBe("match-trigger");
-    expect(resolvePanelWidthMode("fit-content", false)).toBe("fit-content");
-  });
-
   it("at-least-trigger writes min-width only, so content may still grow it", async () => {
     const result = await openAgainstTrigger({ widthMode: "at-least-trigger" }, trigger);
     await waitFor(() => {
@@ -302,13 +288,6 @@ describe("FloatingPanel width modes (MPO-38)", () => {
     });
   });
 
-  it("at-least-trigger is what an explicit fitContent={false} means", async () => {
-    const result = await openAgainstTrigger({ fitContent: false }, trigger);
-    await waitFor(() => {
-      expect(result.getByTestId("anchor-floating").style.minWidth).toBe("240px");
-    });
-  });
-
   it("match-trigger pins the width exactly — narrow content cannot shrink it", async () => {
     const result = await openAgainstTrigger({ widthMode: "match-trigger" }, trigger);
     await waitFor(() => {
@@ -336,11 +315,6 @@ describe("FloatingPanel width modes (MPO-38)", () => {
     expect(el.style.width).toBe("");
     expect(el.style.maxWidth).toBe("");
   });
-
-  it("fitContent still reaches fit-content, so existing consumers do not move", async () => {
-    const result = await openAgainstTrigger({ fitContent: true }, trigger);
-    expect(result.getByTestId("anchor-floating").style.minWidth).toBe("");
-  });
 });
 
 /**

package/src/FloatingPanel/useFloatingPanel.ts

@@ -133,13 +133,6 @@ export interface UseFloatingPanelOptions {
    * Default `"at-least-trigger"`.
    */
   widthMode?: PanelWidthMode;
-  /**
-   * @deprecated Pass `widthMode` instead. `fitContent` is the two-valued
-   * spelling of the same idea and cannot express `"match-trigger"`.
-   * `true` → `"fit-content"`, `false`/undefined → `"at-least-trigger"`.
-   * An explicit `widthMode` always wins.
-   */
-  fitContent?: boolean;
   /**
    * The panel opens at a point, not from the trigger's box (ContextMenu). It
    * shares no corner with the trigger, so its radius stays the CONTAINER-CAP
@@ -163,16 +156,6 @@ export interface UseFloatingPanelOptions {
   floor?: number;
 }
 
-/** One place that resolves the deprecated boolean onto the three modes, so
- *  the hook and the component cannot disagree about what a consumer meant. */
-export function resolvePanelWidthMode(
-  widthMode: PanelWidthMode | undefined,
-  fitContent: boolean | undefined,
-): PanelWidthMode {
-  if (widthMode) return widthMode;
-  return fitContent ? "fit-content" : "at-least-trigger";
-}
-
 // ── Return type ───────────────────────────────────────────────
 
 export interface UseFloatingPanelReturn {
@@ -287,14 +270,13 @@ export function useFloatingPanel({
   useAutoUpdate: useAutoUpdateProp = true,
   wheelGrowRef,
   widthMode: widthModeProp,
-  fitContent,
   freeOverlay = false,
   cover = true,
   panelWidth,
   echo = cover && !freeOverlay,
   floor = 0,
 }: UseFloatingPanelOptions): UseFloatingPanelReturn {
-  const widthMode = resolvePanelWidthMode(widthModeProp, fitContent);
+  const widthMode = widthModeProp ?? "at-least-trigger";
   // An overlay floats over the page: it never inherits a painted ancestor.
   const { knobProps } = useResolvedKnobs({ painted: false });
   const hasBorder = knobProps.borderRadius.borderWidth > 0;

package/src/FloatingPanel/viewportHydration.spec.tsx

@@ -23,14 +23,14 @@ function Fixture({ kind }: { kind: string }) {
           aria-label="Choice"
           options={options}
           value={value}
-          onValueChange={(next) => setValue(String(next))}
+          onChange={(next) => setValue(String(next))}
         />
       ) : kind === "Combobox" ? (
         <Combobox
           aria-label="Choice"
           options={options}
           value={value}
-          onValueChange={(next) => setValue(String(next))}
+          onChange={(next) => setValue(String(next))}
         />
       ) : (
         <FloatingPanel

package/src/fields/Checkbox/Checkbox.spec.tsx

@@ -62,14 +62,14 @@ describe("Checkbox", () => {
       expect(result.container.querySelector("[role='checkbox']")).toBeNull();
     });
 
-    it("calls onCheckedChange when clicked", () => {
-      const onCheckedChange = vi.fn();
+    it("calls onChange when clicked", () => {
+      const onChange = vi.fn();
       const result = renderWithProviders(
-        <Checkbox name="cb" defaultValue={false} onCheckedChange={onCheckedChange} />,
+        <Checkbox name="cb" defaultValue={false} onChange={onChange} />,
       );
       const checkbox = result.getCheckbox();
       if (checkbox) fireEvent.click(checkbox);
-      expect(onCheckedChange).toHaveBeenCalledWith(true);
+      expect(onChange).toHaveBeenCalledWith(true);
     });
 
     it("clicking the painted box still toggles", () => {
@@ -86,23 +86,15 @@ describe("Checkbox", () => {
       expect(onChange).toHaveBeenCalledWith(true);
     });
 
-    it("fires canonical onChange and the deprecated onCheckedChange alias once each", () => {
+    it("fires canonical onChange once", () => {
       const onChange = vi.fn();
-      const onCheckedChange = vi.fn();
       const result = renderWithProviders(
-        <Checkbox
-          name="cb"
-          defaultValue={false}
-          onChange={onChange}
-          onCheckedChange={onCheckedChange}
-        />,
+        <Checkbox name="cb" defaultValue={false} onChange={onChange} />,
       );
       const checkbox = result.getCheckbox();
       if (checkbox) fireEvent.click(checkbox);
       expect(onChange).toHaveBeenCalledTimes(1);
       expect(onChange).toHaveBeenCalledWith(true);
-      expect(onCheckedChange).toHaveBeenCalledTimes(1);
-      expect(onCheckedChange).toHaveBeenCalledWith(true);
     });
   });
 
@@ -236,25 +228,16 @@ describe("CheckboxGroup", () => {
     expect(result.findTextElement("Option C")).toBeDefined();
   });
 
-  it("fires canonical onChange and the deprecated onValueChange alias once each", () => {
+  it("fires canonical onChange once", () => {
     const onChange = vi.fn();
-    const onValueChange = vi.fn();
     const result = renderWithProviders(
-      <CheckboxGroup
-        label="Pick options"
-        name="opts"
-        options={options}
-        onChange={onChange}
-        onValueChange={onValueChange}
-      />,
+      <CheckboxGroup label="Pick options" name="opts" options={options} onChange={onChange} />,
     );
     const checkbox = result.container.querySelector("[role='checkbox']");
     expect(checkbox).toBeTruthy();
     if (checkbox) fireEvent.click(checkbox);
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(onChange).toHaveBeenCalledWith(["a"]);
-    expect(onValueChange).toHaveBeenCalledTimes(1);
-    expect(onValueChange).toHaveBeenCalledWith(["a"]);
   });
 
   it("renders required label with asterisk", () => {

package/src/fields/Checkbox/Checkbox.stories.tsx

@@ -182,9 +182,9 @@ export const Comparison: StoryObj = {
             <Checkbox
               label="Accept terms"
               defaultValue={customChecked}
-              onCheckedChange={(val) => {
+              onChange={(val) => {
                 setCustomChecked(!!val);
-                action("custom.onCheckedChange")(val);
+                action("custom.onChange")(val);
               }}
             />
           </YStack>
@@ -332,9 +332,9 @@ export const CheckboxGroupInteractive: StoryObj = {
               { value: "opt3", label: "Option 3" },
             ]}
             value={selected}
-            onValueChange={(values) => {
+            onChange={(values) => {
               setSelected(values);
-              action("onValueChange")(values);
+              action("onChange")(values);
             }}
           />
           <Paragraph size="$2">Selected: {selected.join(", ") || "None"}</Paragraph>

package/src/fields/Checkbox/Checkbox.tsx

@@ -64,8 +64,6 @@ export interface CheckboxProps {
    * (Input/Select/Switch all use `onChange`). Prefer this.
    */
   onChange?: (checked: CheckedState) => void;
-  /** @deprecated Use `onChange` instead. Kept as an alias for the tamagui/Radix name. */
-  onCheckedChange?: (checked: CheckedState) => void;
   onBlur?: (...args: any[]) => void;
   checkboxProps?: Omit<TamaguiCheckboxProps, "children" | "checked" | "id" | "onCheckedChange">;
   children?: ReactNode;
@@ -102,18 +100,16 @@ export function Checkbox({
   checked,
   defaultValue,
   onChange,
-  onCheckedChange,
   onBlur,
   checkboxProps,
   children,
   pointy,
   skeleton,
 }: CheckboxProps) {
-  // Canonical `onChange` and the alias `onCheckedChange` both fire from a
+  // Canonical `onChange` fires from a
   // single emit site (same reconciliation as Switch).
   const handleValueChange = (val: CheckedState) => {
     onChange?.(val);
-    onCheckedChange?.(val);
   };
   const { resolvedForm, knobProps, text, elevation, disabledState, id } = useFormField({
     form: formProp,

package/src/fields/Checkbox/CheckboxGroup.stories.tsx

@@ -40,7 +40,7 @@ type Story = StoryObj<typeof CheckboxGroup>;
 export const Basic: Story = {
   render: (args) => (
     <YStack maxWidth={400}>
-      <CheckboxGroup {...args} onValueChange={action("onValueChange")} />
+      <CheckboxGroup {...args} onChange={action("onChange")} />
     </YStack>
   ),
 };
@@ -226,7 +226,7 @@ export const ElevationLarge: Story = {
   render: (args) => (
     <Preset overrides={{ elevation: "large" }}>
       <YStack maxWidth={400}>
-        <CheckboxGroup {...args} onValueChange={action("onValueChange")} />
+        <CheckboxGroup {...args} onChange={action("onChange")} />
       </YStack>
     </Preset>
   ),

package/src/fields/Checkbox/CheckboxGroup.tsx

@@ -54,11 +54,8 @@ export interface CheckboxGroupProps {
   defaultValue?: string[];
   /**
    * Canonical change handler, consistent with the rest of the field family.
-   * Prefer this over `onValueChange`.
    */
   onChange?: (value: string[]) => void;
-  /** @deprecated Use `onChange` instead. */
-  onValueChange?: (value: string[]) => void;
   onBlur?: (...args: any[]) => void;
   options?: CheckboxGroupOption[];
   orientation?: "horizontal" | "vertical";
@@ -89,7 +86,6 @@ export function CheckboxGroup({
   value,
   defaultValue,
   onChange,
-  onValueChange,
   onBlur,
   options,
   orientation = "vertical",
@@ -98,11 +94,10 @@ export function CheckboxGroup({
   skeleton,
   card,
 }: CheckboxGroupProps) {
-  // Canonical `onChange` and the alias `onValueChange` both fire from the
+  // Canonical `onChange` fires from the
   // single emit site below (same reconciliation as Switch).
   const handleValueChange = (newValues: string[]) => {
     onChange?.(newValues);
-    onValueChange?.(newValues);
   };
   const { resolvedForm, knobProps, disabledState, id } = useFormField({
     form: formProp,
@@ -212,7 +207,7 @@ export function CheckboxGroup({
                 <Checkbox
                   id={itemId}
                   checked={isChecked}
-                  onCheckedChange={(checked) => {
+                  onChange={(checked) => {
                     if (isDisabled || readOnly) return;
                     emit(toggleValue(currentValues, option.value, checked));
                   }}
@@ -260,7 +255,7 @@ export function CheckboxGroup({
               label={option.label}
               id={itemId}
               checked={isChecked}
-              onCheckedChange={(checked) => {
+              onChange={(checked) => {
                 if (isDisabled || readOnly) return;
                 const newValues = toggleValue(currentValues, option.value, checked);
                 handleChange?.(newValues);

package/src/fields/ColorPicker/ColorPicker.spec.tsx

@@ -118,18 +118,11 @@ describe("ColorPicker", () => {
     });
   });
 
-  it("fires canonical onChange and the deprecated onValueChange alias once when cleared", async () => {
+  it("fires canonical onChange once when cleared", async () => {
     const ColorPicker = await loadColorPicker();
     const onChange = vi.fn();
-    const onValueChange = vi.fn();
     const result = renderWithProviders(
-      <ColorPicker
-        label="Color"
-        name="color"
-        defaultValue="#112233"
-        onChange={onChange}
-        onValueChange={onValueChange}
-      />,
+      <ColorPicker label="Color" name="color" defaultValue="#112233" onChange={onChange} />,
     );
 
     const triggerButton = result.container.querySelector("button");
@@ -142,8 +135,6 @@ describe("ColorPicker", () => {
       expect(onChange).toHaveBeenCalledWith("");
     });
     expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onValueChange).toHaveBeenCalledTimes(1);
-    expect(onValueChange).toHaveBeenCalledWith("");
   });
 
   it("shows format validation error for unrecognized rgb value", async () => {

package/src/fields/ColorPicker/index.tsx

@@ -77,11 +77,9 @@ export type ColorPickerProps<
     value?: string;
     /**
      * Canonical change handler, consistent with the rest of the field family.
-     * Fires in both standalone and form mode. Prefer this over `onValueChange`.
+     * Fires in both standalone and form mode.
      */
     onChange?: (value: string) => void;
-    /** @deprecated Use `onChange` instead. */
-    onValueChange?: (value: string) => void;
     /** When true, renders a skeleton placeholder instead of the color picker */
     skeleton?: boolean;
   };
@@ -743,7 +741,6 @@ export function ColorPicker<
     onBlur,
     value: controlledValue,
     onChange,
-    onValueChange,
     skeleton,
     id: idProp,
   } = useProps(props);
@@ -751,14 +748,13 @@ export function ColorPicker<
   const themePresets = useThemePresetColors();
   const presetColors = presetColorsProp ?? themePresets;
 
-  // Canonical `onChange` and the alias `onValueChange` both fire from a
+  // Canonical `onChange` fires from a
   // single emit per change (same reconciliation as Switch).
   const emitValueChange = useCallback(
     (newValue: string) => {
       onChange?.(newValue);
-      onValueChange?.(newValue);
     },
-    [onChange, onValueChange],
+    [onChange],
   );
 
   const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });

package/src/fields/Combobox/Combobox.spec.tsx

@@ -110,9 +110,8 @@ describe("Combobox", () => {
       expect(findInPage("Disabled")).toBeDefined();
     });
 
-    it("fires canonical onChange and the deprecated onValueChange alias once when dismissing a chip", async () => {
+    it("fires canonical onChange once when dismissing a chip", async () => {
       const onChange = vi.fn();
-      const onValueChange = vi.fn();
       const result = renderWithProviders(
         <Combobox
           label="Fruits"
@@ -122,7 +121,6 @@ describe("Combobox", () => {
           dismissible
           value={["apple", "banana"]}
           onChange={onChange}
-          onValueChange={onValueChange}
         />,
       );
       // Labels are differentiated per chip now — "Remove {label}".
@@ -134,8 +132,6 @@ describe("Combobox", () => {
       // Exactly once each — guards against the standalone double-fire bug.
       expect(onChange).toHaveBeenCalledTimes(1);
       expect(onChange).toHaveBeenCalledWith(["banana"]);
-      expect(onValueChange).toHaveBeenCalledTimes(1);
-      expect(onValueChange).toHaveBeenCalledWith(["banana"]);
     });
 
     it("stable keeps Cherry in third position when selected and open", async () => {