@multiplatform.one/forms 7.7.6 → 7.10.0

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

@@ -1,5 +1,5 @@
 import { act, fireEvent } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
 import { Combobox } from "./index";
@@ -11,6 +11,53 @@ const options = [
 ];
 
 describe("Combobox", () => {
+  describe("custom sheet trigger", () => {
+    const initialWidth = window.innerWidth;
+    afterEach(() => {
+      window.innerWidth = initialWidth;
+    });
+
+    it("keeps the same name and keyboard opener on narrow and wide screens", async () => {
+      for (const width of [500, 1200]) {
+        window.innerWidth = width;
+        const result = renderWithProviders(
+          <Combobox
+            options={options}
+            aria-label="Country code"
+            trigger={() => <span>Country</span>}
+          />,
+        );
+        const trigger = result.container.querySelector('[role="combobox"]');
+        expect(trigger?.getAttribute("aria-label")).toBe("Country code");
+        expect(trigger?.getAttribute("tabindex")).toBe("0");
+        expect(trigger?.getAttribute("aria-expanded")).toBe("false");
+        await act(async () => fireEvent.keyDown(trigger!, { key: "Enter" }));
+        expect(trigger?.getAttribute("aria-expanded")).toBe("true");
+        result.unmount();
+      }
+    });
+
+    it("lets a custom adornment hug its content while ordinary triggers keep stretching", () => {
+      for (const width of [500, 1200]) {
+        window.innerWidth = width;
+        for (const triggerSizing of [undefined, "content"] as const) {
+          const result = renderWithProviders(
+            <Combobox
+              options={options}
+              triggerSizing={triggerSizing}
+              trigger={() => <span>Country</span>}
+            />,
+          );
+          const trigger = result.container.querySelector<HTMLElement>(
+            '[data-testid="combobox-trigger"]',
+          );
+          expect(trigger?.style.width).toBe(triggerSizing === "content" ? "auto" : "100%");
+          result.unmount();
+        }
+      }
+    });
+  });
+
   describe("without form context", () => {
     it("renders with label", () => {
       const result = renderWithProviders(<Combobox label="Fruit" name="fruit" options={options} />);

package/src/fields/Combobox/index.tsx

@@ -191,6 +191,8 @@ export interface ComboboxProps {
   /** Whether more pages are available. Shows a spinner at the bottom when loading more. */
   hasMore?: boolean;
   trigger?: (selected: ComboboxOption | ComboboxOption[] | undefined, open: boolean) => ReactNode;
+  /** Custom triggers stretch by default; content hugs a composite-field adornment. */
+  triggerSizing?: "stretch" | "content";
   name?: string;
   form?: AnyFormApi;
   validators?: Record<string, unknown>;
@@ -458,6 +460,7 @@ interface FloatingComboboxCoreProps {
   tabIndexOverride?: number;
   popoverWidth?: number;
   trigger?: (selected: ComboboxOption | ComboboxOption[] | undefined, open: boolean) => ReactNode;
+  triggerSizing?: "stretch" | "content";
   knobProps: KnobProps;
   multiple?: boolean;
   selectedOrder?: SelectedOrder;
@@ -493,6 +496,7 @@ function FloatingComboboxCore({
   tabIndexOverride,
   popoverWidth,
   trigger: triggerRender,
+  triggerSizing = "stretch",
   knobProps,
   multiple,
   selectedOrder,
@@ -1351,12 +1355,16 @@ function FloatingComboboxCore({
     <View
       {...boxEventProps}
       data-testid="combobox-trigger"
-      width="100%"
+      width={triggerSizing === "content" ? "auto" : "100%"}
       alignSelf="stretch"
       flexShrink={0}
       outlineWidth={0}
       focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
-      style={{ display: "flex", alignItems: "stretch", width: "100%" }}
+      style={{
+        display: "flex",
+        alignItems: "stretch",
+        width: triggerSizing === "content" ? "auto" : "100%",
+      }}
     >
       {triggerRender(multiple ? selectedOptions : selectedOption, open)}
     </View>
@@ -1785,6 +1793,7 @@ function NativeComboboxCore({
   "aria-label": ariaLabel,
   hasLabel,
   trigger: triggerRender,
+  triggerSizing = "stretch",
   knobProps,
   multiple,
   selectedOrder,
@@ -2369,15 +2378,51 @@ function NativeComboboxCore({
     </View>
   );
 
+  // Both trigger shapes share one accessible control. The sheet wrapper's
+  // capture handler also opens it, so pointer activation is idempotent.
+  const triggerProps = {
+    id,
+    ...(isWeb
+      ? {
+          role: "combobox" as const,
+          "aria-haspopup": "listbox" as const,
+          "aria-expanded": open,
+          "aria-controls": listboxId,
+          "aria-activedescendant": hideSearch ? activeDescendant : undefined,
+          "aria-autocomplete": hideSearch ? ("list" as const) : undefined,
+          "aria-label": ariaLabel ?? (!hasLabel ? placeholder : undefined),
+          "aria-describedby": describedBy,
+          tabIndex: disabled ? -1 : 0,
+        }
+      : { importantForAccessibility: "no" as const }),
+    onPress: isWeb && !disabled ? () => handleOpenChange(true) : undefined,
+    onKeyDown: (event: React.KeyboardEvent) => {
+      if (disabled) return;
+      if (
+        ["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(event.key) ||
+        event.code === "Space"
+      ) {
+        event.preventDefault();
+        setKeyboardNav(true);
+        if (!open) handleOpenChange(true);
+      }
+    },
+  };
+
   const triggerContent = triggerRender ? (
     <View
       data-testid="combobox-trigger"
-      width="100%"
+      width={triggerSizing === "content" ? "auto" : "100%"}
       alignSelf="stretch"
       flexShrink={0}
       outlineWidth={0}
       focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
-      style={{ display: "flex", alignItems: "stretch", width: "100%" }}
+      style={{
+        display: "flex",
+        alignItems: "stretch",
+        width: triggerSizing === "content" ? "auto" : "100%",
+      }}
+      {...triggerProps}
     >
       {triggerRender(multiple ? selectedOptions : selectedOption, open)}
     </View>
@@ -2402,41 +2447,7 @@ function NativeComboboxCore({
             borderRadius: knobProps.borderRadius.borderRadius,
             borderWidth: knobProps.borderRadius.borderWidth,
           })}
-      id={id}
-      // Web: the box is the combobox control (ARIA + keyboard). Native:
-      // FloatingPanel's trigger Pressable (triggerA11y) is the single
-      // accessible node — role/aria props here surface the box as a
-      // duplicate TalkBack stop on Android, so exclude it from the tree
-      // (descendants stay reachable; "no", not "no-hide-descendants").
-      {...(isWeb
-        ? {
-            role: "combobox" as const,
-            "aria-haspopup": "listbox",
-            "aria-expanded": open,
-            "aria-controls": listboxId,
-            "aria-activedescendant": hideSearch ? activeDescendant : undefined,
-            "aria-autocomplete": hideSearch ? ("list" as const) : undefined,
-            // Standalone (no label): fall back to placeholder for the name.
-            // Labelled: the sibling Label wires `aria-labelledby` onto this id
-            // itself — naming it here too doubles the spoken name.
-            "aria-label": ariaLabel ?? (!hasLabel ? placeholder : undefined),
-            "aria-describedby": describedBy,
-            tabIndex: disabled ? -1 : 0,
-          }
-        : { importantForAccessibility: "no" as const })}
-      // Sheet capture opens first on web, so this opener is idempotent.
-      // Native delegates the gesture to FloatingPanel.
-      onPress={isWeb && !disabled ? () => handleOpenChange(true) : undefined}
-      onKeyDown={(e: React.KeyboardEvent) => {
-        if (
-          ["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) ||
-          e.code === "Space"
-        ) {
-          e.preventDefault();
-          setKeyboardNav(true);
-          if (!open) handleOpenChange(true);
-        }
-      }}
+      {...triggerProps}
     >
       <View
         flex={1}
@@ -2506,6 +2517,7 @@ function NativeComboboxCore({
       // the user types, so a content-fit sheet would open as a sliver.
       sheetFill={Boolean(onSearch)}
       trigger={triggerContent}
+      triggerSizing={triggerSizing}
       triggerEnd={
         clearable && !multiple && !disabled && typeof value === "string" && value !== "" ? (
           <Button
@@ -2564,6 +2576,7 @@ export function Combobox({
   onLoadMore,
   hasMore,
   trigger,
+  triggerSizing,
   name,
   form: formProp,
   validators,
@@ -2696,6 +2709,7 @@ export function Combobox({
         tabIndexOverride={tabIndexProp}
         popoverWidth={popoverWidth}
         trigger={trigger}
+        triggerSizing={triggerSizing}
         knobProps={knobProps}
         multiple={multiple}
         selectedOrder={selectedOrder}

package/src/fields/DatePicker/Calendar.tsx

@@ -80,6 +80,7 @@ function CalendarDayGrid({
   maxDate,
   selectionCapped,
 }: CalendarDayGridProps) {
+  const { knobProps } = useCalendarKnobs();
   return (
     <CalendarDays
       calendarData={calendarData}
@@ -110,7 +111,7 @@ function CalendarDayGrid({
               }
               return (
                 <View
-                  transition="quick"
+                  transition={knobProps.transition}
                   position="absolute"
                   height="100%"
                   zIndex={0}
@@ -297,6 +298,7 @@ export function Calendar({
   const handleSetDisplayForPrev = useCallback(
     (date: Date) => {
       const next = new Date(date);
+      next.setDate(1);
       next.setMonth(next.getMonth() + 1);
       setDisplayDate(next);
     },
@@ -305,6 +307,7 @@ export function Calendar({
 
   const prevMonthDate = useMemo(() => {
     const date = new Date(displayDate);
+    date.setDate(1);
     date.setMonth(date.getMonth() - 1);
     return date;
   }, [displayDate]);

package/src/fields/DatePicker/DatePicker.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import type { ComponentProps } from "react";
 import { useState } from "react";
-import { YStack } from "tamagui";
+import { Text, YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Calendar } from "./Calendar";
@@ -103,6 +103,27 @@ export const Standalone: Story = {
   render: (args) => <DatePicker {...args} />,
 };
 
+export const StateContract: Story = {
+  render: () => {
+    const [value, setValue] = useState<string | null>(null);
+    const [edits, setEdits] = useState(0);
+    return (
+      <YStack gap="$4" maxWidth={400}>
+        <DatePicker label="Saved date" defaultValue="1990-01-01" />
+        <DatePicker
+          label="Programmatic date"
+          value={value}
+          onChange={() => setEdits((count) => count + 1)}
+        />
+        <Button onPress={() => setValue("2026-03-05")}>Load date</Button>
+        <Text>{`User edits: ${edits}`}</Text>
+        <DatePicker label="Read-only date" value="1990-01-01" readOnly />
+        <DatePicker label="Disabled date" value="1990-01-01" disabled />
+      </YStack>
+    );
+  },
+};
+
 export const Basic: Story = {
   render: (args) => <DatePicker {...args} />,
   args: {

package/src/fields/DatePicker/DateRangePicker.tsx

@@ -261,6 +261,7 @@ function DualCalendarBody({
 
   const prevMonthDate = useMemo(() => {
     const date = new Date(displayDate);
+    date.setDate(1);
     date.setMonth(date.getMonth() - 1);
     return date;
   }, [displayDate]);
@@ -273,6 +274,7 @@ function DualCalendarBody({
   const handleSetDisplayForPrev = useCallback(
     (date: Date) => {
       const next = new Date(date);
+      next.setDate(1);
       next.setMonth(next.getMonth() + 1);
       setDisplayDate(next);
     },
@@ -281,7 +283,7 @@ function DualCalendarBody({
 
   if (!fullWidthMode) {
     return (
-      <View {...knobProps.panelPadding}>
+      <View>
         <SingleCalendar
           displayDate={displayDate}
           rangeStart={rangeStart}
@@ -297,7 +299,7 @@ function DualCalendarBody({
   }
 
   return (
-    <View flexDirection="row" {...knobProps.gap} {...knobProps.panelPadding}>
+    <View flexDirection="row" {...knobProps.gap}>
       <SingleCalendar
         displayDate={prevMonthDate}
         rangeStart={rangeStart}

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

@@ -246,15 +246,14 @@ function DatetimePickerBody({
   );
 
   return (
-    <View
-      flexDirection="column"
-      alignItems="center"
-      {...knobProps.gap}
-      width={activeTab === "date" ? px * 7 : "100%"}
-      minWidth={px * 7}
-      alignSelf={activeTab === "date" ? "center" : "stretch"}
-    >
-      <View flexDirection="row" width="100%">
+    <View flexDirection="column" alignItems="center" minWidth={px * 7} alignSelf="stretch">
+      <View
+        flexDirection="row"
+        width="100%"
+        {...knobProps.panelPadding}
+        // The active content frame owns the space below this strip.
+        paddingBottom={0}
+      >
         {(["date", "time"] as const).map((tab) => {
           const active = activeTab === tab;
           const tabDisabled = tab === "time" && !selectedDatetime;
@@ -319,15 +318,17 @@ function DatetimePickerBody({
         </CalendarViewSwitcher>
       ) : (
         selectedDatetime && (
-          <View width="100%">
-            <TimeSection
-              selectedDate={selectedDatetime}
-              onTimeChange={handleTimeChange}
-              timeFormat={timeFormat}
-              minuteStep={minuteStep}
-              showSeconds={showSeconds}
-            />
-          </View>
+          <CalendarPanelFrame>
+            <View width={px * 7}>
+              <TimeSection
+                selectedDate={selectedDatetime}
+                onTimeChange={handleTimeChange}
+                timeFormat={timeFormat}
+                minuteStep={minuteStep}
+                showSeconds={showSeconds}
+              />
+            </View>
+          </CalendarPanelFrame>
         )
       )}
     </View>
@@ -505,7 +506,8 @@ export function DatetimePicker<
         }
         disabled={disabled}
         sizing="grow"
-        widthMode="at-least-trigger"
+        contentPadding="none"
+        widthMode="fit-content"
       >
         {pickerContent(fieldChange)}
       </FloatingPanel>

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

@@ -0,0 +1,144 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useForm } from "@tanstack/react-form";
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { Form } from "../../Form";
+import { DatetimePicker } from "./DatetimePicker.native";
+import { DatePicker } from "./index.native";
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+// RNW omits React Native's accessibilityValue object. Bridge that native
+// contract for this harness; the actual iOS AX tree remains the runtime gate.
+vi.mock("react-native-web", async (importOriginal) => {
+  const native = await importOriginal<typeof import("react-native")>();
+  return {
+    ...native,
+    Pressable: ({ accessibilityValue, ...props }: import("react-native").PressableProps) => (
+      <native.Pressable {...props} aria-valuetext={accessibilityValue?.text} />
+    ),
+  };
+});
+
+const picked = new Date(2026, 2, 5, 14, 30);
+vi.mock("../nativeDateTime/OsDateTimeSheet", () => ({
+  OsDateTimeSheet: ({ open, onConfirm }: { open: boolean; onConfirm: (date: Date) => void }) =>
+    open ? (
+      <div role="dialog" aria-label="OS date and time">
+        <button onClick={() => onConfirm(new Date(2026, 2, 5, 14, 30))}>
+          Confirm OS selection
+        </button>
+      </div>
+    ) : null,
+}));
+
+describe("native DatetimePicker ownership", () => {
+  it.each([
+    { Control: DatePicker, name: "Date" },
+    { Control: DatetimePicker, name: "Date and time" },
+  ])(
+    "keeps $name paint inert and exposes its current value on the press owner",
+    ({ Control, name }) => {
+      const result = renderWithProviders(<Control value={picked} />);
+      const trigger = result.getByRole("button", { name });
+      expect(trigger.getAttribute("aria-valuetext")).toContain("Mar 5, 2026");
+      const painted = result.getByTestId("date-picker-trigger");
+      const paintAncestors: HTMLElement[] = [];
+      for (let el = painted.parentElement; el && el !== trigger; el = el.parentElement) {
+        paintAncestors.push(el);
+      }
+      expect(paintAncestors.some((el) => getComputedStyle(el).pointerEvents === "none")).toBe(true);
+    },
+  );
+
+  it("opens from its full-width native target and commits exactly once", () => {
+    const onChange = vi.fn();
+    const onValueChange = vi.fn();
+    const result = renderWithProviders(
+      <DatetimePicker onChange={onChange} onValueChange={onValueChange} />,
+    );
+    const trigger = result.getByRole("button", { name: "Date and time" });
+    expect(getComputedStyle(trigger).width).toBe("100%");
+    fireEvent.click(trigger);
+    expect(result.getAllByRole("dialog")).toHaveLength(1);
+    fireEvent.click(result.getByRole("button", { name: "Confirm OS selection" }));
+    expect(result.queryByRole("dialog")).toBeNull();
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(picked);
+    expect(onValueChange).toHaveBeenCalledExactlyOnceWith(picked);
+    expect(result.container.querySelector("input")?.value).toContain("Mar 5, 2026");
+  });
+
+  it("keeps native read-only text undimmed, without a picker press target", () => {
+    const result = renderWithProviders(<DatetimePicker value={picked} readOnly />);
+    const input = result.container.querySelector("input")!;
+    expect(input.value).toContain("Mar 5, 2026");
+    expect(input.disabled).toBe(false);
+    expect(input.readOnly).toBe(true);
+    expect(result.queryByRole("button")).toBeNull();
+    fireEvent.click(input);
+    expect(result.queryByRole("dialog")).toBeNull();
+    for (let el: HTMLElement | null = input; el && el !== result.container; el = el.parentElement) {
+      const opacity = getComputedStyle(el).opacity;
+      expect(opacity === "" || Number(opacity) === 1).toBe(true);
+    }
+  });
+
+  it("keeps a disabled value visible while declining activation", () => {
+    const result = renderWithProviders(<DatetimePicker value={picked} disabled />);
+    const trigger = result.getByRole("button", { name: "Date and time" });
+    expect(trigger.getAttribute("aria-disabled")).toBe("true");
+    expect(result.container.querySelector("input")?.value).toContain("Mar 5, 2026");
+    fireEvent.click(trigger);
+    expect(result.queryByRole("dialog")).toBeNull();
+  });
+
+  it("adopts controlled values after mount without emitting changes or opening", async () => {
+    const onChange = vi.fn();
+    const onValueChange = vi.fn();
+    const result = renderWithProviders(
+      <DatetimePicker value={null} onChange={onChange} onValueChange={onValueChange} />,
+    );
+    expect(result.container.querySelector("input")?.value).toBe("");
+    result.rerender(
+      <DatetimePicker value={picked} onChange={onChange} onValueChange={onValueChange} />,
+    );
+    await waitFor(() =>
+      expect(result.container.querySelector("input")?.value).toContain("Mar 5, 2026"),
+    );
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onValueChange).not.toHaveBeenCalled();
+    expect(result.queryByRole("dialog")).toBeNull();
+  });
+
+  it("adopts form values after mount without emitting changes or opening", async () => {
+    const onChange = vi.fn();
+    let update: ((date: Date) => void) | undefined;
+    function Example() {
+      const form = useForm({ defaultValues: { when: null as Date | null } });
+      update = (date) => form.setFieldValue("when", date);
+      return (
+        <Form form={form}>
+          <DatetimePicker name="when" onChange={onChange} />
+        </Form>
+      );
+    }
+    const result = renderWithProviders(<Example />);
+    expect(result.container.querySelector("input")?.value).toBe("");
+    await act(async () => update?.(picked));
+    await waitFor(() =>
+      expect(result.container.querySelector("input")?.value).toContain("Mar 5, 2026"),
+    );
+    expect(onChange).not.toHaveBeenCalled();
+    expect(result.queryByRole("dialog")).toBeNull();
+  });
+
+  it("gives the native trigger box the row width its text section needs", () => {
+    const result = renderWithProviders(<DatetimePicker value={picked} />);
+    const box = result.getByTestId("date-picker-trigger");
+    expect(getComputedStyle(box).flexGrow).toBe("1");
+    expect(getComputedStyle(box).minWidth).toBe("0px");
+  });
+});

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

@@ -142,38 +142,63 @@ export function DatetimePicker<
     hasError?: boolean,
     blurHandler?: (...args: unknown[]) => void,
     fieldChange?: (value: unknown) => void,
-  ) => (
-    <>
-      <DatePickerInputTrigger
-        value={display}
-        placeholder={placeholder}
-        disabled={disabled || readOnly}
-        open={open}
-        onReset={() => commit(null, fieldChange)}
-        onButtonPress={() => !disabled && !readOnly && setOpen(true)}
-        error={!!hasError}
-        id={id}
-        aria-label={hasLabel ? undefined : t("Date and time")}
-        aria-required={required || undefined}
-        aria-invalid={hasError || undefined}
-      />
-      <OsDateTimeSheet
-        open={open}
-        value={selected ?? new Date()}
-        mode="datetime"
-        minDate={minDate}
-        maxDate={maxDate}
-        onCancel={() => {
-          setOpen(false);
-          blurHandler?.();
-        }}
-        onConfirm={(date) => {
-          commit(date, fieldChange);
-          blurHandler?.();
-        }}
-      />
-    </>
-  );
+  ) => {
+    if (readOnly) {
+      return (
+        <InputParts.Box>
+          <InputParts.Area
+            value={display}
+            readOnly
+            aria-readonly="true"
+            aria-required={required || undefined}
+            aria-invalid={hasError || undefined}
+            placeholder={placeholder}
+          />
+        </InputParts.Box>
+      );
+    }
+    return (
+      <>
+        <RNPressable
+          onPress={() => !disabled && setOpen(true)}
+          disabled={disabled}
+          accessibilityRole="button"
+          accessibilityLabel={hasLabel ? undefined : t("Date and time")}
+          accessibilityValue={{ text: display || placeholder }}
+          style={{ width: "100%" }}
+        >
+          <DatePickerInputTrigger
+            value={display}
+            placeholder={placeholder}
+            disabled={disabled}
+            open={open}
+            onReset={() => commit(null, fieldChange)}
+            onButtonPress={() => {}}
+            error={!!hasError}
+            id={id}
+            aria-label={hasLabel ? undefined : t("Date and time")}
+            aria-required={required || undefined}
+            aria-invalid={hasError || undefined}
+          />
+        </RNPressable>
+        <OsDateTimeSheet
+          open={open}
+          value={selected ?? new Date()}
+          mode="datetime"
+          minDate={minDate}
+          maxDate={maxDate}
+          onCancel={() => {
+            setOpen(false);
+            blurHandler?.();
+          }}
+          onConfirm={(date) => {
+            commit(date, fieldChange);
+            blurHandler?.();
+          }}
+        />
+      </>
+    );
+  };
 
   if (skeleton) {
     return (

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

@@ -50,6 +50,28 @@ export const Baseline: Story = {
   ),
 };
 
+export const StateContract: Story = {
+  render: () => {
+    const [value, setValue] = useState<Date | null>(null);
+    const [edits, setEdits] = useState(0);
+    const saved = new Date(2026, 0, 15, 9, 30);
+    return (
+      <YStack gap="$4" maxWidth={400}>
+        <DatetimePicker label="Saved date and time" defaultValue={saved} />
+        <DatetimePicker
+          label="Programmatic date and time"
+          value={value}
+          onChange={() => setEdits((count) => count + 1)}
+        />
+        <Button onPress={() => setValue(new Date(2026, 2, 5, 14, 30))}>Load date and time</Button>
+        <Text>{`User edits: ${edits}`}</Text>
+        <DatetimePicker label="Read-only date and time" value={saved} readOnly />
+        <DatetimePicker label="Disabled date and time" value={saved} disabled />
+      </YStack>
+    );
+  },
+};
+
 export const TwentyFourHour: Story = {
   args: { timeFormat: "24h", helperText: "24-hour format" },
 };