@kopexa/date-picker 1.2.1 → 1.4.0

package/dist/date-picker-field.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DatePickerValueChangeDetails, DatePickerRootProps } from '@ark-ui/react/date-picker';
 import { DateValue } from '@internationalized/date';
+import { ReactElement } from 'react';
 
 type DatePickerFieldProps = {
     /** Label text */
@@ -35,7 +36,43 @@ type DatePickerFieldProps = {
     className?: string;
     /** Additional Ark UI Root props */
     rootProps?: Partial<DatePickerRootProps>;
+    /**
+     * Visual variant.
+     * - `"input"` (default): bordered input + calendar button + optional inline time/clear
+     * - `"trigger"`: a single ghost-style button that opens the popover
+     *   with the calendar (and time picker, if `showTime`). Use `trigger`
+     *   to provide a custom trigger element.
+     */
+    variant?: "input" | "trigger";
+    /**
+     * Custom trigger element rendered in `variant="trigger"` mode. Wrapped
+     * with `DatePickerTrigger asChild`, so any clickable element works
+     * (sight Button, Chip, etc.). The element should display the value —
+     * pass `<DatePickerValueText placeholder={…} />` as its children, or
+     * use the `formatValue` prop for default formatting.
+     */
+    trigger?: ReactElement;
+    /**
+     * Custom formatter for the trigger label (only used by the default
+     * `variant="trigger"` button). Receives the selected `DateValue` and
+     * returns a display string. Defaults to `Intl.DateTimeFormat` with the
+     * picker's locale, including time when `showTime` is true.
+     */
+    formatValue?: (value: DateValue) => string;
+    /**
+     * When provided, a "Save" button is rendered in the popover footer.
+     * `onValueChange` still fires per interaction so the picker stays
+     * controllable, but `onSave` is the explicit commit signal — callers
+     * that need draft-then-commit semantics (e.g. avoiding a save on every
+     * minute increment of the time picker) should listen here instead of
+     * `onValueChange`. Clicking Save also closes the popover.
+     */
+    onSave?: (details: DatePickerValueChangeDetails) => void;
+    /**
+     * Override the Save button label. Defaults to the i18n message.
+     */
+    saveLabel?: string;
 };
-declare function DatePickerField({ label, value, defaultValue, onValueChange, showTime, clearable, locale: localeProp, min, max, disabled, readOnly, placeholder: placeholderProp, todayLabel: todayLabelProp, clearLabel: clearLabelProp, className, rootProps, }: DatePickerFieldProps): react_jsx_runtime.JSX.Element;
+declare function DatePickerField({ label, value, defaultValue, onValueChange, showTime, clearable, locale: localeProp, min, max, disabled, readOnly, placeholder: placeholderProp, todayLabel: todayLabelProp, clearLabel: clearLabelProp, className, rootProps, variant, trigger, formatValue, onSave, saveLabel: saveLabelProp, }: DatePickerFieldProps): react_jsx_runtime.JSX.Element;
 
 export { DatePickerField, type DatePickerFieldProps };

package/dist/date-picker-field.js

@@ -58,6 +58,11 @@ var datePickerMessages = (0, import_i18n.defineMessages)({
     id: "date-picker.select_date_and_time",
     defaultMessage: "Select date and time",
     description: "Placeholder for date+time input"
+  },
+  save: {
+    id: "date-picker.save",
+    defaultMessage: "Save",
+    description: "Button to commit the staged date selection (only shown when an onSave callback is provided)"
   }
 });
 
@@ -139,6 +144,55 @@ function XIcon({ className }) {
     }
   );
 }
