@pos-360/horizon 0.27.0 → 0.27.1

package/dist/{chunk-ZXSNRAGZ.js → chunk-JP5BJYYD.js}

@@ -2302,27 +2302,33 @@ function DateRangePicker({
     from: void 0,
     to: void 0
   });
+  const [draft, setDraft] = React10__namespace.useState({
+    from: void 0,
+    to: void 0
+  });
   const [hoverDate, setHoverDate] = React10__namespace.useState();
   const [leftMonth, setLeftMonth] = React10__namespace.useState(
     () => dateFns.startOfMonth(value?.from ?? /* @__PURE__ */ new Date())
   );
   const [activePreset, setActivePreset] = React10__namespace.useState();
-  const range = value ?? internalRange;
+  const committedRange = value ?? internalRange;
+  const handleOpenChange = (newOpen) => {
+    if (newOpen) {
+      setDraft(committedRange);
+      if (committedRange.from) setLeftMonth(dateFns.startOfMonth(committedRange.from));
+    }
+    setOpen(newOpen);
+  };
   const handleDayClick = (date) => {
-    const { from, to } = range;
+    const { from, to } = draft;
     if (!from || from && to) {
-      const newRange2 = { from: date, to: void 0 };
+      setDraft({ from: date, to: void 0 });
       setActivePreset(void 0);
-      if (onChange) onChange(newRange2);
-      else setInternalRange(newRange2);
       return;
     }
     const [start, end] = dateFns.isBefore(from, date) ? [from, date] : [date, from];
-    const newRange = { from: start, to: end };
-    if (onChange) onChange(newRange);
-    else setInternalRange(newRange);
+    setDraft({ from: start, to: end });
     setHoverDate(void 0);
-    setOpen(false);
   };
   const handlePreset = (preset) => {
     const newRange = preset.getRange();
@@ -2332,8 +2338,21 @@ function DateRangePicker({
     if (newRange.from) setLeftMonth(dateFns.startOfMonth(newRange.from));
     setOpen(false);
   };
+  const handleApply = () => {
+    if (draft.from && !draft.to) return;
+    const newRange = draft.from && draft.to ? draft : void 0;
+    if (onChange) onChange(newRange);
+    else setInternalRange(newRange ?? { from: void 0, to: void 0 });
+    setOpen(false);
+  };
+  const handleClear = () => {
+    setDraft({ from: void 0, to: void 0 });
+    setActivePreset(void 0);
+  };
+  const canClear = !!(draft.from || committedRange.from);
+  const canApply = !(draft.from && !draft.to) && !!(draft.from || committedRange.from);
   const rightMonth = dateFns.addMonths(leftMonth, 1);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -2343,12 +2362,12 @@ function DateRangePicker({
           "hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
           "dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700",
           "disabled:pointer-events-none disabled:opacity-50",
-          range.from ? "text-gray-900 dark:text-gray-100" : "text-gray-400 dark:text-gray-500",
+          committedRange.from ? "text-gray-900 dark:text-gray-100" : "text-gray-400 dark:text-gray-500",
           className
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "w-4 h-4 shrink-0 text-gray-400 dark:text-gray-500" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatDateRange(range, placeholder) })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatDateRange(committedRange, placeholder) })
         ]
       }
     ) }),
@@ -2369,34 +2388,62 @@ function DateRangePicker({
           preset.label
         ))
       ] }, section.title)) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 p-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          CalendarMonth,
-          {
-            month: leftMonth,
-            range,
-            hoverDate,
-            onDayClick: handleDayClick,
-            onDayHover: setHoverDate,
-            onPrevMonth: () => setLeftMonth(dateFns.subMonths(leftMonth, 1)),
-            showPrevNav: true,
-            showNextNav: false
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px bg-gray-100 dark:bg-neutral-700 self-stretch" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          CalendarMonth,
-          {
-            month: rightMonth,
-            range,
-            hoverDate,
-            onDayClick: handleDayClick,
-            onDayHover: setHoverDate,
-            onNextMonth: () => setLeftMonth(dateFns.addMonths(leftMonth, 1)),
-            showPrevNav: false,
-            showNextNav: true
-          }
-        )
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 p-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CalendarMonth,
+            {
+              month: leftMonth,
+              range: draft,
+              hoverDate,
+              onDayClick: handleDayClick,
+              onDayHover: setHoverDate,
+              onPrevMonth: () => setLeftMonth(dateFns.subMonths(leftMonth, 1)),
+              showPrevNav: true,
+              showNextNav: false
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px bg-gray-100 dark:bg-neutral-700 self-stretch" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CalendarMonth,
+            {
+              month: rightMonth,
+              range: draft,
+              hoverDate,
+              onDayClick: handleDayClick,
+              onDayHover: setHoverDate,
+              onNextMonth: () => setLeftMonth(dateFns.addMonths(leftMonth, 1)),
+              showPrevNav: false,
+              showNextNav: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2 px-4 py-3 border-t border-gray-100 dark:border-neutral-700", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: handleClear,
+              disabled: !canClear,
+              className: chunk5XF7Y25B_js.cn(
+                "px-3 py-1.5 rounded-md text-sm transition-colors",
+                canClear ? "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-neutral-700" : "text-gray-300 dark:text-gray-600 cursor-not-allowed"
+              ),
+              children: "Clear"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: handleApply,
+              disabled: !canApply,
+              className: chunk5XF7Y25B_js.cn(
+                "px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
+                canApply ? "bg-blue-600 text-white hover:bg-blue-700 dark:hover:bg-blue-500" : "bg-blue-100 text-blue-300 cursor-not-allowed dark:bg-blue-950/30 dark:text-blue-800"
+              ),
+              children: "Apply"
+            }
+          )
+        ] })
       ] })
     ] }) })
   ] });
@@ -2579,5 +2626,5 @@ exports.useColumnVisibility = useColumnVisibility;
 exports.useFormContext = useFormContext;
 exports.useFormFieldContext = useFormFieldContext;
 exports.useTableSelection = useTableSelection;
-//# sourceMappingURL=chunk-ZXSNRAGZ.js.map
-//# sourceMappingURL=chunk-ZXSNRAGZ.js.map
+//# sourceMappingURL=chunk-JP5BJYYD.js.map
+//# sourceMappingURL=chunk-JP5BJYYD.js.map