@pos-360/horizon 0.22.1 → 0.24.0

package/dist/{chunk-K67HDQZ5.mjs → chunk-252FLGXZ.mjs}

@@ -5,7 +5,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { Check, X, ChevronRight, Circle, ChevronDown, ChevronUp, Search, PenLine, SlidersHorizontal } from 'lucide-react';
+import { Check, X, ChevronRight, Circle, ChevronDown, ChevronUp, Search, PenLine, SlidersHorizontal, CalendarIcon, ChevronLeft } from 'lucide-react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -15,6 +15,7 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { endOfDay, startOfDay, endOfWeek, startOfWeek, endOfMonth, startOfMonth, subDays, subMonths, addMonths, subYears, isBefore, isSameDay, format, isSameMonth, eachDayOfInterval, isWithinInterval } from 'date-fns';
 
 var buttonVariants = cva(
   "group inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-hz-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -2066,7 +2067,372 @@ var Switch = React10.forwardRef(({ className, size, label, labelPosition = "righ
   );
 });
 Switch.displayName = "Switch";
+var WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function getCalendarDays(month) {
+  const start = startOfWeek(startOfMonth(month), { weekStartsOn: 0 });
+  const end = endOfWeek(endOfMonth(month), { weekStartsOn: 0 });
+  return 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] = isBefore(from, effectiveTo) ? [from, effectiveTo] : [effectiveTo, from];
+    return isWithinInterval(date, { start, end });
+  };
+  const isRangeStart = (date) => {
+    const { from } = range;
+    const effectiveTo = getEffectiveTo();
+    if (!from) return false;
+    if (!effectiveTo) return isSameDay(date, from);
+    return isBefore(from, effectiveTo) ? isSameDay(date, from) : isSameDay(date, effectiveTo);
+  };
+  const isRangeEnd = (date) => {
+    const { from } = range;
+    const effectiveTo = getEffectiveTo();
+    if (!from || !effectiveTo) return false;
+    return isBefore(from, effectiveTo) ? isSameDay(date, effectiveTo) : isSameDay(date, from);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-[252px]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onPrevMonth,
+          className: 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__ */ jsx(ChevronLeft, { className: "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: format(month, "MMMM yyyy") }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onNextMonth,
+          className: 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__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 mb-1", children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "text-center text-xs font-medium text-gray-400 dark:text-gray-500 py-1",
+        children: day
+      },
+      day
+    )) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "grid grid-cols-7",
+        onMouseLeave: () => onDayHover(void 0),
+        children: days.map((day, idx) => {
+          const outside = !isSameMonth(day, month);
+          const inRange = !outside && isInRange(day);
+          const rangeStart = !outside && isRangeStart(day);
+          const rangeEnd = !outside && isRangeEnd(day);
+          const isToday = isSameDay(day, today);
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: 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__ */ jsx(
+                "button",
+                {
+                  onClick: () => !outside && onDayClick(day),
+                  onMouseEnter: () => !outside && onDayHover(day),
+                  tabIndex: outside ? -1 : 0,
+                  className: 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: format(day, "d")
+                }
+              )
+            },
+            idx
+          );
+        })
+      }
+    )
+  ] });
+}
+var DEFAULT_PRESETS = [
+  {
+    label: "Today",
+    getRange: () => ({
+      from: startOfDay(/* @__PURE__ */ new Date()),
+      to: endOfDay(/* @__PURE__ */ new Date())
+    })
+  },
+  {
+    label: "Yesterday",
+    getRange: () => {
+      const d = subDays(/* @__PURE__ */ new Date(), 1);
+      return { from: startOfDay(d), to: endOfDay(d) };
+    }
+  },
+  {
+    label: "This Week",
+    getRange: () => ({
+      from: startOfWeek(/* @__PURE__ */ new Date(), { weekStartsOn: 0 }),
+      to: endOfWeek(/* @__PURE__ */ new Date(), { weekStartsOn: 0 })
+    })
+  },
+  {
+    label: "Last Week",
+    getRange: () => {
+      const d = subDays(/* @__PURE__ */ new Date(), 7);
+      return {
+        from: startOfWeek(d, { weekStartsOn: 0 }),
+        to: endOfWeek(d, { weekStartsOn: 0 })
+      };
+    }
+  },
+  {
+    label: "This Month",
+    getRange: () => ({
+      from: startOfMonth(/* @__PURE__ */ new Date()),
+      to: endOfMonth(/* @__PURE__ */ new Date())
+    })
+  },
+  {
+    label: "Last Month",
+    getRange: () => {
+      const d = subMonths(/* @__PURE__ */ new Date(), 1);
+      return { from: startOfMonth(d), to: endOfMonth(d) };
+    }
+  }
+];
+function formatDateRange(range, placeholder) {
+  if (!range?.from) return placeholder;
+  if (!range.to || isSameDay(range.from, range.to)) {
+    return format(range.from, "MMM d, yyyy");
+  }
+  const sameYear = range.from.getFullYear() === range.to.getFullYear();
+  if (sameYear) {
+    return `${format(range.from, "MMM d")} \u2013 ${format(range.to, "MMM d, yyyy")}`;
+  }
+  return `${format(range.from, "MMM d, yyyy")} \u2013 ${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.useState(false);
+  const [internalRange, setInternalRange] = 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 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] = 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(startOfMonth(newRange.from));
+    setOpen(false);
+  };
+  const rightMonth = addMonths(leftMonth, 1);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        disabled,
+        className: 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__ */ 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(PopoverContent, { align, className: "w-auto p-0 overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex divide-x divide-gray-100 dark:divide-neutral-700", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-3 gap-0.5 min-w-[130px]", children: [
+        /* @__PURE__ */ 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__ */ jsx(
+          "button",
+          {
+            onClick: () => handlePreset(preset),
+            className: 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__ */ 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
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+var DEFAULT_COMPARISON_PERIODS = [
+  {
+    key: "yesterday",
+    label: "vs. Yesterday",
+    getRange: () => {
+      const d = subDays(/* @__PURE__ */ new Date(), 1);
+      return { from: startOfDay(d), to: endOfDay(d) };
+    }
+  },
+  {
+    key: "last-week",
+    label: "vs. Last Week",
+    getRange: () => {
+      const d = subDays(/* @__PURE__ */ new Date(), 7);
+      return {
+        from: startOfWeek(d, { weekStartsOn: 0 }),
+        to: endOfWeek(d, { weekStartsOn: 0 })
+      };
+    }
+  },
+  {
+    key: "last-month",
+    label: "vs. Last Month",
+    getRange: () => {
+      const d = subMonths(/* @__PURE__ */ new Date(), 1);
+      return { from: startOfMonth(d), to: endOfMonth(d) };
+    }
+  },
+  {
+    key: "last-year",
+    label: "vs. Last Year",
+    getRange: () => {
+      const d = subYears(/* @__PURE__ */ new Date(), 1);
+      return {
+        from: startOfDay(new Date(d.getFullYear(), 0, 1)),
+        to: endOfDay(new Date(d.getFullYear(), 11, 31))
+      };
+    }
+  }
+];
+var AUTO_SWITCH_THRESHOLD = 4;
+function PeriodComparisonSelector({
+  value,
+  onChange,
+  options = DEFAULT_COMPARISON_PERIODS,
+  mode,
+  size = "default",
+  placeholder = "Compare to...",
+  disabled = false,
+  className
+}) {
+  const resolvedMode = mode ?? (options.length <= AUTO_SWITCH_THRESHOLD ? "segmented" : "select");
+  const handleChange = (key) => {
+    const period = options.find((o) => o.key === key);
+    if (period) onChange?.(key, period);
+  };
+  if (resolvedMode === "segmented") {
+    return /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        options: options.map((o) => ({ label: o.label, value: o.key })),
+        value,
+        onChange: handleChange,
+        size,
+        radius: "md",
+        disabled,
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Select, { value, onValueChange: handleChange, disabled, children: [
+    /* @__PURE__ */ jsx(SelectTrigger, { className, children: /* @__PURE__ */ jsx(SelectValue, { placeholder, children: options.find((o) => o.key === value)?.label }) }),
+    /* @__PURE__ */ jsx(SelectContent, { children: options.map((o) => /* @__PURE__ */ jsx(SelectItem, { value: o.key, children: o.label }, o.key)) })
+  ] });
+}
 
-export { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColumnSelection, 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, 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-K67HDQZ5.mjs.map
-//# sourceMappingURL=chunk-K67HDQZ5.mjs.map
+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-252FLGXZ.mjs.map
+//# sourceMappingURL=chunk-252FLGXZ.mjs.map