+function getDatePartOrder(locale) {
+  try {
+    const fmt = new Intl.DateTimeFormat(locale, {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric"
+    });
+    return fmt.formatToParts(new Date(2024, 0, 1)).filter(
+      (p) => p.type === "day" || p.type === "month" || p.type === "year"
+    ).map((p) => p.type);
+  } catch {
+    return ["day", "month", "year"];
+  }
+}
+function finalizeDateParts(parts) {
+  var _a, _b, _c;
+  const day = (_a = parts.day) != null ? _a : 1;
+  const month = (_b = parts.month) != null ? _b : 1;
+  let year = (_c = parts.year) != null ? _c : (/* @__PURE__ */ new Date()).getFullYear();
+  if (year < 100) year = year < 50 ? 2e3 + year : 1900 + year;
+  if (month < 1 || month > 12) return void 0;
+  if (day < 1 || day > 31) return void 0;
+  return { year, month, day };
+}
+function parseLocalizedDate(value, locale) {
+  const trimmed = value.trim();
+  if (!trimmed) return void 0;
+  const order = getDatePartOrder(locale);
+  const segments = trimmed.split(/[./\-\s]+/).filter(Boolean);
+  if (segments.length === 3 && segments.every((s) => /^\d+$/.test(s))) {
+    const map2 = {};
+    order.forEach((field, i) => {
+      map2[field] = Number.parseInt(segments[i], 10);
+    });
+    return finalizeDateParts(map2);
+  }
+  const digits = trimmed.replace(/\D/g, "");
+  const widths = digits.length === 8 ? { day: 2, month: 2, year: 4 } : digits.length === 6 ? { day: 2, month: 2, year: 2 } : digits.length === 4 ? { day: 2, month: 2, year: 0 } : null;
+  if (!widths) return void 0;
+  let pos = 0;
+  const map = {};
+  for (const field of order) {
+    const w = widths[field];
+    if (w === 0) continue;
+    map[field] = Number.parseInt(digits.slice(pos, pos + w), 10);
+    pos += w;
+  }
+  return finalizeDateParts(map);
+}
 var styles = {
   control: "relative flex items-center",
   input: "w-full h-9 rounded-md border bg-transparent pl-3 pr-9 text-sm outline-none focus:ring-2 focus:ring-ring",
@@ -162,9 +216,14 @@ var styles = {
   yearCellTrigger: "inline-flex items-center justify-center w-full py-2 text-sm rounded-md transition-colors hover:bg-muted data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[disabled]:text-muted-foreground/30 data-[disabled]:pointer-events-none",
   footer: "flex items-center gap-1 pt-2 mt-2 border-t",
   footerButton: "text-sm px-2 py-1 rounded-md hover:bg-muted transition-colors",
+  footerSaveButton: "ml-auto text-sm px-3 py-1 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors",
   timeInput: "h-9 rounded-md border bg-transparent px-3 text-sm outline-none focus:ring-2 focus:ring-ring",
   label: "text-sm font-medium",
-  timeTrigger: "flex-1 h-9 rounded-md border bg-transparent px-3 text-sm text-left hover:bg-muted transition-colors flex items-center justify-between"
+  timeTrigger: "flex-1 h-9 rounded-md border bg-transparent px-3 text-sm text-left hover:bg-muted transition-colors flex items-center justify-between",
+  defaultGhostTrigger: "inline-flex items-center gap-2 h-9 rounded-md px-2.5 text-sm font-normal text-foreground transition-colors hover:bg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[placeholder]:text-muted-foreground",
+  defaultGhostPlaceholder: "text-muted-foreground",
+  timeRow: "mt-2 pt-2 border-t flex items-center gap-2",
+  timeRowLabel: "text-xs text-muted-foreground"
 };
 function DayView() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerView, { view: "day", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerContext, { children: (api) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
@@ -269,9 +328,19 @@ function YearView() {
     )) }) })
   ] }) }) });
 }
