@underverse-ui/underverse 0.2.61 → 0.2.63

package/dist/index.cjs

@@ -205,8 +205,8 @@ var VARIANT_STYLES_BTN = {
   ghost: "bg-transparent hover:bg-accent/20 hover:text-accent-foreground backdrop-blur-sm transition-colors",
   // Link: chỉ văn bản
   link: "text-primary bg-transparent underline-offset-4 hover:underline hover:text-primary/85 transition-colors",
-  // Gradient: tuỳ chọn, giảm shadow
-  gradient: "bg-linear-to-r from-primary via-secondary to-accent text-primary-foreground hover:opacity-90 shadow-sm border border-primary/10"
+  // Gradient: smooth gradient từ primary → secondary (cùng tone)
+  gradient: "bg-linear-to-r from-primary via-primary/80 to-secondary text-primary-foreground hover:opacity-90 shadow-md border-0"
 };
 var SIZE_STYLES_BTN = {
   sm: "px-3 py-1.5 text-sm h-8 min-w-8 md:px-2.5 md:py-1 md:h-7 md:text-xs",
@@ -5740,6 +5740,7 @@ var DatePicker = ({
   const locale = useLocale();
   const [isOpen, setIsOpen] = React23.useState(false);
   const [viewDate, setViewDate] = React23.useState(value || /* @__PURE__ */ new Date());
+  const [viewMode, setViewMode] = React23.useState("calendar");
   const triggerRef = React23.useRef(null);
   const wheelContainerRef = React23.useRef(null);
   const wheelDeltaRef = React23.useRef(0);
@@ -5751,6 +5752,11 @@ var DatePicker = ({
       setViewDate(/* @__PURE__ */ new Date());
     }
   }, [value]);
+  React23.useEffect(() => {
+    if (!isOpen) {
+      setViewMode("calendar");
+    }
+  }, [isOpen]);
   const handleDateSelect = (date) => {
     let selectedDate;
     if (value && (value.getHours() !== 0 || value.getMinutes() !== 0 || value.getSeconds() !== 0)) {
@@ -5859,13 +5865,64 @@ var DatePicker = ({
     }
     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__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-3 gap-2 p-2", children: months.map((month, idx) => {
+      const isSelected = viewDate.getMonth() === idx;
+      return /* @__PURE__ */ (0, import_jsx_runtime29.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 currentYear = viewDate.getFullYear();
+    const startYear = Math.floor(currentYear / 12) * 12;
+    const years = Array.from({ length: 12 }, (_, i) => startYear + i);
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-3 gap-2 p-2", children: years.map((year) => {
+      const isSelected = viewDate.getFullYear() === year;
+      return /* @__PURE__ */ (0, import_jsx_runtime29.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 navigateYearRange = (direction) => {
+    const currentYear = viewDate.getFullYear();
+    const offset = direction === "next" ? 12 : -12;
+    setViewDate(new Date(currentYear + offset, viewDate.getMonth(), 1));
+  };
   const datePickerContent = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ref: wheelContainerRef, "data-datepicker": true, className: "w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center justify-between mb-4 px-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "button",
         {
           type: "button",
-          onClick: () => navigateMonth("prev"),
+          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",
@@ -5875,15 +5932,37 @@ var DatePicker = ({
           children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.ChevronLeft, { className: "h-4 w-4" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-sm font-bold text-foreground", children: viewDate.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", { month: "long" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-xs text-muted-foreground font-medium", children: viewDate.getFullYear() })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.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__ */ (0, import_jsx_runtime29.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__ */ (0, import_jsx_runtime29.jsx)(
         "button",
         {
           type: "button",
-          onClick: () => navigateMonth("next"),
+          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",
@@ -5894,22 +5973,26 @@ var DatePicker = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.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__ */ (0, import_jsx_runtime29.jsx)(
-        "div",
-        {
-          className: cn(
-            "text-center font-bold uppercase tracking-wide",
-            size === "sm" ? "text-[9px] py-1" : "text-[10px] py-1.5",
-            idx === 0 || idx === 6 ? "text-primary/70" : "text-muted-foreground/60"
-          ),
-          children: day
-        },
-        day
-      )
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-7 gap-1 p-1 rounded-xl bg-muted/20", children: renderCalendar() }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2 mt-4 pt-3 border-t border-border/50", children: [
+    viewMode === "calendar" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.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__ */ (0, import_jsx_runtime29.jsx)(
+          "div",
+          {
+            className: cn(
+              "text-center font-bold uppercase tracking-wide",
+              size === "sm" ? "text-[9px] py-1" : "text-[10px] py-1.5",
+              idx === 0 || idx === 6 ? "text-primary/70" : "text-muted-foreground/60"
+            ),
+            children: day
+          },
+          day
+        )
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.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__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("flex items-center gap-2 mt-4 pt-3 border-t border-border/50", size === "sm" && "mt-3 pt-2 gap-1.5"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         "button",
         {
@@ -5919,14 +6002,15 @@ var DatePicker = ({
             handleDateSelect(today);
           },
           className: cn(
-            "flex-1 px-3 py-2 text-xs font-semibold rounded-xl",
+            "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 gap-2",
-            "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-primary/10"
+            "transition-all duration-300 flex items-center justify-center",
+            "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-primary/10",
+            size === "sm" ? "px-2 py-1 text-[10px] gap-1" : "px-3 py-2 text-xs gap-2"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.Sparkles, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.Sparkles, { className: size === "sm" ? "w-2.5 h-2.5" : "w-3.5 h-3.5" }),
             todayLabel || t("today")
           ]
         }
@@ -5941,14 +6025,15 @@ var DatePicker = ({
             setViewDate(/* @__PURE__ */ new Date());
           },
           className: cn(
-            "flex-1 px-3 py-2 text-xs font-semibold rounded-xl",
+            "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 gap-2",
-            "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-destructive/10"
+            "transition-all duration-300 flex items-center justify-center",
+            "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-destructive/10",
+            size === "sm" ? "px-2 py-1 text-[10px] gap-1" : "px-3 py-2 text-xs gap-2"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.X, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.X, { className: size === "sm" ? "w-2.5 h-2.5" : "w-3.5 h-3.5" }),
             clearLabel || t("clear")
           ]
         }
@@ -6081,20 +6166,25 @@ var DatePicker = ({
     )
   ] });
 };
-var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select date range...", className, disablePastDates = false }) => {
+var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select date range...", className, disablePastDates = false, size = "md" }) => {
   const locale = useLocale();
+  const t = useTranslations("DatePicker");
   const [isOpen, setIsOpen] = React23.useState(false);
   const wheelContainerRef = React23.useRef(null);
   const wheelDeltaRef = React23.useRef(0);
+  const normalizeToLocal = (date) => {
+    if (!date) return null;
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  };
   const [viewDate, setViewDate] = React23.useState(startDate || /* @__PURE__ */ new Date());
-  const [tempStart, setTempStart] = React23.useState(startDate || null);
-  const [tempEnd, setTempEnd] = React23.useState(endDate || null);
+  const [tempStart, setTempStart] = React23.useState(normalizeToLocal(startDate));
+  const [tempEnd, setTempEnd] = React23.useState(normalizeToLocal(endDate));
   const [hoveredDate, setHoveredDate] = React23.useState(null);
   React23.useEffect(() => {
-    setTempStart(startDate || null);
+    setTempStart(normalizeToLocal(startDate));
   }, [startDate]);
   React23.useEffect(() => {
-    setTempEnd(endDate || null);
+    setTempEnd(normalizeToLocal(endDate));
   }, [endDate]);
   const isSameDay2 = (a, b) => {
     if (!a || !b) return false;
@@ -6195,7 +6285,8 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
             onMouseEnter: () => !isPastDate && tempStart && !tempEnd && setHoveredDate(date),
             onMouseLeave: () => tempStart && !tempEnd && setHoveredDate(null),
             className: cn(
-              "w-8 h-8 text-sm transition-all duration-200 focus:outline-none relative font-medium",
+              "transition-all duration-200 focus:outline-none relative font-medium",
+              size === "sm" ? "w-6 h-6 text-xs" : "w-8 h-8 text-sm",
               // Disabled/past date state
               isPastDate && "opacity-30 cursor-not-allowed text-muted-foreground",
               // Default state
@@ -6221,24 +6312,25 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
     return nodes;
   };
   const panel = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ref: wheelContainerRef, className: "w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center justify-between mb-4 px-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("flex items-center justify-between px-1", size === "sm" ? "mb-2" : "mb-4"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "button",
         {
           type: "button",
           onClick: () => navigateMonth("prev"),
           className: cn(
-            "p-2 rounded-xl transition-all duration-200",
+            "rounded-xl transition-all duration-200",
+            size === "sm" ? "p-1.5" : "p-2",
             "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__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.ChevronLeft, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.ChevronLeft, { className: cn(size === "sm" ? "h-3 w-3" : "h-4 w-4") })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-sm font-bold text-foreground", children: viewDate.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", { month: "long" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-xs text-muted-foreground font-medium", children: viewDate.getFullYear() })
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("font-bold text-foreground", size === "sm" ? "text-xs" : "text-sm"), children: viewDate.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", { month: "long" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("text-muted-foreground font-medium", size === "sm" ? "text-[10px]" : "text-xs"), children: viewDate.getFullYear() })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "button",
@@ -6246,20 +6338,22 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
           type: "button",
           onClick: () => navigateMonth("next"),
           className: cn(
-            "p-2 rounded-xl transition-all duration-200",
+            "rounded-xl transition-all duration-200",
+            size === "sm" ? "p-1.5" : "p-2",
             "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__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.ChevronRight, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.ChevronRight, { className: cn(size === "sm" ? "h-3 w-3" : "h-4 w-4") })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2 px-0.5", children: (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((d, idx) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("grid grid-cols-7 gap-1 px-0.5", size === "sm" ? "mb-1" : "mb-2"), children: (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((d, idx) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "div",
       {
         className: cn(
-          "text-[10px] text-center py-1.5 font-bold uppercase tracking-wide",
+          "text-center font-bold uppercase tracking-wide",
+          size === "sm" ? "text-[8px] py-1" : "text-[10px] py-1.5",
           idx === 0 || idx === 6 ? "text-primary/70" : "text-muted-foreground/60"
         ),
         children: d
@@ -6276,13 +6370,13 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
       open: isOpen,
       onOpenChange: setIsOpen,
       placement: "bottom-start",
-      contentWidth: 280,
+      contentWidth: size === "sm" ? 240 : 280,
       contentClassName: cn(
         "p-0",
         "backdrop-blur-xl bg-popover/95 border-border/40 shadow-2xl",
         "rounded-2xl",
         "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto overscroll-contain",
-        "p-5",
+        size === "sm" ? "p-3" : "p-5",
         "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
       ),
       trigger: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
@@ -6290,7 +6384,8 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
         {
           type: "button",
           className: cn(
-            "group flex w-full items-center justify-between rounded-full border bg-background/80 backdrop-blur-sm px-3 py-2.5 text-sm",
+            "group flex w-full items-center justify-between rounded-full border bg-background/80 backdrop-blur-sm",
+            size === "sm" ? "px-2 py-1.5 text-xs" : "px-3 py-2.5 text-sm",
             "border-border/60 hover:border-primary/40",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
             "hover:bg-accent/10 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5",
@@ -6299,15 +6394,16 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("flex items-center", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
               /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 "div",
                 {
                   className: cn(
-                    "flex items-center justify-center rounded-lg p-1.5 transition-all duration-300",
+                    "flex items-center justify-center rounded-lg transition-all duration-300",
+                    size === "sm" ? "p-1" : "p-1.5",
                     isOpen ? "bg-primary/15 text-primary" : "bg-muted/50 text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary"
                   ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.Calendar, { className: cn("h-4 w-4 transition-transform duration-300", isOpen && "scale-110") })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.Calendar, { className: cn("transition-transform duration-300", size === "sm" ? "h-3 w-3" : "h-4 w-4", isOpen && "scale-110") })
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
@@ -6322,7 +6418,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { className: cn(size === "sm" ? "h-3 w-3" : "h-4 w-4"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
           ]
         }
       ),
@@ -6860,8 +6956,8 @@ function TimePicker({
   required,
   format = "24",
   includeSeconds = false,
-  minuteStep = 5,
-  secondStep = 5,
+  minuteStep = 1,
+  secondStep = 1,
   clearable = true,
   variant = "default",
   showNow = false,
@@ -7040,7 +7136,6 @@ function TimePicker({
     lg: { label: "text-base", height: "h-12", padding: "px-4 py-3", text: "text-base", icon: "w-5 h-5" }
   };
   const sz = sizeClasses2[size];
-  const radiusClass = size === "sm" ? "rounded-md" : "rounded-lg";
   const display = formatTime(parts, format, includeSeconds);
   const trigger = variant === "inline" ? null : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "button",
@@ -7051,16 +7146,15 @@ function TimePicker({
       "aria-haspopup": "dialog",
       "aria-expanded": open,
       className: cn(
-        "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
+        "group flex w-full items-center justify-between rounded-full border bg-background/80 backdrop-blur-sm",
         sz.height,
         sz.padding,
         sz.text,
-        radiusClass,
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         "disabled:opacity-50 disabled:cursor-not-allowed",
         "transition-all duration-300 ease-out",
         error && "border-destructive/60 focus-visible:ring-destructive/50 bg-destructive/5",
-        success && "border-green-500/60 focus-visible:ring-green-500/50 bg-green-500/5",
+        success && "border-success/60 focus-visible:ring-success/50 bg-success/5",
         !error && !success && "border-border/60 hover:border-primary/40 hover:bg-accent/10",
         animate && !disabled && "hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5",
         open && "ring-2 ring-primary/30 border-primary/50 shadow-lg shadow-primary/10",
@@ -7073,7 +7167,7 @@ function TimePicker({
             {
               className: cn(
                 "flex items-center justify-center rounded-md p-1.5 transition-all duration-300",
-                error ? "bg-destructive/10 text-destructive" : success ? "bg-green-500/10 text-green-500" : open ? "bg-primary/15 text-primary" : "bg-muted/50 text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary"
+                error ? "bg-destructive/10 text-destructive" : success ? "bg-success/10 text-success" : open ? "bg-primary/15 text-primary" : "bg-muted/50 text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary"
               ),
               children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Clock, { className: cn(sz.icon, "transition-transform duration-300", open && "rotate-12") })
             }
@@ -7378,7 +7472,7 @@ function TimePicker({
         contentClassName: cn(
           "p-5 rounded-2xl border bg-popover/95 backdrop-blur-xl shadow-2xl",
           error && "border-destructive/40",
-          success && "border-green-500/40",
+          success && "border-success/40",
           !error && !success && "border-border/60",
           animate && "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
         ),
@@ -7390,7 +7484,7 @@ function TimePicker({
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.X, { className: "w-3.5 h-3.5 shrink-0" }),
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "font-medium", children: error })
       ] }),
-      success && !error && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2 text-green-600 bg-green-500/10 px-3 py-1.5 rounded-lg", children: [
+      success && !error && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2 text-success bg-success/10 px-3 py-1.5 rounded-lg", children: [
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Check, { className: "w-3.5 h-3.5 shrink-0" }),
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "font-medium", children: "Valid time selected" })
       ] }),
@@ -9973,10 +10067,10 @@ var SIZE_STYLES2 = {
 };
 var BADGE_VARIANTS = {
   default: "bg-muted text-muted-foreground",
-  success: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
-  warning: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
-  error: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
-  info: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
+  success: "bg-success-soft text-success",
+  warning: "bg-warning-soft text-warning-foreground",
+  error: "bg-destructive-soft text-destructive",
+  info: "bg-info-soft text-info"
 };
 var ListItemSkeleton = ({ size }) => {
   const sz = SIZE_STYLES2[size];
@@ -10501,10 +10595,10 @@ var SIZE_STYLE = {
 var STATUS_COLOR = {
   default: "bg-muted/60",
   primary: "bg-primary",
-  success: "bg-green-500",
-  warning: "bg-yellow-500",
-  error: "bg-red-500",
-  info: "bg-blue-500"
+  success: "bg-success",
+  warning: "bg-warning",
+  error: "bg-destructive",
+  info: "bg-info"
 };
 var TimelineContext = React36.createContext(null);
 var LINE_STYLE_MAP = {
@@ -11084,10 +11178,10 @@ function ColorPicker({
               onClick: copyToClipboard,
               className: cn(
                 "h-9 px-3 rounded-lg border border-border text-xs hover:bg-accent/10 transition-colors flex items-center gap-1.5",
-                copied && "bg-green-500/10 border-green-500/30"
+                copied && "bg-success/10 border-success/30"
               ),
               children: [
-                copied ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Check, { className: "w-3.5 h-3.5 text-green-600" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Copy, { className: "w-3.5 h-3.5" }),
+                copied ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Check, { className: "w-3.5 h-3.5 text-success" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Copy, { className: "w-3.5 h-3.5" }),
                 variant === "full" && (copied ? "Copied!" : "Copy")
               ]
             }
@@ -11124,9 +11218,9 @@ function ColorPicker({
               onClick: copyToClipboard,
               className: cn(
                 "h-9 w-9 rounded-lg border border-border hover:bg-accent/10 transition-colors flex items-center justify-center",
-                copied && "bg-green-500/10 border-green-500/30"
+                copied && "bg-success/10 border-success/30"
               ),
-              children: copied ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Check, { className: "w-3.5 h-3.5 text-green-600" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Copy, { className: "w-3.5 h-3.5" })
+              children: copied ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Check, { className: "w-3.5 h-3.5 text-success" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Copy, { className: "w-3.5 h-3.5" })
             }
           )
         ] }),