@underverse-ui/underverse 0.1.5 → 0.1.7

package/README.md

@@ -1,5 +1,7 @@
 # Underverse UI
 
+Docs: https://underverse-sepia.vercel.app/vi/docs/underverse
+
 **Author:** Tran Van Bach
 
 A comprehensive UI component library for React/Next.js applications, extracted from the main project. Built with Tailwind CSS, `clsx`, and `tailwind-merge`. Some components support `next-intl` (optional).

package/dist/index.cjs

@@ -2588,7 +2588,7 @@ var variantIcons = {
   warning: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(WarningIcon, { className: "h-4 w-4 text-warning" }),
   error: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ErrorIcon, { className: "h-4 w-4 text-destructive" })
 };
-var Alert = ({ title, description, variant = "default", className, icon, dismissible = false, onClose, actions }) => {
+var Alert = ({ title, description, variant = "default", className, icon, dismissible = false, onClose, actions, closeAriaLabel }) => {
   const [open, setOpen] = (0, import_react7.useState)(true);
   const t = (0, import_next_intl2.useTranslations)("Common");
   if (!open) return null;
@@ -2614,7 +2614,7 @@ var Alert = ({ title, description, variant = "default", className, icon, dismiss
           {
             onClick: handleClose,
             className: "rounded-md p-1 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            "aria-label": t("closeAlert"),
+            "aria-label": closeAriaLabel || t("closeAlert"),
             children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react9.X, { className: "h-4 w-4" })
           }
         )
@@ -2625,7 +2625,7 @@ var Alert = ({ title, description, variant = "default", className, icon, dismiss
 var Alert_default = Alert;
 
 // ../../components/ui/GlobalLoading.tsx
-var import_react8 = require("react");
+var import_react8 = __toESM(require("react"), 1);
 var import_lucide_react10 = require("lucide-react");
 
 // ../../lib/utils/loading.ts
@@ -2744,21 +2744,24 @@ var ButtonLoading = ({
   disabled,
   loadingText
 }) => {
+  const child = import_react8.default.isValidElement(children) ? import_react8.default.cloneElement(children, {
+    disabled: (children.props?.disabled ?? false) || disabled || isLoading,
+    "aria-busy": isLoading || void 0
+  }) : children;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-    "button",
+    "div",
     {
       className: cn(
-        "relative",
+        "relative inline-block",
         isLoading && "cursor-not-allowed",
         className
       ),
-      disabled: disabled || isLoading,
       children: [
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "absolute inset-0 flex items-center justify-center", children: [
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: [
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Activity, { className: "w-4 h-4 animate-spin text-primary-foreground" }),
           loadingText && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ml-2 text-sm", children: loadingText })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn(isLoading && "invisible"), children })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn(isLoading && "opacity-50 pointer-events-none"), children: child })
       ]
     }
   );
@@ -3675,7 +3678,8 @@ var Pagination = ({
   pageSize,
   pageSizeOptions,
   onPageSizeChange,
-  totalItems
+  totalItems,
+  labels
 }) => {
   const t = (0, import_next_intl4.useTranslations)("Pagination");
   const createPageArray = () => {
@@ -3729,8 +3733,8 @@ var Pagination = ({
     }
   };
   if (totalPages <= 1) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("nav", { className: cn("flex flex-col gap-4", className), "aria-label": t("navigationLabel"), children: [
-    showInfo && totalItems && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-sm text-muted-foreground text-center", children: t("showingResults", { startItem: startItem || 0, endItem: endItem || 0, totalItems }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("nav", { className: cn("flex flex-col gap-4", className), "aria-label": labels?.navigationLabel || t("navigationLabel"), children: [
+    showInfo && totalItems && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-sm text-muted-foreground text-center", children: labels?.showingResults ? labels.showingResults({ startItem: startItem || 0, endItem: endItem || 0, totalItems }) : t("showingResults", { startItem: startItem || 0, endItem: endItem || 0, totalItems }) }),
     /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
       showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         Button_default,
@@ -3741,8 +3745,8 @@ var Pagination = ({
           onClick: () => onChange(1),
           disabled: disabled || page === 1,
           className: "hidden sm:flex",
-          title: t("firstPage"),
-          "aria-label": t("firstPage"),
+          title: labels?.firstPage || t("firstPage"),
+          "aria-label": labels?.firstPage || t("firstPage"),
           "aria-disabled": disabled || page === 1
         }
       ),
@@ -3754,10 +3758,10 @@ var Pagination = ({
           icon: import_lucide_react13.ChevronLeft,
           onClick: () => onChange(Math.max(1, page - 1)),
           disabled: disabled || page === 1,
-          title: t("previousPage"),
-          "aria-label": t("previousPage"),
+          title: labels?.previousPage || t("previousPage"),
+          "aria-label": labels?.previousPage || t("previousPage"),
           "aria-disabled": disabled || page === 1,
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "hidden sm:inline", children: t("previous") })
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "hidden sm:inline", children: labels?.previous || t("previous") })
         }
       ),
       showPageNumbers && createPageArray().map((p, i) => {
@@ -3774,7 +3778,7 @@ var Pagination = ({
             onClick: () => onChange(pageNumber),
             disabled,
             className: cn("min-w-[2.5rem]", isActive && "font-semibold"),
-            "aria-label": t("pageNumber", { page: pageNumber }),
+            "aria-label": labels?.pageNumber ? labels.pageNumber(pageNumber) : t("pageNumber", { page: pageNumber }),
             "aria-current": isActive ? "page" : void 0,
             children: pageNumber
           },
@@ -3789,10 +3793,10 @@ var Pagination = ({
           iconRight: import_lucide_react13.ChevronRight,
           onClick: () => onChange(Math.min(totalPages, page + 1)),
           disabled: disabled || page === totalPages,
-          title: t("nextPage"),
-          "aria-label": t("nextPage"),
+          title: labels?.nextPage || t("nextPage"),
+          "aria-label": labels?.nextPage || t("nextPage"),
           "aria-disabled": disabled || page === totalPages,
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "hidden sm:inline", children: t("next") })
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "hidden sm:inline", children: labels?.next || t("next") })
         }
       ),
       showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -3804,15 +3808,15 @@ var Pagination = ({
           onClick: () => onChange(totalPages),
           disabled: disabled || page === totalPages,
           className: "hidden sm:flex",
-          title: t("lastPage"),
-          "aria-label": t("lastPage"),
+          title: labels?.lastPage || t("lastPage"),
+          "aria-label": labels?.lastPage || t("lastPage"),
           "aria-disabled": disabled || page === totalPages
         }
       )
     ] }),
     pageSizeOptions && onPageSizeChange && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center justify-center gap-2 text-sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "text-muted-foreground", children: [
-        t("itemsPerPage"),
+        labels?.itemsPerPage || t("itemsPerPage"),
         ":"
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-20", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -3822,8 +3826,8 @@ var Pagination = ({
           value: pageSize?.toString() || "10",
           onChange: handlePageSizeChange,
           placeholder: "10",
-          searchPlaceholder: t("search"),
-          emptyText: t("noOptions"),
+          searchPlaceholder: labels?.search || t("search"),
+          emptyText: labels?.noOptions || t("noOptions"),
           disabled
         }
       ) })