+function CalendarPanel() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DayView, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonthView, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YearView, {})
+  ] });
+}
 function CalendarFooter({
   todayLabel,
-  clearLabel
+  clearLabel,
+  saveLabel,
+  clearable = true,
+  onSave
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerContext, { children: (api) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.footer, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -283,7 +352,7 @@ function CalendarFooter({
         children: todayLabel
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    clearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
         type: "button",
@@ -291,6 +360,64 @@ function CalendarFooter({
         className: `${styles.footerButton} text-destructive`,
         children: clearLabel
       }
+    ),
+    onSave && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          onSave({
+            value: api.value,
+            valueAsString: api.valueAsString,
+            view: api.view
+          });
+          api.setOpen(false);
+        },
+        className: styles.footerSaveButton,
+        children: saveLabel
+      }
+    )
+  ] }) });
+}
+function DateTimeFooter({
+  todayLabel,
+  clearLabel,
+  saveLabel,
+  clearable = true,
+  onSelectNow,
+  onClear,
+  onSave
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerContext, { children: (api) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.footer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onSelectNow,
+        className: `${styles.footerButton} text-foreground`,
+        children: todayLabel
+      }
+    ),
+    clearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onClear,
+        className: `${styles.footerButton} text-destructive`,
+        children: clearLabel
+      }
+    ),
+    onSave && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          onSave();
+          api.setOpen(false);
+        },
+        className: styles.footerSaveButton,
+        children: saveLabel
+      }
     )
   ] }) });
 }
@@ -310,16 +437,49 @@ function DatePickerField({
   todayLabel: todayLabelProp,
   clearLabel: clearLabelProp,
   className,
-  rootProps
+  rootProps,
+  variant = "input",
+  trigger,
+  formatValue,
+  onSave,
+  saveLabel: saveLabelProp
 }) {
   var _a;
   const intl = (0, import_i18n2.useSafeIntl)();
   const locale = (_a = localeProp != null ? localeProp : intl.locale) != null ? _a : "en-US";
   const todayLabel = todayLabelProp != null ? todayLabelProp : intl.formatMessage(datePickerMessages.today);
   const clearLabel = clearLabelProp != null ? clearLabelProp : intl.formatMessage(datePickerMessages.clear);
+  const saveLabel = saveLabelProp != null ? saveLabelProp : intl.formatMessage(datePickerMessages.save);
   const placeholder = placeholderProp != null ? placeholderProp : intl.formatMessage(
     showTime ? datePickerMessages.select_date_and_time : datePickerMessages.select_date
   );
+  if (variant === "trigger") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DateTriggerPickerField,
+      {
+        label,
+        value,
+        defaultValue,
+        onValueChange,
+        showTime,
+        clearable,
+        locale,
+        min,
+        max,
+        disabled,
+        readOnly,
+        placeholder,
+        todayLabel,
+        clearLabel,
+        saveLabel,
+        className,
+        rootProps,
+        trigger,
+        formatValue,
+        onSave
+      }
+    );
+  }
   if (showTime) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       DateTimePickerField,
@@ -337,8 +497,10 @@ function DatePickerField({
         placeholder,
         todayLabel,
         clearLabel,
+        saveLabel,
         className,
-        rootProps
+        rootProps,
+        onSave
       }
     );
   }
@@ -356,6 +518,10 @@ function DatePickerField({
       selectionMode: "single",
       outsideDaySelectable: true,
       closeOnSelect: true,
+      parse: (input, details) => {
+        const parts = parseLocalizedDate(input, details.locale);
+        return parts ? new import_date.CalendarDate(parts.year, parts.month, parts.day) : void 0;
+      },
       className,
       ...rootProps,
       children: [
@@ -374,10 +540,17 @@ function DatePickerField({
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerTrigger, { className: styles.trigger, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarIcon, { className: "size-4" }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker.DatePickerContent, { className: styles.content, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DayView, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonthView, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YearView, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarFooter, { todayLabel, clearLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarPanel, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            CalendarFooter,
+            {
+              todayLabel,
+              clearLabel,
+              saveLabel,
+              clearable,
+              onSave
+            }
+          )
         ] }) }) })
       ]
     }
