@kopexa/date-picker 1.3.0 → 1.4.1

package/dist/{chunk-HPM5Y2V6.mjs → chunk-6IFLG64O.mjs}

@@ -27,6 +27,11 @@ var datePickerMessages = 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)"
   }
 });
 

package/dist/{chunk-RWJEVZ4B.mjs → chunk-BA6CJAOH.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   datePickerMessages
-} from "./chunk-HPM5Y2V6.mjs";
+} from "./chunk-6IFLG64O.mjs";
 
 // src/date-picker-field.tsx
 import {
@@ -36,7 +36,12 @@ import {
   getLocalTimeZone
 } from "@internationalized/date";
 import { useSafeIntl } from "@kopexa/i18n";
-import { useCallback, useMemo, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function CalendarIcon({ className }) {
   return /* @__PURE__ */ jsxs(
@@ -186,6 +191,7 @@ 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",
@@ -307,7 +313,9 @@ function CalendarPanel() {
 function CalendarFooter({
   todayLabel,
   clearLabel,
-  clearable = true
+  saveLabel,
+  clearable = true,
+  onSave
 }) {
   return /* @__PURE__ */ jsx(DatePickerContext, { children: (api) => /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
     /* @__PURE__ */ jsx(
@@ -327,17 +335,35 @@ function CalendarFooter({
         className: `${styles.footerButton} text-destructive`,
         children: clearLabel
       }
+    ),
+    onSave && /* @__PURE__ */ 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
+  onClear,
+  onSave
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
+  return /* @__PURE__ */ jsx(DatePickerContext, { children: (api) => /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -355,8 +381,20 @@ function DateTimeFooter({
         className: `${styles.footerButton} text-destructive`,
         children: clearLabel
       }
+    ),
+    onSave && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          onSave();
+          api.setOpen(false);
+        },
+        className: styles.footerSaveButton,
+        children: saveLabel
+      }
     )
-  ] });
+  ] }) });
 }
 function DatePickerField({
   label,
@@ -377,13 +415,16 @@ function DatePickerField({
   rootProps,
   variant = "input",
   trigger,
-  formatValue
+  formatValue,
+  onSave,
+  saveLabel: saveLabelProp
 }) {
   var _a;
   const intl = 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
   );
@@ -405,10 +446,12 @@ function DatePickerField({
         placeholder,
         todayLabel,
         clearLabel,
+        saveLabel,
         className,
         rootProps,
         trigger,
-        formatValue
+        formatValue,
+        onSave
       }
     );
   }
@@ -429,8 +472,10 @@ function DatePickerField({
         placeholder,
         todayLabel,
         clearLabel,
+        saveLabel,
         className,
-        rootProps
+        rootProps,
+        onSave
       }
     );
   }
@@ -476,7 +521,9 @@ function DatePickerField({
             {
               todayLabel,
               clearLabel,
-              clearable
+              saveLabel,
+              clearable,
+              onSave
             }
           )
         ] }) }) })
@@ -498,14 +545,17 @@ function DateTimePickerField({
   placeholder: placeholderProp,
   todayLabel: todayLabelProp,
   clearLabel: clearLabelProp,
+  saveLabel: saveLabelProp,
   className,
-  rootProps
+  rootProps,
+  onSave
 }) {
   var _a;
   const intl = 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] = useState(() => {
     const initial = valueProp != null ? valueProp : defaultValue;
@@ -662,9 +712,15 @@ function DateTimePickerField({
             {
               todayLabel,
               clearLabel,
+              saveLabel,
               clearable,
               onSelectNow: handleSelectNow,
-              onClear: handleClear
+              onClear: handleClear,
+              onSave: onSave ? () => onSave({
+                value: currentValue,
+                valueAsString: currentValue.map((v) => v.toString()),
+                view: "day"
+              }) : void 0
             }
           )
         ] }) }) })
