@underverse-ui/underverse 0.2.20 → 0.2.22

package/dist/index.cjs

@@ -182,13 +182,13 @@ var VARIANT_STYLES_BTN = {
   // 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-gradient-to-r from-primary via-secondary to-accent text-primary-foreground hover:opacity-90 shadow-sm border border-primary/10"
+  gradient: "bg-linear-to-r from-primary via-secondary to-accent text-primary-foreground hover:opacity-90 shadow-sm border border-primary/10"
 };
 var SIZE_STYLES_BTN = {
-  sm: "px-3 py-1.5 text-sm h-8 min-w-[2rem] md:px-2.5 md:py-1 md:h-7 md:text-xs",
-  md: "px-4 py-2 text-sm h-10 min-w-[2.5rem] md:px-3 md:py-1.5 md:h-9",
-  lg: "px-6 py-3 text-base h-12 min-w-[3rem] md:px-4 md:py-2 md:h-10 md:text-sm",
-  smx: "px-3.5 py-1.5 text-[13px] h-9 min-w-[2.25rem] md:px-3 md:py-1 md:h-8 md:text-xs",
+  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",
+  md: "px-4 py-2 text-sm h-10 min-w-10 md:px-3 md:py-1.5 md:h-9",
+  lg: "px-6 py-3 text-base h-12 min-w-12 md:px-4 md:py-2 md:h-10 md:text-sm",
+  smx: "px-3.5 py-1.5 text-[13px] h-9 min-w-9 md:px-3 md:py-1 md:h-8 md:text-xs",
   icon: "w-11 h-11 p-0 rounded-full flex items-center justify-center md:w-10 md:h-10"
 };
 