@@ -397,14 +570,17 @@ function DateTimePickerField({
   placeholder: placeholderProp,
   todayLabel: todayLabelProp,
   clearLabel: clearLabelProp,
+  saveLabel: saveLabelProp,
   className,
-  rootProps
+  rootProps,
+  onSave
 }) {
   var _a;
   const intl = (0, import_i18n2.useSafeIntl)();
   const locale = (_a = localeProp != null ? localeProp : intl.locale) != null ? _a : "en-US";
   const todayLabel = todayLabelProp != null ? todayLabelProp : intl.formatMessage(datePickerMessages.today);
   const clearLabel = clearLabelProp != null ? clearLabelProp : intl.formatMessage(datePickerMessages.clear);
+  const saveLabel = saveLabelProp != null ? saveLabelProp : intl.formatMessage(datePickerMessages.save);
   const placeholder = placeholderProp != null ? placeholderProp : intl.formatMessage(datePickerMessages.select_date_and_time);
   const [internalValue, setInternalValue] = (0, import_react.useState)(() => {
     const initial = valueProp != null ? valueProp : defaultValue;
@@ -475,6 +651,22 @@ function DateTimePickerField({
       view: "day"
     });
   }, [onValueChange]);
+  const handleSelectNow = (0, import_react.useCallback)(() => {
+    const now = /* @__PURE__ */ new Date();
+    const nowValue = new import_date.CalendarDateTime(
+      now.getFullYear(),
+      now.getMonth() + 1,
+      now.getDate(),
+      now.getHours(),
+      now.getMinutes()
+    );
+    setInternalValue([nowValue]);
+    onValueChange == null ? void 0 : onValueChange({
+      value: [nowValue],
+      valueAsString: [nowValue.toString()],
+      view: "day"
+    });
+  }, [onValueChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_date_picker.DatePickerRoot,
     {
@@ -488,13 +680,33 @@ function DateTimePickerField({
       selectionMode: "single",
       outsideDaySelectable: true,
       closeOnSelect: false,
+      parse: (input, details) => {
+        const parts = parseLocalizedDate(input, details.locale);
+        if (!parts) return void 0;
+        const prev = currentValue[0];
+        const hour = prev && "hour" in prev ? prev.hour : 0;
+        const minute = prev && "minute" in prev ? prev.minute : 0;
+        return new import_date.CalendarDateTime(
+          parts.year,
+          parts.month,
+          parts.day,
+          hour,
+          minute
+        );
+      },
       className,
       ...rootProps,
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerLabel, { className: styles.label, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker.DatePickerControl, { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker.DatePickerControl, { className: "flex items-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex-1 flex items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerInput, { className: styles.input, placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_date_picker.DatePickerInput,
+              {
+                className: "w-full h-9 rounded-l-md border border-r-0 bg-transparent pl-3 pr-9 text-sm outline-none focus:ring-2 focus:ring-ring",
+                placeholder
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerTrigger, { className: styles.trigger, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarIcon, { className: "size-4" }) })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -505,23 +717,215 @@ function DateTimePickerField({
               onChange: handleTimeChange,
               disabled,
               readOnly,
-              className: styles.timeInput
+              className: `h-9 border bg-transparent px-3 text-sm outline-none focus:ring-2 focus:ring-ring ${clearable && !disabled && !readOnly ? "border-r-0" : "rounded-r-md"}`
             }
           ),
           clearable && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_date_picker.DatePickerClearTrigger,
+            "button",
             {
-              className: "inline-flex items-center justify-center size-9 rounded-md border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+              type: "button",
+              className: "inline-flex items-center justify-center size-9 rounded-r-md border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
               onClick: handleClear,
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XIcon, { className: "size-4" })
             }
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker.DatePickerContent, { className: styles.content, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DayView, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonthView, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YearView, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarFooter, { todayLabel, clearLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarPanel, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            DateTimeFooter,
+            {
+              todayLabel,
+              clearLabel,
+              saveLabel,
+              clearable,
+              onSelectNow: handleSelectNow,
+              onClear: handleClear,
+              onSave: onSave ? () => onSave({
+                value: currentValue,
+                valueAsString: currentValue.map((v) => v.toString()),
+                view: "day"
+              }) : void 0
+            }
+          )
+        ] }) }) })
+      ]
+    }
+  );
+}
+function DateTriggerPickerField({
+  label,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  showTime = false,
+  clearable = true,
+  locale: localeProp,
+  min,
+  max,
+  disabled,
+  readOnly,
+  placeholder: placeholderProp,
+  todayLabel: todayLabelProp,
+  clearLabel: clearLabelProp,
+  saveLabel: saveLabelProp,
+  className,
+  rootProps,
+  trigger,
+  formatValue,
+  onSave
+}) {
+  var _a;
+  const intl = (0, import_i18n2.useSafeIntl)();
+  const locale = (_a = localeProp != null ? localeProp : intl.locale) != null ? _a : "en-US";
+  const todayLabel = todayLabelProp != null ? todayLabelProp : intl.formatMessage(datePickerMessages.today);
+  const clearLabel = clearLabelProp != null ? clearLabelProp : intl.formatMessage(datePickerMessages.clear);
+  const saveLabel = saveLabelProp != null ? saveLabelProp : intl.formatMessage(datePickerMessages.save);
+  const placeholder = placeholderProp != null ? placeholderProp : intl.formatMessage(
+    showTime ? datePickerMessages.select_date_and_time : datePickerMessages.select_date
+  );
+  const [draft, setDraft] = (0, import_react.useState)(
+    () => {
+      var _a2;
+      return (_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : [];
+    }
+  );
+  const [committed, setCommitted] = (0, import_react.useState)(
+    () => {
+      var _a2;
+      return (_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : [];
+    }
+  );
+  (0, import_react.useEffect)(() => {
+    if (valueProp !== void 0) {
+      setCommitted(valueProp);
+      if (!onSave) setDraft(valueProp);
+    }
+  }, [valueProp, onSave]);
+  const currentValue = onSave ? draft : valueProp != null ? valueProp : draft;
+  const handleDateChange = (0, import_react.useCallback)(
+    (details) => {
+      const next = details.value[0];
+      if (!showTime || !next) {
+        setDraft(details.value);
+        onValueChange == null ? void 0 : onValueChange(details);
+        return;
+      }
+      const prev = currentValue[0];
+      const prevHour = prev && "hour" in prev ? prev.hour : 0;
+      const prevMinute = prev && "minute" in prev ? prev.minute : 0;
+      const merged = new import_date.CalendarDateTime(
+        next.year,
+        next.month,
+        next.day,
+        prevHour,
+        prevMinute
+      );
+      setDraft([merged]);
+      onValueChange == null ? void 0 : onValueChange({ ...details, value: [merged] });
+    },
+    [currentValue, onValueChange, showTime]
+  );
+  const handleTimeChange = (0, import_react.useCallback)(
+    (e) => {
+      const [hours, minutes] = e.currentTarget.value.split(":").map(Number);
+      const prev = currentValue[0];
+      const base = prev && "hour" in prev ? prev : prev ? new import_date.CalendarDateTime(prev.year, prev.month, prev.day, 0, 0) : (() => {
+        const now = /* @__PURE__ */ new Date();
+        return new import_date.CalendarDateTime(
+          now.getFullYear(),
+          now.getMonth() + 1,
+          now.getDate(),
+          0,
+          0
+        );
+      })();
+      const updated = base.set({ hour: hours, minute: minutes });
+      setDraft([updated]);
+      onValueChange == null ? void 0 : onValueChange({
+        value: [updated],
+        valueAsString: [updated.toString()],
+        view: "day"
+      });
+    },
+    [currentValue, onValueChange]
+  );
+  const userOnOpenChange = rootProps == null ? void 0 : rootProps.onOpenChange;
+  const handleOpenChange = (0, import_react.useCallback)(
+    (details) => {
+      if (onSave && details.open) {
+        setDraft(committed);
+      }
+      userOnOpenChange == null ? void 0 : userOnOpenChange(details);
+    },
+    [committed, onSave, userOnOpenChange]
+  );
+  const handleSaveCommit = (0, import_react.useCallback)(
+    (details) => {
+      setCommitted(details.value);
+      onSave == null ? void 0 : onSave(details);
+    },
+    [onSave]
+  );
+  const formatter = (0, import_react.useMemo)(() => {
+    if (formatValue) return formatValue;
+    const fmt = new Intl.DateTimeFormat(
+      locale,
+      showTime ? { dateStyle: "medium", timeStyle: "short" } : { dateStyle: "medium" }
+    );
+    return (v) => fmt.format(v.toDate((0, import_date.getLocalTimeZone)()));
+  }, [formatValue, locale, showTime]);
+  const timeValue = currentValue[0] && "hour" in currentValue[0] ? `${String(currentValue[0].hour).padStart(2, "0")}:${String(currentValue[0].minute).padStart(2, "0")}` : "";
+  const triggerElement = trigger != null ? trigger : onSave ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", className: styles.defaultGhostTrigger, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarIcon, { className: "size-4 shrink-0 opacity-70" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: committed[0] ? formatter(committed[0]) : placeholder })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", className: styles.defaultGhostTrigger, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarIcon, { className: "size-4 shrink-0 opacity-70" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerValueText, { placeholder, children: ({ value }) => formatter(value) })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_date_picker.DatePickerRoot,
+    {
+      value: currentValue,
+      defaultValue,
+      onValueChange: handleDateChange,
+      locale,
+      min,
+      max,
+      disabled,
+      readOnly,
+      selectionMode: "single",
+      outsideDaySelectable: true,
+      closeOnSelect: !showTime && !onSave,
+      className,
+      ...rootProps,
+      onOpenChange: handleOpenChange,
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerLabel, { className: styles.label, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerControl, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerTrigger, { asChild: true, children: triggerElement }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker.DatePickerContent, { className: styles.content, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarPanel, {}),
+          showTime && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.timeRow, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              type: "time",
+              value: timeValue,
+              onChange: handleTimeChange,
+              disabled,
+              readOnly,
+              className: styles.timeInput
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            CalendarFooter,
+            {
+              todayLabel,
+              clearLabel,
+              saveLabel,
+              clearable,
+              onSave: onSave ? handleSaveCommit : void 0
+            }
+          )
         ] }) }) })
       ]
     }

