@pos-360/horizon 0.27.1 → 0.28.1

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

@@ -1,11 +1,11 @@
-import { cn, Label, Tooltip } from './chunk-UQ66UPWH.mjs';
+import { cn, Label, Tooltip, mergeRefs } from './chunk-EZDGMHS7.mjs';
 import * as React10 from 'react';
 import { useState, useEffect, useCallback } from 'react';
 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, Minus, PenLine, SlidersHorizontal, CalendarIcon, ChevronLeft } from 'lucide-react';
+import { Check, X, ChevronRight, Circle, ChevronDown, ChevronUp, Search, Minus, PenLine, SlidersHorizontal, CalendarIcon, ChevronLeft, Clock } 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';
@@ -2079,6 +2079,311 @@ var Switch = React10.forwardRef(({ className, size, label, labelPosition = "righ
   );
 });
 Switch.displayName = "Switch";
+var DEFAULT_TIME_RANGE = {
+  from: { hour: null, minute: null },
+  to: { hour: null, minute: null }
+};
+function isTimeSet(tv) {
+  return tv.hour !== null && tv.minute !== null;
+}
+function to12Hour(hour24) {
+  if (hour24 === null) return { hour12: null, period: "AM" };
+  const period = hour24 >= 12 ? "PM" : "AM";
+  const hour12 = hour24 % 12 || 12;
+  return { hour12, period };
+}
+function to24Hour(hour12, period) {
+  if (period === "AM") return hour12 === 12 ? 0 : hour12;
+  return hour12 === 12 ? 12 : hour12 + 12;
+}
+function pad(n) {
+  return n.toString().padStart(2, "0");
+}
+function clamp(val, min, max) {
+  return Math.max(min, Math.min(max, val));
+}
+function TimeInput({
+  value,
+  min,
+  max,
+  onChange,
+  onComplete,
+  inputRef,
+  disabled = false,
+  "aria-label": ariaLabel
+}) {
+  const [editValue, setEditValue] = React10.useState(null);
+  const internalRef = React10.useRef(null);
+  const committedRef = React10.useRef(false);
+  const setRefs = React10.useCallback(mergeRefs(internalRef, inputRef), [inputRef]);
+  const handleChange = (e) => {
+    const raw = e.target.value.replace(/\D/g, "").slice(0, 2);
+    if (raw === "") {
+      setEditValue(raw);
+      return;
+    }
+    const parsed = parseInt(raw, 10);
+    const clamped = clamp(parsed, min, max);
+    const display = parsed !== clamped ? pad(clamped) : raw;
+    setEditValue(display);
+    if (raw.length === 2) {
+      committedRef.current = true;
+      onChange(clamped);
+      setEditValue(null);
+      onComplete?.();
+    }
+  };
+  const commit = () => {
+    if (committedRef.current) {
+      committedRef.current = false;
+      setEditValue(null);
+      return;
+    }
+    if (editValue === null) return;
+    if (editValue === "") {
+      setEditValue(null);
+      return;
+    }
+    const parsed = parseInt(editValue, 10);
+    if (!isNaN(parsed)) {
+      onChange(clamp(parsed, min, max));
+    }
+    setEditValue(null);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      commit();
+      internalRef.current?.blur();
+    } else if (e.key === "Escape") {
+      setEditValue(null);
+      internalRef.current?.blur();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const curr = value ?? min;
+      const next = curr >= max ? min : curr + 1;
+      onChange(next);
+      setEditValue(pad(next));
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const curr = value ?? max;
+      const next = curr <= min ? max : curr - 1;
+      onChange(next);
+      setEditValue(pad(next));
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: setRefs,
+      type: "text",
+      inputMode: "numeric",
+      "aria-label": ariaLabel,
+      disabled,
+      value: editValue ?? (value === null ? "--" : pad(value)),
+      onChange: handleChange,
+      onFocus: (e) => {
+        setEditValue("");
+        requestAnimationFrame(() => e.target.select());
+      },
+      onBlur: () => commit(),
+      onKeyDown: handleKeyDown,
+      className: cn(
+        "w-9 h-8 rounded-md border text-center text-sm tabular-nums font-medium outline-none transition-colors",
+        "bg-white border-gray-200 text-gray-600",
+        "focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 focus:text-gray-700",
+        "dark:bg-neutral-800 dark:border-neutral-600 dark:text-gray-100",
+        "dark:focus:border-blue-400 dark:focus:ring-blue-400/30",
+        disabled && "opacity-40 cursor-not-allowed bg-gray-50 dark:bg-neutral-900"
+      )
+    }
+  );
+}
+function PeriodToggle({ value, onChange, disabled = false }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "inline-flex rounded-md border overflow-hidden",
+        disabled && "opacity-40 cursor-not-allowed",
+        "border-gray-200 dark:border-neutral-600"
+      ),
+      children: ["AM", "PM"].map((p) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled,
+          onClick: () => onChange(p),
+          className: cn(
+            "px-2 h-8 text-xs font-semibold tracking-wide transition-colors",
+            "disabled:pointer-events-none",
+            value === p ? "!bg-blue-600 !text-white dark:!bg-blue-500" : "bg-white text-gray-500 hover:bg-gray-50 hover:text-gray-600 dark:bg-neutral-800 dark:text-gray-400 dark:hover:bg-neutral-700"
+          ),
+          children: p
+        },
+        p
+      ))
+    }
+  );
+}
+function TimeField({
+  label,
+  value,
+  onChange,
+  hourRef,
+  minuteRef,
+  onMinuteComplete,
+  disabled = false
+}) {
+  const { hour12, period } = to12Hour(value.hour);
+  const minuteInputRef = React10.useRef(null);
+  const mergedMinuteRef = React10.useCallback(mergeRefs(minuteInputRef, minuteRef), [minuteRef]);
+  const handleHourChange = (newHour12) => {
+    onChange({ ...value, hour: to24Hour(newHour12, period) });
+  };
+  const handleMinuteChange = (newMinute) => {
+    onChange({ ...value, minute: newMinute });
+  };
+  const handlePeriodChange = (newPeriod) => {
+    if (hour12 === null) return;
+    onChange({ ...value, hour: to24Hour(hour12, newPeriod) });
+  };
+  const focusMinute = () => {
+    minuteInputRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "text-xs font-semibold uppercase tracking-wider",
+          disabled ? "text-gray-300 dark:text-gray-600" : "text-gray-400 dark:text-gray-500"
+        ),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(
+        TimeInput,
+        {
+          value: hour12,
+          min: 1,
+          max: 12,
+          onChange: handleHourChange,
+          onComplete: focusMinute,
+          inputRef: hourRef,
+          disabled,
+          "aria-label": `${label} hour`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "text-sm font-bold select-none",
+            disabled ? "text-gray-300 dark:text-gray-600" : "text-gray-400 dark:text-gray-500"
+          ),
+          children: ":"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TimeInput,
+        {
+          value: value.minute,
+          min: 0,
+          max: 59,
+          onChange: handleMinuteChange,
+          onComplete: onMinuteComplete,
+          inputRef: mergedMinuteRef,
+          disabled,
+          "aria-label": `${label} minute`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PeriodToggle,
+        {
+          value: period,
+          onChange: handlePeriodChange,
+          disabled
+        }
+      )
+    ] })
+  ] });
+}
+function TimePickerRow({ value, onChange, disabled = false }) {
+  const toHourRef = React10.useRef(null);
+  const fromSet = isTimeSet(value.from);
+  const toSet = isTimeSet(value.to);
+  const bothSet = fromSet && toSet;
+  const fromMinutes = (value.from.hour ?? 0) * 60 + (value.from.minute ?? 0);
+  const toMinutes = (value.to.hour ?? 0) * 60 + (value.to.minute ?? 0);
+  const bothEqual = fromMinutes === toMinutes;
+  const isOvernight = bothSet && toMinutes < fromMinutes;
+  const durationMinutes = bothSet && !bothEqual ? isOvernight ? 24 * 60 - fromMinutes + toMinutes : toMinutes - fromMinutes : 0;
+  const durationHours = Math.floor(durationMinutes / 60);
+  const durationRemaining = durationMinutes % 60;
+  const showDuration = bothSet && !bothEqual;
+  const durationLabel = durationRemaining > 0 ? `${durationHours}h ${durationRemaining}m window${isOvernight ? " (overnight)" : ""}` : `${durationHours}h window${isOvernight ? " (overnight)" : ""}`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col px-4 pt-2 pb-3 gap-1",
+        "border-t border-gray-100 dark:border-neutral-700"
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Clock,
+            {
+              className: cn(
+                "w-4 h-4 shrink-0",
+                disabled ? "text-gray-300 dark:text-gray-600" : "text-gray-400 dark:text-gray-500"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-[9px] font-medium text-gray-300 dark:text-gray-600 tracking-wide", children: "OPT" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-5", children: [
+            /* @__PURE__ */ jsx(
+              TimeField,
+              {
+                label: "From",
+                value: value.from,
+                onChange: (from) => onChange({ ...value, from }),
+                onMinuteComplete: () => toHourRef.current?.focus(),
+                disabled
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "w-4 h-px",
+                  disabled ? "bg-gray-200 dark:bg-neutral-700" : "bg-gray-300 dark:bg-neutral-600"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TimeField,
+              {
+                label: "To",
+                value: value.to,
+                onChange: (to) => onChange({ ...value, to }),
+                hourRef: toHourRef,
+                disabled
+              }
+            )
+          ] }),
+          showDuration && /* @__PURE__ */ jsx("span", { className: cn(
+            "text-[10px] font-medium pl-0.5",
+            isOvernight ? "text-amber-500 dark:text-amber-400" : "text-gray-400 dark:text-gray-500"
+          ), children: durationLabel })
+        ] })
+      ] })
+    }
+  );
+}
 var WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 function getCalendarDays(month) {
   const start = startOfWeek(startOfMonth(month), { weekStartsOn: 0 });
@@ -2246,16 +2551,25 @@ var DEFAULT_PRESETS = [
     }
   }
 ];
