@multiplatform.one/forms 7.6.3 → 7.7.1

package/dist/cjs/fields/DatePicker/index.cjs

@@ -22,285 +22,12 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var DatePicker_exports = {};
 __export(DatePicker_exports, {
-  Calendar: () => import_Calendar.Calendar,
-  DatePicker: () => DatePicker,
-  DateRangePicker: () => import_DateRangePicker.DateRangePicker,
-  DatetimePicker: () => import_DatetimePicker.DatetimePicker,
-  MonthPicker: () => import_MonthPicker.MonthPicker,
-  MultiDatePicker: () => import_MultiDatePicker.MultiDatePicker
+  Calendar: () => import_catalog.Calendar,
+  DatePicker: () => import_catalog.DatePicker,
+  DateRangePicker: () => import_catalog.DateRangePicker,
+  DatetimePicker: () => import_catalog.DatetimePicker,
+  MonthPicker: () => import_catalog.MonthPicker,
+  MultiDatePicker: () => import_catalog.MultiDatePicker
 });
 module.exports = __toCommonJS(DatePicker_exports);
-var import_react = require("react");
-var import_fieldValueSync = require("./fieldValueSync.cjs");
-var import_utils = require("./utils.cjs");
-var import_tamagui = require("tamagui");
-var import_fieldLayout = require("../../fieldLayout.cjs");
-var import_t = require("../../shared/t.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_MultiDatePicker = require("./MultiDatePicker.cjs");
-var import_DateRangePicker = require("./DateRangePicker.cjs");
-var import_Calendar = require("./Calendar.cjs");
-var import_MonthPicker = require("./MonthPicker.cjs");
-var import_DatetimePicker = require("./DatetimePicker.cjs");
-var import_jsx_runtime = require("react/jsx-runtime");
-function DayGrid({
-  calendarData,
-  selectedDate,
-  onSelectDate,
-  minDate,
-  maxDate
-}) {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.CalendarDays, {
-    calendarData,
-    minDate,
-    maxDate,
-    isSelected: day => (0, import_parts.isSameDay)(selectedDate, day),
-    onSelect: onSelectDate,
-    onToday: () => onSelectDate(/* @__PURE__ */new Date())
-  });
-}
-function CalendarBody({
-  displayDate,
-  selectedDate,
-  onSelectDate,
-  onNavigateMonth,
-  onSetDisplayDate,
-  minDate,
-  maxDate
-}) {
-  const [viewMode, setViewMode] = (0, import_react.useState)("day");
-  const calendarData = (0, import_parts.useCalendarData)(displayDate);
-  const [yearPageStart, setYearPageStart] = (0, import_react.useState)(() => calendarData.year - calendarData.year % import_parts.yearPageSize);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.CalendarViewSwitcher, {
-    calendarData,
-    displayDate,
-    onSetDisplayDate,
-    viewMode,
-    setViewMode,
-    yearPageStart,
-    setYearPageStart,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_parts.CalendarPanelFrame, {
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.CalendarHeader, {
-        year: calendarData.year,
-        monthName: calendarData.monthName,
-        onPrevMonth: () => onNavigateMonth("prev"),
-        onNextMonth: () => onNavigateMonth("next"),
-        onYearPress: () => {
-          setYearPageStart(calendarData.year - calendarData.year % import_parts.yearPageSize);
-          setViewMode("year");
-        },
-        onMonthPress: () => setViewMode("month")
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(DayGrid, {
-        calendarData,
-        selectedDate,
-        onSelectDate,
-        minDate,
-        maxDate
-      })]
-    })
-  });
-}
-function DatePicker(props) {
-  const {
-    defaultValue,
-    value: controlledValue,
-    onChange,
-    onValueChange,
-    form,
-    inputProps: _inputProps,
-    placeholder = (0, import_t.t)("Select date"),
-    format: _format = "MM/DD/YYYY",
-    minDate,
-    maxDate,
-    disabled,
-    mode,
-    name,
-    preserveValue,
-    validators,
-    label,
-    labelProps,
-    error: errorProp,
-    helperText,
-    required,
-    size,
-    readOnly,
-    onBlur,
-    skeleton,
-    compact,
-    id: idProp,
-    ..._restProps
-  } = (0, import_tamagui.useProps)(props);
-  const {
-    resolvedForm,
-    knobProps,
-    id
-  } = (0, import_utils2.useFormField)({
-    form,
-    id: idProp,
-    compact
-  });
-  const resolvedValidators = (0, import_utils2.useResolvedValidators)(required, validators, label, name);
-  const hasLabel = Boolean(label);
-  const [open, setOpen] = (0, import_react.useState)(false);
-  const [selectedDate, setSelectedDate] = (0, import_react.useState)(() => (0, import_utils.coerceToDate)(controlledValue ?? defaultValue));
-  (0, import_react.useEffect)(() => {
-    if (controlledValue === void 0) return;
-    setSelectedDate((0, import_utils.coerceToDate)(controlledValue));
-  }, [controlledValue]);
-  const {
-    displayDate,
-    setDisplayDate,
-    navigateMonth
-  } = (0, import_parts.useDateNavigation)(selectedDate ?? void 0);
-  const popoverRef = (0, import_react.useRef)(null);
-  const closePopover = (0, import_react.useCallback)(() => {
-    setOpen(false);
-    popoverRef.current?.close();
-  }, []);
-  (0, import_react.useEffect)(() => {
-    if (selectedDate) closePopover();
-  }, [selectedDate, closePopover]);
-  const handleDateSelect = (0, import_react.useCallback)((date, fieldChange) => {
-    if (minDate && date < minDate) return;
-    if (maxDate && date > maxDate) return;
-    setSelectedDate(date);
-    setDisplayDate(date);
-    fieldChange?.(date);
-    onChange?.(date);
-    onValueChange?.(date);
-    closePopover();
-  }, [minDate, maxDate, setDisplayDate, closePopover, onChange, onValueChange]);
-  const handleClearDate = (0, import_react.useCallback)(fieldChange => {
-    setSelectedDate(null);
-    setDisplayDate(/* @__PURE__ */new Date());
-    fieldChange?.(null);
-    onChange?.(null);
-    onValueChange?.(null);
-  }, [setDisplayDate, onChange, onValueChange]);
-  const calendarContent = fieldChange => /* @__PURE__ */(0, import_jsx_runtime.jsx)(CalendarBody, {
-    displayDate,
-    selectedDate,
-    onSelectDate: date => handleDateSelect(date, fieldChange),
-    onNavigateMonth: navigateMonth,
-    onSetDisplayDate: setDisplayDate,
-    minDate,
-    maxDate
-  });
-  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: (0, import_parts.formatDateDisplay)(selectedDate),
-          readOnly: true,
-          "aria-readonly": "true",
-          "aria-required": required || void 0,
-          "aria-invalid": hasError || void 0,
-          placeholder
-        })
-      });
-    }
-    const handleOpenChange = isOpen => {
-      if (isOpen && selectedDate) setDisplayDate(selectedDate);
-      setOpen(isOpen);
-      if (!isOpen) {
-        blurHandler?.();
-      }
-    };
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.DatePickerPopoverShell, {
-      open,
-      onOpenChange: handleOpenChange,
-      disabled,
-      popoverRef,
-      triggerA11y: {
-        label: typeof label === "string" && label || (0, import_t.t)("Date"),
-        value: (0, import_parts.formatDateDisplay)(selectedDate) || placeholder,
-        hint: helperText
-      },
-      trigger: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.DatePickerInputTrigger, {
-        value: (0, import_parts.formatDateDisplay)(selectedDate),
-        placeholder,
-        disabled,
-        open,
-        onReset: () => handleClearDate(fieldChange),
-        onButtonPress: () => {
-          if (selectedDate) setDisplayDate(selectedDate);
-          setOpen(true);
-        },
-        error: !!hasError,
-        id,
-        "aria-label": hasLabel ? void 0 : (0, import_t.t)("Date"),
-        "aria-describedby": [helperText && id ? `${id}-description` : void 0, hasError && id ? `${id}-error` : void 0].filter(Boolean).join(" ") || void 0,
-        "aria-required": required || void 0,
-        "aria-invalid": hasError || void 0
-      }),
-      clearValue: (0, import_parts.formatDateDisplay)(selectedDate),
-      onClear: () => handleClearDate(fieldChange),
-      children: calendarContent(fieldChange)
-    });
-  };
-  if (skeleton) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
-      id,
-      label,
-      size,
-      knobProps,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-        variant: "rounded",
-        width: "100%",
-        height: knobProps.sizeToken
-      })
-    });
-  }
-  if (!resolvedForm || !name) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
-      id,
-      label,
-      labelProps,
-      error: errorProp,
-      helperText,
-      required,
-      size,
-      knobProps,
-      onBlur,
-      disabled,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
-        size: size || knobProps.sizeToken,
-        children: renderPopover(!!errorProp)
-      })
-    });
-  }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
-    defaultValue,
-    form: resolvedForm,
-    mode,
-    name,
-    preserveValue,
-    validators: resolvedValidators,
-    children: field => {
-      const resolvedError = (0, import_utils2.getFieldError)(field, errorProp);
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldValueSync.DatePickerFieldValueSync, {
-          value: field.state.value,
-          onSync: setSelectedDate
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
-          id,
-          label,
-          labelProps,
-          error: resolvedError,
-          helperText,
-          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), (0, import_utils2.mergeFieldHandler)(field, "handleChange"))
-          })
-        })]
-      });
-    }
-  });
-}
+var import_catalog = require("./catalog.cjs");

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