package/dist/date-picker-field.mjs

@@ -2,8 +2,8 @@
 "use client";
 import {
   DatePickerField
-} from "./chunk-VYQ6BFFN.mjs";
-import "./chunk-HPM5Y2V6.mjs";
+} from "./chunk-BA6CJAOH.mjs";
+import "./chunk-6IFLG64O.mjs";
 import "./chunk-C7GZJJIK.mjs";
 export {
   DatePickerField

package/dist/date-picker-messages.d.mts

@@ -24,6 +24,11 @@ declare const datePickerMessages: {
         defaultMessage: string;
         description: string;
     };
+    save: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 
 export { datePickerMessages };

package/dist/date-picker-messages.d.ts

@@ -24,6 +24,11 @@ declare const datePickerMessages: {
         defaultMessage: string;
         description: string;
     };
+    save: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 
 export { datePickerMessages };

package/dist/date-picker-messages.js

@@ -50,6 +50,11 @@ var datePickerMessages = (0, import_i18n.defineMessages)({
     id: "date-picker.select_date_and_time",
     defaultMessage: "Select date and time",
     description: "Placeholder for date+time input"
+  },
+  save: {
+    id: "date-picker.save",
+    defaultMessage: "Save",
+    description: "Button to commit the staged date selection (only shown when an onSave callback is provided)"
   }
 });
 // Annotate the CommonJS export names for ESM import in node:

package/dist/date-picker-messages.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   datePickerMessages
-} from "./chunk-HPM5Y2V6.mjs";
+} from "./chunk-6IFLG64O.mjs";
 import "./chunk-C7GZJJIK.mjs";
 export {
   datePickerMessages