@@ -289,7 +289,7 @@ var Button = (0, import_react.forwardRef)(
         "aria-label": rest["aria-label"] || title,
         ...rest,
         children: [
-          !noHoverOverlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute inset-0 bg-gradient-to-r from-primary-foreground/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 dark:hidden" }),
+          !noHoverOverlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute inset-0 bg-linear-to-r from-primary-foreground/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 dark:hidden" }),
           loading2 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SpinnerIcon, { className: "w-4 h-4 animate-spin" }),
             loadingText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-2", "aria-live": "polite", children: loadingText }),
@@ -321,7 +321,7 @@ var variantStyles = {
   outline: "bg-transparent text-foreground border-border hover:bg-accent/50",
   ghost: "bg-transparent hover:bg-accent/20 hover:text-accent-foreground border-transparent transition-colors",
   transparent: "bg-transparent text-foreground border-transparent hover:bg-accent/30",
-  gradient: "bg-gradient-to-r from-primary to-secondary text-primary-foreground border-transparent hover:from-primary/90 hover:to-secondary/90"
+  gradient: "bg-linear-to-r from-primary to-secondary text-primary-foreground border-transparent hover:from-primary/90 hover:to-secondary/90"
 };
 var sizeStyles = {
   xs: "px-1.5 py-0.5 text-xs font-medium min-h-[18px]",
@@ -398,12 +398,12 @@ var Badge = ({
         className: cn(
           baseClasses,
           "justify-center rounded-full",
-          "min-w-[1.5rem] h-6 px-1.5 text-xs font-bold",
-          size === "xs" && "min-w-[1.25rem] h-5 px-1 text-xs",
-          size === "sm" && "min-w-[1.5rem] h-6 px-1.5 text-xs",
-          size === "md" && "min-w-[1.75rem] h-7 px-2 text-xs",
-          size === "lg" && "min-w-[2rem] h-8 px-2.5 text-sm",
-          size === "xl" && "min-w-[2.25rem] h-9 px-3 text-sm",
+          "min-w-6 h-6 px-1.5 text-xs font-bold",
+          size === "xs" && "min-w-5 h-5 px-1 text-xs",
+          size === "sm" && "min-w-6 h-6 px-1.5 text-xs",
+          size === "md" && "min-w-7 h-7 px-2 text-xs",
+          size === "lg" && "min-w-8 h-8 px-2.5 text-sm",
+          size === "xl" && "min-w-9 h-9 px-3 text-sm",
           className
         ),
         onClick: handleClick,
@@ -418,7 +418,7 @@ var Badge = ({
       Icon,
       {
         className: cn(
-          "flex-shrink-0",
+          "shrink-0",
           size === "xs" && "h-3 w-3",
           size === "sm" && "h-3 w-3",
           size === "md" && "h-4 w-4",
@@ -434,7 +434,7 @@ var Badge = ({
         onClick: handleRemove,
         className: cn(
           "ml-1 rounded-full hover:bg-accent focus:outline-none focus:bg-accent",
-          "transition-colors duration-150 flex-shrink-0",
+          "transition-colors duration-150 shrink-0",
           size === "xs" && "h-3 w-3",
           size === "sm" && "h-3 w-3",
           size === "md" && "h-4 w-4",
@@ -523,7 +523,7 @@ var GradientBadge = ({ from = "from-primary", to = "to-secondary", className, ..
     {
       ...props,
       variant: "transparent",
-      className: cn(`bg-gradient-to-r ${from} ${to} text-primary-foreground border-transparent`, "hover:opacity-90", className)
+      className: cn(`bg-linear-to-r ${from} ${to} text-primary-foreground border-transparent`, "hover:opacity-90", className)
     }
   );
 };
@@ -562,7 +562,7 @@ var Card = ({ title, description, children, footer, className, hoverable = false
           "div",
           {
             className: cn(
-              "absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent transition-opacity duration-300",
+              "absolute inset-0 bg-linear-to-br from-primary/5 to-transparent transition-opacity duration-300",
               isHovered ? "opacity-100" : "opacity-0"
             )
           }
@@ -880,7 +880,7 @@ var Input = (0, import_react3.forwardRef)(
           "div",
           {
             className: cn(
-              "absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-primary to-primary/60 transition-all duration-300",
+              "absolute bottom-0 left-0 h-0.5 bg-linear-to-r from-primary to-primary/60 transition-all duration-300",
               // default hidden
               "w-0 opacity-0",
               // expand underline when focused within input container
@@ -890,7 +890,7 @@ var Input = (0, import_react3.forwardRef)(
         )
       ] }),
       errMsg && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { id: errorId, className: "flex items-center gap-2 text-sm text-destructive animate-in slide-in-from-top-1 duration-200", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.AlertCircle, { className: "w-4 h-4 flex-shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.AlertCircle, { className: "w-4 h-4 shrink-0" }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: errMsg })
       ] }),
       (description || hint) && !errMsg && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -1074,7 +1074,7 @@ var NumberInput = (0, import_react3.forwardRef)(
               "text-muted-foreground hover:text-foreground"
             ),
             "aria-label": "Increase value",
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M4 2L6 6H2L4 2Z", fill: "currentColor" }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M4 2L6 6H2L4 2Z", fill: "currentColor" }) })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -1090,7 +1090,7 @@ var NumberInput = (0, import_react3.forwardRef)(
               "text-muted-foreground hover:text-foreground"
             ),
             "aria-label": "Decrease value",
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M4 6L2 2H6L4 6Z", fill: "currentColor" }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M4 6L2 2H6L4 6Z", fill: "currentColor" }) })
           }
         )
       ] })
@@ -1171,7 +1171,7 @@ var Textarea = (0, import_react3.forwardRef)(
         }
       ),
       error && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 text-sm text-destructive animate-in slide-in-from-top-1 duration-200", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.AlertCircle, { className: "w-4 h-4 flex-shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.AlertCircle, { className: "w-4 h-4 shrink-0" }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: error })
       ] }),
       description && !error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: cn("text-xs transition-colors duration-200", isFocused ? "text-primary/70" : "text-muted-foreground"), children: description })