@@ -22,8 +22,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
-var DatePicker_exports = {};
-__export(DatePicker_exports, {
+var index_native_exports = {};
+__export(index_native_exports, {
   Calendar: () => import_Calendar.Calendar,
   DatePicker: () => DatePicker,
   DateRangePicker: () => import_DateRangePicker.DateRangePicker,
@@ -31,104 +31,39 @@ __export(DatePicker_exports, {
   MonthPicker: () => import_MonthPicker.MonthPicker,
   MultiDatePicker: () => import_MultiDatePicker.MultiDatePicker
 });
-module.exports = __toCommonJS(DatePicker_exports);
+module.exports = __toCommonJS(index_native_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_fieldValueSync = require("./fieldValueSync.native.js");
-var import_utils = require("./utils.native.js");
+var import_react_native = require("react-native");
 var import_tamagui = require("tamagui");
 var import_fieldLayout = require("../../fieldLayout.native.js");
+var import_InputParts = require("../../InputParts");
+var import_Skeleton = require("../../Skeleton");
 var import_t = require("../../shared/t.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_utils = require("../../shared/utils.native.js");
+var import_OsDateTimeSheet = require("../nativeDateTime/OsDateTimeSheet.native.js");
+var import_catalog = require("./catalog.native.js");
+var import_fieldValueSync = require("./fieldValueSync.native.js");
 var import_parts = require("./parts.native.js");
+var import_utils2 = require("./utils.native.js");
 var import_MultiDatePicker = require("./MultiDatePicker.native.js");
 var import_DateRangePicker = require("./DateRangePicker.native.js");
 var import_Calendar = require("./Calendar.native.js");
 var import_MonthPicker = require("./MonthPicker.native.js");
 var import_DatetimePicker = require("./DatetimePicker.native.js");
-function DayGrid(param) {
-  var {
-    calendarData,
-    selectedDate,
-    onSelectDate,
-    minDate,
-    maxDate
-  } = param;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.CalendarDays, {
-    calendarData,
-    minDate,
-    maxDate,
-    isSelected: function isSelected(day) {
-      return (0, import_parts.isSameDay)(selectedDate, day);
-    },
-    onSelect: onSelectDate,
-    onToday: function onToday() {
-      return onSelectDate(/* @__PURE__ */new Date());
-    }
-  });
-}
-function CalendarBody(param) {
-  var {
-    displayDate,
-    selectedDate,
-    onSelectDate,
-    onNavigateMonth,
-    onSetDisplayDate,
-    minDate,
-    maxDate
-  } = param;
-  var [viewMode, setViewMode] = (0, import_react.useState)("day");
-  var calendarData = (0, import_parts.useCalendarData)(displayDate);
-  var [yearPageStart, setYearPageStart] = (0, import_react.useState)(function () {
-    return calendarData.year - calendarData.year % import_parts.yearPageSize;
-  });
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.CalendarViewSwitcher, {
-    calendarData,
-    displayDate,
-    onSetDisplayDate,
-    viewMode,
-    setViewMode,
-    yearPageStart,
-    setYearPageStart,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_parts.CalendarPanelFrame, {
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.CalendarHeader, {
-        year: calendarData.year,
-        monthName: calendarData.monthName,
-        onPrevMonth: function onPrevMonth() {
-          return onNavigateMonth("prev");
-        },
-        onNextMonth: function onNextMonth() {
-          return onNavigateMonth("next");
-        },
-        onYearPress: function onYearPress() {
-          setYearPageStart(calendarData.year - calendarData.year % import_parts.yearPageSize);
-          setViewMode("year");
-        },
-        onMonthPress: function onMonthPress() {
-          return setViewMode("month");
-        }
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(DayGrid, {
-        calendarData,
-        selectedDate,
-        onSelectDate,
-        minDate,
-        maxDate
-      })]
-    })
-  });
-}
 function DatePicker(props) {
+  if (props.native === false) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_catalog.DatePicker, {
+      ...props
+    });
+  }
   var {
     defaultValue,
     value: controlledValue,
     onChange,
     onValueChange,
     form,
-    inputProps: _inputProps,
     placeholder = (0, import_t.t)("Select date"),
-    format: _format = "MM/DD/YYYY",
     minDate,
     maxDate,
     disabled,
@@ -146,73 +81,35 @@ function DatePicker(props) {
     onBlur,
     skeleton,
     compact,
-    id: idProp,
-    ..._restProps
+    id: idProp
   } = (0, import_tamagui.useProps)(props);
   var {
     resolvedForm,
     knobProps,
     id
-  } = (0, import_utils2.useFormField)({
+  } = (0, import_utils.useFormField)({
     form,
     id: idProp,
     compact
   });
-  var resolvedValidators = (0, import_utils2.useResolvedValidators)(required, validators, label, name);
+  var resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
   var hasLabel = Boolean(label);
   var [open, setOpen] = (0, import_react.useState)(false);
   var [selectedDate, setSelectedDate] = (0, import_react.useState)(function () {
-    return (0, import_utils.coerceToDate)(controlledValue !== null && controlledValue !== void 0 ? controlledValue : defaultValue);
+    return (0, import_utils2.coerceToDate)(controlledValue !== null && controlledValue !== void 0 ? controlledValue : defaultValue);
   });
   (0, import_react.useEffect)(function () {
     if (controlledValue === void 0) return;
-    setSelectedDate((0, import_utils.coerceToDate)(controlledValue));
+    setSelectedDate((0, import_utils2.coerceToDate)(controlledValue));
   }, [controlledValue]);
-  var {
-    displayDate,
-    setDisplayDate,
-    navigateMonth
-  } = (0, import_parts.useDateNavigation)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : void 0);
-  var popoverRef = (0, import_react.useRef)(null);
-  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();
-  }, []);
-  (0, import_react.useEffect)(function () {
-    if (selectedDate) closePopover();
-  }, [selectedDate, closePopover]);
-  var handleDateSelect = (0, import_react.useCallback)(function (date, fieldChange) {
-    if (minDate && date < minDate) return;
-    if (maxDate && date > maxDate) return;
+  var commit = (0, import_react.useCallback)(function (date, fieldChange) {
     setSelectedDate(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);
-    closePopover();
-  }, [minDate, maxDate, setDisplayDate, closePopover, onChange, onValueChange]);
-  var handleClearDate = (0, import_react.useCallback)(function (fieldChange) {
-    setSelectedDate(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, onChange, onValueChange]);
-  var calendarContent = function calendarContent2(fieldChange) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CalendarBody, {
-      displayDate,
-      selectedDate,
-      onSelectDate: function onSelectDate(date) {
-        return handleDateSelect(date, fieldChange);
-      },
-      onNavigateMonth: navigateMonth,
-      onSetDisplayDate: setDisplayDate,
-      minDate,
-      maxDate
-    });
-  };
-  var renderPopover = function renderPopover2(hasError, blurHandler, fieldChange) {
+    setOpen(false);
+  }, [onChange, onValueChange]);
+  var renderControl = function renderControl2(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, {
@@ -225,56 +122,47 @@ function DatePicker(props) {
         })
       });
     }
