@pos-360/horizon 0.22.1 → 0.23.0

package/dist/{chunk-CY7BVG4S.js → chunk-J2AWNOYH.js}

@@ -16,6 +16,7 @@ var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
 var SwitchPrimitive = require('@radix-ui/react-switch');
+var dateFns = require('date-fns');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -2096,6 +2097,296 @@ var Switch = React10__namespace.forwardRef(({ className, size, label, labelPosit
   );
 });
 Switch.displayName = "Switch";
+var WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function getCalendarDays(month) {
+  const start = dateFns.startOfWeek(dateFns.startOfMonth(month), { weekStartsOn: 0 });
+  const end = dateFns.endOfWeek(dateFns.endOfMonth(month), { weekStartsOn: 0 });
+  return dateFns.eachDayOfInterval({ start, end });
+}
+function CalendarMonth({
+  month,
+  range,
+  hoverDate,
+  onDayClick,
+  onDayHover,
+  onPrevMonth,
+  onNextMonth,
+  showPrevNav = true,
+  showNextNav = true
+}) {
+  const days = getCalendarDays(month);
+  const today = /* @__PURE__ */ new Date();
+  const getEffectiveTo = () => range.to ?? hoverDate;
+  const isInRange = (date) => {
+    const { from } = range;
+    const effectiveTo = getEffectiveTo();
+    if (!from || !effectiveTo) return false;
+    const [start, end] = dateFns.isBefore(from, effectiveTo) ? [from, effectiveTo] : [effectiveTo, from];
+    return dateFns.isWithinInterval(date, { start, end });
+  };
+  const isRangeStart = (date) => {
+    const { from } = range;
+    const effectiveTo = getEffectiveTo();
+    if (!from) return false;
+    if (!effectiveTo) return dateFns.isSameDay(date, from);
+    return dateFns.isBefore(from, effectiveTo) ? dateFns.isSameDay(date, from) : dateFns.isSameDay(date, effectiveTo);
+  };
+  const isRangeEnd = (date) => {
+    const { from } = range;
+    const effectiveTo = getEffectiveTo();
+    if (!from || !effectiveTo) return false;
+    return dateFns.isBefore(from, effectiveTo) ? dateFns.isSameDay(date, effectiveTo) : dateFns.isSameDay(date, from);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[252px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: onPrevMonth,
+          className: chunk5XF7Y25B_js.cn(
+            "p-1 rounded-md transition-colors",
+            showPrevNav ? "hover:bg-gray-100 dark:hover:bg-neutral-700 text-gray-500 dark:text-gray-400" : "invisible pointer-events-none"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: dateFns.format(month, "MMMM yyyy") }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: onNextMonth,
+          className: chunk5XF7Y25B_js.cn(
+            "p-1 rounded-md transition-colors",
+            showNextNav ? "hover:bg-gray-100 dark:hover:bg-neutral-700 text-gray-500 dark:text-gray-400" : "invisible pointer-events-none"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 mb-1", children: WEEKDAYS.map((day) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "text-center text-xs font-medium text-gray-400 dark:text-gray-500 py-1",
+        children: day
+      },
+      day
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "grid grid-cols-7",
+        onMouseLeave: () => onDayHover(void 0),
+        children: days.map((day, idx) => {
+          const outside = !dateFns.isSameMonth(day, month);
+          const inRange = !outside && isInRange(day);
+          const rangeStart = !outside && isRangeStart(day);
+          const rangeEnd = !outside && isRangeEnd(day);
+          const isToday = dateFns.isSameDay(day, today);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: chunk5XF7Y25B_js.cn(
+                "h-9 flex items-center justify-center",
+                (inRange || rangeStart || rangeEnd) && "bg-blue-50 dark:bg-blue-950/40",
+                rangeStart && !rangeEnd && "rounded-l-full",
+                rangeEnd && !rangeStart && "rounded-r-full",
+                rangeStart && rangeEnd && "rounded-full"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => !outside && onDayClick(day),
+                  onMouseEnter: () => !outside && onDayHover(day),
+                  tabIndex: outside ? -1 : 0,
+                  className: chunk5XF7Y25B_js.cn(
+                    "w-8 h-8 rounded-full text-sm flex items-center justify-center transition-colors",
+                    outside && "text-gray-300 dark:text-gray-600 pointer-events-none",
+                    !outside && !rangeStart && !rangeEnd && "text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-neutral-700",
+                    !outside && inRange && !rangeStart && !rangeEnd && "text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/50",
+                    (rangeStart || rangeEnd) && "bg-blue-600 text-white hover:bg-blue-700 dark:hover:bg-blue-500",
+                    isToday && !rangeStart && !rangeEnd && !outside && "font-bold"
+                  ),
+                  children: dateFns.format(day, "d")
+                }
+              )
+            },
+            idx
+          );
+        })
+      }
+    )
+  ] });
+}
+var DEFAULT_PRESETS = [
+  {
+    label: "Today",
+    getRange: () => ({
+      from: dateFns.startOfDay(/* @__PURE__ */ new Date()),
+      to: dateFns.endOfDay(/* @__PURE__ */ new Date())
+    })
+  },
+  {
+    label: "Yesterday",
+    getRange: () => {
+      const d = dateFns.subDays(/* @__PURE__ */ new Date(), 1);
+      return { from: dateFns.startOfDay(d), to: dateFns.endOfDay(d) };
+    }
+  },
+  {
+    label: "This Week",
+    getRange: () => ({
+      from: dateFns.startOfWeek(/* @__PURE__ */ new Date(), { weekStartsOn: 0 }),
+      to: dateFns.endOfWeek(/* @__PURE__ */ new Date(), { weekStartsOn: 0 })
+    })
+  },
+  {
+    label: "Last Week",
+    getRange: () => {
+      const d = dateFns.subDays(/* @__PURE__ */ new Date(), 7);
+      return {
+        from: dateFns.startOfWeek(d, { weekStartsOn: 0 }),
+        to: dateFns.endOfWeek(d, { weekStartsOn: 0 })
+      };
+    }
+  },
+  {
+    label: "This Month",
+    getRange: () => ({
+      from: dateFns.startOfMonth(/* @__PURE__ */ new Date()),
+      to: dateFns.endOfMonth(/* @__PURE__ */ new Date())
+    })
+  },
+  {
+    label: "Last Month",
+    getRange: () => {
+      const d = dateFns.subMonths(/* @__PURE__ */ new Date(), 1);
+      return { from: dateFns.startOfMonth(d), to: dateFns.endOfMonth(d) };
+    }
+  }
+];
+function formatDateRange(range, placeholder) {
+  if (!range?.from) return placeholder;
+  if (!range.to || dateFns.isSameDay(range.from, range.to)) {
+    return dateFns.format(range.from, "MMM d, yyyy");
+  }
+  const sameYear = range.from.getFullYear() === range.to.getFullYear();
+  if (sameYear) {
+    return `${dateFns.format(range.from, "MMM d")} \u2013 ${dateFns.format(range.to, "MMM d, yyyy")}`;
+  }
+  return `${dateFns.format(range.from, "MMM d, yyyy")} \u2013 ${dateFns.format(range.to, "MMM d, yyyy")}`;
+}
+function DateRangePicker({
+  value,
+  onChange,
+  presets = DEFAULT_PRESETS,
+  placeholder = "Select date range",
+  disabled = false,
+  align = "start",
+  className
+}) {
+  const [open, setOpen] = React10__namespace.useState(false);
+  const [internalRange, setInternalRange] = 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 handleDayClick = (date) => {
+    const { from, to } = range;
+    if (!from || from && to) {
+      const newRange2 = { 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);
+    setHoverDate(void 0);
+    setOpen(false);
+  };
+  const handlePreset = (preset) => {
+    const newRange = preset.getRange();
+    if (onChange) onChange(newRange);
+    else setInternalRange(newRange);
+    setActivePreset(preset.label);
+    if (newRange.from) setLeftMonth(dateFns.startOfMonth(newRange.from));
+    setOpen(false);
+  };
+  const rightMonth = dateFns.addMonths(leftMonth, 1);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        disabled,
+        className: chunk5XF7Y25B_js.cn(
+          "inline-flex items-center gap-2 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm transition-colors",
+          "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",
+          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(PopoverContent, { align, className: "w-auto p-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex divide-x divide-gray-100 dark:divide-neutral-700", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col p-3 gap-0.5 min-w-[130px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2 px-2", children: "Presets" }),
+        presets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handlePreset(preset),
+            className: chunk5XF7Y25B_js.cn(
+              "w-full text-left px-2 py-1.5 rounded-md text-sm transition-colors",
+              activePreset === preset.label ? "bg-blue-50 text-blue-600 font-medium dark:bg-blue-950/50 dark:text-blue-400" : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-neutral-700"
+            ),
+            children: preset.label
+          },
+          preset.label
+        ))
+      ] }),
+      /* @__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
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
 
 exports.Button = Button;
 exports.Card = Card;
@@ -2106,6 +2397,8 @@ exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
 exports.ColumnSelection = ColumnSelection;
+exports.DEFAULT_PRESETS = DEFAULT_PRESETS;
+exports.DateRangePicker = DateRangePicker;
 exports.Dialog = Dialog;
 exports.DialogClose = DialogClose;
 exports.DialogContent = DialogContent;
@@ -2195,5 +2488,5 @@ exports.useColumnVisibility = useColumnVisibility;
 exports.useFormContext = useFormContext;
 exports.useFormFieldContext = useFormFieldContext;
 exports.useTableSelection = useTableSelection;
-//# sourceMappingURL=chunk-CY7BVG4S.js.map
-//# sourceMappingURL=chunk-CY7BVG4S.js.map
+//# sourceMappingURL=chunk-J2AWNOYH.js.map
+//# sourceMappingURL=chunk-J2AWNOYH.js.map