@@ -687,34 +743,46 @@ function DateTriggerPickerField({
   placeholder: placeholderProp,
   todayLabel: todayLabelProp,
   clearLabel: clearLabelProp,
+  saveLabel: saveLabelProp,
   className,
   rootProps,
   trigger,
-  formatValue
+  formatValue,
+  onSave
 }) {
   var _a;
   const intl = 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 [internalValue, setInternalValue] = useState(
+  const [draft, setDraft] = useState(
     () => {
       var _a2;
       return (_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : [];
     }
   );
-  const currentValue = useMemo(() => {
-    if (valueProp === void 0) return internalValue;
-    return valueProp;
-  }, [valueProp, internalValue]);
+  const [committed, setCommitted] = useState(
+    () => {
+      var _a2;
+      return (_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : [];
+    }
+  );
+  useEffect(() => {
+    if (valueProp !== void 0) {
+      setCommitted(valueProp);
+      if (!onSave) setDraft(valueProp);
+    }
+  }, [valueProp, onSave]);
+  const currentValue = onSave ? draft : valueProp != null ? valueProp : draft;
   const handleDateChange = useCallback(
     (details) => {
       const next = details.value[0];
       if (!showTime || !next) {
-        setInternalValue(details.value);
+        setDraft(details.value);
         onValueChange == null ? void 0 : onValueChange(details);
         return;
       }
@@ -728,7 +796,7 @@ function DateTriggerPickerField({
         prevHour,
         prevMinute
       );
-      setInternalValue([merged]);
+      setDraft([merged]);
       onValueChange == null ? void 0 : onValueChange({ ...details, value: [merged] });
     },
     [currentValue, onValueChange, showTime]
@@ -748,7 +816,7 @@ function DateTriggerPickerField({
         );
       })();
       const updated = base.set({ hour: hours, minute: minutes });
-      setInternalValue([updated]);
+      setDraft([updated]);
       onValueChange == null ? void 0 : onValueChange({
         value: [updated],
         valueAsString: [updated.toString()],
@@ -757,6 +825,23 @@ function DateTriggerPickerField({
     },
     [currentValue, onValueChange]
   );
+  const userOnOpenChange = rootProps == null ? void 0 : rootProps.onOpenChange;
+  const handleOpenChange = useCallback(
+    (details) => {
+      if (onSave && details.open) {
+        setDraft(committed);
+      }
+      userOnOpenChange == null ? void 0 : userOnOpenChange(details);
+    },
+    [committed, onSave, userOnOpenChange]
+  );
+  const handleSaveCommit = useCallback(
+    (details) => {
+      setCommitted(details.value);
+      onSave == null ? void 0 : onSave(details);
+    },
+    [onSave]
+  );
   const formatter = useMemo(() => {
     if (formatValue) return formatValue;
     const fmt = new Intl.DateTimeFormat(
@@ -766,7 +851,10 @@ function DateTriggerPickerField({
     return (v) => fmt.format(v.toDate(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 : /* @__PURE__ */ jsxs("button", { type: "button", className: styles.defaultGhostTrigger, children: [
+  const triggerElement = trigger != null ? trigger : onSave ? /* @__PURE__ */ jsxs("button", { type: "button", className: styles.defaultGhostTrigger, children: [
+    /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0 opacity-70" }),
+    /* @__PURE__ */ jsx("span", { children: committed[0] ? formatter(committed[0]) : placeholder })
+  ] }) : /* @__PURE__ */ jsxs("button", { type: "button", className: styles.defaultGhostTrigger, children: [
     /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0 opacity-70" }),
     /* @__PURE__ */ jsx(DatePickerValueText, { placeholder, children: ({ value }) => formatter(value) })
   ] });
@@ -783,9 +871,10 @@ function DateTriggerPickerField({
       readOnly,
       selectionMode: "single",
       outsideDaySelectable: true,
-      closeOnSelect: !showTime,
+      closeOnSelect: !showTime && !onSave,
       className,
       ...rootProps,
+      onOpenChange: handleOpenChange,
       children: [
         label && /* @__PURE__ */ jsx(DatePickerLabel, { className: styles.label, children: label }),
         /* @__PURE__ */ jsx(DatePickerControl, { children: /* @__PURE__ */ jsx(DatePickerTrigger, { asChild: true, children: triggerElement }) }),
@@ -807,7 +896,9 @@ function DateTriggerPickerField({
             {
               todayLabel,
               clearLabel,
-              clearable
+              saveLabel,
+              clearable,
+              onSave: onSave ? handleSaveCommit : void 0
             }
           )
         ] }) }) })

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

@@ -59,7 +59,20 @@ type DatePickerFieldProps = {
      * 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, variant, trigger, formatValue, }: 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.d.ts

@@ -59,7 +59,20 @@ type DatePickerFieldProps = {
      * 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, variant, trigger, formatValue, }: 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)"
   }
 });
 
@@ -211,6 +216,7 @@ 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",
@@ -332,7 +338,9 @@ function CalendarPanel() {
 function CalendarFooter({
   todayLabel,
   clearLabel,
-  clearable = true
+  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)(
@@ -352,17 +360,35 @@ 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
+  onClear,
+  onSave
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.footer, children: [
+  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",
       {
@@ -380,8 +406,20 @@ function DateTimeFooter({
         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
+      }
     )
-  ] });
+  ] }) });
 }
 function DatePickerField({
   label,
@@ -402,13 +440,16 @@ function DatePickerField({
   rootProps,
   variant = "input",
   trigger,
-  formatValue
+  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
   );
@@ -430,10 +471,12 @@ function DatePickerField({
         placeholder,
         todayLabel,
         clearLabel,
+        saveLabel,
         className,
         rootProps,
         trigger,
-        formatValue
+        formatValue,
+        onSave
       }
     );
   }
@@ -454,8 +497,10 @@ function DatePickerField({
         placeholder,
         todayLabel,
         clearLabel,
+        saveLabel,
         className,
-        rootProps
+        rootProps,
+        onSave
       }
     );
   }
@@ -501,7 +546,9 @@ function DatePickerField({
             {
               todayLabel,
               clearLabel,
-              clearable
+              saveLabel,
+              clearable,
+              onSave
             }
           )
         ] }) }) })
@@ -523,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;
@@ -687,9 +737,15 @@ function DateTimePickerField({
             {
               todayLabel,
               clearLabel,
+              saveLabel,
               clearable,
               onSelectNow: handleSelectNow,
-              onClear: handleClear
+              onClear: handleClear,
+              onSave: onSave ? () => onSave({
+                value: currentValue,
+                valueAsString: currentValue.map((v) => v.toString()),
+                view: "day"
+              }) : void 0
             }
           )
         ] }) }) })
