@multiplatform.one/forms 7.6.2 → 7.7.0

package/dist/jsx/fields/DatePicker/index.mjs

@@ -1,276 +1,3 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { DatePickerFieldValueSync } from "./fieldValueSync.mjs";
-import { coerceToDate } from "./utils.mjs";
-import { useProps } from "tamagui";
-import { Field, FieldLayout } from "../../fieldLayout.mjs";
-import { t } from "../../shared/t.mjs";
-import { getFieldError, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
-import { Input as InputParts } from "../../InputParts/index.mjs";
-import { Skeleton } from "../../Skeleton/index.mjs";
-import { CalendarDays, CalendarHeader, CalendarPanelFrame, DatePickerInputTrigger, DatePickerPopoverShell, CalendarViewSwitcher, formatDateDisplay, isSameDay, useCalendarData, useDateNavigation, yearPageSize } from "./parts.mjs";
-import { MultiDatePicker } from "./MultiDatePicker.mjs";
-import { DateRangePicker } from "./DateRangePicker.mjs";
-import { Calendar } from "./Calendar.mjs";
-import { MonthPicker } from "./MonthPicker.mjs";
-import { DatetimePicker } from "./DatetimePicker.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function DayGrid({
-  calendarData,
-  selectedDate,
-  onSelectDate,
-  minDate,
-  maxDate
-}) {
-  return /* @__PURE__ */jsx(CalendarDays, {
-    calendarData,
-    minDate,
-    maxDate,
-    isSelected: day => isSameDay(selectedDate, day),
-    onSelect: onSelectDate,
-    onToday: () => onSelectDate(/* @__PURE__ */new Date())
-  });
-}
-function CalendarBody({
-  displayDate,
-  selectedDate,
-  onSelectDate,
-  onNavigateMonth,
-  onSetDisplayDate,
-  minDate,
-  maxDate
-}) {
-  const [viewMode, setViewMode] = useState("day");
-  const calendarData = useCalendarData(displayDate);
-  const [yearPageStart, setYearPageStart] = useState(() => calendarData.year - calendarData.year % yearPageSize);
-  return /* @__PURE__ */jsx(CalendarViewSwitcher, {
-    calendarData,
-    displayDate,
-    onSetDisplayDate,
-    viewMode,
-    setViewMode,
-    yearPageStart,
-    setYearPageStart,
-    children: /* @__PURE__ */jsxs(CalendarPanelFrame, {
-      children: [/* @__PURE__ */jsx(CalendarHeader, {
-        year: calendarData.year,
-        monthName: calendarData.monthName,
-        onPrevMonth: () => onNavigateMonth("prev"),
-        onNextMonth: () => onNavigateMonth("next"),
-        onYearPress: () => {
-          setYearPageStart(calendarData.year - calendarData.year % yearPageSize);
-          setViewMode("year");
-        },
-        onMonthPress: () => setViewMode("month")
-      }), /* @__PURE__ */jsx(DayGrid, {
-        calendarData,
-        selectedDate,
-        onSelectDate,
-        minDate,
-        maxDate
-      })]
-    })
-  });
-}
-function DatePicker(props) {
-  const {
-    defaultValue,
-    value: controlledValue,
-    onChange,
-    onValueChange,
-    form,
-    inputProps: _inputProps,
-    placeholder = 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
-  } = useProps(props);
-  const {
-    resolvedForm,
-    knobProps,
-    id
-  } = useFormField({
-    form,
-    id: idProp,
-    compact
-  });
-  const resolvedValidators = useResolvedValidators(required, validators, label, name);
-  const hasLabel = Boolean(label);
-  const [open, setOpen] = useState(false);
-  const [selectedDate, setSelectedDate] = useState(() => coerceToDate(controlledValue ?? defaultValue));
-  useEffect(() => {
-    if (controlledValue === void 0) return;
-    setSelectedDate(coerceToDate(controlledValue));
-  }, [controlledValue]);
-  const {
-    displayDate,
-    setDisplayDate,
-    navigateMonth
-  } = useDateNavigation(selectedDate ?? void 0);
-  const popoverRef = useRef(null);
-  const closePopover = useCallback(() => {
-    setOpen(false);
-    popoverRef.current?.close();
-  }, []);
-  useEffect(() => {
-    if (selectedDate) closePopover();
-  }, [selectedDate, closePopover]);
-  const handleDateSelect = 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 = useCallback(fieldChange => {
-    setSelectedDate(null);
-    setDisplayDate(/* @__PURE__ */new Date());
-    fieldChange?.(null);
-    onChange?.(null);
-    onValueChange?.(null);
-  }, [setDisplayDate, onChange, onValueChange]);
-  const calendarContent = fieldChange => /* @__PURE__ */jsx(CalendarBody, {
-    displayDate,
-    selectedDate,
-    onSelectDate: date => handleDateSelect(date, fieldChange),
-    onNavigateMonth: navigateMonth,
-    onSetDisplayDate: setDisplayDate,
-    minDate,
-    maxDate
-  });
-  const renderPopover = (hasError, blurHandler, fieldChange) => {
-    if (readOnly) {
-      return /* @__PURE__ */jsx(InputParts.Box, {
-        children: /* @__PURE__ */jsx(InputParts.Area, {
-          value: 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__ */jsx(DatePickerPopoverShell, {
-      open,
-      onOpenChange: handleOpenChange,
-      disabled,
-      popoverRef,
-      triggerA11y: {
-        label: typeof label === "string" && label || t("Date"),
-        value: formatDateDisplay(selectedDate) || placeholder,
-        hint: helperText
-      },
-      trigger: /* @__PURE__ */jsx(DatePickerInputTrigger, {
-        value: formatDateDisplay(selectedDate),
-        placeholder,
-        disabled,
-        open,
-        onReset: () => handleClearDate(fieldChange),
-        onButtonPress: () => {
-          if (selectedDate) setDisplayDate(selectedDate);
-          setOpen(true);
-        },
-        error: !!hasError,
-        id,
-        "aria-label": hasLabel ? void 0 : 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: formatDateDisplay(selectedDate),
-      onClear: () => handleClearDate(fieldChange),
-      children: calendarContent(fieldChange)
-    });
-  };
-  if (skeleton) {
-    return /* @__PURE__ */jsx(FieldLayout, {
-      id,
-      label,
-      size,
-      knobProps,
-      children: /* @__PURE__ */jsx(Skeleton, {
-        variant: "rounded",
-        width: "100%",
-        height: knobProps.sizeToken
-      })
-    });
-  }
-  if (!resolvedForm || !name) {
-    return /* @__PURE__ */jsx(FieldLayout, {
-      id,
-      label,
-      labelProps,
-      error: errorProp,
-      helperText,
-      required,
-      size,
-      knobProps,
-      onBlur,
-      disabled,
-      children: /* @__PURE__ */jsx(InputParts, {
-        size: size || knobProps.sizeToken,
-        children: renderPopover(!!errorProp)
-      })
-    });
-  }
-  return /* @__PURE__ */jsx(Field, {
-    defaultValue,
-    form: resolvedForm,
-    mode,
-    name,
-    preserveValue,
-    validators: resolvedValidators,
-    children: field => {
-      const resolvedError = getFieldError(field, errorProp);
-      return /* @__PURE__ */jsxs(Fragment, {
-        children: [/* @__PURE__ */jsx(DatePickerFieldValueSync, {
-          value: field.state.value,
-          onSync: setSelectedDate
-        }), /* @__PURE__ */jsx(FieldLayout, {
-          id,
-          label,
-          labelProps,
-          error: resolvedError,
-          helperText,
-          required,
-          size,
-          knobProps,
-          disabled,
-          children: /* @__PURE__ */jsx(InputParts, {
-            size: size || knobProps.sizeToken,
-            children: renderPopover(!!resolvedError, mergeFieldHandler(field, "handleBlur", onBlur), mergeFieldHandler(field, "handleChange"))
-          })
-        })]
-      });
-    }
-  });
-}
+import { Calendar, DatePicker, DateRangePicker, DatetimePicker, MonthPicker, MultiDatePicker } from "./catalog.mjs";
 export { Calendar, DatePicker, DateRangePicker, DatetimePicker, MonthPicker, MultiDatePicker };
 //# sourceMappingURL=index.mjs.map

package/dist/jsx/fields/DatePicker/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useEffect","useRef","useState","DatePickerFieldValueSync","coerceToDate","useProps","Field","FieldLayout","t","getFieldError","mergeFieldHandler","useFormField","useResolvedValidators","Input","InputParts","Skeleton","CalendarDays","CalendarHeader","CalendarPanelFrame","DatePickerInputTrigger","DatePickerPopoverShell","CalendarViewSwitcher","formatDateDisplay","isSameDay","useCalendarData","useDateNavigation","yearPageSize","MultiDatePicker","DateRangePicker","Calendar","MonthPicker","DatetimePicker","Fragment","jsx","jsxs","DayGrid","calendarData","selectedDate","onSelectDate","minDate","maxDate","isSelected","day","onSelect","onToday","Date","CalendarBody","displayDate","onNavigateMonth","onSetDisplayDate","viewMode","setViewMode","yearPageStart","setYearPageStart","year","children","monthName","onPrevMonth","onNextMonth","onYearPress","onMonthPress","DatePicker","props","defaultValue","value","controlledValue","onChange","onValueChange","form","inputProps","_inputProps","placeholder","format","_format","disabled","mode","name","preserveValue","validators","label","labelProps","error","errorProp","helperText","required","size","readOnly","onBlur","skeleton","compact","id","idProp","_restProps","resolvedForm","knobProps","resolvedValidators","hasLabel","Boolean","open","setOpen","setSelectedDate","setDisplayDate","navigateMonth","popoverRef","closePopover","current","close","handleDateSelect","date","fieldChange","handleClearDate","calendarContent","renderPopover","hasError","blurHandler","Box","Area","handleOpenChange","isOpen","onOpenChange","triggerA11y","hint","trigger","onReset","onButtonPress","filter","join","clearValue","onClear","variant","width","height","sizeToken","field","resolvedError","state","onSync"],"sources":["../../../../src/fields/DatePicker/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Calendar","DatePicker","DateRangePicker","DatetimePicker","MonthPicker","MultiDatePicker"],"sources":["../../../../src/fields/DatePicker/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SACEA,QAAA,EACAC,UAAA,EACAC,eAAA,EACAC,cAAA,EACAC,WAAA,EACAC,eAAA,QACK","ignoreList":[]}

package/dist/jsx/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_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_t = require("../../shared/t.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"))
           })
         })]
       });