@@ -4079,7 +4083,10 @@ var DatePicker = ({
   disabled = false,
   size = "md",
   label,
-  required
+  required,
+  todayLabel,
+  clearLabel,
+  weekdayLabels
 }) => {
   const t = (0, import_next_intl5.useTranslations)("DatePicker");
   const locale = (0, import_next_intl5.useLocale)();
@@ -4220,10 +4227,10 @@ var DatePicker = ({
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
               /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("prev"), className: "p-1 h-auto", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.ChevronLeft, { className: "h-4 w-4" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-sm font-semibold", children: viewDate.toLocaleDateString(locale === "vi" /* VI */ ? "vi-VN" : "en-US", { month: "long", year: "numeric" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-sm font-semibold", children: viewDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }) }),
               /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("next"), className: "p-1 h-auto", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.ChevronRight, { className: "h-4 w-4" }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("grid grid-cols-7 gap-1", size === "sm" ? "mb-1" : "mb-2"), children: (locale === "vi" /* VI */ ? t("weekdays").split(",") : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((day) => /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.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_runtime27.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_runtime27.jsx)("div", { className: "grid grid-cols-7 gap-1", children: renderCalendar() })
           ]
         }
@@ -5746,7 +5753,8 @@ function DataTable({
   enableDensityToggle = true,
   striped = true,
   // Mặc định bật màu nền sẽn kẽ cho các dòng
-  className
+  className,
+  labels
 }) {
   const t = (0, import_next_intl7.useTranslations)("Common");
   const [visibleCols, setVisibleCols] = import_react20.default.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
@@ -5926,12 +5934,12 @@ function DataTable({
           {
             trigger: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
-              t("density")
+              labels?.density || t("density")
             ] }),
             items: [
-              { label: t("compact"), onClick: () => setDensity("compact") },
-              { label: t("normal"), onClick: () => setDensity("normal") },
-              { label: t("comfortable"), onClick: () => setDensity("comfortable") }
+              { label: labels?.compact || t("compact"), onClick: () => setDensity("compact") },
+              { label: labels?.normal || t("normal"), onClick: () => setDensity("normal") },
+              { label: labels?.comfortable || t("comfortable"), onClick: () => setDensity("comfortable") }
             ]
           }
         ),
@@ -5948,7 +5956,7 @@ function DataTable({
                   d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
                 }
               ) }),
-              t("columns")
+              labels?.columns || t("columns")
             ] }),
             children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
               DropdownMenuItem,
@@ -6028,7 +6036,7 @@ var DataTable_default = DataTable;
 var import_lucide_react21 = require("lucide-react");
 var import_next_intl8 = require("next-intl");
 var import_jsx_runtime39 = require("react/jsx-runtime");
-function NotificationModal({ isOpen, onClose, notification }) {
+function NotificationModal({ isOpen, onClose, notification, titleText, openLinkText, closeText }) {
   const t = (0, import_next_intl8.useTranslations)("Common");
   if (!notification) return null;
   const formatTime2 = (dateString) => {
@@ -6053,7 +6061,7 @@ function NotificationModal({ isOpen, onClose, notification }) {
     {
       isOpen,
       onClose,
-      title: t("notifications"),
+      title: titleText || t("notifications"),
       size: "md",
       children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "space-y-4", children: [
         /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-2 pb-2 border-b border-border", children: [
@@ -6076,7 +6084,7 @@ function NotificationModal({ isOpen, onClose, notification }) {
               className: "gap-2",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react21.ExternalLink, { className: "w-4 h-4" }),
-                t("openLink")
+                openLinkText || t("openLink")
               ]
             }
           ),
@@ -6086,7 +6094,7 @@ function NotificationModal({ isOpen, onClose, notification }) {
               variant: "ghost",
               size: "sm",
               onClick: onClose,
-              children: t("close")
+              children: closeText || t("close")
             }
           )
         ] })