@pos-360/horizon 0.27.0 → 0.27.1

package/dist/{chunk-HM5GFDXY.mjs → chunk-2LATCE3V.mjs}

@@ -2272,27 +2272,33 @@ function DateRangePicker({
     from: void 0,
     to: void 0
   });
+  const [draft, setDraft] = React10.useState({
+    from: void 0,
+    to: void 0
+  });
   const [hoverDate, setHoverDate] = React10.useState();
   const [leftMonth, setLeftMonth] = React10.useState(
     () => startOfMonth(value?.from ?? /* @__PURE__ */ new Date())
   );
   const [activePreset, setActivePreset] = React10.useState();
-  const range = value ?? internalRange;
+  const committedRange = value ?? internalRange;
+  const handleOpenChange = (newOpen) => {
+    if (newOpen) {
+      setDraft(committedRange);
+      if (committedRange.from) setLeftMonth(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] = 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();
@@ -2302,8 +2308,21 @@ function DateRangePicker({
     if (newRange.from) setLeftMonth(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 = addMonths(leftMonth, 1);
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
@@ -2313,12 +2332,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__ */ jsx(CalendarIcon, { className: "w-4 h-4 shrink-0 text-gray-400 dark:text-gray-500" }),
-          /* @__PURE__ */ jsx("span", { children: formatDateRange(range, placeholder) })
+          /* @__PURE__ */ jsx("span", { children: formatDateRange(committedRange, placeholder) })
         ]
       }
     ) }),
@@ -2339,34 +2358,62 @@ function DateRangePicker({
           preset.label
         ))
       ] }, section.title)) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-4 p-4", children: [
-        /* @__PURE__ */ jsx(
-          CalendarMonth,
-          {
-            month: leftMonth,
-            range,
-            hoverDate,
-            onDayClick: handleDayClick,
-            onDayHover: setHoverDate,
-            onPrevMonth: () => setLeftMonth(subMonths(leftMonth, 1)),
-            showPrevNav: true,
-            showNextNav: false
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "w-px bg-gray-100 dark:bg-neutral-700 self-stretch" }),
-        /* @__PURE__ */ jsx(
-          CalendarMonth,
-          {
-            month: rightMonth,
-            range,
-            hoverDate,
-            onDayClick: handleDayClick,
-            onDayHover: setHoverDate,
-            onNextMonth: () => setLeftMonth(addMonths(leftMonth, 1)),
-            showPrevNav: false,
-            showNextNav: true
-          }
-        )
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-4 p-4", children: [
+          /* @__PURE__ */ jsx(
+            CalendarMonth,
+            {
+              month: leftMonth,
+              range: draft,
+              hoverDate,
+              onDayClick: handleDayClick,
+              onDayHover: setHoverDate,
+              onPrevMonth: () => setLeftMonth(subMonths(leftMonth, 1)),
+              showPrevNav: true,
+              showNextNav: false
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "w-px bg-gray-100 dark:bg-neutral-700 self-stretch" }),
+          /* @__PURE__ */ jsx(
+            CalendarMonth,
+            {
+              month: rightMonth,
+              range: draft,
+              hoverDate,
+              onDayClick: handleDayClick,
+              onDayHover: setHoverDate,
+              onNextMonth: () => setLeftMonth(addMonths(leftMonth, 1)),
+              showPrevNav: false,
+              showNextNav: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ 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__ */ jsx(
+            "button",
+            {
+              onClick: handleClear,
+              disabled: !canClear,
+              className: 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__ */ jsx(
+            "button",
+            {
+              onClick: handleApply,
+              disabled: !canApply,
+              className: 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"
+            }
+          )
+        ] })
       ] })
     ] }) })
   ] });
@@ -2448,5 +2495,5 @@ function PeriodComparisonSelector({
 }
 
 export { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColumnSelection, DEFAULT_COMPARISON_PERIODS, DEFAULT_PRESETS, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormLabel, FormMessage, PeriodComparisonSelector, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Skeleton, SkeletonAvatar, SkeletonBadge, SkeletonButton, SkeletonCard, SkeletonIcon, SkeletonInput, SkeletonSubtitle, SkeletonTableRow, SkeletonTableRows, SkeletonText, SkeletonTitle, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableRowCheckbox, TableSelectAll, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, buttonVariants, segmentedControlItemVariants, segmentedControlVariants, separatorVariants, switchLabelVariants, switchThumbVariants, switchTrackVariants, toggleGroupVariants, toggleItemVariants, useColumnVisibility, useFormContext, useFormFieldContext, useTableSelection };
-//# sourceMappingURL=chunk-HM5GFDXY.mjs.map
-//# sourceMappingURL=chunk-HM5GFDXY.mjs.map
+//# sourceMappingURL=chunk-2LATCE3V.mjs.map
+//# sourceMappingURL=chunk-2LATCE3V.mjs.map