@multiplatform.one/forms 6.1.0 → 6.4.0

package/dist/cjs/fields/DatePicker/DatetimePicker.cjs

@@ -34,12 +34,17 @@ var import_Button = require("../../Button/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
+var import_t = require("../../shared/t.cjs");
 var import_TimeColumn = require("../../shared/TimeColumn.cjs");
 var import_utils2 = require("../../shared/utils.cjs");
 var import_InputParts = require("../../InputParts/index.cjs");
 var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_parts = require("./parts.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+const suppressBoxFocusRing = {
+  focused: false,
+  setFocused: _val => {}
+};
 function parseTimeFromDate(date) {
   return {
     h: date.getHours(),
@@ -49,10 +54,8 @@ function parseTimeFromDate(date) {
 }
 function formatDatetimeDisplay(date, timeFormat, showSeconds) {
   if (!date) return "";
-  const dateStr = date.toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit"
+  const dateStr = (0, import_theme.formatAbsoluteDate)(date, {
+    year: "always"
   });
   const h = date.getHours();
   const m = date.getMinutes();
@@ -78,6 +81,7 @@ function DayGrid({
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  const accentText = (0, import_theme.useAccentOnSurface)();
   const {
     animation,
     animationKey
@@ -107,6 +111,7 @@ function DayGrid({
             return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
               chromeless: true,
               circular: true,
+              ...(0, import_parts.dayCellRadius)(knobProps),
               flex: 1,
               size: knobProps.sizeToken,
               disabled: isDisabled,
@@ -131,7 +136,7 @@ function DayGrid({
                 fontWeight: "bold",
                 children: day.getDate()
               }, "text-selected") : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
-                color: isToday ? "$accentColor" : isCurrentMonth ? import_colorRamps.formCommonColors.text : import_colorRamps.formCommonColors.muted,
+                color: isToday ? accentText : isCurrentMonth ? import_colorRamps.formCommonColors.text : import_colorRamps.formCommonColors.muted,
                 children: day.getDate()
               }, "text-normal")
             }, day.toISOString());
@@ -166,7 +171,7 @@ function TimeSection({
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumnSeparator, {
       knobProps
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-      label: "Sec",
+      label: (0, import_t.t)("Sec"),
       values: secondValues,
       selected: s,
       onChange: newS => onTimeChange(makeNewDate(h, m, newS)),
@@ -180,7 +185,7 @@ function TimeSection({
       alignItems: "flex-start",
       justifyContent: "center",
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-        label: "Hour",
+        label: (0, import_t.t)("Hour"),
         values: hours24,
         selected: h,
         onChange: newH => onTimeChange(makeNewDate(newH, m, s)),
@@ -188,7 +193,7 @@ function TimeSection({
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumnSeparator, {
         knobProps
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-        label: "Min",
+        label: (0, import_t.t)("Min"),
         values: minuteValues,
         selected: m,
         onChange: newM => onTimeChange(makeNewDate(h, newM, s)),
@@ -218,7 +223,7 @@ function TimeSection({
     alignItems: "flex-start",
     justifyContent: "center",
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-      label: "Hour",
+      label: (0, import_t.t)("Hour"),
       values: hours12,
       selected: display12H,
       onChange: handleHourChange,
@@ -226,7 +231,7 @@ function TimeSection({
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumnSeparator, {
       knobProps
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-      label: "Min",
+      label: (0, import_t.t)("Min"),
       values: minuteValues,
       selected: m,
       onChange: newM => onTimeChange(makeNewDate(h, newM, s)),
@@ -320,7 +325,7 @@ function DatetimePickerBody({
         theme: activeTab === "date" ? "accent" : void 0,
         onPress: () => setActiveTab("date"),
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
-          children: "Date"
+          children: (0, import_t.t)("Date")
         })
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
         flex: 1,
@@ -329,10 +334,10 @@ function DatetimePickerBody({
         onPress: () => setActiveTab("time"),
         disabled: !selectedDatetime,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
-          children: "Time"
+          children: (0, import_t.t)("Time")
         })
       })]
-    }), activeTab === "date" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.ViewSwitcher, {
+    }), activeTab === "date" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.CalendarViewSwitcher, {
       calendarData,
       displayDate,
       onSetDisplayDate,
@@ -381,10 +386,11 @@ function DatetimePicker(props) {
   const {
     defaultValue,
     value: controlledValue,
+    onChange,
     onValueChange,
     form,
     inputProps,
-    placeholder = "Select date and time",
+    placeholder = (0, import_t.t)("Select date and time"),
     minDate,
     maxDate,
     disabled,
@@ -411,6 +417,7 @@ function DatetimePicker(props) {
   const {
     resolvedForm,
     knobProps,
+    control,
     id
   } = (0, import_utils2.useFormField)({
     form,
@@ -418,6 +425,10 @@ function DatetimePicker(props) {
     compact
   });
   const resolvedValidators = (0, import_utils2.useResolvedValidators)(required, validators, label, name);
+  const areaFocusRing = (0, import_theme.ensureFocusVisibleRing)({
+    ...control.focusVisibleKnobProps,
+    outlineOffset: -2
+  });
   const [open, setOpen] = (0, import_react.useState)(false);
   const [selectedDatetime, setSelectedDatetime] = (0, import_react.useState)(() => (0, import_utils.coerceToDate)(controlledValue ?? defaultValue));
   (0, import_react.useEffect)(() => {
@@ -428,29 +439,40 @@ function DatetimePicker(props) {
     displayDate,
     setDisplayDate,
     navigateMonth
-  } = (0, import_parts.useDateNavigation)();
+  } = (0, import_parts.useDateNavigation)(selectedDatetime ?? void 0);
   const popoverRef = (0, import_react.useRef)(null);
+  const selectedDatetimeRef = (0, import_react.useRef)(selectedDatetime);
+  selectedDatetimeRef.current = selectedDatetime;
+  const openPicker = (0, import_react.useCallback)(() => {
+    const seed = selectedDatetimeRef.current;
+    if (seed) setDisplayDate(seed);
+    setOpen(true);
+  }, [setDisplayDate]);
   const closePopover = (0, import_react.useCallback)(() => {
     setOpen(false);
     popoverRef.current?.close();
   }, []);
-  const handleDatetimeSelect = (0, import_react.useCallback)(date => {
+  const handleDatetimeSelect = (0, import_react.useCallback)((date, fieldChange) => {
     if (minDate && date < minDate) return;
     if (maxDate && date > maxDate) return;
     setSelectedDatetime(date);
     setDisplayDate(date);
+    fieldChange?.(date);
+    onChange?.(date);
     onValueChange?.(date);
-  }, [minDate, maxDate, setDisplayDate, onValueChange]);
-  const handleClearDatetime = (0, import_react.useCallback)(() => {
+  }, [minDate, maxDate, setDisplayDate, onChange, onValueChange]);
+  const handleClearDatetime = (0, import_react.useCallback)(fieldChange => {
     setSelectedDatetime(null);
     setDisplayDate(/* @__PURE__ */new Date());
+    fieldChange?.(null);
+    onChange?.(null);
     onValueChange?.(null);
-  }, [setDisplayDate, onValueChange]);
+  }, [setDisplayDate, onChange, onValueChange]);
   const displayValue = (0, import_react.useMemo)(() => formatDatetimeDisplay(selectedDatetime, timeFormat, showSeconds), [selectedDatetime, timeFormat, showSeconds]);
-  const pickerContent = /* @__PURE__ */(0, import_jsx_runtime.jsx)(DatetimePickerBody, {
+  const pickerContent = fieldChange => /* @__PURE__ */(0, import_jsx_runtime.jsx)(DatetimePickerBody, {
     displayDate,
     selectedDatetime,
-    onSelectDatetime: handleDatetimeSelect,
+    onSelectDatetime: date => handleDatetimeSelect(date, fieldChange),
     onNavigateMonth: navigateMonth,
     onSetDisplayDate: setDisplayDate,
     minDate,
@@ -459,31 +481,45 @@ function DatetimePicker(props) {
     minuteStep,
     showSeconds
   });
-  const renderTrigger = (value, hasError) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+  const renderTrigger = (value, hasError, fieldChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     cursor: "pointer",
-    onPress: disabled ? void 0 : () => setOpen(true),
+    onPress: disabled ? void 0 : openPicker,
     children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
       theme: hasError ? "red" : void 0,
+      elevation: void 0,
       ...(disabled ? {
         opacity: 0.5,
         pointerEvents: "none"
       } : void 0),
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-          readOnly: true,
-          value,
-          placeholder,
-          disabled,
-          color: import_colorRamps.formCommonColors.text,
-          "aria-required": required || void 0,
-          "aria-invalid": hasError || void 0,
-          ...inputProps
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.FocusContext.Provider, {
+          ...suppressBoxFocusRing,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+            readOnly: true,
+            value,
+            placeholder,
+            disabled,
+            color: import_colorRamps.formCommonColors.text,
+            focusStyle: areaFocusRing,
+            focusVisibleStyle: areaFocusRing,
+            "aria-required": required || void 0,
+            "aria-invalid": hasError || void 0,
+            onKeyPress: disabled ? void 0 : e => {
+              const key = e?.nativeEvent?.key ?? e?.key;
+              if (key === "Enter" || key === " " || key === "Spacebar") {
+                e?.preventDefault?.();
+                openPicker();
+              }
+            },
+            ...inputProps
+          })
         })
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
         children: value ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
+          "aria-label": (0, import_t.t)("Clear date"),
           onPress: e => {
             e.stopPropagation();
-            handleClearDatetime();
+            handleClearDatetime(fieldChange);
           },
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.X, {})
@@ -495,31 +531,38 @@ function DatetimePicker(props) {
       })]
     })
   });
-  const renderPopover = (hasError, blurHandler) => {
+  const renderPopover = (hasError, blurHandler, fieldChange) => {
     if (readOnly) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Box, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-          value: displayValue,
-          readOnly: true,
-          "aria-readonly": "true",
-          "aria-required": required || void 0,
-          "aria-invalid": hasError || void 0,
-          placeholder
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.FocusContext.Provider, {
+          ...suppressBoxFocusRing,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+            value: displayValue,
+            readOnly: true,
+            "aria-readonly": "true",
+            "aria-required": required || void 0,
+            "aria-invalid": hasError || void 0,
+            focusStyle: areaFocusRing,
+            focusVisibleStyle: areaFocusRing,
+            placeholder
+          })
         })
       });
     }
     const handleOpenChange = isOpen => {
+      if (isOpen && selectedDatetimeRef.current) setDisplayDate(selectedDatetimeRef.current);
       setOpen(isOpen);
       if (!isOpen) blurHandler?.();
     };
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
       open,
       onOpenChange: handleOpenChange,
-      trigger: renderTrigger(displayValue, hasError),
+      trigger: renderTrigger(displayValue, hasError, fieldChange),
+      disabled,
       scrollable: true,
       sizing: "fill",
       fitContent: true,
-      children: pickerContent
+      children: pickerContent(fieldChange)
     });
   };
   if (skeleton) {
@@ -545,6 +588,7 @@ function DatetimePicker(props) {
       required,
       size,
       knobProps,
+      disabled,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
         size: size || knobProps.sizeToken,
         children: renderPopover(!!errorProp)
@@ -569,9 +613,10 @@ function DatetimePicker(props) {
         required,
         size,
         knobProps,
+        disabled,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
           size: size || knobProps.sizeToken,
-          children: renderPopover(!!resolvedError, (0, import_utils2.mergeFieldHandler)(field, "handleBlur", _onBlur))
+          children: renderPopover(!!resolvedError, (0, import_utils2.mergeFieldHandler)(field, "handleBlur", _onBlur), (0, import_utils2.mergeFieldHandler)(field, "handleChange"))
         })
       });
     }

package/dist/cjs/fields/DatePicker/DatetimePicker.native.js

@@ -37,11 +37,16 @@ var import_Button = require("../../Button/index.native.js");
 var import_fieldLayout = require("../../fieldLayout.native.js");
 var import_FloatingPanel = require("../../FloatingPanel/index.native.js");
 var import_colorRamps = require("../../shared/colorRamps.native.js");
+var import_t = require("../../shared/t.native.js");
 var import_TimeColumn = require("../../shared/TimeColumn.native.js");
 var import_utils2 = require("../../shared/utils.native.js");
 var import_InputParts = require("../../InputParts/index.native.js");
 var import_Skeleton = require("../../Skeleton/index.native.js");
 var import_parts = require("./parts.native.js");
+var suppressBoxFocusRing = {
+  focused: false,
+  setFocused: function setFocused(_val) {}
+};
 function parseTimeFromDate(date) {
   return {
     h: date.getHours(),
@@ -51,10 +56,8 @@ function parseTimeFromDate(date) {
 }
 function formatDatetimeDisplay(date, timeFormat, showSeconds) {
   if (!date) return "";
-  var dateStr = date.toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit"
+  var dateStr = (0, import_theme.formatAbsoluteDate)(date, {
+    year: "always"
   });
   var h = date.getHours();
   var m = date.getMinutes();
@@ -81,6 +84,7 @@ function DayGrid(param) {
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  var accentText = (0, import_theme.useAccentOnSurface)();
   var {
     animation,
     animationKey
@@ -111,6 +115,7 @@ function DayGrid(param) {
               return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
                 chromeless: true,
                 circular: true,
+                ...(0, import_parts.dayCellRadius)(knobProps),
                 flex: 1,
                 size: knobProps.sizeToken,
                 disabled: isDisabled,
@@ -137,7 +142,7 @@ function DayGrid(param) {
                   fontWeight: "bold",
                   children: day.getDate()
                 }, "text-selected") : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
-                  color: isToday ? "$accentColor" : isCurrentMonth ? import_colorRamps.formCommonColors.text : import_colorRamps.formCommonColors.muted,
+                  color: isToday ? accentText : isCurrentMonth ? import_colorRamps.formCommonColors.text : import_colorRamps.formCommonColors.muted,
                   children: day.getDate()
                 }, "text-normal")
               }, day.toISOString());
@@ -176,7 +181,7 @@ function TimeSection(param) {
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumnSeparator, {
       knobProps
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-      label: "Sec",
+      label: (0, import_t.t)("Sec"),
       values: secondValues,
       selected: s,
       onChange: function onChange(newS) {
@@ -192,7 +197,7 @@ function TimeSection(param) {
       alignItems: "flex-start",
       justifyContent: "center",
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-        label: "Hour",
+        label: (0, import_t.t)("Hour"),
         values: hours24,
         selected: h,
         onChange: function onChange(newH) {
@@ -202,7 +207,7 @@ function TimeSection(param) {
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumnSeparator, {
         knobProps
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-        label: "Min",
+        label: (0, import_t.t)("Min"),
         values: minuteValues,
         selected: m,
         onChange: function onChange(newM) {
@@ -234,7 +239,7 @@ function TimeSection(param) {
     alignItems: "flex-start",
     justifyContent: "center",
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-      label: "Hour",
+      label: (0, import_t.t)("Hour"),
       values: hours12,
       selected: display12H,
       onChange: handleHourChange,
@@ -242,7 +247,7 @@ function TimeSection(param) {
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumnSeparator, {
       knobProps
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeColumn, {
-      label: "Min",
+      label: (0, import_t.t)("Min"),
       values: minuteValues,
       selected: m,
       onChange: function onChange(newM) {
@@ -347,7 +352,7 @@ function DatetimePickerBody(param) {
           return setActiveTab("date");
         },
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
-          children: "Date"
+          children: (0, import_t.t)("Date")
         })
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
         flex: 1,
@@ -358,10 +363,10 @@ function DatetimePickerBody(param) {
         },
         disabled: !selectedDatetime,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
-          children: "Time"
+          children: (0, import_t.t)("Time")
         })
       })]
-    }), activeTab === "date" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.ViewSwitcher, {
+    }), activeTab === "date" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.CalendarViewSwitcher, {
       calendarData,
       displayDate,
       onSetDisplayDate,
@@ -416,10 +421,11 @@ function DatetimePicker(props) {
   var {
     defaultValue,
     value: controlledValue,
+    onChange,
     onValueChange,
     form,
     inputProps,
-    placeholder = "Select date and time",
+    placeholder = (0, import_t.t)("Select date and time"),
     minDate,
     maxDate,
     disabled,
@@ -446,6 +452,7 @@ function DatetimePicker(props) {
   var {
     resolvedForm,
     knobProps,
+    control,
     id
   } = (0, import_utils2.useFormField)({
     form,
@@ -453,6 +460,10 @@ function DatetimePicker(props) {
     compact
   });
   var resolvedValidators = (0, import_utils2.useResolvedValidators)(required, validators, label, name);
+  var areaFocusRing = (0, import_theme.ensureFocusVisibleRing)({
+    ...control.focusVisibleKnobProps,
+    outlineOffset: -2
+  });
   var [open, setOpen] = (0, import_react.useState)(false);
   var [selectedDatetime, setSelectedDatetime] = (0, import_react.useState)(function () {
     return (0, import_utils.coerceToDate)(controlledValue !== null && controlledValue !== void 0 ? controlledValue : defaultValue);
@@ -465,68 +476,100 @@ function DatetimePicker(props) {
     displayDate,
     setDisplayDate,
     navigateMonth
-  } = (0, import_parts.useDateNavigation)();
+  } = (0, import_parts.useDateNavigation)(selectedDatetime !== null && selectedDatetime !== void 0 ? selectedDatetime : void 0);
   var popoverRef = (0, import_react.useRef)(null);
+  var selectedDatetimeRef = (0, import_react.useRef)(selectedDatetime);
+  selectedDatetimeRef.current = selectedDatetime;
+  var openPicker = (0, import_react.useCallback)(function () {
+    var seed = selectedDatetimeRef.current;
+    if (seed) setDisplayDate(seed);
+    setOpen(true);
+  }, [setDisplayDate]);
   var closePopover = (0, import_react.useCallback)(function () {
     var _popoverRef_current;
     setOpen(false);
     (_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.close();
   }, []);
-  var handleDatetimeSelect = (0, import_react.useCallback)(function (date) {
+  var handleDatetimeSelect = (0, import_react.useCallback)(function (date, fieldChange) {
     if (minDate && date < minDate) return;
     if (maxDate && date > maxDate) return;
     setSelectedDatetime(date);
     setDisplayDate(date);
+    fieldChange === null || fieldChange === void 0 ? void 0 : fieldChange(date);
+    onChange === null || onChange === void 0 ? void 0 : onChange(date);
     onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(date);
-  }, [minDate, maxDate, setDisplayDate, onValueChange]);
-  var handleClearDatetime = (0, import_react.useCallback)(function () {
+  }, [minDate, maxDate, setDisplayDate, onChange, onValueChange]);
+  var handleClearDatetime = (0, import_react.useCallback)(function (fieldChange) {
     setSelectedDatetime(null);
     setDisplayDate(/* @__PURE__ */new Date());
+    fieldChange === null || fieldChange === void 0 ? void 0 : fieldChange(null);
+    onChange === null || onChange === void 0 ? void 0 : onChange(null);
     onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(null);
-  }, [setDisplayDate, onValueChange]);
+  }, [setDisplayDate, onChange, onValueChange]);
   var displayValue = (0, import_react.useMemo)(function () {
     return formatDatetimeDisplay(selectedDatetime, timeFormat, showSeconds);
   }, [selectedDatetime, timeFormat, showSeconds]);
-  var pickerContent = /* @__PURE__ */(0, import_jsx_runtime.jsx)(DatetimePickerBody, {
-    displayDate,
-    selectedDatetime,
-    onSelectDatetime: handleDatetimeSelect,
-    onNavigateMonth: navigateMonth,
-    onSetDisplayDate: setDisplayDate,
-    minDate,
-    maxDate,
-    timeFormat,
-    minuteStep,
-    showSeconds
-  });
-  var renderTrigger = function renderTrigger2(value, hasError) {
+  var pickerContent = function pickerContent2(fieldChange) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DatetimePickerBody, {
+      displayDate,
+      selectedDatetime,
+      onSelectDatetime: function onSelectDatetime(date) {
+        return handleDatetimeSelect(date, fieldChange);
+      },
+      onNavigateMonth: navigateMonth,
+      onSetDisplayDate: setDisplayDate,
+      minDate,
+      maxDate,
+      timeFormat,
+      minuteStep,
+      showSeconds
+    });
+  };
+  var renderTrigger = function renderTrigger2(value, hasError, fieldChange) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       cursor: "pointer",
-      onPress: disabled ? void 0 : function () {
-        return setOpen(true);
-      },
+      onPress: disabled ? void 0 : openPicker,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
         theme: hasError ? "red" : void 0,
+        // Elevation is an overlay recipe: it belongs on the open panel, never
+        // on the closed text-field trigger.
+        elevation: void 0,
         ...(disabled ? {
           opacity: 0.5,
           pointerEvents: "none"
         } : void 0),
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-            readOnly: true,
-            value,
-            placeholder,
-            disabled,
-            color: import_colorRamps.formCommonColors.text,
-            "aria-required": required || void 0,
-            "aria-invalid": hasError || void 0,
-            ...inputProps
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.FocusContext.Provider, {
+            ...suppressBoxFocusRing,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+              readOnly: true,
+              value,
+              placeholder,
+              disabled,
+              color: import_colorRamps.formCommonColors.text,
+              focusStyle: areaFocusRing,
+              focusVisibleStyle: areaFocusRing,
+              "aria-required": required || void 0,
+              "aria-invalid": hasError || void 0,
+              onKeyPress: disabled ? void 0 : function (e) {
+                var _ref;
+                var _e_nativeEvent;
+                var key = (_ref = e === null || e === void 0 ? void 0 : (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.key) !== null && _ref !== void 0 ? _ref : e === null || e === void 0 ? void 0 : e.key;
+                if (key === "Enter" || key === " " || key === "Spacebar") {
+                  var _e_preventDefault;
+                  e === null || e === void 0 ? void 0 : (_e_preventDefault = e.preventDefault) === null || _e_preventDefault === void 0 ? void 0 : _e_preventDefault.call(e);
+                  openPicker();
+                }
+              },
+              ...inputProps
+            })
           })
         }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
           children: value ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
+            "aria-label": (0, import_t.t)("Clear date"),
             onPress: function onPress(e) {
               e.stopPropagation();
-              handleClearDatetime();
+              handleClearDatetime(fieldChange);
             },
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
               children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.X, {})
@@ -539,31 +582,38 @@ function DatetimePicker(props) {
       })
     });
   };
-  var renderPopover = function renderPopover2(hasError, blurHandler) {
+  var renderPopover = function renderPopover2(hasError, blurHandler, fieldChange) {
     if (readOnly) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Box, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-          value: displayValue,
-          readOnly: true,
-          "aria-readonly": "true",
-          "aria-required": required || void 0,
-          "aria-invalid": hasError || void 0,
-          placeholder
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.FocusContext.Provider, {
+          ...suppressBoxFocusRing,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+            value: displayValue,
+            readOnly: true,
+            "aria-readonly": "true",
+            "aria-required": required || void 0,
+            "aria-invalid": hasError || void 0,
+            focusStyle: areaFocusRing,
+            focusVisibleStyle: areaFocusRing,
+            placeholder
+          })
         })
       });
     }
     var handleOpenChange = function handleOpenChange2(isOpen) {
+      if (isOpen && selectedDatetimeRef.current) setDisplayDate(selectedDatetimeRef.current);
       setOpen(isOpen);
       if (!isOpen) blurHandler === null || blurHandler === void 0 ? void 0 : blurHandler();
     };
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
       open,
       onOpenChange: handleOpenChange,
-      trigger: renderTrigger(displayValue, hasError),
+      trigger: renderTrigger(displayValue, hasError, fieldChange),
+      disabled,
       scrollable: true,
       sizing: "fill",
       fitContent: true,
-      children: pickerContent
+      children: pickerContent(fieldChange)
     });
   };
   if (skeleton) {
@@ -589,6 +639,9 @@ function DatetimePicker(props) {
       required,
       size,
       knobProps,
+      // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
+      // the sibling label/helper readable) — it needs the disabled state.
+      disabled,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
         size: size || knobProps.sizeToken,
         children: renderPopover(!!errorProp)
@@ -613,9 +666,11 @@ function DatetimePicker(props) {
         required,
         size,
         knobProps,
+        // LC-40: see standalone branch — FieldLayout carries dimWhole.
+        disabled,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
           size: size || knobProps.sizeToken,
-          children: renderPopover(!!resolvedError, (0, import_utils2.mergeFieldHandler)(field, "handleBlur", _onBlur))
+          children: renderPopover(!!resolvedError, (0, import_utils2.mergeFieldHandler)(field, "handleBlur", _onBlur), (0, import_utils2.mergeFieldHandler)(field, "handleChange"))
         })
       });
     }