-function formatDateRange(range, placeholder) {
+function formatTime(tv) {
+  if (tv.hour === null || tv.minute === null) return "--:--";
+  const period = tv.hour >= 12 ? "PM" : "AM";
+  const h = tv.hour % 12 || 12;
+  const m = tv.minute.toString().padStart(2, "0");
+  return `${h}:${m} ${period}`;
+}
+function formatDateRange(range, placeholder, time) {
   if (!range?.from) return placeholder;
+  const timeActive = time && time.from.hour !== null && time.to.hour !== null;
+  const timeSuffix = timeActive ? ` ${formatTime(time.from)} \u2013 ${formatTime(time.to)}` : "";
   if (!range.to || isSameDay(range.from, range.to)) {
-    return format(range.from, "MMM d, yyyy");
+    return format(range.from, "MMM d, yyyy") + timeSuffix;
   }
   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")} \u2013 ${format(range.to, "MMM d, yyyy")}${timeSuffix}`;
   }
-  return `${format(range.from, "MMM d, yyyy")} \u2013 ${format(range.to, "MMM d, yyyy")}`;
+  return `${format(range.from, "MMM d, yyyy")} \u2013 ${format(range.to, "MMM d, yyyy")}${timeSuffix}`;
 }
 function DateRangePicker({
   value,
@@ -2265,7 +2579,10 @@ function DateRangePicker({
   placeholder = "Select date range",
   disabled = false,
   align = "start",
-  className
+  className,
+  showTimePicker = false,
+  timeValue,
+  onTimeChange
 }) {
   const [open, setOpen] = React10.useState(false);
   const [internalRange, setInternalRange] = React10.useState({
@@ -2281,11 +2598,19 @@ function DateRangePicker({
     () => startOfMonth(value?.from ?? /* @__PURE__ */ new Date())
   );
   const [activePreset, setActivePreset] = React10.useState();
+  const [internalTime, setInternalTime] = React10.useState(DEFAULT_TIME_RANGE);
   const committedRange = value ?? internalRange;
+  const currentTime = timeValue ?? internalTime;
+  const handleTimeChange = (newTime) => {
+    if (onTimeChange) onTimeChange(newTime);
+    else setInternalTime(newTime);
+  };
+  const timeVisible = !!(draft.from && draft.to);
   const handleOpenChange = (newOpen) => {
     if (newOpen) {
       setDraft(committedRange);
       if (committedRange.from) setLeftMonth(startOfMonth(committedRange.from));
+      if (!onTimeChange) setInternalTime(currentTime);
     }
     setOpen(newOpen);
   };
@@ -2302,11 +2627,17 @@ function DateRangePicker({
   };
   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);
+    if (showTimePicker) {
+      setDraft(newRange);
+      setActivePreset(preset.label);
+      if (newRange.from) setLeftMonth(startOfMonth(newRange.from));
+    } else {
+      if (onChange) onChange(newRange);
+      else setInternalRange(newRange);
+      setActivePreset(preset.label);
+      if (newRange.from) setLeftMonth(startOfMonth(newRange.from));
+      setOpen(false);
+    }
   };
   const handleApply = () => {
     if (draft.from && !draft.to) return;
@@ -2318,6 +2649,7 @@ function DateRangePicker({
   const handleClear = () => {
     setDraft({ from: void 0, to: void 0 });
     setActivePreset(void 0);
+    if (showTimePicker) handleTimeChange(DEFAULT_TIME_RANGE);
   };
   const canClear = !!(draft.from || committedRange.from);
   const canApply = !(draft.from && !draft.to) && !!(draft.from || committedRange.from);
@@ -2337,7 +2669,11 @@ function DateRangePicker({
         ),
         children: [
           /* @__PURE__ */ jsx(CalendarIcon, { className: "w-4 h-4 shrink-0 text-gray-400 dark:text-gray-500" }),
-          /* @__PURE__ */ jsx("span", { children: formatDateRange(committedRange, placeholder) })
+          /* @__PURE__ */ jsx("span", { children: formatDateRange(
+            committedRange,
+            placeholder,
+            showTimePicker ? currentTime : void 0
+          ) })
         ]
       }
     ) }),
@@ -2388,6 +2724,27 @@ function DateRangePicker({
             }
           )
         ] }),
+        showTimePicker && /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: timeVisible && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { height: 0, opacity: 0 },
+            animate: { height: "auto", opacity: 1 },
+            exit: { height: 0, opacity: 0 },
+            transition: {
+              height: { type: "spring", stiffness: 400, damping: 30, mass: 0.8 },
+              opacity: { duration: 0.2 }
+            },
+            className: "overflow-hidden",
+            children: /* @__PURE__ */ jsx(
+              TimePickerRow,
+              {
+                value: currentTime,
+                onChange: handleTimeChange
+              }
+            )
+          },
+          "time-picker"
+        ) }),
         /* @__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",
@@ -2494,6 +2851,6 @@ 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-2LATCE3V.mjs.map
-//# sourceMappingURL=chunk-2LATCE3V.mjs.map
+export { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColumnSelection, DEFAULT_COMPARISON_PERIODS, DEFAULT_PRESETS, DEFAULT_TIME_RANGE, 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-QJMRQP66.mjs.map
+//# sourceMappingURL=chunk-QJMRQP66.mjs.map