@multiplatform.one/forms 7.90.6 → 8.1.0

package/src/InputParts/InputParts.glass.spec.tsx

@@ -0,0 +1,99 @@
+/**
+ * LC-268 (FZ-10606): on iOS 26 a field in chrome, the composer and the search
+ * field in a bar, sits on the system's Liquid Glass. Everywhere else, and in
+ * content, it is the plain field. One component and one API: the bar and the
+ * platform pick it, never an app prop.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Surface } from "@multiplatform.one/theme";
+import type { ReactElement } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { SearchInput } from "../fields/SearchInput";
+import { Input } from "./index";
+
+const glass = vi.hoisted(() => ({ system: false }));
+vi.mock("../Button/glass", async (importOriginal) => {
+  const real = await importOriginal<typeof import("../Button/glass")>();
+  function FakeSystemGlass({
+    glassEffectStyle,
+    isInteractive,
+    style: _style,
+    children,
+  }: Record<string, unknown>) {
+    return (
+      <div
+        data-glass="system"
+        data-effect={glassEffectStyle as string}
+        data-interactive={String(isInteractive)}
+      >
+        {children as never}
+      </div>
+    );
+  }
+  return {
+    ...real,
+    loadFieldGlassView: () => (glass.system ? FakeSystemGlass : null),
+  };
+});
+
+afterEach(() => {
+  glass.system = false;
+});
+
+function field(): ReactElement {
+  return (
+    <Input.Box aria-label="Message">
+      <Input.Area placeholder="Type a message" />
+    </Input.Box>
+  );
+}
+
+function glassOf(container: HTMLElement): Element | null {
+  return container.querySelector("[data-glass]");
+}
+
+describe("LC-268: a field in chrome sits on system Liquid Glass (FZ-10606)", () => {
+  it("in a bar on iOS 26 the field's ground is the system's glass, not MPO's fill", () => {
+    glass.system = true;
+    const { container } = renderWithProviders(<Surface bar>{field()}</Surface>);
+    const layer = glassOf(container)!;
+    expect(layer.getAttribute("data-glass")).toBe("system");
+    expect(layer.getAttribute("data-effect")).toBe("regular");
+    expect(layer.getAttribute("data-interactive")).toBe("false");
+    const box = container.querySelector("[data-mp-field-glass]")!;
+    expect(box.contains(layer)).toBe(true);
+    expect(box.contains(container.querySelector("textarea, input"))).toBe(true);
+    const ground = getComputedStyle(box as HTMLElement).backgroundColor;
+    expect(["", "transparent", "rgba(0, 0, 0, 0)"]).toContain(ground);
+  });
+
+  it("a search field in a bar takes the same glass, its slotted glyphs stay bare", () => {
+    glass.system = true;
+    const { container, getByLabelText } = renderWithProviders(
+      <Surface bar>
+        <SearchInput placeholder="Search" />
+      </Surface>,
+    );
+    expect(glassOf(container)?.getAttribute("data-glass")).toBe("system");
+    expect(container.querySelector("[data-mp-field-glass]")).not.toBeNull();
+    expect(getByLabelText("Search")).toBeTruthy();
+  });
+
+  it("in content the field stays plain even where iOS draws glass", () => {
+    glass.system = true;
+    const { container } = renderWithProviders(field());
+    expect(glassOf(container)).toBeNull();
+    expect(container.querySelector("[data-mp-field-glass]")).toBeNull();
+  });
+
+  it("without system glass (Android, the web, iOS before 26) a bar's field stays plain", () => {
+    const { container } = renderWithProviders(<Surface bar>{field()}</Surface>);
+    expect(glassOf(container)).toBeNull();
+    expect(container.querySelector("[data-mp-field-glass]")).toBeNull();
+  });
+
+  it("the web loader never hands a field glass, iOS Safari included", async () => {
+    const real = await vi.importActual<typeof import("../Button/glass")>("../Button/glass");
+    expect(real.loadFieldGlassView()).toBeNull();
+  });
+});

package/src/InputParts/index.tsx

@@ -48,6 +48,7 @@ import {
   resolveGlyphPaint,
   SIZE_RECIPE_RADIUS_TOKEN_TO_STOP,
   Surface,
+  useBarSurface,
   sizeRecipeBoxVariants,
   sizeRecipeForToken,
   sizeRecipeIconVariants,
@@ -67,6 +68,7 @@ import { useFieldRow } from "../shared/fieldRowContext";
 import { useIsInTableCell } from "../shared/tableCellContext";
 import { useInPanelEcho, usePanelTriggerRadiusReporter } from "../FloatingPanel/echoContext";
 import { keyboardAppearanceFor } from "./keyboardAppearance";
+import { loadFieldGlassView } from "../Button/glass";
 import { useFieldA11y, useFieldDescribedBy } from "../fieldLayout";
 
 /**
@@ -394,6 +396,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
   const inFieldRow = useFieldRow();
   const groupedVertical = useControlGroupVertical();
   const inTableCell = useIsInTableCell() || inFieldRow;
+  const barSurface = useBarSurface();
   // Native Pressable owns onPress; do not also pass it to XGroup (double-fire).
   const framePressProps = isWeb ? { onPress, disabled } : { disabled };
   // Standalone Box clips children to radius. Grouped / in-cell frames leave
@@ -604,6 +607,15 @@ const InputGroupImpl = InputGroupFrame.styleable<{
     );
   }
 
+  const FieldGlass = barSurface && !inPanelEcho ? loadFieldGlassView() : null;
+  const glassChrome = FieldGlass
+    ? {
+        ...fieldGlassChrome,
+        ...(focused ? undefined : { borderColor: "transparent" }),
+        "data-mp-field-glass": "",
+      }
+    : undefined;
+
   return inFieldFrame(
     <FocusContext.Provider focused={focused} setFocused={setFocused}>
       {wrapNativePressable(
@@ -652,8 +664,16 @@ const InputGroupImpl = InputGroupFrame.styleable<{
               }
             : undefined)}
           {...echoChrome}
+          {...glassChrome}
           overflow={boxOverflow}
         >
+          {FieldGlass ? (
+            <FieldGlass
+              glassEffectStyle="regular"
+              isInteractive={false}
+              style={{ ...fieldGlassFill, borderRadius: drawnRadius }}
+            />
+          ) : null}
           {children}
           {trailingSlot}
         </InputGroupFrame>,
@@ -662,6 +682,27 @@ const InputGroupImpl = InputGroupFrame.styleable<{
   );
 });
 
+/**
+ * LC-268 (FZ-10606): a field in a bar on iOS 26 sits on the system's Liquid
+ * Glass, the composer and search field of the iOS 26 bars. The glass is the
+ * ground, so MPO paints no fill, shadow or resting edge over it; focus keeps
+ * its accent border (LC-133).
+ */
+const fieldGlassChrome = {
+  backgroundColor: "transparent",
+  elevation: undefined,
+  shadowColor: "transparent",
+  shadowOpacity: 0,
+} as const;
+
+const fieldGlassFill = {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+} as const;
+
 /**
  * LC-176 (FZ-8711): everything inside a field's frame is part of the field,
  * so an icon button in its leading or trailing slot draws the bare tinted

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 () => {

package/src/fields/Combobox/Combobox.stories.tsx

@@ -182,9 +182,9 @@ export const Basic: Story = {
         <Combobox
           {...args}
           value={value}
-          onValueChange={(val) => {
+          onChange={(val) => {
             setValue(Array.isArray(val) ? val[0] : val);
-            action("onValueChange")(val);
+            action("onChange")(val);
           }}
         />
         {value && <Text color="$colorHover">Selected: {value}</Text>}
@@ -203,7 +203,7 @@ export const WithLabel: Story = {
           helperText="Select an author from the list"
           options={authorOptions}
           value={value}
-          onValueChange={(v) => setValue(Array.isArray(v) ? v[0] : v)}
+          onChange={(v) => setValue(Array.isArray(v) ? v[0] : v)}
           placeholder="Select an author..."
           searchPlaceholder="Type to search..."
         />
@@ -251,7 +251,7 @@ export const Interactive: Story = {
             label="Pick an author"
             options={authorOptions}
             value={value}
-            onValueChange={(v) => setValue(Array.isArray(v) ? v[0] : v)}
+            onChange={(v) => setValue(Array.isArray(v) ? v[0] : v)}
             placeholder="Select an author..."
           />
           <Text>Selected: {value || "None"}</Text>
@@ -275,7 +275,7 @@ export const CustomTrigger: StoryObj<typeof Combobox> = {
             <Combobox
               options={authorOptions}
               value={value}
-              onValueChange={(v) => setValue(Array.isArray(v) ? v[0] : v)}
+              onChange={(v) => setValue(Array.isArray(v) ? v[0] : v)}
               searchPlaceholder="Type to search..."
               popoverWidth={260}
               trigger={(selected) => (
@@ -321,7 +321,7 @@ export const ManyOptions: StoryObj<typeof Combobox> = {
           label="Pick an item"
           options={options}
           value={value}
-          onValueChange={(v) => setValue(Array.isArray(v) ? v[0] : v)}
+          onChange={(v) => setValue(Array.isArray(v) ? v[0] : v)}
           placeholder="Select from 100 items..."
           searchPlaceholder="Type to filter..."
           emptyMessage="No matching items."

package/src/fields/Combobox/index.tsx

@@ -163,11 +163,8 @@ export interface ComboboxProps {
   defaultValue?: string | string[];
   /**
    * Canonical change handler, consistent with the rest of the field family.
-   * Prefer this over `onValueChange`.
    */
   onChange?: (value: string | string[]) => void;