-    var handleOpenChange = function handleOpenChange2(isOpen) {
-      if (isOpen && selectedDate) setDisplayDate(selectedDate);
-      setOpen(isOpen);
-      if (!isOpen) {
-        blurHandler === null || blurHandler === void 0 ? void 0 : blurHandler();
-      }
-    };
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.DatePickerPopoverShell, {
-      open,
-      onOpenChange: handleOpenChange,
-      // Disabling only the trigger is what LET the panel open: the trigger
-      // goes `pointerEvents:none`, so the click falls through to
-      // FloatingPanel's own reference wrapper, which opens on click unless
-      // it is told the field is disabled (SB-M-614). DatetimePicker and
-      // TimePicker already pass it.
-      disabled,
-      popoverRef,
-      // "Date, Jul 15 2026": VO gets the field name + current value on the
-      // native trigger (the web trigger announces via aria on the Area).
-      triggerA11y: {
-        label: typeof label === "string" && label || (0, import_t.t)("Date"),
-        value: (0, import_parts.formatDateDisplay)(selectedDate) || placeholder,
-        hint: helperText
-      },
-      trigger: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.DatePickerInputTrigger, {
-        value: (0, import_parts.formatDateDisplay)(selectedDate),
-        placeholder,
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
+        onPress: function onPress() {
+          return !disabled && setOpen(true);
+        },
         disabled,
-        open,
-        onReset: function onReset() {
-          return handleClearDate(fieldChange);
+        accessibilityRole: "button",
+        accessibilityLabel: hasLabel ? void 0 : (0, import_t.t)("Date"),
+        style: {
+          width: "100%"
         },
-        onButtonPress: function onButtonPress() {
-          if (selectedDate) setDisplayDate(selectedDate);
-          setOpen(true);
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.DatePickerInputTrigger, {
+          value: (0, import_parts.formatDateDisplay)(selectedDate),
+          placeholder,
+          disabled,
+          open,
+          onReset: function onReset() {
+            return commit(null, fieldChange);
+          },
+          onButtonPress: function onButtonPress() {},
+          error: !!hasError,
+          id,
+          "aria-label": hasLabel ? void 0 : (0, import_t.t)("Date"),
+          "aria-required": required || void 0,
+          "aria-invalid": hasError || void 0
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_OsDateTimeSheet.OsDateTimeSheet, {
+        open,
+        value: selectedDate !== null && selectedDate !== void 0 ? selectedDate : /* @__PURE__ */new Date(),
+        mode: "date",
+        minDate,
+        maxDate,
+        onCancel: function onCancel() {
+          setOpen(false);
+          blurHandler === null || blurHandler === void 0 ? void 0 : blurHandler();
         },
-        error: !!hasError,
-        id,
-        // Labelled: FieldLayout's Label wires `aria-labelledby` onto this
-        // id itself — naming it here too doubles the spoken name.
-        "aria-label": hasLabel ? void 0 : (0, import_t.t)("Date"),
-        "aria-describedby": [helperText && id ? `${id}-description` : void 0, hasError && id ? `${id}-error` : void 0].filter(Boolean).join(" ") || void 0,
-        "aria-required": required || void 0,
-        "aria-invalid": hasError || void 0
-      }),
-      clearValue: (0, import_parts.formatDateDisplay)(selectedDate),
-      onClear: function onClear() {
-        return handleClearDate(fieldChange);
-      },
-      children: calendarContent(fieldChange)
+        onConfirm: function onConfirm(date) {
+          commit(date, fieldChange);
+          blurHandler === null || blurHandler === void 0 ? void 0 : blurHandler();
+        }
+      })]
     });
   };
   if (skeleton) {
@@ -301,12 +189,10 @@ function DatePicker(props) {
       size,
       knobProps,
       onBlur,
-      // 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)
+        children: renderControl(!!errorProp)
       })
     });
   }
@@ -318,13 +204,9 @@ function DatePicker(props) {
     preserveValue,
     validators: resolvedValidators,
     children: function children(field) {
-      var resolvedError = (0, import_utils2.getFieldError)(field, errorProp);
+      var resolvedError = (0, import_utils.getFieldError)(field, errorProp);
       return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [
-        /* Form branch displays from `selectedDate` — keep it synced to
-        the live field value (late seeds / programmatic updates). */
-        /* @__PURE__ */
-        (0, import_jsx_runtime.jsx)(import_fieldValueSync.DatePickerFieldValueSync, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldValueSync.DatePickerFieldValueSync, {
           value: field.state.value,
           onSync: setSelectedDate
         }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
@@ -336,11 +218,10 @@ function DatePicker(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), (0, import_utils2.mergeFieldHandler)(field, "handleChange"))
+            children: renderControl(!!resolvedError, (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur), (0, import_utils.mergeFieldHandler)(field, "handleChange"))
           })
         })]
       });