@underverse-ui/underverse 0.2.32 → 0.2.34

package/dist/index.cjs

@@ -3563,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);
@@ -3591,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 })),
@@ -4984,6 +5011,16 @@ var CompactPagination = ({
 // ../../components/ui/Section.tsx
 var import_react13 = __toESM(require("react"), 1);
 var import_jsx_runtime26 = require("react/jsx-runtime");
+var gradientDirectionMap = {
+  "to-r": "bg-gradient-to-r",
+  "to-l": "bg-gradient-to-l",
+  "to-b": "bg-gradient-to-b",
+  "to-t": "bg-gradient-to-t",
+  "to-br": "bg-gradient-to-br",
+  "to-bl": "bg-gradient-to-bl",
+  "to-tr": "bg-gradient-to-tr",
+  "to-tl": "bg-gradient-to-tl"
+};
 var Section = import_react13.default.forwardRef(
   ({
     children,
@@ -4992,13 +5029,17 @@ var Section = import_react13.default.forwardRef(
     spacing = "lg",
     fullWidth = false,
     outlined = false,
+    gradientFrom = "from-primary/20",
+    gradientTo = "to-accent/20",
+    gradientDirection = "to-br",
     ...props
   }, ref) => {
     const variantClasses = {
       default: "bg-background",
       muted: "bg-muted/30",
       primary: "bg-primary/5",
-      accent: "bg-accent/10"
+      accent: "bg-accent/10",
+      gradient: ""
     };
     const spacingClasses = {
       sm: "py-6",
@@ -5006,12 +5047,16 @@ var Section = import_react13.default.forwardRef(
       lg: "py-12",
       xl: "py-16"
     };
+    const getGradientClasses = () => {
+      if (variant !== "gradient") return "";
+      return cn(gradientDirectionMap[gradientDirection], gradientFrom, gradientTo);
+    };
     return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "section",
       {
         ref,
         className: cn(
-          variantClasses[variant],
+          variant === "gradient" ? getGradientClasses() : variantClasses[variant],
           spacingClasses[spacing],
           outlined && "rounded-lg border border-border/60",
           !fullWidth && "container mx-auto px-4 md:px-6",
@@ -5312,7 +5357,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();
@@ -5394,10 +5443,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,
@@ -5502,6 +5553,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);
@@ -5661,7 +5713,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,
                 {
@@ -5673,7 +5725,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() })
           ]
         }
@@ -7278,7 +7330,7 @@ var Slider = React27.forwardRef(
     size = "md",
     disabled = false,
     orientation = "horizontal",
-    noFocus = false,
+    noFocus = true,
     ...props
   }, ref) => {
     const [internalValue, setInternalValue] = React27.useState(defaultValue);
@@ -7303,13 +7355,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",
           {
@@ -11302,6 +11348,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: {