@@ -1244,7 +1244,7 @@ var Textarea2 = (0, import_react4.forwardRef)(
           }
         ),
         variant === "default" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn(
-          "absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-primary to-primary/60 transition-all duration-300 ease-soft",
+          "absolute bottom-0 left-0 h-0.5 bg-linear-to-r from-primary to-primary/60 transition-all duration-300 ease-soft",
           isFocused ? "w-full opacity-100" : "w-0 opacity-0"
         ) }),
         isFocused && variant !== "outlined" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute inset-0 rounded-lg bg-primary/5 -z-10 animate-pulse" })
@@ -1595,7 +1595,7 @@ var Avatar = ({ src, alt = "avatar", fallback = "?", size = "md", className, onC
           "span",
           {
             className: cn(
-              "font-bold uppercase bg-gradient-to-br from-primary to-primary/80 bg-clip-text text-transparent",
+              "font-bold uppercase bg-linear-to-br from-primary to-primary/80 bg-clip-text text-transparent",
               "transition-all duration-200 animate-fade-in"
             ),
             children: fallback
@@ -1626,7 +1626,7 @@ var Skeleton = ({
   };
   const animationClasses = {
     pulse: "animate-pulse",
-    wave: "animate-shimmer bg-gradient-to-r from-muted via-muted/50 to-muted bg-[length:200%_100%]",
+    wave: "animate-shimmer bg-linear-to-r from-muted via-muted/50 to-muted bg-size-[200%_100%]",
     none: ""
   };
   if (variant === "text" && lines > 1) {
@@ -1815,11 +1815,11 @@ var import_lucide_react4 = require("lucide-react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var variantStyles2 = {
   default: "bg-muted-foreground",
-  primary: "bg-gradient-to-r from-primary via-primary/90 to-primary",
-  success: "bg-gradient-to-r from-success via-success/90 to-success shadow-sm shadow-success/20",
-  warning: "bg-gradient-to-r from-warning via-warning/90 to-warning shadow-sm shadow-warning/20",
-  danger: "bg-gradient-to-r from-destructive via-destructive/90 to-destructive shadow-sm shadow-destructive/20",
-  info: "bg-gradient-to-r from-info via-info/90 to-info shadow-sm shadow-info/20"
+  primary: "bg-linear-to-r from-primary via-primary/90 to-primary",
+  success: "bg-linear-to-r from-success via-success/90 to-success shadow-sm shadow-success/20",
+  warning: "bg-linear-to-r from-warning via-warning/90 to-warning shadow-sm shadow-warning/20",
+  danger: "bg-linear-to-r from-destructive via-destructive/90 to-destructive shadow-sm shadow-destructive/20",
+  info: "bg-linear-to-r from-info via-info/90 to-info shadow-sm shadow-info/20"
 };
 var sizeStyles2 = {
   sm: "h-1.5",
@@ -1888,12 +1888,12 @@ var Progress = ({
               "before:absolute before:inset-0 before:rounded-full before:opacity-30",
               indeterminate && "animate-pulse",
               !indeterminate && variantStyles2[variant],
-              isComplete && "bg-gradient-to-r from-success via-success/90 to-success shadow-sm shadow-success/20",
-              isError && "bg-gradient-to-r from-destructive via-destructive/90 to-destructive shadow-sm shadow-destructive/20",
-              striped && "bg-gradient-to-r from-transparent via-primary-foreground/20 to-transparent bg-[length:1rem_1rem]",
+              isComplete && "bg-linear-to-r from-success via-success/90 to-success shadow-sm shadow-success/20",
+              isError && "bg-linear-to-r from-destructive via-destructive/90 to-destructive shadow-sm shadow-destructive/20",
+              striped && "bg-linear-to-r from-transparent via-primary-foreground/20 to-transparent bg-size-[1rem_1rem]",
               animated && !indeterminate && "before:animate-pulse",
               // Shimmer effect for indeterminate
-              indeterminate && "bg-gradient-to-r from-muted via-primary/50 to-muted bg-[length:200%_100%] animate-[shimmer_2s_infinite]"
+              indeterminate && "bg-linear-to-r from-muted via-primary/50 to-muted bg-size-[200%_100%] animate-[shimmer_2s_infinite]"
             ),
             style: {
               width: indeterminate ? "100%" : `${percentage}%`,
@@ -2103,7 +2103,7 @@ var MiniProgress = ({
         )
       }
     ),
-    showValue && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "text-xs font-medium text-muted-foreground min-w-[2.5rem] text-right", children: [
+    showValue && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "text-xs font-medium text-muted-foreground min-w-10 text-right", children: [
       Math.round(percentage),
       "%"
     ] })
@@ -2337,7 +2337,7 @@ var Modal = ({
     return null;
   }
   const maxWidthClass = width ? "max-w-none" : fullWidth ? "max-w-full" : sizeStyles3[size];
-  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("fixed inset-0 z-[9999] flex items-center justify-center", overlayClassName), onClick: handleOverlayClick, children: [
+  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("fixed inset-0 z-9999 flex items-center justify-center", overlayClassName), onClick: handleOverlayClick, children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
@@ -2438,7 +2438,7 @@ var ToastProvider = ({ children, position = "top-right", maxToasts = 5 }) => {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ToastContext.Provider, { value: { addToast, removeToast, toasts }, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("fixed z-[99999] flex flex-col gap-2 pointer-events-none", positionClasses[position]), "aria-live": "polite", "aria-atomic": true, children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToastComponent, { toast, onRemove: removeToast }, toast.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("fixed z-99999 flex flex-col gap-2 pointer-events-none", positionClasses[position]), "aria-live": "polite", "aria-atomic": true, children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToastComponent, { toast, onRemove: removeToast }, toast.id)) })
   ] });
 };
 var ToastComponent = ({ toast, onRemove }) => {
@@ -2672,7 +2672,7 @@ var Tooltip = ({
           },
           className: cn(
             "px-3 py-2 text-sm font-medium rounded-lg shadow-lg border",
-            "max-w-xs break-words backdrop-blur-sm",
+            "max-w-xs wrap-break-word backdrop-blur-sm",
             variantStyles3[variant],
             className
           ),
@@ -3027,7 +3027,7 @@ var Popover = ({
       role: "dialog",
       "aria-modal": modal || void 0,
       className: cn(
-        "z-[9999]",
+        "z-9999",
         // shadcn-like enter animation
         "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
@@ -3236,7 +3236,7 @@ var Sheet = ({
           transition: "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)"
         },
         children: [
-          (title || description || header || showClose) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex-shrink-0 border-b border-border", children: header || /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between p-4", children: [
+          (title || description || header || showClose) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "shrink-0 border-b border-border", children: header || /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between p-4", children: [
             /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex-1", children: [
               title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: "text-lg font-semibold text-foreground", children: title }),
               description && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-muted-foreground mt-1", children: description })
@@ -3255,7 +3255,7 @@ var Sheet = ({
               children
             }
           ),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex-shrink-0 border-t border-border p-4", children: footer })
+          footer && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "shrink-0 border-t border-border p-4", children: footer })
         ]
       }
     )
@@ -3320,7 +3320,7 @@ var Alert = ({ title, description, variant = "default", className, icon, dismiss
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "pt-1", children: icon ?? variantIcons[variant] }),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex-1 min-w-0", children: [
           title && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "font-semibold text-sm leading-none mb-1 text-foreground", children: title }),
-          description && (typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm text-muted-foreground leading-relaxed break-words", children: description }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-sm text-muted-foreground leading-relaxed break-words", children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm text-muted-foreground leading-relaxed wrap-break-word", children: description }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-sm text-muted-foreground leading-relaxed wrap-break-word", children: description })),
           actions && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mt-2 flex flex-wrap gap-2", children: actions })
         ] }),
         dismissible && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -3402,7 +3402,7 @@ var GlobalLoading = ({
     "div",
     {
       className: cn(
-        "inset-0 z-[100000] flex items-center justify-center",
+        "inset-0 z-100000 flex items-center justify-center",
         position === "fixed" ? "fixed" : "absolute",
         backdrop && "bg-background/90 backdrop-blur-sm",
         className
@@ -3839,7 +3839,7 @@ var VerticalTabs = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn("flex gap-6", className), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn(sidebarWidth, "flex-shrink-0"), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn("flex gap-6", className), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn(sidebarWidth, "shrink-0"), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     Tabs,
     {
       ...props,
@@ -4303,7 +4303,7 @@ var Combobox = ({
                 "outline-none focus:outline-none focus-visible:outline-none",
                 "hover:bg-accent hover:text-accent-foreground",
                 "focus:bg-accent focus:text-accent-foreground",
-                "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+                "data-disabled:pointer-events-none data-disabled:opacity-50",
                 index === activeIndex && "bg-accent text-accent-foreground",
                 isSelected && "bg-accent text-accent-foreground"
               ),
@@ -4534,7 +4534,7 @@ var Pagination = ({
               size,
               onClick: () => onChange(pageNumber),
               disabled,
-              className: cn("min-w-[2.5rem]", isActive && "font-semibold"),
+              className: cn("min-w-10", isActive && "font-semibold"),
               "aria-label": labels?.pageNumber ? labels.pageNumber(pageNumber) : t("pageNumber", { page: pageNumber }),
               "aria-current": isActive ? "page" : void 0,
               children: pageNumber
@@ -4670,7 +4670,7 @@ var CompactPagination = ({
         title: "Previous page"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "px-2 py-1 text-sm text-muted-foreground min-w-[4rem] text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "px-2 py-1 text-sm text-muted-foreground min-w-16 text-center", children: [
       page,
       " / ",
       totalPages
@@ -5071,7 +5071,7 @@ var DatePicker = ({
               size === "sm" ? "w-7 h-7 text-[12px]" : "w-8 h-8 text-sm",
               "datepicker-day rounded-md focus:outline-none",
               "transition-colors",
-              isSelected ? "!bg-primary text-primary-foreground font-bold ring-2 ring-primary-foreground/60 shadow-lg scale-105 z-10 hover:!bg-primary focus:!bg-primary focus:text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+              isSelected ? "bg-primary! text-primary-foreground font-bold ring-2 ring-primary-foreground/60 shadow-lg scale-105 z-10 hover:bg-primary! focus:bg-primary! focus:text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
               isToday2 && !isSelected && "bg-accent text-accent-foreground font-semibold"
             ),
             children: day
@@ -5096,7 +5096,7 @@ var DatePicker = ({
       },
       "data-state": isOpen ? "open" : "closed",
       className: cn(
-        "z-[9999]",
+        "z-9999",
         "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
       ),
@@ -5359,7 +5359,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
       style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width || 256, zIndex: 9999 },
       "data-state": isOpen ? "open" : "closed",
       className: cn(
-        "z-[9999]",
+        "z-9999",
         "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
       ),
@@ -6004,11 +6004,11 @@ function TimePicker({
     ),
     (error || success || helperText) && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("mt-1.5 flex items-start gap-1.5", sz.label), children: [
       error && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-1.5 text-destructive", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react14.X, { className: "w-3.5 h-3.5 flex-shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react14.X, { className: "w-3.5 h-3.5 shrink-0" }),
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: error })
       ] }),
       success && !error && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-1.5 text-green-600", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react14.Check, { className: "w-3.5 h-3.5 flex-shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react14.Check, { className: "w-3.5 h-3.5 shrink-0" }),
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: "Valid time selected" })
       ] }),
       helperText && !error && !success && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-muted-foreground", children: helperText })
@@ -6497,13 +6497,13 @@ var MultiCombobox = ({
           setOpen(next);
         },
         className: cn(
-          "flex w-full items-center gap-2 rounded-lg border border-input bg-background shadow-sm min-h-[2.5rem]",
+          "flex w-full items-center gap-2 rounded-lg border border-input bg-background shadow-sm min-h-10",
           "px-3 py-2",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
           "disabled:cursor-not-allowed disabled:opacity-50"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex items-center gap-1 flex-wrap min-h-[1.5rem] flex-1", children: value.length > 0 ? showTags ? value.map((itemValue) => {
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex items-center gap-1 flex-wrap min-h-6 flex-1", children: value.length > 0 ? showTags ? value.map((itemValue) => {
             const option = normalizedOptions.find((o) => o.value === itemValue);
             return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "inline-flex items-center gap-1 bg-accent text-accent-foreground rounded px-2 py-1 text-xs", children: [
               /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "truncate max-w-[120px]", children: option ? displayFormat(option) : itemValue }),
@@ -7019,7 +7019,7 @@ var Slider = React26.forwardRef(
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("w-full space-y-2", containerClassName), children: [
       (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between", children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("label", { className: cn("text-sm font-medium text-foreground", labelClassName), children: label }),
-        showValue && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: cn("text-xs font-mono text-muted-foreground min-w-[2rem] text-right", valueClassName), children: displayValue })
+        showValue && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: cn("text-xs font-mono text-muted-foreground min-w-8 text-right", valueClassName), children: displayValue })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("relative flex items-center", sizeStyles8.container), children: [
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("w-full rounded-full bg-secondary relative overflow-hidden", sizeStyles8.track, trackClassName), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -7356,7 +7356,7 @@ function OverlayControls({
       "div",
       {
         className: cn(
-          "absolute bottom-0 left-0 right-0 pb-2 pt-8 bg-gradient-to-t from-black/40 to-transparent z-20 transition-opacity duration-200",
+          "absolute bottom-0 left-0 right-0 pb-2 pt-8 bg-linear-to-t from-black/40 to-transparent z-20 transition-opacity duration-200",
           hoverClasses,
           autoHide && !controlsVisible && "opacity-0 pointer-events-none",
           className
@@ -8084,7 +8084,7 @@ function Carousel({
               "div",
               {
                 className: cn(
-                  "flex-shrink-0",
+                  "shrink-0",
                   isHorizontal ? "h-full" : "w-full",
                   animation === "fade" && idx !== currentIndex && "opacity-0",
                   animation === "scale" && idx !== currentIndex && "scale-95",
@@ -8167,7 +8167,7 @@ function Carousel({
           "div",
           {
             className: cn(
-              "absolute bottom-0 left-0 right-0 flex gap-2 p-4 bg-gradient-to-t from-black/50 to-transparent overflow-x-auto",
+              "absolute bottom-0 left-0 right-0 flex gap-2 p-4 bg-linear-to-t from-black/50 to-transparent overflow-x-auto",
               isHorizontal ? "flex-row" : "flex-col"
             ),
             children: React29.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -8175,7 +8175,7 @@ function Carousel({
               {
                 onClick: () => scrollTo(idx),
                 className: cn(
-                  "flex-shrink-0 w-16 h-16 rounded-md overflow-hidden border-2 transition-all focus:outline-none focus:ring-2 focus:ring-primary",
+                  "shrink-0 w-16 h-16 rounded-md overflow-hidden border-2 transition-all focus:outline-none focus:ring-2 focus:ring-primary",
                   idx === currentIndex ? "border-primary scale-110" : "border-transparent opacity-70 hover:opacity-100"
                 ),
                 "aria-label": `Thumbnail ${idx + 1}`,
@@ -8452,8 +8452,8 @@ function FallingIcons({
                           "span",
                           {
                             className: cn(
-                              "block uv-spin hover:[animation:var(--popName)_0.35s_ease-out_forwards]",
-                              physicsRotation ? "[animation:var(--physicsSpinName)_var(--spinDur)_ease-in-out_infinite]" : spin && "[animation:var(--spinName)_var(--spinDur)_linear_infinite]"
+                              "block uv-spin hover:animate-[var(--popName)_0.35s_ease-out_forwards]",
+                              physicsRotation ? "animate-[var(--physicsSpinName)_var(--spinDur)_ease-in-out_infinite]" : spin && "animate-[var(--spinName)_var(--spinDur)_linear_infinite]"
                             ),
                             style: {
                               width: p.size,
@@ -9120,8 +9120,8 @@ var TimelineItem = React33.forwardRef(
       outlined: "rounded-lg border border-border bg-card shadow-sm px-4 py-3",
       card: "rounded-xl border border-border bg-card shadow-md px-5 py-4",
       minimal: "border-l-2 pl-4 py-2",
-      modern: "rounded-lg bg-gradient-to-r from-card to-muted/20 border border-border/50 px-5 py-4 backdrop-blur-sm",
-      gradient: "rounded-xl bg-gradient-to-br from-primary/10 via-card to-accent/10 border border-primary/20 px-5 py-4 shadow-lg"
+      modern: "rounded-lg bg-linear-to-r from-card to-muted/20 border border-border/50 px-5 py-4 backdrop-blur-sm",
+      gradient: "rounded-xl bg-linear-to-br from-primary/10 via-card to-accent/10 border border-primary/20 px-5 py-4 shadow-lg"
     };
     const contentBox = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cn("min-w-0 flex-1", variantClasses[ctx.variant]), children: [
       /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
@@ -9148,12 +9148,12 @@ var TimelineItem = React33.forwardRef(
     ] });
     const markerWidth = Icon || dot ? "w-auto" : "w-6";
     const leftSide = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cn("flex items-stretch gap-4", padding, ctx.animate && "animate-in slide-in-from-left duration-500"), style: { animationDelay: ctx.animate ? `${(idx ?? 0) * 100}ms` : void 0 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("flex-shrink-0 flex items-stretch", markerWidth), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Marker, { index: idx ?? 0, last: isLast, size: ctx.size, color, status, lineColor: ctx.lineColor, lineStyle: ctx.lineStyle, active, dot, icon: Icon, showLine: ctx.showLine }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("shrink-0 flex items-stretch", markerWidth), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Marker, { index: idx ?? 0, last: isLast, size: ctx.size, color, status, lineColor: ctx.lineColor, lineStyle: ctx.lineStyle, active, dot, icon: Icon, showLine: ctx.showLine }) }),
       /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex-1", children: contentBox })
     ] });
     const rightSide = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cn("flex items-stretch gap-4", padding, ctx.animate && "animate-in slide-in-from-right duration-500"), style: { animationDelay: ctx.animate ? `${(idx ?? 0) * 100}ms` : void 0 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex-1 flex justify-end", children: contentBox }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("flex-shrink-0 flex items-stretch", markerWidth), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Marker, { index: idx ?? 0, last: isLast, size: ctx.size, color, status, lineColor: ctx.lineColor, lineStyle: ctx.lineStyle, active, dot, icon: Icon, showLine: ctx.showLine }) })
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("shrink-0 flex items-stretch", markerWidth), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Marker, { index: idx ?? 0, last: isLast, size: ctx.size, color, status, lineColor: ctx.lineColor, lineStyle: ctx.lineStyle, active, dot, icon: Icon, showLine: ctx.showLine }) })
     ] });
     const horizontalItem = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "div",
@@ -10069,6 +10069,7 @@ function DataTable({
   // Mặc định bật màu nền sẽn kẽ cho các dòng
   columnDividers = false,
   className,
+  storageKey,
   labels
 }) {
   const t = (0, import_next_intl7.useTranslations)("Common");
@@ -10078,7 +10079,26 @@ function DataTable({
   const [sort, setSort] = import_react23.default.useState(null);
   const [density, setDensity] = import_react23.default.useState("normal");
   const [curPage, setCurPage] = import_react23.default.useState(page);
-  const [curPageSize, setCurPageSize] = import_react23.default.useState(pageSize);
+  const getInitialPageSize = import_react23.default.useCallback(() => {
+    if (typeof window === "undefined" || !storageKey) return pageSize;
+    try {
+      const saved = localStorage.getItem(`datatable_${storageKey}_pageSize`);
+      if (saved) {
+        const parsed = parseInt(saved, 10);
+        if (!isNaN(parsed) && parsed > 0) return parsed;
+      }
+    } catch {
+    }
+    return pageSize;
+  }, [storageKey, pageSize]);
+  const [curPageSize, setCurPageSize] = import_react23.default.useState(getInitialPageSize);
+  import_react23.default.useEffect(() => {
+    if (typeof window === "undefined" || !storageKey) return;
+    try {
+      localStorage.setItem(`datatable_${storageKey}_pageSize`, String(curPageSize));
+    } catch {
+    }
+  }, [curPageSize, storageKey]);
   import_react23.default.useEffect(() => {
     const newColKeys = columns.filter((c) => c.visible !== false).map((c) => c.key);
     setVisibleCols((prev) => {
@@ -10170,7 +10190,7 @@ function DataTable({
       children: (() => {
         const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
         const isCenterAlign = col.align === "center" || !col.align && headerAlign === "center";
-        const titleContent = /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-1 min-w-0 flex-shrink", children: [
+        const titleContent = /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-1 min-w-0 shrink", children: [
           /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "truncate font-medium text-sm", children: col.title }),
           col.sortable && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             "button",
@@ -10261,7 +10281,7 @@ function DataTable({
           "div",
           {
             className: cn(
-              "flex items-center gap-2 select-none min-h-[2.5rem]",
+              "flex items-center gap-2 select-none min-h-10",
               isRightAlign && "justify-end",
               isCenterAlign && "justify-center",
               !isRightAlign && !isCenterAlign && "justify-between"
@@ -10387,7 +10407,7 @@ function DataTable({
       Table,
       {
         containerClassName: "border-0 md:border-0 rounded-none md:rounded-none shadow-none bg-transparent",
-        className: "[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-[5] [&_thead]:bg-background [&_thead]:backdrop-blur-sm",
+        className: "[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-5 [&_thead]:bg-background [&_thead]:backdrop-blur-sm",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableHeader, { children: renderHeader }),
           /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
@@ -12552,7 +12572,7 @@ function FloatingContacts({ className }) {
       external: true
     }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("fixed bottom-6 right-4 z-[100000]", "flex flex-col items-end gap-3", className), "aria-label": "Quick contacts", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("fixed bottom-6 right-4 z-100000", "flex flex-col items-end gap-3", className), "aria-label": "Quick contacts", children: [
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       import_link2.default,
       {
@@ -12675,12 +12695,12 @@ function ThemeToggleHeadless({
       }
     ),
     isOpen && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-      typeof window !== "undefined" && (0, import_react_dom10.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
+      typeof window !== "undefined" && (0, import_react_dom10.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && (0, import_react_dom10.createPortal)(
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           "div",
           {
-            className: "z-[9999] bg-card border border-border rounded-lg shadow-lg overflow-hidden",
+            className: "z-9999 bg-card border border-border rounded-lg shadow-lg overflow-hidden",
             style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width },
             onMouseDown: (e) => e.stopPropagation(),
             role: "menu",
@@ -12772,12 +12792,12 @@ function LanguageSwitcherHeadless({
       }
     ),
     isOpen && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
-      typeof window !== "undefined" && (0, import_react_dom11.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
+      typeof window !== "undefined" && (0, import_react_dom11.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && (0, import_react_dom11.createPortal)(
         /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           "div",
           {
-            className: "z-[9999] bg-card border border-border rounded-lg shadow-lg overflow-hidden",
+            className: "z-9999 bg-card border border-border rounded-lg shadow-lg overflow-hidden",
             style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width },
             onMouseDown: (e) => e.stopPropagation(),
             role: "menu",