@initbase/react-datetime-picker 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1194 @@
+// src/components/datetime/DatePicker.tsx
+import { useState as useState4 } from "react";
+
+// src/components/datetime/Popover.tsx
+import { useRef as useRef2, useState as useState2, useLayoutEffect } from "react";
+
+// src/components/datetime/hooks.ts
+import { useState, useCallback, useEffect } from "react";
+function useControlled(value, defaultValue, onChange) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? value);
+  useEffect(() => {
+    if (isControlled) {
+      setInternalValue(value);
+    }
+  }, [isControlled, value]);
+  const setValue = useCallback(
+    (newValue) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+    },
+    [isControlled, onChange]
+  );
+  return [isControlled ? value : internalValue, setValue];
+}
+function useClickOutside(ref, handler, enabled = true) {
+  useEffect(() => {
+    if (!enabled) return;
+    function handleClick(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        handler();
+      }
+    }
+    function handleKeyDown(event) {
+      if (event.key === "Escape") {
+        handler();
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [ref, handler, enabled]);
+}
+
+// src/components/datetime/Popover.tsx
+import { jsx } from "react/jsx-runtime";
+function getPositionClass(pos) {
+  return `rdp-popover--${pos}`;
+}
+function Popover({
+  open,
+  onClose,
+  children,
+  className = "",
+  style,
+  position = "flexible"
+}) {
+  const ref = useRef2(null);
+  const [resolvedPosition, setResolvedPosition] = useState2(position);
+  const [visible, setVisible] = useState2(false);
+  useClickOutside(ref, onClose, open);
+  useLayoutEffect(() => {
+    if (!open) {
+      setVisible(false);
+      setResolvedPosition(position);
+      return;
+    }
+    if (position !== "flexible") {
+      setResolvedPosition(position);
+      setVisible(true);
+      return;
+    }
+    setVisible(false);
+    setResolvedPosition("bottom");
+    requestAnimationFrame(() => {
+      if (!ref.current) return;
+      const popoverRect = ref.current.getBoundingClientRect();
+      const wrapper = ref.current.parentElement;
+      if (!wrapper) {
+        setVisible(true);
+        return;
+      }
+      const wrapperRect = wrapper.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const spaceBelow = viewportHeight - wrapperRect.bottom;
+      const spaceAbove = wrapperRect.top;
+      if (spaceBelow >= popoverRect.height || spaceBelow >= spaceAbove) {
+        setResolvedPosition("bottom");
+      } else if (spaceAbove >= popoverRect.height) {
+        setResolvedPosition("top");
+      }
+      setVisible(true);
+    });
+  }, [open, position]);
+  if (!open) return null;
+  const positionClass = getPositionClass(resolvedPosition);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: `rdp-popover ${positionClass} ${className}`,
+      style: { ...style, visibility: visible ? "visible" : "hidden" },
+      role: "dialog",
+      children
+    }
+  );
+}
+
+// src/components/datetime/Calendar.tsx
+import { useState as useState3 } from "react";
+
+// src/components/datetime/IconButton.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function IconButton({
+  onClick,
+  disabled = false,
+  className = "",
+  children,
+  ariaLabel
+}) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      className,
+      "aria-label": ariaLabel,
+      children
+    }
+  );
+}
+
+// src/components/datetime/utils.ts
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getFirstDayOfMonth(year, month) {
+  return new Date(year, month, 1).getDay();
+}
+function getCalendarWeeks(year, month) {
+  const weeks = [];
+  const firstDay = getFirstDayOfMonth(year, month);
+  const daysInMonth = getDaysInMonth(year, month);
+  const prevMonthDays = getDaysInMonth(year, month - 1);
+  let currentWeek = [];
+  for (let i = firstDay - 1; i >= 0; i--) {
+    currentWeek.push(new Date(year, month - 1, prevMonthDays - i));
+  }
+  for (let day = 1; day <= daysInMonth; day++) {
+    currentWeek.push(new Date(year, month, day));
+    if (currentWeek.length === 7) {
+      weeks.push(currentWeek);
+      currentWeek = [];
+    }
+  }
+  if (currentWeek.length > 0) {
+    const remaining = 7 - currentWeek.length;
+    for (let i = 1; i <= remaining; i++) {
+      currentWeek.push(new Date(year, month + 1, i));
+    }
+    weeks.push(currentWeek);
+  }
+  return weeks;
+}
+function isSameDay(a, b) {
+  if (!a || !b) return false;
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isInRange(day, range) {
+  const [start, end] = range;
+  if (!start || !end) return false;
+  const d = day.getTime();
+  return d >= start.getTime() && d <= end.getTime();
+}
+function clampDate(date, min, max) {
+  if (min && date.getTime() < min.getTime()) return new Date(min);
+  if (max && date.getTime() > max.getTime()) return new Date(max);
+  return date;
+}
+function isDateDisabled(date, min, max) {
+  if (min && date.getTime() < new Date(min.getFullYear(), min.getMonth(), min.getDate()).getTime())
+    return true;
+  if (max && date.getTime() > new Date(max.getFullYear(), max.getMonth(), max.getDate()).getTime())
+    return true;
+  return false;
+}
+function isSameMonth(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function formatDateValue(date, locale = "en-US") {
+  return date.toLocaleDateString(locale, {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+}
+function formatTimeValue(date, locale = "en-US", showSeconds = false) {
+  return date.toLocaleTimeString(locale, {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: showSeconds ? "2-digit" : void 0
+  });
+}
+function formatDateTimeValue(date, locale = "en-US", showSeconds = false) {
+  return `${formatDateValue(date, locale)} ${formatTimeValue(date, locale, showSeconds)}`;
+}
+var REFERENCE_SUNDAY = new Date(2023, 0, 1);
+function getWeekdayLabels(locale = "en-US") {
+  const labels = [];
+  for (let i = 0; i < 7; i++) {
+    const d = new Date(REFERENCE_SUNDAY);
+    d.setDate(d.getDate() + i);
+    labels.push(d.toLocaleDateString(locale, { weekday: "short" }));
+  }
+  return labels;
+}
+function getMonthLabel(date, locale = "en-US") {
+  return date.toLocaleDateString(locale, { month: "long" });
+}
+function getAMPeriodLabels(locale = "en-US") {
+  const format = new Intl.DateTimeFormat(locale, {
+    hour: "numeric",
+    hour12: true
+  });
+  const amParts = format.formatToParts(new Date(2020, 0, 1, 9, 0, 0));
+  const pmParts = format.formatToParts(new Date(2020, 0, 1, 21, 0, 0));
+  const amLabel = amParts.find((p) => p.type === "dayPeriod")?.value ?? "AM";
+  const pmLabel = pmParts.find((p) => p.type === "dayPeriod")?.value ?? "PM";
+  return [amLabel, pmLabel];
+}
+function generateTimeItems(count, step = 1) {
+  const items = [];
+  for (let i = 0; i < count; i += step) {
+    items.push(String(i).padStart(2, "0"));
+  }
+  return items;
+}
+
+// src/components/datetime/Calendar.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function Calendar({
+  value,
+  highlightRange,
+  onSelect,
+  month: controlledMonth,
+  defaultMonth,
+  onMonthChange,
+  min,
+  max,
+  className = "",
+  style,
+  locale = "en-US"
+}) {
+  const [internalMonth, setInternalMonth] = useState3(
+    () => defaultMonth ?? value ?? /* @__PURE__ */ new Date()
+  );
+  const month = controlledMonth ?? internalMonth;
+  const setMonth = (d) => {
+    if (!controlledMonth) setInternalMonth(d);
+    onMonthChange?.(d);
+  };
+  const weeks = getCalendarWeeks(month.getFullYear(), month.getMonth());
+  const goToPrevMonth = () => {
+    setMonth(new Date(month.getFullYear(), month.getMonth() - 1, 1));
+  };
+  const goToNextMonth = () => {
+    setMonth(new Date(month.getFullYear(), month.getMonth() + 1, 1));
+  };
+  const prevDisabled = min != null && month.getFullYear() <= min.getFullYear() && month.getMonth() <= min.getMonth();
+  const nextDisabled = max != null && month.getFullYear() >= max.getFullYear() && month.getMonth() >= max.getMonth();
+  const rangeStart = highlightRange?.[0] ?? null;
+  const rangeEnd = highlightRange?.[1] ?? null;
+  return /* @__PURE__ */ jsxs("div", { className: `rdp-calendar ${className}`, style, children: [
+    /* @__PURE__ */ jsxs("div", { className: "rdp-calendar-header", children: [
+      /* @__PURE__ */ jsx3(
+        IconButton,
+        {
+          onClick: goToPrevMonth,
+          disabled: prevDisabled,
+          className: "rdp-calendar-nav-btn",
+          ariaLabel: "Previous month",
+          children: /* @__PURE__ */ jsx3(ChevronLeft, {})
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "rdp-calendar-month-year", children: [
+        getMonthLabel(month, locale),
+        " ",
+        month.getFullYear()
+      ] }),
+      /* @__PURE__ */ jsx3(
+        IconButton,
+        {
+          onClick: goToNextMonth,
+          disabled: nextDisabled,
+          className: "rdp-calendar-nav-btn",
+          ariaLabel: "Next month",
+          children: /* @__PURE__ */ jsx3(ChevronRight, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "rdp-calendar-grid", children: [
+      getWeekdayLabels(locale).map((label) => /* @__PURE__ */ jsx3("div", { className: "rdp-calendar-weekday", children: label }, label)),
+      weeks.map(
+        (week, wi) => week.map((day, di) => {
+          const inCurrentMonth = isSameMonth(day, month);
+          const isSelected = isSameDay(day, value ?? null);
+          const isToday = isSameDay(day, /* @__PURE__ */ new Date());
+          const disabled = isDateDisabled(day, min, max);
+          const range = highlightRange ? [rangeStart, rangeEnd] : null;
+          const inRange = range && range[0] && range[1] ? isInRange(day, range) : false;
+          const isRangeStart = isSameDay(day, rangeStart);
+          const isRangeEnd = isSameDay(day, rangeEnd);
+          let cls = "rdp-calendar-day";
+          if (!inCurrentMonth) cls += " rdp-calendar-day--outside";
+          if (isSelected) cls += " rdp-calendar-day--selected";
+          if (isToday) cls += " rdp-calendar-day--today";
+          if (inRange && !isRangeStart && !isRangeEnd) cls += " rdp-calendar-day--in-range";
+          if (isRangeStart) cls += " rdp-calendar-day--range-start";
+          if (isRangeEnd) cls += " rdp-calendar-day--range-end";
+          return /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: cls,
+              disabled,
+              onClick: () => onSelect(day),
+              "aria-label": day.toLocaleDateString(locale),
+              children: day.getDate()
+            },
+            `${wi}-${di}`
+          );
+        })
+      )
+    ] })
+  ] });
+}
+function ChevronLeft() {
+  return /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx3("polyline", { points: "15 18 9 12 15 6" }) });
+}
+function ChevronRight() {
+  return /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx3("polyline", { points: "9 18 15 12 9 6" }) });
+}
+
+// src/components/datetime/InputTrigger.tsx
+import { useRef as useRef3 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function InputTrigger({
+  value,
+  displayValue,
+  placeholder,
+  className = "",
+  style,
+  onClick,
+  open,
+  onClose,
+  children,
+  renderTrigger
+}) {
+  const ref = useRef3(null);
+  return /* @__PURE__ */ jsxs2("div", { ref, className: `rdp-wrapper ${className}`, style, children: [
+    renderTrigger ? renderTrigger({ value: value ?? null, displayValue, placeholder, onClick, open, onClose }) : /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        className: "rdp-trigger",
+        onClick,
+        children: [
+          /* @__PURE__ */ jsx4("span", { style: { flex: 1, textAlign: "left", color: displayValue ? "inherit" : "var(--rdp-text-muted)" }, children: displayValue || placeholder || "Select..." }),
+          /* @__PURE__ */ jsx4(CalendarIcon, {})
+        ]
+      }
+    ),
+    children
+  ] });
+}
+function RangeInputTrigger({
+  value,
+  displayValues,
+  placeholder,
+  className = "",
+  style,
+  onClick,
+  open,
+  onClose,
+  children,
+  renderTrigger
+}) {
+  const ref = useRef3(null);
+  return /* @__PURE__ */ jsxs2("div", { ref, className: `rdp-wrapper ${className}`, style, children: [
+    renderTrigger ? renderTrigger({ value: value ?? [null, null], displayValues, placeholder, onClick, open, onClose }) : /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "rdp-trigger rdp-trigger--range",
+        onClick,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              type: "text",
+              readOnly: true,
+              value: displayValues[0],
+              placeholder: placeholder?.[0] ?? "Start"
+            }
+          ),
+          /* @__PURE__ */ jsx4("span", { className: "rdp-trigger-range-separator", children: "\u2013" }),
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              type: "text",
+              readOnly: true,
+              value: displayValues[1],
+              placeholder: placeholder?.[1] ?? "End"
+            }
+          ),
+          /* @__PURE__ */ jsx4(CalendarIcon, {})
+        ]
+      }
+    ),
+    children
+  ] });
+}
+function CalendarIcon() {
+  return /* @__PURE__ */ jsxs2("svg", { className: "rdp-trigger-icon", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx4("rect", { x: "1.5", y: "2.5", width: "13", height: "12", rx: "2" }),
+    /* @__PURE__ */ jsx4("line", { x1: "1.5", y1: "6", x2: "14.5", y2: "6" }),
+    /* @__PURE__ */ jsx4("line", { x1: "5", y1: "1", x2: "5", y2: "4" }),
+    /* @__PURE__ */ jsx4("line", { x1: "11", y1: "1", x2: "11", y2: "4" })
+  ] });
+}
+
+// src/components/datetime/DatePicker.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function DatePicker({
+  value: controlledValue,
+  onChange,
+  defaultValue,
+  locale = "en-US",
+  className = "",
+  style,
+  placeholder = "Select date",
+  position,
+  min,
+  max,
+  renderTrigger
+}) {
+  const [value, setValue] = useControlled(controlledValue, defaultValue ?? null, onChange);
+  const [open, setOpen] = useState4(false);
+  const handleSelect = (date) => {
+    const clamped = clampDate(date, min, max);
+    setValue(clamped);
+    setOpen(false);
+  };
+  const displayValue = value ? formatDateValue(value, locale) : "";
+  return /* @__PURE__ */ jsx5(
+    InputTrigger,
+    {
+      value,
+      displayValue,
+      placeholder,
+      className,
+      style,
+      onClick: () => setOpen((o) => !o),
+      open,
+      onClose: () => setOpen(false),
+      renderTrigger,
+      children: /* @__PURE__ */ jsx5(Popover, { open, onClose: () => setOpen(false), position, children: /* @__PURE__ */ jsx5(
+        Calendar,
+        {
+          value,
+          onSelect: handleSelect,
+          min,
+          max,
+          locale,
+          defaultMonth: value ?? void 0
+        }
+      ) })
+    }
+  );
+}
+
+// src/components/datetime/TimePicker.tsx
+import { useState as useState5, useMemo } from "react";
+
+// src/components/datetime/TimeColumn.tsx
+import { useRef as useRef4, useEffect as useEffect2 } from "react";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function TimeColumn({
+  count,
+  step,
+  value,
+  onChange,
+  label,
+  formatValue
+}) {
+  const containerRef = useRef4(null);
+  const items = generateTimeItems(count, step);
+  const selectedIndex = items.findIndex(
+    (item) => parseInt(item, 10) === value
+  );
+  useEffect2(() => {
+    if (containerRef.current && selectedIndex >= 0) {
+      const child = containerRef.current.children[selectedIndex + 1];
+      if (child) {
+        child.scrollIntoView({ block: "center", behavior: "smooth" });
+      }
+    }
+  }, [selectedIndex]);
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    label && /* @__PURE__ */ jsx6("div", { className: "rdp-time-label", children: label }),
+    /* @__PURE__ */ jsx6("div", { className: "rdp-time-column", ref: containerRef, children: items.map((item) => {
+      const num = parseInt(item, 10);
+      const isSelected = num === value;
+      return /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          className: `rdp-time-item ${isSelected ? "rdp-time-item--selected" : ""}`,
+          onClick: () => onChange(num),
+          children: formatValue ? formatValue(num) : item
+        },
+        item
+      );
+    }) })
+  ] });
+}
+
+// src/components/datetime/TimePicker.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function TimePicker({
+  value: controlledValue,
+  onChange,
+  defaultValue,
+  locale = "en-US",
+  className = "",
+  style,
+  placeholder = "Select time",
+  position,
+  step = 1,
+  showSeconds = false,
+  timeFormat = "24h",
+  min,
+  max,
+  renderTrigger
+}) {
+  const [value, setValue] = useControlled(controlledValue, defaultValue ?? null, onChange);
+  const [open, setOpen] = useState5(false);
+  const handleHourChange = (hour) => {
+    const newDate = value ? new Date(value) : /* @__PURE__ */ new Date();
+    newDate.setHours(hour);
+    const clamped = clampDate(newDate, min, max);
+    setValue(clamped);
+  };
+  const handleMinuteChange = (minute) => {
+    const newDate = value ? new Date(value) : /* @__PURE__ */ new Date();
+    newDate.setMinutes(minute);
+    const clamped = clampDate(newDate, min, max);
+    setValue(clamped);
+  };
+  const handleSecondChange = (second) => {
+    const newDate = value ? new Date(value) : /* @__PURE__ */ new Date();
+    newDate.setSeconds(second);
+    const clamped = clampDate(newDate, min, max);
+    setValue(clamped);
+  };
+  const displayValue = value ? formatTimeValue(value, locale, showSeconds) : "";
+  const current = value ?? /* @__PURE__ */ new Date();
+  const [amLabel, pmLabel] = useMemo(() => getAMPeriodLabels(locale), [locale]);
+  const formatHour = (h) => {
+    if (timeFormat === "12h") {
+      const display = h === 0 ? 12 : h > 12 ? h - 12 : h;
+      return `${display} ${h < 12 ? amLabel : pmLabel}`;
+    }
+    return String(h).padStart(2, "0");
+  };
+  return /* @__PURE__ */ jsx7(
+    InputTrigger,
+    {
+      value,
+      displayValue,
+      placeholder,
+      className,
+      style,
+      onClick: () => setOpen((o) => !o),
+      open,
+      onClose: () => setOpen(false),
+      renderTrigger,
+      children: /* @__PURE__ */ jsx7(Popover, { open, onClose: () => setOpen(false), position, children: /* @__PURE__ */ jsxs4("div", { className: "rdp-time-picker", children: [
+        /* @__PURE__ */ jsx7(
+          TimeColumn,
+          {
+            count: 24,
+            step: 1,
+            value: current.getHours(),
+            onChange: handleHourChange,
+            label: "Hour",
+            formatValue: formatHour
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          TimeColumn,
+          {
+            count: 60,
+            step,
+            value: current.getMinutes(),
+            onChange: handleMinuteChange,
+            label: "Minute"
+          }
+        ),
+        showSeconds && /* @__PURE__ */ jsx7(
+          TimeColumn,
+          {
+            count: 60,
+            step: 1,
+            value: current.getSeconds(),
+            onChange: handleSecondChange,
+            label: "Second"
+          }
+        )
+      ] }) })
+    }
+  );
+}
+
+// src/components/datetime/DateTimePicker.tsx
+import { useState as useState6, useMemo as useMemo2 } from "react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function DateTimePicker({
+  value: controlledValue,
+  onChange,
+  defaultValue,
+  locale = "en-US",
+  className = "",
+  style,
+  placeholder = "Select date & time",
+  position,
+  step = 1,
+  showSeconds = false,
+  timeFormat = "24h",
+  min,
+  max,
+  renderTrigger
+}) {
+  const [value, setValue] = useControlled(controlledValue, defaultValue ?? null, onChange);
+  const [open, setOpen] = useState6(false);
+  const [showCalendar, setShowCalendar] = useState6(true);
+  const handleDateSelect = (date) => {
+    const current2 = value ? new Date(value) : /* @__PURE__ */ new Date();
+    const newDate = new Date(date);
+    newDate.setHours(current2.getHours(), current2.getMinutes(), current2.getSeconds());
+    setValue(clampDate(newDate, min, max));
+  };
+  const handleHourChange = (hour) => {
+    const current2 = value ? new Date(value) : /* @__PURE__ */ new Date();
+    current2.setHours(hour);
+    setValue(clampDate(current2, min, max));
+  };
+  const handleMinuteChange = (minute) => {
+    const current2 = value ? new Date(value) : /* @__PURE__ */ new Date();
+    current2.setMinutes(minute);
+    setValue(clampDate(current2, min, max));
+  };
+  const handleSecondChange = (second) => {
+    const current2 = value ? new Date(value) : /* @__PURE__ */ new Date();
+    current2.setSeconds(second);
+    setValue(clampDate(current2, min, max));
+  };
+  const handleClose = () => {
+    setOpen(false);
+    setShowCalendar(true);
+  };
+  const displayValue = value ? formatDateTimeValue(value, locale, showSeconds) : "";
+  const current = value ?? /* @__PURE__ */ new Date();
+  const [amLabel, pmLabel] = useMemo2(() => getAMPeriodLabels(locale), [locale]);
+  const formatHour = (h) => {
+    if (timeFormat === "12h") {
+      const display = h === 0 ? 12 : h > 12 ? h - 12 : h;
+      return `${display} ${h < 12 ? amLabel : pmLabel}`;
+    }
+    return String(h).padStart(2, "0");
+  };
+  return /* @__PURE__ */ jsx8(
+    InputTrigger,
+    {
+      value,
+      displayValue,
+      placeholder,
+      className,
+      style,
+      onClick: () => setOpen((o) => !o),
+      open,
+      onClose: handleClose,
+      renderTrigger,
+      children: /* @__PURE__ */ jsx8(Popover, { open, onClose: handleClose, position, children: /* @__PURE__ */ jsxs5("div", { className: "rdp-datetime-layout", children: [
+        /* @__PURE__ */ jsx8(
+          Calendar,
+          {
+            value,
+            onSelect: handleDateSelect,
+            min,
+            max,
+            locale,
+            defaultMonth: value ?? void 0
+          }
+        ),
+        /* @__PURE__ */ jsxs5("div", { className: "rdp-time-picker", children: [
+          /* @__PURE__ */ jsx8(
+            TimeColumn,
+            {
+              count: 24,
+              step: 1,
+              value: current.getHours(),
+              onChange: handleHourChange,
+              label: "Hour",
+              formatValue: formatHour
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            TimeColumn,
+            {
+              count: 60,
+              step,
+              value: current.getMinutes(),
+              onChange: handleMinuteChange,
+              label: "Minute"
+            }
+          ),
+          showSeconds && /* @__PURE__ */ jsx8(
+            TimeColumn,
+            {
+              count: 60,
+              step: 1,
+              value: current.getSeconds(),
+              onChange: handleSecondChange,
+              label: "Second"
+            }
+          )
+        ] })
+      ] }) })
+    }
+  );
+}
+
+// src/components/datetime/DateRangePicker.tsx
+import { useState as useState7, useCallback as useCallback2 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function DateRangePicker({
+  value: controlledValue,
+  onChange,
+  defaultValue,
+  locale = "en-US",
+  className = "",
+  style,
+  placeholder,
+  position,
+  min,
+  max,
+  renderTrigger
+}) {
+  const [range, setRange] = useState7(
+    controlledValue ?? defaultValue ?? [null, null]
+  );
+  const [open, setOpen] = useState7(false);
+  const [pendingStart, setPendingStart] = useState7(null);
+  const isControlled = controlledValue !== void 0;
+  const currentRange = isControlled ? controlledValue : range;
+  const emit = (newRange) => {
+    if (!isControlled) setRange(newRange);
+    onChange?.(newRange);
+  };
+  const handleSelect = useCallback2(
+    (date) => {
+      const clamped = clampDate(date, min, max);
+      if (!pendingStart) {
+        setPendingStart(clamped);
+        emit([clamped, null]);
+      } else {
+        if (clamped.getTime() < pendingStart.getTime()) {
+          emit([clamped, pendingStart]);
+        } else {
+          emit([pendingStart, clamped]);
+        }
+        setPendingStart(null);
+        setOpen(false);
+      }
+    },
+    [pendingStart, min, max, emit]
+  );
+  const handleOpen = () => {
+    setPendingStart(null);
+    setOpen((o) => !o);
+  };
+  const handleClose = () => {
+    setOpen(false);
+    setPendingStart(null);
+  };
+  const displayValues = [
+    currentRange[0] ? formatDateValue(currentRange[0], locale) : "",
+    currentRange[1] ? formatDateValue(currentRange[1], locale) : ""
+  ];
+  const highlightRange = pendingStart ? [pendingStart, currentRange[1]] : [currentRange[0], currentRange[1]];
+  return /* @__PURE__ */ jsx9(
+    RangeInputTrigger,
+    {
+      value: currentRange,
+      displayValues,
+      placeholder: placeholder ?? ["Start date", "End date"],
+      className,
+      style,
+      onClick: handleOpen,
+      open,
+      onClose: handleClose,
+      renderTrigger,
+      children: /* @__PURE__ */ jsx9(Popover, { open, onClose: handleClose, position, children: /* @__PURE__ */ jsx9(
+        Calendar,
+        {
+          value: pendingStart ?? currentRange[0],
+          highlightRange,
+          onSelect: handleSelect,
+          min,
+          max,
+          locale,
+          defaultMonth: currentRange[0] ?? pendingStart ?? void 0
+        }
+      ) })
+    }
+  );
+}
+
+// src/components/datetime/TimeRangePicker.tsx
+import { useState as useState8, useMemo as useMemo3 } from "react";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function TimeRangePicker({
+  value: controlledValue,
+  onChange,
+  defaultValue,
+  locale = "en-US",
+  className = "",
+  style,
+  placeholder,
+  position,
+  step = 1,
+  showSeconds = false,
+  timeFormat = "24h",
+  min,
+  max,
+  renderTrigger
+}) {
+  const [range, setRange] = useState8(
+    controlledValue ?? defaultValue ?? [null, null]
+  );
+  const [open, setOpen] = useState8(false);
+  const isControlled = controlledValue !== void 0;
+  const currentRange = isControlled ? controlledValue : range;
+  const emit = (newRange) => {
+    if (!isControlled) setRange(newRange);
+    onChange?.(newRange);
+  };
+  const getStart = () => {
+    const d = currentRange[0] ? new Date(currentRange[0]) : /* @__PURE__ */ new Date();
+    d.setSeconds(0, 0);
+    return d;
+  };
+  const getEnd = () => {
+    const d = currentRange[1] ? new Date(currentRange[1]) : /* @__PURE__ */ new Date();
+    d.setHours(23, 0, 0, 0);
+    return d;
+  };
+  const updateStartTime = (hours, minutes, seconds = 0) => {
+    const start2 = getStart();
+    start2.setHours(hours, minutes, seconds);
+    emit([clampDate(start2, min, max), currentRange[1]]);
+  };
+  const updateEndTime = (hours, minutes, seconds = 0) => {
+    const end2 = getEnd();
+    end2.setHours(hours, minutes, seconds);
+    emit([currentRange[0], clampDate(end2, min, max)]);
+  };
+  const displayValues = [
+    currentRange[0] ? formatTimeValue(currentRange[0], locale, showSeconds) : "",
+    currentRange[1] ? formatTimeValue(currentRange[1], locale, showSeconds) : ""
+  ];
+  const start = getStart();
+  const end = getEnd();
+  const [amLabel, pmLabel] = useMemo3(() => getAMPeriodLabels(locale), [locale]);
+  const formatHour = (h) => {
+    if (timeFormat === "12h") {
+      const display = h === 0 ? 12 : h > 12 ? h - 12 : h;
+      return `${display} ${h < 12 ? amLabel : pmLabel}`;
+    }
+    return String(h).padStart(2, "0");
+  };
+  return /* @__PURE__ */ jsx10(
+    RangeInputTrigger,
+    {
+      value: currentRange,
+      displayValues,
+      placeholder: placeholder ?? ["Start time", "End time"],
+      className,
+      style,
+      onClick: () => setOpen((o) => !o),
+      open,
+      onClose: () => setOpen(false),
+      renderTrigger,
+      children: /* @__PURE__ */ jsx10(Popover, { open, onClose: () => setOpen(false), position, children: /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 16 }, children: [
+        /* @__PURE__ */ jsxs6("div", { className: "rdp-datetime-range-panel", children: [
+          /* @__PURE__ */ jsx10("div", { className: "rdp-datetime-range-label", children: "Start" }),
+          /* @__PURE__ */ jsxs6("div", { className: "rdp-time-picker", children: [
+            /* @__PURE__ */ jsx10(
+              TimeColumn,
+              {
+                count: 24,
+                step: 1,
+                value: start.getHours(),
+                onChange: (h) => updateStartTime(h, start.getMinutes(), start.getSeconds()),
+                label: "Hour",
+                formatValue: formatHour
+              }
+            ),
+            /* @__PURE__ */ jsx10(
+              TimeColumn,
+              {
+                count: 60,
+                step,
+                value: start.getMinutes(),
+                onChange: (m) => updateStartTime(start.getHours(), m, start.getSeconds()),
+                label: "Minute"
+              }
+            ),
+            showSeconds && /* @__PURE__ */ jsx10(
+              TimeColumn,
+              {
+                count: 60,
+                step: 1,
+                value: start.getSeconds(),
+                onChange: (s) => updateStartTime(start.getHours(), start.getMinutes(), s),
+                label: "Second"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { className: "rdp-datetime-range-panel", children: [
+          /* @__PURE__ */ jsx10("div", { className: "rdp-datetime-range-label", children: "End" }),
+          /* @__PURE__ */ jsxs6("div", { className: "rdp-time-picker", children: [
+            /* @__PURE__ */ jsx10(
+              TimeColumn,
+              {
+                count: 24,
+                step: 1,
+                value: end.getHours(),
+                onChange: (h) => updateEndTime(h, end.getMinutes(), end.getSeconds()),
+                label: "Hour",
+                formatValue: formatHour
+              }
+            ),
+            /* @__PURE__ */ jsx10(
+              TimeColumn,
+              {
+                count: 60,
+                step,
+                value: end.getMinutes(),
+                onChange: (m) => updateEndTime(end.getHours(), m, end.getSeconds()),
+                label: "Minute"
+              }
+            ),
+            showSeconds && /* @__PURE__ */ jsx10(
+              TimeColumn,
+              {
+                count: 60,
+                step: 1,
+                value: end.getSeconds(),
+                onChange: (s) => updateEndTime(end.getHours(), end.getMinutes(), s),
+                label: "Second"
+              }
+            )
+          ] })
+        ] })
+      ] }) })
+    }
+  );
+}
+
+// src/components/datetime/DateTimeRangePicker.tsx
+import { useState as useState9, useCallback as useCallback3, useMemo as useMemo4 } from "react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+function DateTimeRangePicker({
+  value: controlledValue,
+  onChange,
+  defaultValue,
+  locale = "en-US",
+  className = "",
+  style,
+  placeholder,
+  position,
+  step = 1,
+  showSeconds = false,
+  timeFormat = "24h",
+  min,
+  max,
+  renderTrigger
+}) {
+  const [range, setRange] = useState9(
+    controlledValue ?? defaultValue ?? [null, null]
+  );
+  const [open, setOpen] = useState9(false);
+  const [pendingStart, setPendingStart] = useState9(null);
+  const [editingSide, setEditingSide] = useState9("date");
+  const isControlled = controlledValue !== void 0;
+  const currentRange = isControlled ? controlledValue : range;
+  const emit = (newRange) => {
+    if (!isControlled) setRange(newRange);
+    onChange?.(newRange);
+  };
+  const handleDateSelect = useCallback3(
+    (date) => {
+      if (!pendingStart) {
+        setPendingStart(date);
+        emit([date, null]);
+      } else {
+        if (date.getTime() < pendingStart.getTime()) {
+          emit([date, pendingStart]);
+        } else {
+          emit([pendingStart, date]);
+        }
+        setPendingStart(null);
+        setEditingSide("start-time");
+      }
+    },
+    [pendingStart, emit]
+  );
+  const getStart = () => {
+    const d = currentRange[0] ? new Date(currentRange[0]) : /* @__PURE__ */ new Date();
+    return d;
+  };
+  const getEnd = () => {
+    const d = currentRange[1] ? new Date(currentRange[1]) : /* @__PURE__ */ new Date();
+    d.setHours(23, 0, 0, 0);
+    return d;
+  };
+  const updateStartTime = (hours, minutes, seconds = 0) => {
+    const start2 = getStart();
+    start2.setHours(hours, minutes, seconds);
+    emit([clampDate(start2, min, max), currentRange[1]]);
+  };
+  const updateEndTime = (hours, minutes, seconds = 0) => {
+    const end2 = getEnd();
+    end2.setHours(hours, minutes, seconds);
+    emit([currentRange[0], clampDate(end2, min, max)]);
+  };
+  const handleClose = () => {
+    setOpen(false);
+    setPendingStart(null);
+    setEditingSide("date");
+  };
+  const displayValues = [
+    currentRange[0] ? formatDateTimeValue(currentRange[0], locale, showSeconds) : "",
+    currentRange[1] ? formatDateTimeValue(currentRange[1], locale, showSeconds) : ""
+  ];
+  const highlightRange = pendingStart ? [pendingStart, currentRange[1]] : [currentRange[0], currentRange[1]];
+  const start = getStart();
+  const end = getEnd();
+  const [amLabel, pmLabel] = useMemo4(() => getAMPeriodLabels(locale), [locale]);
+  const formatHour = (h) => {
+    if (timeFormat === "12h") {
+      const display = h === 0 ? 12 : h > 12 ? h - 12 : h;
+      return `${display} ${h < 12 ? amLabel : pmLabel}`;
+    }
+    return String(h).padStart(2, "0");
+  };
+  return /* @__PURE__ */ jsx11(
+    RangeInputTrigger,
+    {
+      value: currentRange,
+      displayValues,
+      placeholder: placeholder ?? ["Start date & time", "End date & time"],
+      className,
+      style,
+      onClick: () => setOpen((o) => !o),
+      open,
+      onClose: handleClose,
+      renderTrigger,
+      children: /* @__PURE__ */ jsx11(Popover, { open, onClose: handleClose, position, style: { width: "max-content" }, children: /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: 16, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx11(
+          Calendar,
+          {
+            value: pendingStart ?? currentRange[0],
+            highlightRange,
+            onSelect: handleDateSelect,
+            min,
+            max,
+            locale,
+            defaultMonth: currentRange[0] ?? pendingStart ?? void 0
+          }
+        ),
+        !pendingStart && currentRange[0] && currentRange[1] && /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: 16 }, children: [
+          /* @__PURE__ */ jsxs7("div", { className: "rdp-datetime-range-panel", children: [
+            /* @__PURE__ */ jsx11("div", { className: "rdp-datetime-range-label", children: "Start Time" }),
+            /* @__PURE__ */ jsxs7("div", { className: "rdp-time-picker", children: [
+              /* @__PURE__ */ jsx11(
+                TimeColumn,
+                {
+                  count: 24,
+                  step: 1,
+                  value: start.getHours(),
+                  onChange: (h) => updateStartTime(h, start.getMinutes(), start.getSeconds()),
+                  label: "Hour",
+                  formatValue: formatHour
+                }
+              ),
+              /* @__PURE__ */ jsx11(
+                TimeColumn,
+                {
+                  count: 60,
+                  step,
+                  value: start.getMinutes(),
+                  onChange: (m) => updateStartTime(start.getHours(), m, start.getSeconds()),
+                  label: "Minute"
+                }
+              ),
+              showSeconds && /* @__PURE__ */ jsx11(
+                TimeColumn,
+                {
+                  count: 60,
+                  step: 1,
+                  value: start.getSeconds(),
+                  onChange: (s) => updateStartTime(start.getHours(), start.getMinutes(), s),
+                  label: "Second"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { className: "rdp-datetime-range-panel", children: [
+            /* @__PURE__ */ jsx11("div", { className: "rdp-datetime-range-label", children: "End Time" }),
+            /* @__PURE__ */ jsxs7("div", { className: "rdp-time-picker", children: [
+              /* @__PURE__ */ jsx11(
+                TimeColumn,
+                {
+                  count: 24,
+                  step: 1,
+                  value: end.getHours(),
+                  onChange: (h) => updateEndTime(h, end.getMinutes(), end.getSeconds()),
+                  label: "Hour",
+                  formatValue: formatHour
+                }
+              ),
+              /* @__PURE__ */ jsx11(
+                TimeColumn,
+                {
+                  count: 60,
+                  step,
+                  value: end.getMinutes(),
+                  onChange: (m) => updateEndTime(end.getHours(), m, end.getSeconds()),
+                  label: "Minute"
+                }
+              ),
+              showSeconds && /* @__PURE__ */ jsx11(
+                TimeColumn,
+                {
+                  count: 60,
+                  step: 1,
+                  value: end.getSeconds(),
+                  onChange: (s) => updateEndTime(end.getHours(), end.getMinutes(), s),
+                  label: "Second"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ] }) })
+    }
+  );
+}
+export {
+  DatePicker,
+  DateRangePicker,
+  DateTimePicker,
+  DateTimeRangePicker,
+  TimePicker,
+  TimeRangePicker
+};
+//# sourceMappingURL=index.mjs.map