@@ -712,34 +768,46 @@ function DateTriggerPickerField({
   placeholder: placeholderProp,
   todayLabel: todayLabelProp,
   clearLabel: clearLabelProp,
+  saveLabel: saveLabelProp,
   className,
   rootProps,
   trigger,
-  formatValue
+  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 [internalValue, setInternalValue] = (0, import_react.useState)(
+  const [draft, setDraft] = (0, import_react.useState)(
     () => {
       var _a2;
       return (_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : [];
     }
   );
-  const currentValue = (0, import_react.useMemo)(() => {
-    if (valueProp === void 0) return internalValue;
-    return valueProp;
-  }, [valueProp, internalValue]);
+  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) {
-        setInternalValue(details.value);
+        setDraft(details.value);
         onValueChange == null ? void 0 : onValueChange(details);
         return;
       }
@@ -753,7 +821,7 @@ function DateTriggerPickerField({
         prevHour,
         prevMinute
       );
-      setInternalValue([merged]);
+      setDraft([merged]);
       onValueChange == null ? void 0 : onValueChange({ ...details, value: [merged] });
     },
     [currentValue, onValueChange, showTime]
@@ -773,7 +841,7 @@ function DateTriggerPickerField({
         );
       })();
       const updated = base.set({ hour: hours, minute: minutes });
-      setInternalValue([updated]);
+      setDraft([updated]);
       onValueChange == null ? void 0 : onValueChange({
         value: [updated],
         valueAsString: [updated.toString()],
@@ -782,6 +850,23 @@ function DateTriggerPickerField({
     },
     [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(
@@ -791,7 +876,10 @@ function DateTriggerPickerField({
     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 : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", className: styles.defaultGhostTrigger, children: [
+  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) })
   ] });
@@ -808,9 +896,10 @@ function DateTriggerPickerField({
       readOnly,
       selectionMode: "single",
       outsideDaySelectable: true,
-      closeOnSelect: !showTime,
+      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 }) }),
@@ -832,7 +921,9 @@ function DateTriggerPickerField({
             {
               todayLabel,
               clearLabel,
-              clearable
+              saveLabel,
+              clearable,
+              onSave: onSave ? handleSaveCommit : void 0
             }
           )
         ] }) }) })

package/dist/date-picker-field.mjs

@@ -2,8 +2,8 @@
 "use client";
 import {
   DatePickerField
-} from "./chunk-RWJEVZ4B.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

package/dist/index.js

@@ -100,6 +100,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)"
   }
 });
 
@@ -253,6 +258,7 @@ 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",
@@ -374,7 +380,9 @@ function CalendarPanel() {
 function CalendarFooter({
   todayLabel,
   clearLabel,
-  clearable = true
+  saveLabel,
+  clearable = true,
+  onSave
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerContext, { children: (api) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.footer, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -394,17 +402,35 @@ 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
+  onClear,
+  onSave
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.footer, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerContext, { children: (api) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.footer, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
@@ -422,8 +448,20 @@ function DateTimeFooter({
         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
+      }
     )
-  ] });
+  ] }) });
 }
 function DatePickerField({
   label,
@@ -444,13 +482,16 @@ function DatePickerField({
   rootProps,
   variant = "input",
   trigger,
-  formatValue
+  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
   );
@@ -472,10 +513,12 @@ function DatePickerField({
         placeholder,
         todayLabel,
         clearLabel,
+        saveLabel,
         className,
         rootProps,
         trigger,
-        formatValue
+        formatValue,
+        onSave
       }
     );
   }
@@ -496,8 +539,10 @@ function DatePickerField({
         placeholder,
         todayLabel,
         clearLabel,
+        saveLabel,
         className,
-        rootProps
+        rootProps,
+        onSave
       }
     );
   }
@@ -543,7 +588,9 @@ function DatePickerField({
             {
               todayLabel,
               clearLabel,
-              clearable
+              saveLabel,
+              clearable,
+              onSave
             }
           )
         ] }) }) })
