@underverse-ui/underverse 2.0.35 → 2.0.37

package/dist/chunk-JG3U26V6.js

@@ -0,0 +1,1692 @@
+import {
+  Popover,
+  getBorderRadiusClass,
+  useShadCNAnimations,
+  useUnderverseUIConfig
+} from "./chunk-5GMQ23IU.js";
+import {
+  cn,
+  formControlFixedClass,
+  formControlGroupOutlineClass,
+  formControlLabelClass,
+  formControlSizeStyles,
+  useSmartLocale,
+  useSmartTranslations
+} from "./chunk-6XQTRIP6.js";
+import {
+  __export
+} from "./chunk-NSBPE2FW.js";
+
+// src/utils/date.ts
+var date_exports = {};
+__export(date_exports, {
+  formatDate: () => formatDate,
+  formatDateForInput: () => formatDateForInput,
+  formatDateShort: () => formatDateShort,
+  formatDateSmart: () => formatDateSmart,
+  formatDateTime: () => formatDateTime,
+  formatDateTimeForInput: () => formatDateTimeForInput,
+  formatDateWithDay: () => formatDateWithDay,
+  formatTime: () => formatTime,
+  formatTimeAgo: () => formatTimeAgo,
+  getDayOfWeek: () => getDayOfWeek,
+  isToday: () => isToday,
+  isYesterday: () => isYesterday,
+  parseDateString: () => parseDateString
+});
+var localeMap = {
+  en: "en-US",
+  vi: "vi-VN",
+  ko: "ko-KR",
+  ja: "ja-JP"
+};
+function getLocaleString(locale = "en") {
+  return localeMap[locale] || localeMap.en;
+}
+function formatDate(date, locale = "en") {
+  if (!date) return "";
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return "";
+  return d.toLocaleDateString(getLocaleString(locale), {
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  });
+}
+function formatDateShort(date, locale = "en") {
+  if (!date) return "";
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return "";
+  return d.toLocaleDateString(getLocaleString(locale), {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric"
+  });
+}
+function formatTime(date, locale = "en") {
+  if (!date) return "";
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return "";
+  return d.toLocaleTimeString(getLocaleString(locale), {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function formatDateTime(date, locale = "en") {
+  if (!date) return "";
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return "";
+  return d.toLocaleString(getLocaleString(locale), {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function formatTimeAgo(date, locale = "en") {
+  if (!date) return "";
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return "";
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - d.getTime();
+  const diffSec = Math.floor(diffMs / 1e3);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHour = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHour / 24);
+  const diffWeek = Math.floor(diffDay / 7);
+  const diffMonth = Math.floor(diffDay / 30);
+  const diffYear = Math.floor(diffDay / 365);
+  const labels = {
+    en: {
+      justNow: "Just now",
+      minute: (n) => `${n} minute${n > 1 ? "s" : ""} ago`,
+      hour: (n) => `${n} hour${n > 1 ? "s" : ""} ago`,
+      day: (n) => `${n} day${n > 1 ? "s" : ""} ago`,
+      week: (n) => `${n} week${n > 1 ? "s" : ""} ago`,
+      month: (n) => `${n} month${n > 1 ? "s" : ""} ago`,
+      year: (n) => `${n} year${n > 1 ? "s" : ""} ago`
+    },
+    vi: {
+      justNow: "V\u1EEBa xong",
+      minute: (n) => `${n} ph\xFAt tr\u01B0\u1EDBc`,
+      hour: (n) => `${n} gi\u1EDD tr\u01B0\u1EDBc`,
+      day: (n) => `${n} ng\xE0y tr\u01B0\u1EDBc`,
+      week: (n) => `${n} tu\u1EA7n tr\u01B0\u1EDBc`,
+      month: (n) => `${n} th\xE1ng tr\u01B0\u1EDBc`,
+      year: (n) => `${n} n\u0103m tr\u01B0\u1EDBc`
+    },
+    ko: {
+      justNow: "\uBC29\uAE08 \uC804",
+      minute: (n) => `${n}\uBD84 \uC804`,
+      hour: (n) => `${n}\uC2DC\uAC04 \uC804`,
+      day: (n) => `${n}\uC77C \uC804`,
+      week: (n) => `${n}\uC8FC \uC804`,
+      month: (n) => `${n}\uAC1C\uC6D4 \uC804`,
+      year: (n) => `${n}\uB144 \uC804`
+    },
+    ja: {
+      justNow: "\u305F\u3063\u305F\u4ECA",
+      minute: (n) => `${n}\u5206\u524D`,
+      hour: (n) => `${n}\u6642\u9593\u524D`,
+      day: (n) => `${n}\u65E5\u524D`,
+      week: (n) => `${n}\u9031\u9593\u524D`,
+      month: (n) => `${n}\u30F6\u6708\u524D`,
+      year: (n) => `${n}\u5E74\u524D`
+    }
+  };
+  const l = labels[locale] || labels.en;
+  if (diffSec < 60) return l.justNow;
+  if (diffMin < 60) return l.minute(diffMin);
+  if (diffHour < 24) return l.hour(diffHour);
+  if (diffDay < 7) return l.day(diffDay);
+  if (diffWeek < 4) return l.week(diffWeek);
+  if (diffMonth < 12) return l.month(diffMonth);
+  return l.year(diffYear);
+}
+function isToday(date) {
+  if (!date) return false;
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return false;
+  const today = /* @__PURE__ */ new Date();
+  return d.getDate() === today.getDate() && d.getMonth() === today.getMonth() && d.getFullYear() === today.getFullYear();
+}
+function isYesterday(date) {
+  if (!date) return false;
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return false;
+  const yesterday = /* @__PURE__ */ new Date();
+  yesterday.setDate(yesterday.getDate() - 1);
+  return d.getDate() === yesterday.getDate() && d.getMonth() === yesterday.getMonth() && d.getFullYear() === yesterday.getFullYear();
+}
+function formatDateForInput(date) {
+  if (!date) return "";
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return "";
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function formatDateTimeForInput(date) {
+  if (!date) return "";
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return "";
+  const dateStr = formatDateForInput(date);
+  const hours = String(d.getHours()).padStart(2, "0");
+  const minutes = String(d.getMinutes()).padStart(2, "0");
+  return `${dateStr}T${hours}:${minutes}`;
+}
+function getDayOfWeek(date, locale = "en") {
+  if (!date) return "";
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return "";
+  return d.toLocaleDateString(getLocaleString(locale), {
+    weekday: "long"
+  });
+}
+function formatDateWithDay(date, locale = "en") {
+  if (!date) return "";
+  const dayOfWeek = getDayOfWeek(date, locale);
+  const dateStr = formatDateShort(date, locale);
+  return `${dayOfWeek}, ${dateStr}`;
+}
+function formatDateSmart(date, locale = "en") {
+  if (!date) return "";
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return "";
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - d.getTime();
+  const diffHour = Math.floor(diffMs / (1e3 * 60 * 60));
+  const labels = {
+    en: {
+      today: "Today at",
+      yesterday: "Yesterday at"
+    },
+    vi: {
+      today: "H\xF4m nay l\xFAc",
+      yesterday: "H\xF4m qua l\xFAc"
+    },
+    ko: {
+      today: "\uC624\uB298",
+      yesterday: "\uC5B4\uC81C"
+    },
+    ja: {
+      today: "\u4ECA\u65E5",
+      yesterday: "\u6628\u65E5"
+    }
+  };
+  const l = labels[locale] || labels.en;
+  if (diffHour < 1) {
+    return formatTimeAgo(date, locale);
+  }
+  if (isToday(date)) {
+    return `${l.today} ${formatTime(date, locale)}`;
+  }
+  if (isYesterday(date)) {
+    return `${l.yesterday} ${formatTime(date, locale)}`;
+  }
+  if (diffHour < 24 * 7) {
+    return formatTimeAgo(date, locale);
+  }
+  return formatDateTime(date, locale);
+}
+function parseDateString(str, locale = "en") {
+  if (!str) return null;
+  const cleaned = str.trim();
+  if (!cleaned) return null;
+  const parts = cleaned.split(/[\/\-\.\s]+/).filter(Boolean);
+  if (parts.length !== 3) return null;
+  let day = 0;
+  let month = 0;
+  let year = 0;
+  if (locale === "vi") {
+    day = parseInt(parts[0], 10);
+    month = parseInt(parts[1], 10);
+    year = parseInt(parts[2], 10);
+  } else if (locale === "ja" || locale === "ko") {
+    year = parseInt(parts[0], 10);
+    month = parseInt(parts[1], 10);
+    day = parseInt(parts[2], 10);
+  } else {
+    if (parts[0].length === 4) {
+      year = parseInt(parts[0], 10);
+      month = parseInt(parts[1], 10);
+      day = parseInt(parts[2], 10);
+    } else {
+      month = parseInt(parts[0], 10);
+      day = parseInt(parts[1], 10);
+      year = parseInt(parts[2], 10);
+    }
+  }
+  if (isNaN(day) || isNaN(month) || isNaN(year)) return null;
+  if (year < 100) {
+    year += year >= 50 ? 1900 : 2e3;
+  }
+  const parsedDate = new Date(year, month - 1, day);
+  if (parsedDate.getFullYear() === year && parsedDate.getMonth() === month - 1 && parsedDate.getDate() === day) {
+    return parsedDate;
+  }
+  return null;
+}
+
+// src/components/DatePicker.tsx
+import { Calendar, ChevronLeft, ChevronRight, Sparkles, X as XIcon } from "lucide-react";
+import * as React from "react";
+import { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function normalizeToLocalDate(date) {
+  if (!date) return null;
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+var DatePicker = ({
+  id,
+  value,
+  onChange,
+  placeholder,
+  className,
+  disabled = false,
+  size: requestedSize = "md",
+  label,
+  labelClassName,
+  required,
+  todayLabel,
+  clearLabel,
+  weekdayLabels,
+  disablePastDates = false,
+  minDate,
+  maxDate,
+  borderMode,
+  iconOnly = false,
+  iconOnlyDateFormat = "locale",
+  getPortalContainer
+}) => {
+  const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
+  const t = useSmartTranslations("DatePicker");
+  const tv = useSmartTranslations("ValidationInput");
+  const locale = useSmartLocale();
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [viewDate, setViewDate] = React.useState(value || /* @__PURE__ */ new Date());
+  const [viewMode, setViewMode] = React.useState("calendar");
+  const [localRequiredError, setLocalRequiredError] = React.useState();
+  const triggerRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const wheelContainerRef = React.useRef(null);
+  const wheelDeltaRef = React.useRef(0);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState("");
+  React.useEffect(() => {
+    setInputValue((currentInput) => {
+      if (value) {
+        const parsed = parseDateString(currentInput, locale);
+        const isSame = parsed && parsed.getTime() === value.getTime();
+        return isSame ? currentInput : formatDateShort(value, locale);
+      }
+      return isFocused ? currentInput : "";
+    });
+  }, [isFocused, locale, value]);
+  const handleInputChange = (e) => {
+    const text = e.target.value;
+    setInputValue(text);
+    const parsedDate = parseDateString(text, locale);
+    if (parsedDate) {
+      if (!isDateDisabled(parsedDate)) {
+        onChange(parsedDate);
+        setViewDate(parsedDate);
+        setLocalRequiredError(void 0);
+      }
+    }
+  };
+  const handleInputBlur = () => {
+    setIsFocused(false);
+    if (!inputValue.trim()) {
+      if (required) {
+        setLocalRequiredError(tv("required"));
+      } else {
+        if (value) onChange(void 0);
+        setLocalRequiredError(void 0);
+      }
+    } else {
+      const parsedDate = parseDateString(inputValue, locale);
+      if (parsedDate && !isDateDisabled(parsedDate)) {
+        onChange(parsedDate);
+        setInputValue(formatDateShort(parsedDate, locale));
+        setLocalRequiredError(void 0);
+      } else {
+        if (value) {
+          setInputValue(formatDateShort(value, locale));
+          setLocalRequiredError(void 0);
+        } else {
+          setInputValue("");
+          if (required) {
+            setLocalRequiredError(tv("required"));
+          }
+        }
+      }
+    }
+  };
+  const handleInputKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const parsedDate = parseDateString(inputValue, locale);
+      if (parsedDate && !isDateDisabled(parsedDate)) {
+        onChange(parsedDate);
+        setInputValue(formatDateShort(parsedDate, locale));
+        setViewDate(parsedDate);
+        setIsOpen(false);
+        setLocalRequiredError(void 0);
+      } else if (!inputValue.trim() && !required) {
+        onChange(void 0);
+        setIsOpen(false);
+        setLocalRequiredError(void 0);
+      } else {
+        setIsOpen(false);
+      }
+    } else if (e.key === "Escape") {
+      setIsOpen(false);
+    }
+  };
+  const normalizeToLocalDay = React.useCallback((date) => {
+    if (!date) return null;
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  }, []);
+  const minDay = React.useMemo(() => normalizeToLocalDay(minDate), [minDate, normalizeToLocalDay]);
+  const maxDay = React.useMemo(() => normalizeToLocalDay(maxDate), [maxDate, normalizeToLocalDay]);
+  const isDateDisabled = React.useCallback(
+    (date) => {
+      const day = normalizeToLocalDay(date);
+      if (!day) return false;
+      if (disablePastDates) {
+        const today = /* @__PURE__ */ new Date();
+        today.setHours(0, 0, 0, 0);
+        if (day < today) return true;
+      }
+      if (minDay && day < minDay) return true;
+      if (maxDay && day > maxDay) return true;
+      return false;
+    },
+    [disablePastDates, maxDay, minDay, normalizeToLocalDay]
+  );
+  useShadCNAnimations();
+  const sizeStyles = {
+    sm: {
+      trigger: formControlSizeStyles.sm.compactControl,
+      dayCell: "w-7 h-7 text-xs",
+      monthCell: "w-6 h-6 text-xs",
+      navButton: "p-1.5",
+      navIcon: "h-3 w-3",
+      calendarIcon: "h-3.5 w-3.5",
+      clearIcon: "w-2.5 h-2.5",
+      actionButton: "px-2 py-1 text-[10px] gap-1",
+      actionIcon: "w-2.5 h-2.5",
+      contentWidth: 240,
+      contentPadding: "p-4",
+      label: formControlSizeStyles.sm.label,
+      weekdayLabel: "text-[9px] py-1",
+      headerMargin: "mb-2",
+      footerMargin: "mt-3 pt-2 gap-1.5"
+    },
+    md: {
+      trigger: formControlSizeStyles.md.control,
+      dayCell: "w-8 h-8 text-sm",
+      monthCell: "w-8 h-8 text-sm",
+      navButton: "p-2",
+      navIcon: "h-4 w-4",
+      calendarIcon: "h-4 w-4",
+      clearIcon: "w-3.5 h-3.5",
+      actionButton: "px-3 py-2 text-xs gap-2",
+      actionIcon: "w-3.5 h-3.5",
+      contentWidth: 280,
+      contentPadding: "p-5",
+      label: formControlSizeStyles.md.label,
+      weekdayLabel: "text-[10px] py-1.5",
+      headerMargin: "mb-4",
+      footerMargin: "mt-4 pt-3 gap-2"
+    },
+    lg: {
+      trigger: formControlSizeStyles.lg.control,
+      dayCell: "w-10 h-10 text-base",
+      monthCell: "w-10 h-10 text-base",
+      navButton: "p-2.5",
+      navIcon: "h-5 w-5",
+      calendarIcon: "h-5 w-5",
+      clearIcon: "w-4 h-4",
+      actionButton: "px-4 py-2.5 text-sm gap-2",
+      actionIcon: "w-4 h-4",
+      contentWidth: 340,
+      contentPadding: "p-6",
+      label: formControlSizeStyles.lg.label,
+      weekdayLabel: "text-xs py-2",
+      headerMargin: "mb-5",
+      footerMargin: "mt-5 pt-4 gap-2.5"
+    }
+  };
+  React.useEffect(() => {
+    if (value) {
+      setViewDate(value);
+    } else {
+      setViewDate(/* @__PURE__ */ new Date());
+    }
+  }, [value]);
+  React.useEffect(() => {
+    if (disabled || !required || value) {
+      setLocalRequiredError(void 0);
+    }
+  }, [disabled, required, value]);
+  React.useEffect(() => {
+    if (!isOpen) {
+      setViewMode("calendar");
+    }
+  }, [isOpen]);
+  const handleDateSelect = (date) => {
+    let selectedDate;
+    if (value && (value.getHours() !== 0 || value.getMinutes() !== 0 || value.getSeconds() !== 0)) {
+      selectedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), value.getHours(), value.getMinutes(), value.getSeconds());
+    } else {
+      const now = /* @__PURE__ */ new Date();
+      selectedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), now.getHours(), now.getMinutes(), now.getSeconds());
+    }
+    onChange(selectedDate);
+    setLocalRequiredError(void 0);
+    setIsOpen(false);
+  };
+  const formatDateDisplay = (date) => {
+    return date.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", {
+      day: "numeric",
+      month: "long",
+      year: "numeric"
+    });
+  };
+  const formatIconOnlyDate = (date) => {
+    if (iconOnlyDateFormat === "year-month-day") {
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const day = String(date.getDate()).padStart(2, "0");
+      return `${date.getFullYear()}/${month}/${day}`;
+    }
+    return formatDateDisplay(date);
+  };
+  const getDaysInMonth = (date) => {
+    return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+  };
+  const getFirstDayOfMonth = (date) => {
+    return new Date(date.getFullYear(), date.getMonth(), 1).getDay();
+  };
+  const navigateMonth = React.useCallback((direction) => {
+    setViewDate((prev) => {
+      const newDate = new Date(prev);
+      newDate.setMonth(prev.getMonth() + (direction === "next" ? 1 : -1));
+      return newDate;
+    });
+  }, []);
+  const isElementVerticallyScrollable = (el) => {
+    const style = window.getComputedStyle(el);
+    const overflowY = style.overflowY;
+    if (overflowY !== "auto" && overflowY !== "scroll") return false;
+    const node = el;
+    return node.scrollHeight > node.clientHeight + 1;
+  };
+  const renderCalendar = () => {
+    const daysInMonth = getDaysInMonth(viewDate);
+    const firstDayOfMonth = getFirstDayOfMonth(viewDate);
+    const days = [];
+    for (let i = 0; i < firstDayOfMonth; i++) {
+      days.push(/* @__PURE__ */ jsx("div", { className: sizeStyles[size].dayCell.split(" ").slice(0, 2).join(" ") }, `empty-${i}`));
+    }
+    for (let day = 1; day <= daysInMonth; day++) {
+      const date = new Date(viewDate.getFullYear(), viewDate.getMonth(), day);
+      const isSelected = value && date.getDate() === value.getDate() && date.getMonth() === value.getMonth() && date.getFullYear() === value.getFullYear();
+      const isToday2 = date.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
+      const isDisabled = isDateDisabled(date);
+      const totalDaysFromStart = firstDayOfMonth + day - 1;
+      const rowIndex = Math.floor(totalDaysFromStart / 7);
+      days.push(
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => !isDisabled && handleDateSelect(date),
+            disabled: isDisabled,
+            style: {
+              animationDelay: isOpen ? `${rowIndex * 40}ms` : "0ms"
+            },
+            className: cn(
+              sizeStyles[size].dayCell,
+              "datepicker-day rounded-lg relative cursor-pointer",
+              "transition-all duration-200 font-medium active:scale-95",
+              isDisabled && "opacity-30 cursor-not-allowed text-muted-foreground active:scale-100",
+              isSelected ? "bg-linear-to-br from-primary to-primary/80 text-primary-foreground font-bold shadow-lg shadow-primary/30 scale-110 z-10 hover:from-primary hover:to-primary/70 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus:outline-none" : !isDisabled && "hover:bg-accent/80 hover:text-accent-foreground hover:scale-105 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus:outline-none focus:bg-accent/90",
+              isToday2 && !isSelected && "bg-primary/15 text-primary font-bold ring-2 ring-primary/30"
+            ),
+            children: [
+              day,
+              isToday2 && !isSelected && /* @__PURE__ */ jsx("span", { className: "absolute -bottom-0.5 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-primary" })
+            ]
+          },
+          day
+        )
+      );
+    }
+    return days;
+  };
+  const renderMonthSelector = () => {
+    const months = locale === "vi" ? ["Th1", "Th2", "Th3", "Th4", "Th5", "Th6", "Th7", "Th8", "Th9", "Th10", "Th11", "Th12"] : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+    return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2 p-2", children: months.map((month, idx) => {
+      const isSelected = viewDate.getMonth() === idx;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setViewDate(new Date(viewDate.getFullYear(), idx, 1));
+            setViewMode("calendar");
+          },
+          className: cn(
+            "py-2 px-3 rounded-lg text-sm font-medium transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 active:scale-95",
+            isSelected ? "bg-primary text-primary-foreground shadow-md" : "hover:bg-accent/80 text-foreground hover:scale-105"
+          ),
+          children: month
+        },
+        month
+      );
+    }) });
+  };
+  const renderYearSelector = () => {
+    const currentYear = viewDate.getFullYear();
+    const startYear = Math.floor(currentYear / 12) * 12;
+    const years = Array.from({ length: 12 }, (_, i) => startYear + i);
+    return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2 p-2", children: years.map((year) => {
+      const isSelected = viewDate.getFullYear() === year;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setViewDate(new Date(year, viewDate.getMonth(), 1));
+            setViewMode("month");
+          },
+          className: cn(
+            "py-2 px-3 rounded-lg text-sm font-medium transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 active:scale-95",
+            isSelected ? "bg-primary text-primary-foreground shadow-md" : "hover:bg-accent/80 text-foreground hover:scale-105"
+          ),
+          children: year
+        },
+        year
+      );
+    }) });
+  };
+  const navigateYearRange = (direction) => {
+    const currentYear = viewDate.getFullYear();
+    const offset = direction === "next" ? 12 : -12;
+    setViewDate(new Date(currentYear + offset, viewDate.getMonth(), 1));
+  };
+  const datePickerContent = /* @__PURE__ */ jsxs("div", { ref: wheelContainerRef, "data-datepicker": true, className: "w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4 px-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => viewMode === "year" ? navigateYearRange("prev") : navigateMonth("prev"),
+          className: cn(
+            "p-2 rounded-xl transition-all duration-200",
+            "bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground",
+            "hover:scale-110 active:scale-95 hover:shadow-md",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+          ),
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setViewMode(viewMode === "month" ? "calendar" : "month"),
+            className: cn(
+              "text-sm font-bold transition-all duration-200 px-2 py-1 rounded-lg",
+              viewMode === "month" ? "bg-primary/15 text-primary" : "text-foreground hover:bg-accent/50"
+            ),
+            children: viewDate.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", { month: "long" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setViewMode(viewMode === "year" ? "calendar" : "year"),
+            className: cn(
+              "text-sm font-bold transition-all duration-200 px-2 py-1 rounded-lg",
+              viewMode === "year" ? "bg-primary/15 text-primary" : "text-foreground hover:bg-accent/50"
+            ),
+            children: viewDate.getFullYear()
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => viewMode === "year" ? navigateYearRange("next") : navigateMonth("next"),
+          className: cn(
+            "p-2 rounded-xl transition-all duration-200",
+            "bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground",
+            "hover:scale-110 active:scale-95 hover:shadow-md",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+          ),
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    viewMode === "calendar" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-7 gap-1 mb-2 px-0.5"), children: (weekdayLabels || (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"])).map(
+        (day, idx) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "text-center font-bold uppercase tracking-wide",
+              sizeStyles[size].weekdayLabel,
+              idx === 0 || idx === 6 ? "text-primary/70" : "text-muted-foreground/60"
+            ),
+            children: day
+          },
+          day
+        )
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 p-1 rounded-xl bg-muted/20", children: renderCalendar() })
+    ] }),
+    viewMode === "month" && renderMonthSelector(),
+    viewMode === "year" && renderYearSelector(),
+    /* @__PURE__ */ jsxs("div", { className: cn("flex items-center border-t border-border/50", sizeStyles[size].footerMargin), children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            const today = /* @__PURE__ */ new Date();
+            if (isDateDisabled(today)) return;
+            handleDateSelect(today);
+          },
+          disabled: isDateDisabled(/* @__PURE__ */ new Date()),
+          className: cn(
+            "flex-1 font-semibold rounded-xl",
+            "bg-linear-to-r from-primary/10 to-primary/5 border border-primary/30",
+            "text-primary hover:from-primary/20 hover:to-primary/10 hover:border-primary/50",
+            "transition-all duration-300 flex items-center justify-center",
+            "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-primary/10",
+            sizeStyles[size].actionButton,
+            isDateDisabled(/* @__PURE__ */ new Date()) && "opacity-50 cursor-not-allowed hover:scale-100 active:scale-100"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Sparkles, { className: sizeStyles[size].actionIcon }),
+            todayLabel || t("today")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            onChange(void 0);
+            setIsOpen(false);
+            setViewDate(/* @__PURE__ */ new Date());
+          },
+          className: cn(
+            "flex-1 font-semibold rounded-xl",
+            "bg-linear-to-r from-destructive/10 to-destructive/5 border border-destructive/30",
+            "text-destructive hover:from-destructive/20 hover:to-destructive/10 hover:border-destructive/50",
+            "transition-all duration-300 flex items-center justify-center",
+            "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-destructive/10",
+            sizeStyles[size].actionButton
+          ),
+          children: [
+            /* @__PURE__ */ jsx(XIcon, { className: sizeStyles[size].actionIcon }),
+            clearLabel || t("clear")
+          ]
+        }
+      )
+    ] })
+  ] });
+  const autoId = useId();
+  const resolvedId = id ? String(id) : `datepicker-${autoId}`;
+  const labelId = label ? `${resolvedId}-label` : void 0;
+  const panelId = `${resolvedId}-panel`;
+  const labelSize = sizeStyles[size].label;
+  const radiusClass = size === "sm" ? "rounded-md" : "rounded-lg";
+  const verticalGap = size === "sm" ? "space-y-1.5" : size === "lg" ? "space-y-2.5" : "space-y-2";
+  const effectiveError = localRequiredError;
+  const globalConfig = useUnderverseUIConfig();
+  const resolvedBorderMode = borderMode ?? globalConfig.borderMode ?? "full";
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full group", verticalGap), children: [
+    label && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxs(
+      "label",
+      {
+        id: labelId,
+        htmlFor: resolvedId,
+        onClick: () => inputRef.current?.focus(),
+        className: cn(
+          labelSize,
+          formControlLabelClass,
+          "transition-colors duration-300 cursor-pointer",
+          disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary hover:text-primary",
+          isOpen && "text-primary",
+          effectiveError && "text-destructive",
+          labelClassName
+        ),
+        children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1 animate-pulse", children: "*" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        tabIndex: -1,
+        "aria-hidden": "true",
+        value: value ? "selected" : "",
+        onChange: () => {
+        },
+        required,
+        disabled,
+        onInvalid: (e) => {
+          e.preventDefault();
+          setLocalRequiredError(tv("required"));
+        },
+        className: "pointer-events-none absolute h-0 w-0 opacity-0"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        getPortalContainer,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        contentProps: { id: panelId },
+        placement: "bottom-start",
+        disabled,
+        contentWidth: sizeStyles[size].contentWidth,
+        borderMode: resolvedBorderMode,
+        contentClassName: cn(
+          "p-0",
+          "backdrop-blur-xl bg-popover/95 border-border/40 shadow-2xl",
+          // Keep usable on small viewports (wheel scroll should stay within the popover if it overflows)
+          "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto overscroll-contain",
+          sizeStyles[size].contentPadding,
+          "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
+        ),
+        trigger: iconOnly ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-label": value ? formatDateDisplay(value) : placeholder || t("placeholder"),
+            "aria-haspopup": "dialog",
+            "aria-expanded": isOpen,
+            "aria-controls": panelId,
+            onMouseDown: (event) => event.preventDefault(),
+            className: cn(
+              "inline-flex flex-col items-center gap-0.5 rounded px-1 py-0.5 text-sm text-foreground transition-colors",
+              disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/45",
+              className
+            ),
+            children: [
+              value ? /* @__PURE__ */ jsx("span", { className: "text-[10px] leading-none whitespace-nowrap", children: formatIconOnlyDate(value) }) : null,
+              /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4", "aria-hidden": "true" })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: triggerRef,
+            className: cn(
+              "group flex w-full items-center justify-between bg-background/80 backdrop-blur-sm",
+              formControlFixedClass,
+              formControlGroupOutlineClass,
+              getBorderRadiusClass(resolvedBorderMode),
+              sizeStyles[size].trigger,
+              formControlSizeStyles[requestedSize].control,
+              disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
+                "focus-within:border-ring",
+                "hover:bg-accent/10"
+              ],
+              "transition-all duration-300 ease-out",
+              isOpen && "border-ring shadow-lg shadow-primary/10",
+              effectiveError && "border-destructive/60 bg-destructive/5",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 items-center gap-2.5 overflow-hidden", children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center justify-center transition-colors duration-300",
+                      isOpen ? "text-primary" : "text-muted-foreground group-hover:text-primary"
+                    ),
+                    children: /* @__PURE__ */ jsx(Calendar, { className: cn(sizeStyles[size].calendarIcon, "transition-transform duration-300", isOpen && "scale-110") })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: inputRef,
+                    id: resolvedId,
+                    type: "text",
+                    role: "combobox",
+                    "aria-label": value ? formatDateDisplay(value) : placeholder || t("placeholder"),
+                    "aria-labelledby": labelId,
+                    "aria-haspopup": "dialog",
+                    "aria-expanded": isOpen,
+                    "aria-controls": panelId,
+                    "aria-required": required,
+                    "aria-invalid": !!effectiveError,
+                    disabled,
+                    placeholder: placeholder || t("placeholder"),
+                    value: isFocused ? inputValue : value ? formatDateDisplay(value) : "",
+                    onChange: handleInputChange,
+                    onFocus: () => {
+                      setIsFocused(true);
+                      if (!disabled) setIsOpen(true);
+                    },
+                    onBlur: handleInputBlur,
+                    onKeyDown: handleInputKeyDown,
+                    onClick: (e) => {
+                      if (isOpen) {
+                        e.stopPropagation();
+                      }
+                    },
+                    className: "h-full min-w-0 flex-1 truncate bg-transparent border-none outline-none focus:outline-none p-0 text-foreground font-medium placeholder-muted-foreground/60"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+                value && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    role: "button",
+                    "aria-label": clearLabel || t("clear"),
+                    tabIndex: 0,
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      onChange(void 0);
+                      setViewDate(/* @__PURE__ */ new Date());
+                    },
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onChange(void 0);
+                        setLocalRequiredError(void 0);
+                        setViewDate(/* @__PURE__ */ new Date());
+                      }
+                    },
+                    className: cn(
+                      "inline-flex items-center justify-center rounded-lg p-1",
+                      "text-muted-foreground hover:text-destructive hover:bg-destructive/10",
+                      "transition-all duration-200 cursor-pointer hover:scale-110"
+                    ),
+                    children: /* @__PURE__ */ jsx(XIcon, { className: "h-3.5 w-3.5" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"),
+                    children: /* @__PURE__ */ jsx("svg", { className: sizeStyles[size].calendarIcon, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        children: datePickerContent
+      }
+    ),
+    effectiveError && /* @__PURE__ */ jsx("div", { className: "text-xs text-destructive", children: effectiveError })
+  ] });
+};
+var DateRangePicker = ({
+  id,
+  startDate,
+  endDate,
+  onChange,
+  placeholder = "Select date range...",
+  className,
+  label,
+  labelClassName,
+  required = false,
+  disablePastDates = false,
+  minDate,
+  maxDate,
+  size: requestedSize = "md",
+  disabled = false,
+  borderMode,
+  getPortalContainer
+}) => {
+  const size = requestedSize === "xs" ? "sm" : requestedSize === "xl" ? "lg" : requestedSize;
+  const locale = useSmartLocale();
+  const t = useSmartTranslations("DatePicker");
+  const tv = useSmartTranslations("ValidationInput");
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [viewMode, setViewMode] = React.useState("calendar");
+  const [localRequiredError, setLocalRequiredError] = React.useState();
+  const wheelContainerRef = React.useRef(null);
+  const wheelDeltaRef = React.useRef(0);
+  const triggerRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState("");
+  const todayDate = React.useMemo(() => {
+    const today = /* @__PURE__ */ new Date();
+    return new Date(today.getFullYear(), today.getMonth(), today.getDate());
+  }, []);
+  const getRangeString = React.useCallback((s, e) => {
+    if (!s) return "";
+    const startStr = formatDateShort(s, locale);
+    if (!e) return `${startStr} - `;
+    return `${startStr} - ${formatDateShort(e, locale)}`;
+  }, [locale]);
+  React.useEffect(() => {
+    setInputValue((currentInput) => {
+      if (startDate) {
+        const parts = currentInput.split(/\s*-\s*/);
+        const inputStart = parts[0] ? parseDateString(parts[0], locale) : null;
+        const inputEnd = parts[1] ? parseDateString(parts[1], locale) : null;
+        const startSame = inputStart && inputStart.getTime() === startDate.getTime();
+        const endSame = !endDate && !inputEnd || endDate && inputEnd && endDate.getTime() === inputEnd.getTime();
+        return startSame && endSame ? currentInput : getRangeString(startDate, endDate);
+      }
+      return isFocused ? currentInput : "";
+    });
+  }, [endDate, getRangeString, isFocused, locale, startDate]);
+  const handleInputChange = (e) => {
+    const text = e.target.value;
+    setInputValue(text);
+    const parts = text.split(/\s*-\s*/);
+    if (parts.length === 2) {
+      const s = parseDateString(parts[0], locale);
+      const eVal = parseDateString(parts[1], locale);
+      if (s) {
+        const isStartDisabled = disablePastDates && s < todayDate || !!minDay && s < minDay || !!maxDay && s > maxDay;
+        if (!isStartDisabled) {
+          setTempStart(s);
+          if (eVal) {
+            const isEndDisabled = disablePastDates && eVal < todayDate || !!minDay && eVal < minDay || !!maxDay && eVal > maxDay;
+            if (!isEndDisabled && s <= eVal) {
+              setTempEnd(eVal);
+              onChange(s, eVal);
+              setViewDate(s);
+              setLocalRequiredError(void 0);
+            } else {
+              setTempEnd(null);
+              onChange(s, null);
+            }
+          } else {
+            setTempEnd(null);
+            onChange(s, null);
+          }
+        }
+      }
+    } else if (parts.length === 1 && parts[0].trim()) {
+      const s = parseDateString(parts[0], locale);
+      if (s) {
+        const isStartDisabled = disablePastDates && s < todayDate || !!minDay && s < minDay || !!maxDay && s > maxDay;
+        if (!isStartDisabled) {
+          setTempStart(s);
+          setTempEnd(null);
+          onChange(s, null);
+        }
+      }
+    }
+  };
+  const handleInputBlur = () => {
+    setIsFocused(false);
+    if (!inputValue.trim()) {
+      if (required) {
+        setLocalRequiredError(tv("required"));
+      } else {
+        setTempStart(null);
+        setTempEnd(null);
+        if (startDate || endDate) onChange(void 0, void 0);
+        setLocalRequiredError(void 0);
+      }
+    } else {
+      const parts = inputValue.split(/\s*-\s*/);
+      const s = parts[0] ? parseDateString(parts[0], locale) : null;
+      const eVal = parts[1] ? parseDateString(parts[1], locale) : null;
+      if (s) {
+        const isStartDisabled = disablePastDates && s < todayDate || !!minDay && s < minDay || !!maxDay && s > maxDay;
+        if (!isStartDisabled) {
+          if (eVal) {
+            const isEndDisabled = disablePastDates && eVal < todayDate || !!minDay && eVal < minDay || !!maxDay && eVal > maxDay;
+            if (!isEndDisabled && s <= eVal) {
+              setTempStart(s);
+              setTempEnd(eVal);
+              onChange(s, eVal);
+              setInputValue(getRangeString(s, eVal));
+              setLocalRequiredError(void 0);
+              return;
+            }
+          } else {
+            setTempStart(s);
+            setTempEnd(null);
+            onChange(s, null);
+            setInputValue(getRangeString(s, null));
+            setLocalRequiredError(void 0);
+            return;
+          }
+        }
+      }
+      if (startDate) {
+        setTempStart(normalizeToLocalDate(startDate));
+        setTempEnd(normalizeToLocalDate(endDate));
+        setInputValue(getRangeString(startDate, endDate));
+        setLocalRequiredError(void 0);
+      } else {
+        setTempStart(null);
+        setTempEnd(null);
+        setInputValue("");
+        if (required) {
+          setLocalRequiredError(tv("required"));
+        }
+      }
+    }
+  };
+  const handleInputKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const parts = inputValue.split(/\s*-\s*/);
+      const s = parts[0] ? parseDateString(parts[0], locale) : null;
+      const eVal = parts[1] ? parseDateString(parts[1], locale) : null;
+      if (s) {
+        const isStartDisabled = disablePastDates && s < todayDate || !!minDay && s < minDay || !!maxDay && s > maxDay;
+        if (!isStartDisabled) {
+          if (eVal) {
+            const isEndDisabled = disablePastDates && eVal < todayDate || !!minDay && eVal < minDay || !!maxDay && eVal > maxDay;
+            if (!isEndDisabled && s <= eVal) {
+              setTempStart(s);
+              setTempEnd(eVal);
+              onChange(s, eVal);
+              setInputValue(getRangeString(s, eVal));
+              setViewDate(s);
+              setIsOpen(false);
+              setLocalRequiredError(void 0);
+              return;
+            }
+          } else {
+            setTempStart(s);
+            setTempEnd(null);
+            onChange(s, null);
+            setInputValue(getRangeString(s, null));
+            setViewDate(s);
+            setIsOpen(false);
+            setLocalRequiredError(void 0);
+            return;
+          }
+        }
+      }
+      setIsOpen(false);
+    } else if (e.key === "Escape") {
+      setIsOpen(false);
+    }
+  };
+  const sizeStyles = {
+    sm: {
+      trigger: formControlSizeStyles.sm.compactControl,
+      dayCell: "w-7 h-7 text-xs",
+      monthCell: "w-6 h-6 text-xs",
+      navButton: "p-1.5",
+      navIcon: "h-3 w-3",
+      calendarIcon: "h-3.5 w-3.5",
+      clearIcon: "w-2.5 h-2.5",
+      actionButton: "px-2 py-1 text-[10px] gap-1",
+      actionIcon: "w-2.5 h-2.5",
+      contentWidth: 240,
+      contentPadding: "p-4",
+      label: formControlSizeStyles.sm.label,
+      weekdayLabel: "text-[9px] py-1",
+      headerMargin: "mb-2",
+      footerMargin: "mt-3 pt-2 gap-1.5"
+    },
+    md: {
+      trigger: formControlSizeStyles.md.control,
+      dayCell: "w-8 h-8 text-sm",
+      monthCell: "w-8 h-8 text-sm",
+      navButton: "p-2",
+      navIcon: "h-4 w-4",
+      calendarIcon: "h-4 w-4",
+      clearIcon: "w-3.5 h-3.5",
+      actionButton: "px-3 py-2 text-xs gap-2",
+      actionIcon: "w-3.5 h-3.5",
+      contentWidth: 280,
+      contentPadding: "p-5",
+      label: formControlSizeStyles.md.label,
+      weekdayLabel: "text-[10px] py-1.5",
+      headerMargin: "mb-4",
+      footerMargin: "mt-4 pt-3 gap-2"
+    },
+    lg: {
+      trigger: formControlSizeStyles.lg.control,
+      dayCell: "w-10 h-10 text-base",
+      monthCell: "w-10 h-10 text-base",
+      navButton: "p-2.5",
+      navIcon: "h-5 w-5",
+      calendarIcon: "h-5 w-5",
+      clearIcon: "w-4 h-4",
+      actionButton: "px-4 py-2.5 text-sm gap-2",
+      actionIcon: "w-4 h-4",
+      contentWidth: 340,
+      contentPadding: "p-6",
+      label: formControlSizeStyles.lg.label,
+      weekdayLabel: "text-xs py-2",
+      headerMargin: "mb-5",
+      footerMargin: "mt-5 pt-4 gap-2.5"
+    }
+  };
+  const minDay = normalizeToLocalDate(minDate);
+  const maxDay = normalizeToLocalDate(maxDate);
+  const [viewDate, setViewDate] = React.useState(startDate || /* @__PURE__ */ new Date());
+  const [tempStart, setTempStart] = React.useState(normalizeToLocalDate(startDate));
+  const [tempEnd, setTempEnd] = React.useState(normalizeToLocalDate(endDate));
+  const [hoveredDate, setHoveredDate] = React.useState(null);
+  React.useEffect(() => {
+    setTempStart(normalizeToLocalDate(startDate));
+  }, [startDate]);
+  React.useEffect(() => {
+    setTempEnd(normalizeToLocalDate(endDate));
+  }, [endDate]);
+  React.useEffect(() => {
+    if (!isOpen) {
+      setViewMode("calendar");
+    }
+  }, [isOpen]);
+  React.useEffect(() => {
+    if (!required || startDate && endDate) {
+      setLocalRequiredError(void 0);
+    }
+  }, [endDate, required, startDate]);
+  const isSameDay = (a, b) => {
+    if (!a || !b) return false;
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+  };
+  const inRange = (d, s, e) => d > s && d < e;
+  const getDaysInMonth = (d) => new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
+  const getFirstDayOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1).getDay();
+  const navigateMonth = (direction) => {
+    setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() + (direction === "next" ? 1 : -1), 1));
+  };
+  const navigateYearRange = (direction) => {
+    setViewDate((prev) => new Date(prev.getFullYear() + (direction === "next" ? 12 : -12), prev.getMonth(), 1));
+  };
+  const isElementVerticallyScrollable = (el) => {
+    const style = window.getComputedStyle(el);
+    const overflowY = style.overflowY;
+    if (overflowY !== "auto" && overflowY !== "scroll") return false;
+    const node = el;
+    return node.scrollHeight > node.clientHeight + 1;
+  };
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const container = wheelContainerRef.current;
+    if (!container) return;
+    const onWheel = (event) => {
+      if (!container.contains(event.target)) return;
+      if (event.ctrlKey) return;
+      let node = event.target;
+      while (node && node !== container) {
+        if (isElementVerticallyScrollable(node)) return;
+        node = node.parentElement;
+      }
+      if (isElementVerticallyScrollable(container)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      wheelDeltaRef.current += event.deltaY;
+      const threshold = 70;
+      if (Math.abs(wheelDeltaRef.current) < threshold) return;
+      const steps = Math.trunc(wheelDeltaRef.current / threshold);
+      wheelDeltaRef.current -= steps * threshold;
+      const direction = steps > 0 ? "next" : "prev";
+      for (let i = 0; i < Math.abs(steps); i++) {
+        setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() + (direction === "next" ? 1 : -1), 1));
+      }
+    };
+    container.addEventListener("wheel", onWheel, { passive: false });
+    return () => container.removeEventListener("wheel", onWheel);
+  }, [isOpen]);
+  const handleSelect = (date) => {
+    const localDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    if (!tempStart || tempStart && tempEnd) {
+      setTempStart(localDate);
+      setTempEnd(null);
+      setHoveredDate(null);
+      onChange(localDate, null);
+    } else if (tempStart && !tempEnd) {
+      if (localDate < tempStart) {
+        setTempStart(localDate);
+        onChange(localDate, null);
+      } else {
+        setTempEnd(localDate);
+        setLocalRequiredError(void 0);
+        onChange(tempStart, localDate);
+        setIsOpen(false);
+      }
+    }
+  };
+  const handleSelectToday = () => {
+    const today = /* @__PURE__ */ new Date();
+    today.setHours(0, 0, 0, 0);
+    const localToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+    const isPastDate = disablePastDates && localToday < today;
+    const isOutOfRange = !!minDay && localToday < minDay || !!maxDay && localToday > maxDay;
+    if (isPastDate || isOutOfRange) return;
+    setTempStart(localToday);
+    setTempEnd(localToday);
+    setHoveredDate(null);
+    setLocalRequiredError(void 0);
+    onChange(localToday, localToday);
+    setIsOpen(false);
+  };
+  const handleClear = () => {
+    setTempStart(null);
+    setTempEnd(null);
+    setHoveredDate(null);
+    onChange(void 0, void 0);
+    setIsOpen(false);
+  };
+  const renderGrid = () => {
+    const nodes = [];
+    const daysInMonth = getDaysInMonth(viewDate);
+    const firstDay = getFirstDayOfMonth(viewDate);
+    const today = /* @__PURE__ */ new Date();
+    today.setHours(0, 0, 0, 0);
+    for (let i = 0; i < firstDay; i++) nodes.push(/* @__PURE__ */ jsx("div", { className: "w-8 h-8" }, `e-${i}`));
+    for (let d = 1; d <= daysInMonth; d++) {
+      const date = new Date(viewDate.getFullYear(), viewDate.getMonth(), d);
+      const isPastDate = disablePastDates && date < today;
+      const isOutOfRange = !!minDay && date < minDay || !!maxDay && date > maxDay;
+      const isDisabled = isPastDate || isOutOfRange;
+      const isSelectedStart = isSameDay(date, tempStart);
+      const isSelectedEnd = isSameDay(date, tempEnd);
+      const isHovering = hoveredDate && tempStart && !tempEnd;
+      let isInRange = false;
+      let isRangeStart = false;
+      let isRangeEnd = false;
+      if (tempStart && tempEnd) {
+        if (isSameDay(date, tempStart)) isRangeStart = true;
+        if (isSameDay(date, tempEnd)) isRangeEnd = true;
+        if (inRange(date, tempStart, tempEnd)) isInRange = true;
+      } else if (isHovering) {
+        if (hoveredDate > tempStart) {
+          if (isSameDay(date, tempStart)) isRangeStart = true;
+          if (isSameDay(date, hoveredDate)) isRangeEnd = true;
+          if (inRange(date, tempStart, hoveredDate)) isInRange = true;
+        } else {
+          if (isSameDay(date, hoveredDate)) isRangeStart = true;
+          if (isSameDay(date, tempStart)) isRangeEnd = true;
+          if (inRange(date, hoveredDate, tempStart)) isInRange = true;
+        }
+      }
+      nodes.push(
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => !isDisabled && handleSelect(date),
+            disabled: isDisabled,
+            onMouseEnter: () => !isDisabled && tempStart && !tempEnd && setHoveredDate(date),
+            onMouseLeave: () => tempStart && !tempEnd && setHoveredDate(null),
+            className: cn(
+              "transition-all duration-200 focus:outline-none relative font-medium cursor-pointer",
+              sizeStyles[size].dayCell,
+              // Disabled/past date state
+              isDisabled && "opacity-30 cursor-not-allowed text-muted-foreground",
+              // Default state
+              !isDisabled && !isInRange && !isRangeStart && !isRangeEnd && "hover:bg-accent/80 hover:text-accent-foreground hover:scale-105 rounded-lg",
+              // Range selection styling - smooth continuous background with gradient
+              isInRange && "bg-primary/15 text-foreground",
+              (isRangeStart || isRangeEnd) && "bg-linear-to-br from-primary to-primary/80 text-primary-foreground hover:from-primary hover:to-primary/70 shadow-lg shadow-primary/25",
+              // Only round the actual start and end of the range
+              isRangeStart && !isRangeEnd && "rounded-l-lg rounded-r-none",
+              isRangeEnd && !isRangeStart && "rounded-r-lg rounded-l-none",
+              isRangeStart && isRangeEnd && "rounded-lg",
+              // Single day selection
+              // Hover effects for range
+              isInRange && !isDisabled && "hover:bg-primary/25",
+              !isDisabled && "focus:bg-accent focus:text-accent-foreground focus:z-10 focus:shadow-md"
+            ),
+            children: d
+          },
+          d
+        )
+      );
+    }
+    return nodes;
+  };
+  const renderMonthSelector = () => {
+    const months = locale === "vi" ? ["Th1", "Th2", "Th3", "Th4", "Th5", "Th6", "Th7", "Th8", "Th9", "Th10", "Th11", "Th12"] : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+    return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2 p-2", children: months.map((month, idx) => {
+      const isSelected = viewDate.getMonth() === idx;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setViewDate(new Date(viewDate.getFullYear(), idx, 1));
+            setViewMode("calendar");
+          },
+          className: cn(
+            "py-2 px-3 rounded-lg text-sm font-medium transition-all duration-200",
+            isSelected ? "bg-primary text-primary-foreground shadow-md" : "hover:bg-accent/80 text-foreground hover:scale-105"
+          ),
+          children: month
+        },
+        month
+      );
+    }) });
+  };
+  const renderYearSelector = () => {
+    const startYear = Math.floor(viewDate.getFullYear() / 12) * 12;
+    const years = Array.from({ length: 12 }, (_, i) => startYear + i);
+    return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2 p-2", children: years.map((year) => {
+      const isSelected = viewDate.getFullYear() === year;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setViewDate(new Date(year, viewDate.getMonth(), 1));
+            setViewMode("month");
+          },
+          className: cn(
+            "py-2 px-3 rounded-lg text-sm font-medium transition-all duration-200",
+            isSelected ? "bg-primary text-primary-foreground shadow-md" : "hover:bg-accent/80 text-foreground hover:scale-105"
+          ),
+          children: year
+        },
+        year
+      );
+    }) });
+  };
+  const isTodayUnavailable = !!minDay && todayDate < minDay || !!maxDay && todayDate > maxDay;
+  const panel = /* @__PURE__ */ jsxs("div", { ref: wheelContainerRef, className: "w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between px-1", sizeStyles[size].headerMargin), children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => viewMode === "year" ? navigateYearRange("prev") : navigateMonth("prev"),
+          className: cn(
+            "rounded-xl transition-all duration-200",
+            sizeStyles[size].navButton,
+            "bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground",
+            "hover:scale-110 active:scale-95 hover:shadow-md",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+          ),
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: sizeStyles[size].navIcon })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setViewMode(viewMode === "month" ? "calendar" : "month"),
+            className: cn(
+              "rounded-lg px-2 py-0.5 font-bold transition-colors duration-200",
+              size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
+              viewMode === "month" ? "bg-primary/15 text-primary" : "text-foreground hover:bg-accent/50"
+            ),
+            children: viewDate.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", { month: "long" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setViewMode(viewMode === "year" ? "calendar" : "year"),
+            className: cn(
+              "rounded-lg px-2 py-0.5 font-bold transition-colors duration-200",
+              size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
+              viewMode === "year" ? "bg-primary/15 text-primary" : "text-foreground hover:bg-accent/50"
+            ),
+            children: viewDate.getFullYear()
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => viewMode === "year" ? navigateYearRange("next") : navigateMonth("next"),
+          className: cn(
+            "rounded-xl transition-all duration-200",
+            sizeStyles[size].navButton,
+            "bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground",
+            "hover:scale-110 active:scale-95 hover:shadow-md",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+          ),
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: sizeStyles[size].navIcon })
+        }
+      )
+    ] }),
+    viewMode === "calendar" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-7 gap-1 px-0.5", size === "sm" ? "mb-1" : size === "lg" ? "mb-3" : "mb-2"), children: (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((d, idx) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "text-center font-bold uppercase tracking-wide",
+            sizeStyles[size].weekdayLabel,
+            idx === 0 || idx === 6 ? "text-primary/70" : "text-muted-foreground/60"
+          ),
+          children: d
+        },
+        d
+      )) }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-0.5 p-1 rounded-xl bg-muted/20", children: renderGrid() })
+    ] }),
+    viewMode === "month" && renderMonthSelector(),
+    viewMode === "year" && renderYearSelector(),
+    /* @__PURE__ */ jsxs("div", { className: cn("flex items-center border-t border-border/50", sizeStyles[size].footerMargin), children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: handleSelectToday,
+          disabled: isTodayUnavailable,
+          className: cn(
+            "flex-1 font-semibold rounded-xl",
+            "bg-linear-to-r from-primary/10 to-primary/5 border border-primary/30",
+            "text-primary hover:from-primary/20 hover:to-primary/10 hover:border-primary/50",
+            "transition-all duration-300 flex items-center justify-center",
+            "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-primary/10",
+            sizeStyles[size].actionButton,
+            isTodayUnavailable && "opacity-50 cursor-not-allowed hover:scale-100 active:scale-100"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Sparkles, { className: sizeStyles[size].actionIcon }),
+            t("today")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: handleClear,
+          className: cn(
+            "flex-1 font-semibold rounded-xl",
+            "bg-linear-to-r from-destructive/10 to-destructive/5 border border-destructive/30",
+            "text-destructive hover:from-destructive/20 hover:to-destructive/10 hover:border-destructive/50",
+            "transition-all duration-300 flex items-center justify-center",
+            "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-destructive/10",
+            sizeStyles[size].actionButton
+          ),
+          children: [
+            /* @__PURE__ */ jsx(XIcon, { className: sizeStyles[size].actionIcon }),
+            t("clear")
+          ]
+        }
+      )
+    ] })
+  ] });
+  const displayFormat = (date) => formatDateShort(date);
+  const displayLabel = tempStart && tempEnd ? `${displayFormat(tempStart)} - ${displayFormat(tempEnd)}` : tempStart ? `${displayFormat(tempStart)} - ...` : placeholder;
+  const effectiveError = localRequiredError;
+  const autoId = useId();
+  const resolvedId = id ? String(id) : `daterangepicker-${autoId}`;
+  const labelId = label ? `${resolvedId}-label` : void 0;
+  const panelId = `${resolvedId}-panel`;
+  const globalConfig = useUnderverseUIConfig();
+  const resolvedBorderMode = borderMode ?? globalConfig.borderMode ?? "full";
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1.5", className), children: [
+    label && /* @__PURE__ */ jsxs(
+      "label",
+      {
+        id: labelId,
+        htmlFor: resolvedId,
+        onClick: () => inputRef.current?.focus(),
+        className: cn(
+          size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
+          formControlLabelClass,
+          "transition-colors duration-300",
+          disabled ? "text-muted-foreground cursor-not-allowed" : "text-foreground group-focus-within:text-primary hover:text-primary cursor-pointer",
+          isOpen && "text-primary",
+          effectiveError && "text-destructive",
+          labelClassName
+        ),
+        children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        tabIndex: -1,
+        "aria-hidden": "true",
+        value: startDate && endDate ? "selected" : "",
+        onChange: () => {
+        },
+        required,
+        disabled,
+        onInvalid: (e) => {
+          e.preventDefault();
+          setLocalRequiredError(tv("required"));
+        },
+        className: "pointer-events-none absolute h-0 w-0 opacity-0"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        getPortalContainer,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        contentProps: { id: panelId },
+        placement: "bottom-start",
+        disabled,
+        contentWidth: sizeStyles[size].contentWidth,
+        borderMode: resolvedBorderMode,
+        contentClassName: cn(
+          "p-0",
+          "backdrop-blur-xl bg-popover/95 border-border/40 shadow-2xl",
+          "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto overscroll-contain",
+          sizeStyles[size].contentPadding,
+          "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
+        ),
+        trigger: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: triggerRef,
+            className: cn(
+              "group flex w-full items-center justify-between bg-background/80 backdrop-blur-sm",
+              formControlFixedClass,
+              formControlGroupOutlineClass,
+              getBorderRadiusClass(resolvedBorderMode),
+              sizeStyles[size].trigger,
+              formControlSizeStyles[requestedSize].control,
+              disabled ? "border-border/40 opacity-50 cursor-not-allowed" : [
+                "focus-within:border-ring",
+                "hover:bg-accent/10"
+              ],
+              "transition-all duration-300 ease-out",
+              isOpen && "border-ring shadow-lg shadow-primary/10",
+              effectiveError && "border-destructive/60 bg-destructive/5"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-0 min-w-0 flex-1 items-center overflow-hidden", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center justify-center transition-colors duration-300",
+                      effectiveError ? "text-destructive" : isOpen ? "text-primary" : "text-muted-foreground group-hover:text-primary"
+                    ),
+                    children: /* @__PURE__ */ jsx(Calendar, { className: cn("transition-transform duration-300", sizeStyles[size].calendarIcon, isOpen && "scale-110") })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: inputRef,
+                    id: resolvedId,
+                    type: "text",
+                    role: "combobox",
+                    "aria-label": tempStart ? displayLabel : placeholder,
+                    "aria-labelledby": labelId,
+                    "aria-haspopup": "dialog",
+                    "aria-expanded": isOpen,
+                    "aria-controls": panelId,
+                    "aria-required": required,
+                    "aria-invalid": !!effectiveError,
+                    disabled,
+                    placeholder,
+                    value: isFocused ? inputValue : tempStart ? displayLabel : "",
+                    onChange: handleInputChange,
+                    onFocus: () => {
+                      setIsFocused(true);
+                      if (!disabled) setIsOpen(true);
+                    },
+                    onBlur: handleInputBlur,
+                    onKeyDown: handleInputKeyDown,
+                    onClick: (e) => {
+                      if (isOpen) {
+                        e.stopPropagation();
+                      }
+                    },
+                    className: "h-full min-w-0 flex-1 truncate bg-transparent border-none outline-none focus:outline-none p-0 text-foreground font-medium placeholder-muted-foreground/60"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: cn("shrink-0 transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ jsx("svg", { className: cn(sizeStyles[size].navIcon), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+            ]
+          }
+        ),
+        children: panel
+      }
+    ),
+    effectiveError && /* @__PURE__ */ jsx("div", { className: "text-xs text-destructive", children: effectiveError })
+  ] });
+};
+var CompactDatePicker = ({ value, onChange, className, getPortalContainer }) => {
+  return /* @__PURE__ */ jsx(
+    DatePicker,
+    {
+      value,
+      onChange,
+      size: "sm",
+      className: cn("max-w-56", className),
+      placeholder: "Date",
+      getPortalContainer
+    }
+  );
+};
+
+export {
+  date_exports,
+  DatePicker,
+  DateRangePicker,
+  CompactDatePicker
+};
+//# sourceMappingURL=chunk-JG3U26V6.js.map