@underverse-ui/underverse 0.2.31 → 0.2.33

package/dist/index.cjs

@@ -2736,23 +2736,31 @@ var ToastComponent = ({ toast, onRemove }) => {
   const typeConfig = {
     success: {
       icon: import_lucide_react7.CheckCircle,
-      className: "bg-success/10 border-success/20 text-foreground",
-      iconClassName: "text-success"
+      containerClassName: "bg-success/5 border-success/30",
+      iconClassName: "text-success",
+      iconBgClassName: "bg-success/15",
+      accentBarClassName: "bg-success"
     },
     error: {
       icon: import_lucide_react7.AlertCircle,
-      className: "bg-destructive/10 border-destructive/20 text-foreground",
-      iconClassName: "text-destructive"
+      containerClassName: "bg-destructive/5 border-destructive/30",
+      iconClassName: "text-destructive",
+      iconBgClassName: "bg-destructive/15",
+      accentBarClassName: "bg-destructive"
     },
     warning: {
       icon: import_lucide_react7.AlertTriangle,
-      className: "bg-warning/10 border-warning/20 text-foreground",
-      iconClassName: "text-warning"
+      containerClassName: "bg-warning/5 border-warning/30",
+      iconClassName: "text-warning",
+      iconBgClassName: "bg-warning/15",
+      accentBarClassName: "bg-warning"
     },
     info: {
       icon: import_lucide_react7.Info,
-      className: "bg-info/10 border-info/20 text-foreground",
-      iconClassName: "text-info"
+      containerClassName: "bg-info/5 border-info/30",
+      iconClassName: "text-info",
+      iconBgClassName: "bg-info/15",
+      accentBarClassName: "bg-info"
     }
   };
   const config = typeConfig[toast.type];
@@ -2761,9 +2769,10 @@ var ToastComponent = ({ toast, onRemove }) => {
     "div",
     {
       className: cn(
-        "relative w-80 rounded-lg border backdrop-blur-sm transition-all duration-300 ease-soft pointer-events-auto",
-        "bg-card/95 shadow-lg animate-in slide-in-from-right-full",
-        config.className,
+        "relative w-80 rounded-r-lg border border-l-0 backdrop-blur-md transition-all duration-300 pointer-events-auto overflow-hidden",
+        "bg-card shadow-xl",
+        "animate-in slide-in-from-right-full",
+        config.containerClassName,
         isVisible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-full"
       ),
       role: "status",
@@ -2781,8 +2790,9 @@ var ToastComponent = ({ toast, onRemove }) => {
         setPaused(false);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-start gap-3 p-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: cn("h-5 w-5 mt-0.5 shrink-0", config.iconClassName) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn("absolute left-0 top-0 bottom-0 w-1", config.accentBarClassName) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-start gap-3 p-4 pl-5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn("flex items-center justify-center w-8 h-8 rounded-full shrink-0", config.iconBgClassName), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: cn("h-4 w-4", config.iconClassName) }) }),
           /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex-1 space-y-1", children: [
             toast.title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h4", { className: "font-medium text-sm leading-none", children: toast.title }),
             /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-muted-foreground leading-relaxed", children: toast.message }),
@@ -3553,25 +3563,43 @@ var SidebarSheet = ({ navigation, children, ...props }) => {
 var import_react9 = require("react");
 var import_lucide_react9 = require("lucide-react");
 var import_next_intl2 = require("next-intl");
-
-// ../../lib/constants/constants-ui/alert.ts
-var VARIANT_STYLES_ALERT = {
-  // Use system colors for background + border; leave text colors to content
-  default: "border border-border bg-card/60 backdrop-blur-sm",
-  info: "border border-info/30 bg-info/10 backdrop-blur-sm",
-  success: "border border-success/30 bg-success/10 backdrop-blur-sm",
-  warning: "border border-warning/30 bg-warning/10 backdrop-blur-sm",
-  error: "border border-destructive/30 bg-destructive/10 backdrop-blur-sm"
-};
-
-// ../../components/ui/Alert.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var variantIcons = {
-  default: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.Info, { className: "h-4 w-4 text-muted-foreground" }),
-  info: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.Info, { className: "h-4 w-4 text-info" }),
-  success: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.CheckCircle, { className: "h-4 w-4 text-success" }),
-  warning: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.AlertTriangle, { className: "h-4 w-4 text-warning" }),
-  error: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.XCircle, { className: "h-4 w-4 text-destructive" })
+var variantConfig = {
+  default: {
+    icon: import_lucide_react9.Info,
+    containerClassName: "bg-muted/50 border-border",
+    iconClassName: "text-muted-foreground",
+    iconBgClassName: "bg-muted",
+    accentBarClassName: "bg-muted-foreground"
+  },
+  info: {
+    icon: import_lucide_react9.Info,
+    containerClassName: "bg-info/5 border-info/30",
+    iconClassName: "text-info",
+    iconBgClassName: "bg-info/15",
+    accentBarClassName: "bg-info"
+  },
+  success: {
+    icon: import_lucide_react9.CheckCircle,
+    containerClassName: "bg-success/5 border-success/30",
+    iconClassName: "text-success",
+    iconBgClassName: "bg-success/15",
+    accentBarClassName: "bg-success"
+  },
+  warning: {
+    icon: import_lucide_react9.AlertTriangle,
+    containerClassName: "bg-warning/5 border-warning/30",
+    iconClassName: "text-warning",
+    iconBgClassName: "bg-warning/15",
+    accentBarClassName: "bg-warning"
+  },
+  error: {
+    icon: import_lucide_react9.XCircle,
+    containerClassName: "bg-destructive/5 border-destructive/30",
+    iconClassName: "text-destructive",
+    iconBgClassName: "bg-destructive/15",
+    accentBarClassName: "bg-destructive"
+  }
 };
 var Alert = ({ title, description, variant = "default", className, icon, dismissible = false, onClose, actions, closeAriaLabel }) => {
   const [open, setOpen] = (0, import_react9.useState)(true);
@@ -3581,14 +3609,23 @@ var Alert = ({ title, description, variant = "default", className, icon, dismiss
     setOpen(false);
     onClose?.();
   };
+  const config = variantConfig[variant];
+  const Icon = config.icon;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
-      className: cn("w-full p-4 rounded-md flex items-start gap-3", VARIANT_STYLES_ALERT[variant], className),
+      className: cn(
+        "relative w-full rounded-r-lg border border-l-0 overflow-hidden",
+        "flex items-start gap-3 p-4 pl-5",
+        "backdrop-blur-md",
+        config.containerClassName,
+        className
+      ),
       role: "alert",
       "aria-live": variant === "error" ? "assertive" : "polite",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pt-1", children: icon ?? variantIcons[variant] }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("absolute left-0 top-0 bottom-0 w-1", config.accentBarClassName) }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("flex items-center justify-center w-8 h-8 rounded-full shrink-0", config.iconBgClassName), children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { className: cn("h-4 w-4", config.iconClassName) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1 min-w-0", children: [
           title && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "font-semibold text-sm leading-none mb-1 text-foreground", children: title }),
           description && (typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-muted-foreground leading-relaxed wrap-break-word", children: description }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-sm text-muted-foreground leading-relaxed wrap-break-word", children: description })),
