@multiplatform.one/forms 7.6.2 → 7.7.0

package/dist/cjs/fields/DatePicker/catalog.cjs

@@ -0,0 +1,306 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var catalog_exports = {};
+__export(catalog_exports, {
+  Calendar: () => import_Calendar.Calendar,
+  DatePicker: () => DatePicker,
+  DateRangePicker: () => import_DateRangePicker.DateRangePicker,
+  DatetimePicker: () => import_DatetimePicker.DatetimePicker,
+  MonthPicker: () => import_MonthPicker.MonthPicker,
+  MultiDatePicker: () => import_MultiDatePicker.MultiDatePicker
+});
+module.exports = __toCommonJS(catalog_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"))
+          })
+        })]
+      });
+    }
+  });
+}

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

@@ -0,0 +1,350 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var catalog_exports = {};
+__export(catalog_exports, {
+  Calendar: () => import_Calendar.Calendar,
+  DatePicker: () => DatePicker,
+  DateRangePicker: () => import_DateRangePicker.DateRangePicker,
+  DatetimePicker: () => import_DatetimePicker.DatetimePicker,
+  MonthPicker: () => import_MonthPicker.MonthPicker,
+  MultiDatePicker: () => import_MultiDatePicker.MultiDatePicker
+});
+module.exports = __toCommonJS(catalog_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_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");
+var import_Skeleton = require("../../Skeleton");
+var import_parts = require("./parts.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) {
+  var {
+    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);
+  var {
+    resolvedForm,
+    knobProps,
+    id
+  } = (0, import_utils2.useFormField)({
+    form,
+    id: idProp,
+    compact
+  });
+  var resolvedValidators = (0, import_utils2.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);
+  });
+  (0, import_react.useEffect)(function () {
+    if (controlledValue === void 0) return;
+    setSelectedDate((0, import_utils.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;
+    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) {
+    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
+        })
+      });
+    }
+    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,
+        disabled,
+        open,
+        onReset: function onReset() {
+          return handleClearDate(fieldChange);
+        },
+        onButtonPress: function onButtonPress() {
+          if (selectedDate) setDisplayDate(selectedDate);
+          setOpen(true);
+        },
+        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)
+    });
+  };
+  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,
+      // 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)
+      })
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
+    defaultValue,
+    form: resolvedForm,
+    mode,
+    name,
+    preserveValue,
+    validators: resolvedValidators,
+    children: function children(field) {
+      var resolvedError = (0, import_utils2.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, {
+          value: field.state.value,
+          onSync: setSelectedDate
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+          id,
+          label,
+          labelProps,
+          error: resolvedError,
+          helperText,
+          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"))
+          })
+        })]
+      });
+    }
+  });
+}
+//# sourceMappingURL=catalog.native.js.map