@@ -565,14 +612,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;
@@ -729,9 +779,15 @@ function DateTimePickerField({
             {
               todayLabel,
               clearLabel,
+              saveLabel,
               clearable,
               onSelectNow: handleSelectNow,
-              onClear: handleClear
+              onClear: handleClear,
+              onSave: onSave ? () => onSave({
+                value: currentValue,
+                valueAsString: currentValue.map((v) => v.toString()),
+                view: "day"
+              }) : void 0
             }
           )
         ] }) }) })
@@ -754,34 +810,46 @@ function DateTriggerPickerField({
   placeholder: placeholderProp,
   todayLabel: todayLabelProp,
   clearLabel: clearLabelProp,
+  saveLabel: saveLabelProp,
   className,
   rootProps,
   trigger,
-  formatValue
+  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 [internalValue, setInternalValue] = (0, import_react.useState)(
+  const [draft, setDraft] = (0, import_react.useState)(
     () => {
       var _a2;
       return (_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : [];
     }
   );
-  const currentValue = (0, import_react.useMemo)(() => {
-    if (valueProp === void 0) return internalValue;
-    return valueProp;
-  }, [valueProp, internalValue]);
+  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) {
-        setInternalValue(details.value);
+        setDraft(details.value);
         onValueChange == null ? void 0 : onValueChange(details);
         return;
       }
@@ -795,7 +863,7 @@ function DateTriggerPickerField({
         prevHour,
         prevMinute
       );
-      setInternalValue([merged]);
+      setDraft([merged]);
       onValueChange == null ? void 0 : onValueChange({ ...details, value: [merged] });
     },
     [currentValue, onValueChange, showTime]
@@ -815,7 +883,7 @@ function DateTriggerPickerField({
         );
       })();
       const updated = base.set({ hour: hours, minute: minutes });
-      setInternalValue([updated]);
+      setDraft([updated]);
       onValueChange == null ? void 0 : onValueChange({
         value: [updated],
         valueAsString: [updated.toString()],
@@ -824,6 +892,23 @@ function DateTriggerPickerField({
     },
     [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(
@@ -833,7 +918,10 @@ function DateTriggerPickerField({
     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 : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", className: styles.defaultGhostTrigger, children: [
+  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_picker2.DatePickerValueText, { placeholder, children: ({ value }) => formatter(value) })
   ] });
@@ -850,9 +938,10 @@ function DateTriggerPickerField({
       readOnly,
       selectionMode: "single",
       outsideDaySelectable: true,
-      closeOnSelect: !showTime,
+      closeOnSelect: !showTime && !onSave,
       className,
       ...rootProps,
+      onOpenChange: handleOpenChange,
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerLabel, { className: styles.label, children: label }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerControl, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerTrigger, { asChild: true, children: triggerElement }) }),
@@ -874,7 +963,9 @@ function DateTriggerPickerField({
             {
               todayLabel,
               clearLabel,
-              clearable
+              saveLabel,
+              clearable,
+              onSave: onSave ? handleSaveCommit : void 0
             }
           )
         ] }) }) })

package/dist/index.mjs

@@ -1,10 +1,10 @@
 "use client";
 import {
   DatePickerField
-} from "./chunk-RWJEVZ4B.mjs";
+} from "./chunk-BA6CJAOH.mjs";
 import {
   datePickerMessages
-} from "./chunk-HPM5Y2V6.mjs";
+} from "./chunk-6IFLG64O.mjs";
 import {
   date_picker_exports,
   parseDate

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/date-picker",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "DatePicker component for selecting dates and times",
   "keywords": [
     "date-picker",
@@ -30,7 +30,7 @@
   "dependencies": {
     "@ark-ui/react": "^5.35.0",
     "@internationalized/date": "^3.12.1",
-    "@kopexa/i18n": "17.14.3"
+    "@kopexa/i18n": "17.15.0"
   },
   "clean-package": "../../../clean-package.config.json",
   "module": "dist/index.mjs",