@@ -5302,7 +5339,11 @@ var DatePicker = ({
     setIsOpen(false);
   };
   const formatDateDisplay = (date) => {
-    return formatDate(date);
+    return date.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", {
+      day: "numeric",
+      month: "long",
+      year: "numeric"
+    });
   };
   const getDaysInMonth = (date) => {
     return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
@@ -5384,10 +5425,12 @@ var DatePicker = ({
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
               /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("prev"), className: "p-1 h-auto", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react14.ChevronLeft, { className: "h-4 w-4" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-sm font-semibold", children: viewDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-sm font-semibold", children: viewDate.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", { month: "long", year: "numeric" }) }),
               /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("next"), className: "p-1 h-auto", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react14.ChevronRight, { className: "h-4 w-4" }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("grid grid-cols-7 gap-1", size === "sm" ? "mb-1" : "mb-2"), children: (weekdayLabels || ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((day) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("text-muted-foreground text-center font-medium", size === "sm" ? "text-[10px] py-0.5" : "text-xs py-1"), children: day }, day)) }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("grid grid-cols-7 gap-1", size === "sm" ? "mb-1" : "mb-2"), children: (weekdayLabels || (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"])).map(
+              (day) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("text-muted-foreground text-center font-medium", size === "sm" ? "text-[10px] py-0.5" : "text-xs py-1"), children: day }, day)
+            ) }),
             /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "grid grid-cols-7 gap-1", children: renderCalendar() }),
             /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-end mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               Button_default,
@@ -5492,6 +5535,7 @@ var DatePicker = ({
   ] });
 };
 var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select date range...", className }) => {
+  const locale = (0, import_next_intl5.useLocale)();
   const [isOpen, setIsOpen] = React22.useState(false);
   const [dropdownPosition, setDropdownPosition] = React22.useState(null);
   const triggerRef = React22.useRef(null);
@@ -5651,7 +5695,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
                   children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react14.ChevronLeft, { className: "h-4 w-4" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-sm font-semibold", children: viewDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-sm font-semibold", children: viewDate.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", { month: "long", year: "numeric" }) }),
               /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 Button_default,
                 {
@@ -5663,7 +5707,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-xs text-muted-foreground text-center py-1 font-medium", children: d }, d)) }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((d) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-xs text-muted-foreground text-center py-1 font-medium", children: d }, d)) }),
             /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "grid grid-cols-7", children: renderGrid() })
           ]
         }
@@ -7268,7 +7312,7 @@ var Slider = React27.forwardRef(
     size = "md",
     disabled = false,
     orientation = "horizontal",
-    noFocus = false,
+    noFocus = true,
     ...props
   }, ref) => {
     const [internalValue, setInternalValue] = React27.useState(defaultValue);
@@ -7293,13 +7337,7 @@ var Slider = React27.forwardRef(
         showValue && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: cn("text-xs font-mono text-muted-foreground min-w-8 text-right", valueClassName), children: displayValue })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("relative flex items-center", sizeStyles8.container), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("w-full rounded-full bg-secondary relative overflow-hidden", sizeStyles8.track, trackClassName), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          "div",
-          {
-            className: "absolute left-0 top-0 h-full bg-primary rounded-full transition-all duration-150 ease-out",
-            style: { width: `${percentage}%` }
-          }
-        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("w-full rounded-full bg-secondary relative overflow-hidden", sizeStyles8.track, trackClassName), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute left-0 top-0 h-full bg-primary rounded-full", style: { width: `${percentage}%` } }) }),
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "input",
           {
@@ -11292,6 +11330,16 @@ function LanguageSwitcherHeadless({
   ] });
 }
 
+// ../../lib/constants/constants-ui/alert.ts
+var VARIANT_STYLES_ALERT = {
+  // Use system colors for background + border; leave text colors to content
+  default: "border border-border bg-card/60 backdrop-blur-sm",
+  info: "border border-info/30 bg-info/10 backdrop-blur-sm",
+  success: "border border-success/30 bg-success/10 backdrop-blur-sm",
+  warning: "border border-warning/30 bg-warning/10 backdrop-blur-sm",
+  error: "border border-destructive/30 bg-destructive/10 backdrop-blur-sm"
+};
+
 // locales/en.json
 var en_default = {
   Common: {