-  /** @deprecated Use `onChange` instead. */
-  onValueChange?: (value: string | string[]) => void;
   placeholder?: string;
   searchPlaceholder?: string;
   emptyMessage?: string;
@@ -2564,7 +2561,6 @@ export function Combobox({
   value: valueProp,
   defaultValue,
   onChange,
-  onValueChange,
   placeholder: placeholderProp,
   searchPlaceholder: searchPlaceholderProp,
   emptyMessage: emptyMessageProp,
@@ -2704,10 +2700,9 @@ export function Combobox({
         onValueChange={(value) => {
           if (disabled) return;
           handleValueChange?.(value);
-          // Canonical `onChange` and the alias `onValueChange` both fire from
+          // Canonical `onChange` fires from
           // this single emit site (same reconciliation as Switch).
           onChange?.(value);
-          onValueChange?.(value);
         }}
         onBlur={handleBlur}
         placeholder={placeholder}

package/src/fields/DatePicker/DatePicker.spec.tsx

@@ -82,12 +82,11 @@ describe("DatePicker", () => {
       expect(document.querySelector('[data-testid="floating-panel-viewport"]')).toBeNull();
     });
 
-    it("fires canonical onChange and the deprecated onValueChange alias once when a day is picked", async () => {
+    it("fires canonical onChange once when a day is picked", async () => {
       const DatePicker = await loadDatePicker();
       const onChange = vi.fn();
-      const onValueChange = vi.fn();
       const result = renderWithProviders(
-        <DatePicker label="Date" name="date" onChange={onChange} onValueChange={onValueChange} />,
+        <DatePicker label="Date" name="date" onChange={onChange} />,
       );
 
       const trigger = result.container.querySelector("input,button,[role='button']");
@@ -106,9 +105,7 @@ describe("DatePicker", () => {
       });
 
       expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onValueChange).toHaveBeenCalledTimes(1);
       expect(onChange.mock.calls[0][0]).toBeInstanceOf(Date);
-      expect(onChange.mock.calls[0][0]).toEqual(onValueChange.mock.calls[0][0]);
     });
   });
 
@@ -262,32 +259,18 @@ describe("DatePicker", () => {
     it("standalone controlled: a value arriving after mount displays, without onChange", async () => {
       const DatePicker = await loadDatePicker();
       const onChange = vi.fn();
-      const onValueChange = vi.fn();
       const result = renderWithProviders(
-        <DatePicker
-          label="Due Date"
-          value={null}
-          onChange={onChange}
-          onValueChange={onValueChange}
-        />,
+        <DatePicker label="Due Date" value={null} onChange={onChange} />,
       );
       expect(getDisplayInput(result.container)?.value ?? "").toBe("");
 
       // Late seed: the upstream doc value (frappe wire string) arrives after
       // first paint.
-      result.rerender(
-        <DatePicker
-          label="Due Date"
-          value="2026-03-05"
-          onChange={onChange}
-          onValueChange={onValueChange}
-        />,
-      );
+      result.rerender(<DatePicker label="Due Date" value="2026-03-05" onChange={onChange} />);
       await waitFor(() => {
         expect(getDisplayInput(result.container)?.value).toBe("Mar 5, 2026");
       });
       expect(onChange).not.toHaveBeenCalled();
-      expect(onValueChange).not.toHaveBeenCalled();
     });
 
     it("form-integrated: a field value set after mount displays, without onChange", async () => {

package/src/fields/DatePicker/DatetimePicker.catalog.tsx

@@ -75,11 +75,8 @@ export type DatetimePickerProps<
     value?: Date | string | null;
     /**
      * Canonical change handler, consistent with the rest of the field family.
-     * Prefer this over `onValueChange`.
      */
     onChange?: (value: Date | null) => void;
-    /** @deprecated Use `onChange` instead. */
-    onValueChange?: (value: Date | null) => void;
     /** Native only. `false` keeps the catalog overlay; omit for the OS picker. */
     native?: boolean;
     /**
@@ -359,7 +356,6 @@ export function DatetimePicker<
     defaultValue,
     value: controlledValue,
     onChange,
-    onValueChange,
     form,
     inputProps: _inputProps,
     placeholder = t("Select date and time"),
@@ -419,11 +415,10 @@ export function DatetimePicker<
       setSelectedDatetime(date);
       setDisplayDate(date);
       fieldChange?.(date);
-      // Canonical `onChange` and the alias `onValueChange` both fire (single emit).
+      // Canonical `onChange` fires (single emit).
       onChange?.(date);
-      onValueChange?.(date);
     },
-    [minDate, maxDate, setDisplayDate, onChange, onValueChange],
+    [minDate, maxDate, setDisplayDate, onChange],
   );
 
   const handleClearDatetime = useCallback(
@@ -432,9 +427,8 @@ export function DatetimePicker<
       setDisplayDate(new Date());
       fieldChange?.(null);
       onChange?.(null);
-      onValueChange?.(null);
     },
-    [setDisplayDate, onChange, onValueChange],
+    [setDisplayDate, onChange],
   );
 
   const displayValue = useMemo(