acai-ui-library 0.1.16 → 0.1.17

package/dist/components/date-time-picker.cjs

@@ -0,0 +1,653 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/date-time-picker.tsx
+var date_time_picker_exports = {};
+__export(date_time_picker_exports, {
+  DateTimePicker: () => DateTimePicker
+});
+module.exports = __toCommonJS(date_time_picker_exports);
+var React4 = __toESM(require("react"), 1);
+var import_lucide_react4 = require("lucide-react");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/button.tsx
+var React = __toESM(require("react"), 1);
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary-hover",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        success: "bg-success text-success-foreground hover:bg-success-hover"
+      },
+      size: {
+        xs: "h-7 px-2.5 text-xs",
+        sm: "h-9 px-3",
+        default: "h-10 px-4 py-2",
+        lg: "h-11 px-8",
+        icon: "h-10 w-10",
+        "icon-sm": "h-8 w-8"
+      },
+      shape: {
+        default: "rounded-md",
+        rounded: "rounded-lg",
+        pill: "rounded-full",
+        square: "rounded-none"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      shape: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    shape,
+    asChild = false,
+    loading = false,
+    prefixIcon,
+    suffixIcon,
+    children,
+    disabled,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, shape, className })),
+        ref,
+        disabled: isDisabled,
+        ...props,
+        children: [
+          loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Loader2, { className: "animate-spin" }),
+          !loading && prefixIcon,
+          children,
+          suffixIcon
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/calendar.tsx
+var import_react_day_picker = require("react-day-picker");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "dropdown", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_day_picker.DayPicker,
+    {
+      showOutsideDays,
+      className: cn("w-[260px] rounded-lg p-3", className),
+      classNames: {
+        months: "flex flex-col",
+        month: "space-y-3",
+        month_caption: "relative flex h-8 items-center justify-center",
+        caption_label: "text-sm font-medium hidden",
+        nav: "flex items-center",
+        button_previous: cn(
+          "absolute start-0 inline-flex size-7 items-center justify-center rounded-md bg-transparent p-0 text-muted-foreground hover:bg-[var(--hc-color-border-subtle)] hover:text-foreground transition-colors cursor-pointer border-none"
+        ),
+        button_next: cn(
+          "absolute end-0 inline-flex size-7 items-center justify-center rounded-md bg-transparent p-0 text-muted-foreground hover:bg-[var(--hc-color-border-subtle)] hover:text-foreground transition-colors cursor-pointer border-none"
+        ),
+        month_grid: "w-full border-collapse",
+        weekdays: "flex w-full",
+        weekday: "flex-1 h-8 flex items-center justify-center text-[11px] font-medium text-muted-foreground uppercase tracking-wider",
+        week: "flex w-full mt-1",
+        day: "flex-1 h-8 p-0 relative focus-within:z-20 flex items-center justify-center text-sm",
+        day_button: cn(
+          "inline-flex size-8 items-center justify-center rounded-md bg-transparent text-sm font-normal cursor-pointer border-none hover:bg-[var(--hc-color-border-subtle)] transition-colors"
+        ),
+        range_end: "day-range-end",
+        selected: "[&>button]:bg-[var(--hc-primary-600)] [&>button]:text-white [&>button]:hover:bg-[var(--hc-primary-600)] [&>button]:hover:text-white [&>button]:font-medium",
+        today: "[&>button]:font-semibold [&>button]:text-[var(--hc-primary-600)]",
+        outside: "day-outside [&>button]:bg-transparent [&>button]:text-[var(--hc-grey-200)]",
+        disabled: "[&>button]:text-[var(--hc-grey-200)] [&>button]:opacity-50 [&>button]:cursor-default",
+        range_middle: "[&>button]:bg-[var(--hc-primary-100)] [&>button]:text-foreground [&>button]:rounded-none",
+        range_start: "[&>button]:rounded-e-none",
+        dropdowns: "flex items-center gap-1.5 justify-center [&>select]:flex-1",
+        dropdown: "h-7 w-[88px] rounded-md border border-[var(--hc-color-border-subtle)] bg-background px-2 text-xs font-medium text-foreground cursor-pointer outline-none accent-[var(--hc-primary-600)] focus:border-[var(--hc-primary-500)] focus:ring-[2px] focus:ring-[var(--hc-primary-500)]/20 [&>option:checked]:bg-[var(--hc-primary-600)] [&>option:checked]:text-white [&>option]:py-1",
+        hidden: "invisible",
+        ...classNames
+      },
+      captionLayout,
+      components: {
+        Chevron: ({ orientation }) => {
+          const Icon = orientation === "left" ? import_lucide_react2.ChevronLeft : import_lucide_react2.ChevronRight;
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "size-4" });
+        }
+      },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+
+// src/components/popover.tsx
+var React2 = __toESM(require("react"), 1);
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React2.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/components/time-picker.tsx
+var React3 = __toESM(require("react"), 1);
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var TIME_VALUE_PATTERN = /^([01]\d|2[0-3]):([0-5]\d)$/;
+var MINUTES_PER_DAY = 24 * 60;
+var NOON = 12 * 60;
+function pad2(value) {
+  return value.toString().padStart(2, "0");
+}
+function parseTimeValue(value) {
+  if (!value) return void 0;
+  const match = TIME_VALUE_PATTERN.exec(value.trim());
+  if (!match) return void 0;
+  return Number(match[1]) * 60 + Number(match[2]);
+}
+function formatTimeValue(minutesOfDay2) {
+  const normalised = (minutesOfDay2 % MINUTES_PER_DAY + MINUTES_PER_DAY) % MINUTES_PER_DAY;
+  return `${pad2(Math.floor(normalised / 60))}:${pad2(normalised % 60)}`;
+}
+function formatTimeLabel(minutesOfDay2, hourCycle) {
+  const normalised = (minutesOfDay2 % MINUTES_PER_DAY + MINUTES_PER_DAY) % MINUTES_PER_DAY;
+  const hours = Math.floor(normalised / 60);
+  const minutes = normalised % 60;
+  if (hourCycle === 24) return `${pad2(hours)}:${pad2(minutes)}`;
+  const period = hours < NOON / 60 ? "AM" : "PM";
+  const hour12 = hours % 12 === 0 ? 12 : hours % 12;
+  return `${pad2(hour12)}:${pad2(minutes)} ${period}`;
+}
+function isTimeInRange(minutesOfDay2, min, max) {
+  if (min !== void 0 && minutesOfDay2 < min) return false;
+  if (max !== void 0 && minutesOfDay2 > max) return false;
+  return true;
+}
+function to24Hour(hour12, period) {
+  const base = hour12 % 12;
+  return period === "AM" ? base : base + 12;
+}
+function buildMinuteList(minuteStep, extra) {
+  const step = Number.isFinite(minuteStep) ? Math.min(60, Math.max(1, Math.floor(minuteStep))) : 5;
+  const minutes = [];
+  for (let minute = 0; minute < 60; minute += step) minutes.push(minute);
+  if (extra !== void 0 && extra >= 0 && extra < 60 && !minutes.includes(extra)) {
+    minutes.push(extra);
+    minutes.sort((a, b) => a - b);
+  }
+  return minutes;
+}
+function buildAllowedSlots(minutes, min, max) {
+  const slots = [];
+  for (let hour = 0; hour < 24; hour += 1) {
+    for (const minute of minutes) {
+      const slot = hour * 60 + minute;
+      if (isTimeInRange(slot, min, max)) slots.push(slot);
+    }
+  }
+  return slots;
+}
+function snapToAllowedSlot(desired, allowedSlots) {
+  if (allowedSlots.length === 0) return void 0;
+  let best = allowedSlots[0];
+  let bestScore = Number.POSITIVE_INFINITY;
+  for (const slot of allowedSlots) {
+    const score = slot >= desired ? slot - desired : desired - slot + MINUTES_PER_DAY;
+    if (score < bestScore) {
+      bestScore = score;
+      best = slot;
+    }
+  }
+  return best;
+}
+var columnClasses = "flex max-h-[216px] w-16 flex-col gap-1 overflow-y-auto overscroll-contain p-1";
+var cellClasses = "shrink-0 rounded-md px-2 py-1.5 text-sm font-normal text-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-pressed:bg-primary aria-pressed:font-medium aria-pressed:text-primary-foreground aria-pressed:hover:bg-primary aria-pressed:hover:text-primary-foreground disabled:pointer-events-none disabled:text-muted-foreground disabled:opacity-50";
+function TimeCell({ label, accessibleName, pressed, disabled, onSelect }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      type: "button",
+      "aria-label": accessibleName,
+      "aria-pressed": pressed,
+      disabled,
+      onClick: onSelect,
+      className: cn(cellClasses),
+      children: label
+    }
+  );
+}
+function TimePickerPanel({
+  value,
+  onValueChange,
+  minTime,
+  maxTime,
+  minuteStep = 5,
+  hourCycle = 12,
+  hourLabel = "Hour",
+  minuteLabel = "Minute",
+  periodLabel = "Period",
+  className
+}) {
+  const minMinutes = parseTimeValue(minTime);
+  const maxMinutes = parseTimeValue(maxTime);
+  const selected = parseTimeValue(value);
+  const minuteList = React3.useMemo(
+    () => buildMinuteList(minuteStep, selected === void 0 ? void 0 : selected % 60),
+    [minuteStep, selected]
+  );
+  const allowedSlots = React3.useMemo(
+    () => buildAllowedSlots(minuteList, minMinutes, maxMinutes),
+    [minuteList, minMinutes, maxMinutes]
+  );
+  const active = selected ?? allowedSlots[0];
+  const activeHour = active === void 0 ? void 0 : Math.floor(active / 60);
+  const activeMinute = active === void 0 ? void 0 : active % 60;
+  const activePeriod = activeHour !== void 0 && activeHour >= 12 ? "PM" : "AM";
+  const hourHasSlot = (hour) => allowedSlots.some((slot) => Math.floor(slot / 60) === hour);
+  const firstSlotInHour = (hour) => allowedSlots.find((slot) => Math.floor(slot / 60) === hour);
+  const periodHasSlot = (period) => allowedSlots.some((slot) => (slot < NOON ? "AM" : "PM") === period);
+  const firstSlotInPeriod = (period) => allowedSlots.find((slot) => (slot < NOON ? "AM" : "PM") === period);
+  const commit = (minutesOfDay2) => {
+    if (minutesOfDay2 === void 0) return;
+    onValueChange?.(formatTimeValue(minutesOfDay2));
+  };
+  const selectHour = (hour) => {
+    const desired = hour * 60 + (activeMinute ?? 0);
+    commit(isTimeInRange(desired, minMinutes, maxMinutes) ? desired : firstSlotInHour(hour));
+  };
+  const selectMinute = (minute) => {
+    if (activeHour === void 0) return;
+    commit(activeHour * 60 + minute);
+  };
+  const selectPeriod = (period) => {
+    if (activeHour === void 0 || activeMinute === void 0) {
+      commit(firstSlotInPeriod(period));
+      return;
+    }
+    const hour12 = activeHour % 12 === 0 ? 12 : activeHour % 12;
+    const desired = to24Hour(hour12, period) * 60 + activeMinute;
+    commit(
+      isTimeInRange(desired, minMinutes, maxMinutes) ? desired : firstSlotInPeriod(period)
+    );
+  };
+  const hourCells = hourCycle === 24 ? Array.from({ length: 24 }, (_, hour) => hour) : [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("flex items-start divide-x divide-border", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn(columnClasses), role: "group", "aria-label": hourLabel, children: hourCells.map((cell) => {
+      const hour = hourCycle === 24 ? cell : to24Hour(cell, activePeriod);
+      const label = pad2(cell);
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        TimeCell,
+        {
+          label,
+          accessibleName: `${hourLabel} ${label}`,
+          pressed: activeHour === hour && selected !== void 0,
+          disabled: !hourHasSlot(hour),
+          onSelect: () => selectHour(hour)
+        },
+        `hour-${cell}`
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn(columnClasses), role: "group", "aria-label": minuteLabel, children: minuteList.map((minute) => {
+      const label = pad2(minute);
+      const disabled = activeHour === void 0 || !isTimeInRange(activeHour * 60 + minute, minMinutes, maxMinutes);
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        TimeCell,
+        {
+          label,
+          accessibleName: `${minuteLabel} ${label}`,
+          pressed: activeMinute === minute && selected !== void 0,
+          disabled,
+          onSelect: () => selectMinute(minute)
+        },
+        `minute-${minute}`
+      );
+    }) }),
+    hourCycle === 12 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn(columnClasses), role: "group", "aria-label": periodLabel, children: ["AM", "PM"].map((period) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      TimeCell,
+      {
+        label: period,
+        accessibleName: period,
+        pressed: activePeriod === period && selected !== void 0,
+        disabled: !periodHasSlot(period),
+        onSelect: () => selectPeriod(period)
+      },
+      period
+    )) })
+  ] });
+}
+TimePickerPanel.displayName = "TimePickerPanel";
+var TimePicker = React3.forwardRef(
+  ({
+    value,
+    onValueChange,
+    minTime,
+    maxTime,
+    minuteStep = 5,
+    hourCycle = 12,
+    placeholder = "Pick a time",
+    clearable = true,
+    clearLabel = "Clear",
+    disabled,
+    id,
+    name,
+    className,
+    contentClassName,
+    open,
+    onOpenChange,
+    align = "start",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, ref) => {
+    const selected = parseTimeValue(value);
+    const label = selected === void 0 ? placeholder : formatTimeLabel(selected, hourCycle);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Popover, { open, onOpenChange, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        Button,
+        {
+          ref,
+          id,
+          type: "button",
+          variant: "outline",
+          disabled,
+          "aria-label": ariaLabelledBy ? void 0 : ariaLabel ?? placeholder,
+          "aria-labelledby": ariaLabelledBy,
+          className: cn(
+            "w-[180px] justify-start text-left font-normal",
+            selected === void 0 && "text-muted-foreground",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.ClockIcon, { className: "me-2 h-4 w-4", "aria-hidden": "true" }),
+            label
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        PopoverContent,
+        {
+          className: cn("w-auto p-0", contentClassName),
+          align,
+          "aria-label": ariaLabel ?? placeholder,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              TimePickerPanel,
+              {
+                value,
+                onValueChange: (next) => onValueChange?.(next),
+                minTime,
+                maxTime,
+                minuteStep,
+                hourCycle
+              }
+            ),
+            clearable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex justify-end border-t border-border p-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                className: "font-normal",
+                disabled: selected === void 0,
+                onClick: () => onValueChange?.(void 0),
+                children: clearLabel
+              }
+            ) })
+          ]
+        }
+      ),
+      name && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "hidden", name, value: value ?? "" })
+    ] });
+  }
+);
+TimePicker.displayName = "TimePicker";
+
+// src/components/date-time-picker.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function startOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function minutesOfDay(date) {
+  return date.getHours() * 60 + date.getMinutes();
+}
+function withTime(day, minutes) {
+  return new Date(
+    day.getFullYear(),
+    day.getMonth(),
+    day.getDate(),
+    Math.floor(minutes / 60),
+    minutes % 60,
+    0,
+    0
+  );
+}
+var DateTimePicker = React4.forwardRef(
+  ({
+    value,
+    onValueChange,
+    minDate,
+    maxDate,
+    disabledDates,
+    minuteStep = 5,
+    hourCycle = 12,
+    defaultTime = "09:00",
+    placeholder = "Pick a date and time",
+    formatValue,
+    clearable = true,
+    clearLabel = "Clear",
+    timeLabel = "Time",
+    disabled,
+    id,
+    name,
+    className,
+    contentClassName,
+    open,
+    onOpenChange,
+    align = "start",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, ref) => {
+    const activeDay = React4.useMemo(() => {
+      if (value) return startOfDay(value);
+      const today = startOfDay(/* @__PURE__ */ new Date());
+      if (minDate && today < startOfDay(minDate)) return startOfDay(minDate);
+      if (maxDate && today > startOfDay(maxDate)) return startOfDay(maxDate);
+      return today;
+    }, [value, minDate, maxDate]);
+    const timeWindowFor = React4.useCallback(
+      (day) => ({
+        minTime: minDate && isSameDay(day, minDate) ? formatTimeValue(minutesOfDay(minDate)) : void 0,
+        maxTime: maxDate && isSameDay(day, maxDate) ? formatTimeValue(minutesOfDay(maxDate)) : void 0
+      }),
+      [minDate, maxDate]
+    );
+    const activeWindow = timeWindowFor(activeDay);
+    const calendarDisabled = React4.useMemo(() => {
+      const matchers = [];
+      if (minDate) matchers.push({ before: startOfDay(minDate) });
+      if (maxDate) matchers.push({ after: startOfDay(maxDate) });
+      if (Array.isArray(disabledDates)) matchers.push(...disabledDates);
+      else if (disabledDates !== void 0) matchers.push(disabledDates);
+      return matchers;
+    }, [minDate, maxDate, disabledDates]);
+    const handleDaySelect = (day) => {
+      if (!day) return;
+      const desired = value ? minutesOfDay(value) : parseTimeValue(defaultTime) ?? 0;
+      const { minTime, maxTime } = timeWindowFor(day);
+      const min = parseTimeValue(minTime);
+      const max = parseTimeValue(maxTime);
+      if (isTimeInRange(desired, min, max)) {
+        onValueChange?.(withTime(day, desired));
+        return;
+      }
+      const snapped = snapToAllowedSlot(
+        desired,
+        buildAllowedSlots(buildMinuteList(minuteStep, desired % 60), min, max)
+      );
+      if (snapped === void 0) return;
+      onValueChange?.(withTime(day, snapped));
+    };
+    const handleTimeChange = (next) => {
+      const minutes = parseTimeValue(next);
+      if (minutes === void 0) return;
+      onValueChange?.(withTime(value ?? activeDay, minutes));
+    };
+    const label = value ? formatValue?.(value) ?? `${value.toLocaleDateString()} ${formatTimeLabel(minutesOfDay(value), hourCycle)}` : placeholder;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Popover, { open, onOpenChange, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        Button,
+        {
+          ref,
+          id,
+          type: "button",
+          variant: "outline",
+          disabled,
+          "aria-label": ariaLabelledBy ? void 0 : ariaLabel ?? placeholder,
+          "aria-labelledby": ariaLabelledBy,
+          className: cn(
+            "w-[280px] justify-start text-left font-normal",
+            !value && "text-muted-foreground",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.CalendarClockIcon, { className: "me-2 h-4 w-4", "aria-hidden": "true" }),
+            label
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        PopoverContent,
+        {
+          className: cn("w-auto p-0", contentClassName),
+          align,
+          "aria-label": ariaLabel ?? placeholder,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col sm:flex-row sm:items-start sm:divide-x sm:divide-border", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                Calendar,
+                {
+                  mode: "single",
+                  selected: value,
+                  defaultMonth: activeDay,
+                  onSelect: handleDaySelect,
+                  disabled: calendarDisabled,
+                  autoFocus: true
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "border-t border-border p-2 sm:border-t-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "px-1 pb-1 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: timeLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  TimePickerPanel,
+                  {
+                    value: value ? formatTimeValue(minutesOfDay(value)) : void 0,
+                    onValueChange: handleTimeChange,
+                    minTime: activeWindow.minTime,
+                    maxTime: activeWindow.maxTime,
+                    minuteStep,
+                    hourCycle
+                  }
+                )
+              ] })
+            ] }),
+            clearable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex justify-end border-t border-border p-2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                className: "font-normal",
+                disabled: !value,
+                onClick: () => onValueChange?.(void 0),
+                children: clearLabel
+              }
+            ) })
+          ]
+        }
+      ),
+      name && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "input",
+        {
+          type: "hidden",
+          name,
+          value: value ? `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(
+            value.getDate()
+          ).padStart(2, "0")}T${formatTimeValue(minutesOfDay(value))}` : ""
+        }
+      )
+    ] });
+  }
+);
+DateTimePicker.displayName = "DateTimePicker";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DateTimePicker
+});
+//# sourceMappingURL=date-time-picker.cjs.map