@blencm/ui 0.0.1 → 0.0.2

package/dist/index.cjs

@@ -6682,7 +6682,7 @@ function SearchableSelectBase({
             "button",
             {
               type: "button",
-              "aria-label": "Limpiar b\xFAsqueda",
+              "aria-label": "Clear search",
               tabIndex: -1,
               onPointerDown: (event) => {
                 event.preventDefault();
@@ -8185,7 +8185,7 @@ function capitalize(value) {
 }
 function UiDate({
   label,
-  placeholder = "Seleccione una fecha",
+  placeholder = "Select a date",
   value,
   defaultMonth,
   onChange,
@@ -8489,7 +8489,7 @@ function UiDate({
                         }),
                         "h-8 w-8 shrink-0 rounded-lg text-muted-foreground hover:text-foreground disabled:opacity-30"
                       ),
-                      "aria-label": "Mes anterior",
+                      "aria-label": "Previous month",
                       children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react8.ChevronLeftIcon, { className: "h-4 w-4" })
                     }
                   ),
@@ -8502,7 +8502,7 @@ function UiDate({
                         items: monthOptions,
                         disabled: Boolean(disabled),
                         size: "sm",
-                        placeholder: "Mes",
+                        placeholder: "Month",
                         selectClassName: "space-y-0",
                         className: dateHeaderSelectTriggerClassName,
                         contentClassName: dateHeaderSelectContentClassName,
@@ -8519,7 +8519,7 @@ function UiDate({
                         items: yearOptions,
                         disabled: Boolean(disabled),
                         size: "sm",
-                        placeholder: "A\xF1o",
+                        placeholder: "Year",
                         selectClassName: "space-y-0",
                         className: dateHeaderSelectTriggerClassName,
                         contentClassName: dateHeaderSelectContentClassName,
@@ -8547,7 +8547,7 @@ function UiDate({
                         }),
                         "h-8 w-8 shrink-0 rounded-lg text-muted-foreground hover:text-foreground disabled:opacity-30"
                       ),
-                      "aria-label": "Mes siguiente",
+                      "aria-label": "Next month",
                       children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react8.ChevronRightIcon, { className: "h-4 w-4" })
                     }
                   )
@@ -9251,7 +9251,7 @@ function WheelArrowIndicator() {
 }
 function UiTime({
   label,
-  placeholder = "Seleccionar hora",
+  placeholder = "Select time",
   value,
   onChange,
   onBlur,
@@ -11930,6 +11930,7 @@ function DataTable({
   pageLabel = "Page",
   isRowsSelected = true,
   totalRows,
+  totalLabel = "records",
   rowsSelectedLabel = "row(s) selected",
   template = "neo",
   classNames,
@@ -11986,6 +11987,8 @@ function DataTable({
   const accentOn = !!dtAccent;
   const dataAccent = accentOn ? "on" : "off";
   const headerIsSticky = stickyHeader && !headerScroll;
+  const isEmpty = table.getRowModel().rows.length === 0;
+  const emptyState = emptyData != null ? emptyData : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "text-muted-foreground", children: "No results." });
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
     "div",
     {
@@ -11993,89 +11996,72 @@ function DataTable({
       className: cn(ui.root, heightClassName),
       style: accentOn ? { "--dt-accent": dtAccent } : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(ScrollArea, { className: "h-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "relative w-max min-w-full", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Table, { className: cn(ui.table), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TableHeader, { className: cn(ui.thead), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TableRow, { className: cn(ui.trHead), children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-              TableHead,
-              {
-                className: cn(
-                  headerIsSticky ? cn(ui.theadSticky, "z-20") : void 0,
-                  ui.th
-                ),
-                children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
-                  header.column.columnDef.header,
-                  header.getContext()
-                )
-              },
-              header.id
-            )) }, headerGroup.id)) }),
-            animate ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_framer_motion.AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-              import_framer_motion.motion.tbody,
-              {
-                className: cn(ui.tbody),
-                initial: { opacity: 0, y: 6 },
-                animate: { opacity: 1, y: 0 },
-                exit: { opacity: 0, y: -6 },
-                transition: { duration: 0.18 },
-                children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-                  TableRow,
-                  {
-                    "data-accent": dataAccent,
-                    "data-state": row.getIsSelected() ? "selected" : void 0,
-                    onClick: () => onClick == null ? void 0 : onClick(row.original),
-                    className: cn(
-                      ui.tr,
-                      clickable ? ui.trClickable : void 0
-                    ),
-                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TableCell, { className: cn(ui.td), children: (0, import_react_table.flexRender)(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    ) }, cell.id))
-                  },
-                  row.id
-                )) : emptyData || /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TableRow, { "data-accent": dataAccent, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-                  TableCell,
-                  {
-                    colSpan: columns.length,
-                    className: cn(
-                      ui.td,
-                      "text-muted-foreground h-28 text-center"
-                    ),
-                    children: "No results."
-                  }
-                ) })
-              },
-              pageKey
-            ) }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TableBody, { className: cn(ui.tbody), children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-              TableRow,
-              {
-                "data-accent": dataAccent,
-                "data-state": row.getIsSelected() ? "selected" : void 0,
-                onClick: () => onClick == null ? void 0 : onClick(row.original),
-                className: cn(
-                  ui.tr,
-                  clickable ? ui.trClickable : void 0
-                ),
-                children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TableCell, { className: cn(ui.td), children: (0, import_react_table.flexRender)(
-                  cell.column.columnDef.cell,
-                  cell.getContext()
-                ) }, cell.id))
-              },
-              row.id
-            )) : emptyData || /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TableRow, { "data-accent": dataAccent, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-              TableCell,
-              {
-                colSpan: columns.length,
-                className: cn(
-                  ui.td,
-                  "text-muted-foreground h-28 text-center"
-                ),
-                children: "No results."
-              }
-            ) }) })
-          ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ScrollBar, { orientation: "horizontal" })
-        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "relative min-h-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(ScrollArea, { className: "h-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "relative w-max min-w-full", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Table, { className: cn(ui.table), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TableHeader, { className: cn(ui.thead), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TableRow, { className: cn(ui.trHead), children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                TableHead,
+                {
+                  className: cn(
+                    headerIsSticky ? cn(ui.theadSticky, "z-20") : void 0,
+                    ui.th
+                  ),
+                  children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  )
+                },
+                header.id
+              )) }, headerGroup.id)) }),
+              animate ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_framer_motion.AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                import_framer_motion.motion.tbody,
+                {
+                  className: cn(ui.tbody),
+                  initial: { opacity: 0, y: 6 },
+                  animate: { opacity: 1, y: 0 },
+                  exit: { opacity: 0, y: -6 },
+                  transition: { duration: 0.18 },
+                  children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                    TableRow,
+                    {
+                      "data-accent": dataAccent,
+                      "data-state": row.getIsSelected() ? "selected" : void 0,
+                      onClick: () => onClick == null ? void 0 : onClick(row.original),
+                      className: cn(
+                        ui.tr,
+                        clickable ? ui.trClickable : void 0
+                      ),
+                      children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TableCell, { className: cn(ui.td), children: (0, import_react_table.flexRender)(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      ) }, cell.id))
+                    },
+                    row.id
+                  )) : null
+                },
+                pageKey
+              ) }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TableBody, { className: cn(ui.tbody), children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                TableRow,
+                {
+                  "data-accent": dataAccent,
+                  "data-state": row.getIsSelected() ? "selected" : void 0,
+                  onClick: () => onClick == null ? void 0 : onClick(row.original),
+                  className: cn(
+                    ui.tr,
+                    clickable ? ui.trClickable : void 0
+                  ),
+                  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TableCell, { className: cn(ui.td), children: (0, import_react_table.flexRender)(
+                    cell.column.columnDef.cell,
+                    cell.getContext()
+                  ) }, cell.id))
+                },
+                row.id
+              )) : null })
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ScrollBar, { orientation: "horizontal" })
+          ] }),
+          isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "bg-background pointer-events-none absolute inset-x-0 bottom-0 top-12 z-[5] flex w-full items-center justify-center p-8", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "pointer-events-auto flex h-full w-full flex-col items-center justify-center text-center", children: emptyState }) }) : null
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: cn(ui.footer), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: cn(ui.footerInner), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-[1fr_auto] sm:items-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: cn(ui.metaWrap), children: [
             isRowsSelected && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { children: [
@@ -12090,7 +12076,8 @@ function DataTable({
             typeof totalRows === "number" && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { children: [
               "Total: ",
               totalRows,
-              " registros"
+              " ",
+              totalLabel
             ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: cn(ui.controlsWrap), children: [

package/dist/index.js

@@ -6398,7 +6398,7 @@ function SearchableSelectBase({
             "button",
             {
               type: "button",
-              "aria-label": "Limpiar b\xFAsqueda",
+              "aria-label": "Clear search",
               tabIndex: -1,
               onPointerDown: (event) => {
                 event.preventDefault();
@@ -7923,7 +7923,7 @@ function capitalize(value) {
 }
 function UiDate({
   label,
-  placeholder = "Seleccione una fecha",
+  placeholder = "Select a date",
   value,
   defaultMonth,
   onChange,
@@ -8227,7 +8227,7 @@ function UiDate({
                         }),
                         "h-8 w-8 shrink-0 rounded-lg text-muted-foreground hover:text-foreground disabled:opacity-30"
                       ),
-                      "aria-label": "Mes anterior",
+                      "aria-label": "Previous month",
                       children: /* @__PURE__ */ jsx31(ChevronLeftIcon, { className: "h-4 w-4" })
                     }
                   ),
@@ -8240,7 +8240,7 @@ function UiDate({
                         items: monthOptions,
                         disabled: Boolean(disabled),
                         size: "sm",
-                        placeholder: "Mes",
+                        placeholder: "Month",
                         selectClassName: "space-y-0",
                         className: dateHeaderSelectTriggerClassName,
                         contentClassName: dateHeaderSelectContentClassName,
@@ -8257,7 +8257,7 @@ function UiDate({
                         items: yearOptions,
                         disabled: Boolean(disabled),
                         size: "sm",
-                        placeholder: "A\xF1o",
+                        placeholder: "Year",
                         selectClassName: "space-y-0",
                         className: dateHeaderSelectTriggerClassName,
                         contentClassName: dateHeaderSelectContentClassName,
@@ -8285,7 +8285,7 @@ function UiDate({
                         }),
                         "h-8 w-8 shrink-0 rounded-lg text-muted-foreground hover:text-foreground disabled:opacity-30"
                       ),
-                      "aria-label": "Mes siguiente",
+                      "aria-label": "Next month",
                       children: /* @__PURE__ */ jsx31(ChevronRightIcon4, { className: "h-4 w-4" })
                     }
                   )
@@ -8997,7 +8997,7 @@ function WheelArrowIndicator() {
 }
 function UiTime({
   label,
-  placeholder = "Seleccionar hora",
+  placeholder = "Select time",
   value,
   onChange,
   onBlur,
@@ -11722,6 +11722,7 @@ function DataTable({
   pageLabel = "Page",
   isRowsSelected = true,
   totalRows,
+  totalLabel = "records",
   rowsSelectedLabel = "row(s) selected",
   template = "neo",
   classNames,
@@ -11778,6 +11779,8 @@ function DataTable({
   const accentOn = !!dtAccent;
   const dataAccent = accentOn ? "on" : "off";
   const headerIsSticky = stickyHeader && !headerScroll;
+  const isEmpty = table.getRowModel().rows.length === 0;
+  const emptyState = emptyData != null ? emptyData : /* @__PURE__ */ jsx66("p", { className: "text-muted-foreground", children: "No results." });
   return /* @__PURE__ */ jsxs38(
     "div",
     {
@@ -11785,89 +11788,72 @@ function DataTable({
       className: cn(ui.root, heightClassName),
       style: accentOn ? { "--dt-accent": dtAccent } : void 0,
       children: [
-        /* @__PURE__ */ jsx66("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxs38(ScrollArea, { className: "h-full", children: [
-          /* @__PURE__ */ jsx66("div", { className: "relative w-max min-w-full", children: /* @__PURE__ */ jsxs38(Table, { className: cn(ui.table), children: [
-            /* @__PURE__ */ jsx66(TableHeader, { className: cn(ui.thead), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx66(TableRow, { className: cn(ui.trHead), children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx66(
-              TableHead,
-              {
-                className: cn(
-                  headerIsSticky ? cn(ui.theadSticky, "z-20") : void 0,
-                  ui.th
-                ),
-                children: header.isPlaceholder ? null : flexRender(
-                  header.column.columnDef.header,
-                  header.getContext()
-                )
-              },
-              header.id
-            )) }, headerGroup.id)) }),
-            animate ? /* @__PURE__ */ jsx66(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx66(
-              motion.tbody,
-              {
-                className: cn(ui.tbody),
-                initial: { opacity: 0, y: 6 },
-                animate: { opacity: 1, y: 0 },
-                exit: { opacity: 0, y: -6 },
-                transition: { duration: 0.18 },
-                children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx66(
-                  TableRow,
-                  {
-                    "data-accent": dataAccent,
-                    "data-state": row.getIsSelected() ? "selected" : void 0,
-                    onClick: () => onClick == null ? void 0 : onClick(row.original),
-                    className: cn(
-                      ui.tr,
-                      clickable ? ui.trClickable : void 0
-                    ),
-                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx66(TableCell, { className: cn(ui.td), children: flexRender(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    ) }, cell.id))
-                  },
-                  row.id
-                )) : emptyData || /* @__PURE__ */ jsx66(TableRow, { "data-accent": dataAccent, children: /* @__PURE__ */ jsx66(
-                  TableCell,
-                  {
-                    colSpan: columns.length,
-                    className: cn(
-                      ui.td,
-                      "text-muted-foreground h-28 text-center"
-                    ),
-                    children: "No results."
-                  }
-                ) })
-              },
-              pageKey
-            ) }) : /* @__PURE__ */ jsx66(TableBody, { className: cn(ui.tbody), children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx66(
-              TableRow,
-              {
-                "data-accent": dataAccent,
-                "data-state": row.getIsSelected() ? "selected" : void 0,
-                onClick: () => onClick == null ? void 0 : onClick(row.original),
-                className: cn(
-                  ui.tr,
-                  clickable ? ui.trClickable : void 0
-                ),
-                children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx66(TableCell, { className: cn(ui.td), children: flexRender(
-                  cell.column.columnDef.cell,
-                  cell.getContext()
-                ) }, cell.id))
-              },
-              row.id
-            )) : emptyData || /* @__PURE__ */ jsx66(TableRow, { "data-accent": dataAccent, children: /* @__PURE__ */ jsx66(
-              TableCell,
-              {
-                colSpan: columns.length,
-                className: cn(
-                  ui.td,
-                  "text-muted-foreground h-28 text-center"
-                ),
-                children: "No results."
-              }
-            ) }) })
-          ] }) }),
-          /* @__PURE__ */ jsx66(ScrollBar, { orientation: "horizontal" })
-        ] }) }),
+        /* @__PURE__ */ jsxs38("div", { className: "relative min-h-0 flex-1", children: [
+          /* @__PURE__ */ jsxs38(ScrollArea, { className: "h-full", children: [
+            /* @__PURE__ */ jsx66("div", { className: "relative w-max min-w-full", children: /* @__PURE__ */ jsxs38(Table, { className: cn(ui.table), children: [
+              /* @__PURE__ */ jsx66(TableHeader, { className: cn(ui.thead), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx66(TableRow, { className: cn(ui.trHead), children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx66(
+                TableHead,
+                {
+                  className: cn(
+                    headerIsSticky ? cn(ui.theadSticky, "z-20") : void 0,
+                    ui.th
+                  ),
+                  children: header.isPlaceholder ? null : flexRender(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  )
+                },
+                header.id
+              )) }, headerGroup.id)) }),
+              animate ? /* @__PURE__ */ jsx66(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx66(
+                motion.tbody,
+                {
+                  className: cn(ui.tbody),
+                  initial: { opacity: 0, y: 6 },
+                  animate: { opacity: 1, y: 0 },
+                  exit: { opacity: 0, y: -6 },
+                  transition: { duration: 0.18 },
+                  children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx66(
+                    TableRow,
+                    {
+                      "data-accent": dataAccent,
+                      "data-state": row.getIsSelected() ? "selected" : void 0,
+                      onClick: () => onClick == null ? void 0 : onClick(row.original),
+                      className: cn(
+                        ui.tr,
+                        clickable ? ui.trClickable : void 0
+                      ),
+                      children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx66(TableCell, { className: cn(ui.td), children: flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      ) }, cell.id))
+                    },
+                    row.id
+                  )) : null
+                },
+                pageKey
+              ) }) : /* @__PURE__ */ jsx66(TableBody, { className: cn(ui.tbody), children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx66(
+                TableRow,
+                {
+                  "data-accent": dataAccent,
+                  "data-state": row.getIsSelected() ? "selected" : void 0,
+                  onClick: () => onClick == null ? void 0 : onClick(row.original),
+                  className: cn(
+                    ui.tr,
+                    clickable ? ui.trClickable : void 0
+                  ),
+                  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx66(TableCell, { className: cn(ui.td), children: flexRender(
+                    cell.column.columnDef.cell,
+                    cell.getContext()
+                  ) }, cell.id))
+                },
+                row.id
+              )) : null })
+            ] }) }),
+            /* @__PURE__ */ jsx66(ScrollBar, { orientation: "horizontal" })
+          ] }),
+          isEmpty ? /* @__PURE__ */ jsx66("div", { className: "bg-background pointer-events-none absolute inset-x-0 bottom-0 top-12 z-[5] flex w-full items-center justify-center p-8", children: /* @__PURE__ */ jsx66("div", { className: "pointer-events-auto flex h-full w-full flex-col items-center justify-center text-center", children: emptyState }) }) : null
+        ] }),
         /* @__PURE__ */ jsx66("div", { className: cn(ui.footer), children: /* @__PURE__ */ jsx66("div", { className: cn(ui.footerInner), children: /* @__PURE__ */ jsxs38("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-[1fr_auto] sm:items-center", children: [
           /* @__PURE__ */ jsxs38("div", { className: cn(ui.metaWrap), children: [
             isRowsSelected && /* @__PURE__ */ jsxs38("div", { children: [
@@ -11882,7 +11868,8 @@ function DataTable({
             typeof totalRows === "number" && /* @__PURE__ */ jsxs38("div", { children: [
               "Total: ",
               totalRows,
-              " registros"
+              " ",
+              totalLabel
             ] })
           ] }),
           /* @__PURE__ */ jsxs38("div", { className: cn(ui.controlsWrap), children: [

package/dist/shared/data-table.d.ts

@@ -138,6 +138,7 @@ export interface DataTableProps<TData extends RowData, TValue = unknown> {
     rowPerPageLabel?: string;
     pageLabel?: string;
     ofLabel?: string;
+    totalLabel?: string;
     emptyData?: React.ReactNode;
     animate?: boolean;
     heightClassName?: string;
@@ -171,5 +172,5 @@ export interface DataTableProps<TData extends RowData, TValue = unknown> {
  * - isRowsSelected / rowsSelectedLabel: selection meta display
  * - rowPerPageLabel, pageLabel, ofLabel: i18n labels
  */
-declare function DataTable<TData extends RowData, TValue = unknown>({ columns, data, pageCount, page, perPage, pageSizeOptions, rowPerPageLabel, ofLabel, pageLabel, isRowsSelected, totalRows, rowsSelectedLabel, template, classNames, accent, accentColor, emptyData, onPageChange, onClick, onPageSizeChange, animate, stickyHeader, headerScroll, heightClassName, }: DataTableProps<TData, TValue>): React.JSX.Element;
+declare function DataTable<TData extends RowData, TValue = unknown>({ columns, data, pageCount, page, perPage, pageSizeOptions, rowPerPageLabel, ofLabel, pageLabel, isRowsSelected, totalRows, totalLabel, rowsSelectedLabel, template, classNames, accent, accentColor, emptyData, onPageChange, onClick, onPageSizeChange, animate, stickyHeader, headerScroll, heightClassName, }: DataTableProps<TData, TValue>): React.JSX.Element;
 export { DataTable, DATA_TABLE_TEMPLATES };

package/dist/style.css

@@ -317,6 +317,9 @@
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
+  .top-12 {
+    top: calc(var(--spacing) * 12);
+  }
   .top-\[1px\] {
     top: 1px;
   }
@@ -398,6 +401,9 @@
   .z-\[1\] {
     z-index: 1;
   }
+  .z-\[5\] {
+    z-index: 5;
+  }
   .z-\[100\] {
     z-index: 100;
   }
@@ -494,9 +500,6 @@
   .hidden {
     display: none;
   }
-  .inline {
-    display: inline;
-  }
   .inline-flex {
     display: inline-flex;
   }
@@ -585,9 +588,6 @@
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
-  .h-28 {
-    height: calc(var(--spacing) * 28);
-  }
   .h-32 {
     height: calc(var(--spacing) * 32);
   }
@@ -1590,6 +1590,9 @@
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
   .p-\[1px\] {
     padding: 1px;
   }
@@ -1956,6 +1959,9 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .italic {
+    font-style: italic;
+  }
   .ordinal {
     --tw-ordinal: ordinal;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
@@ -2146,6 +2152,9 @@
   .fade-in-0 {
     --tw-enter-opacity: 0;
   }
+  .paused {
+    animation-play-state: paused;
+  }
   .zoom-in-95 {
     --tw-enter-scale: .95;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blencm/ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "author": "Bleker <bleker@blencm.com>",
   "description": "Installable React UI library built on Radix UI and Tailwind CSS. Accessible primitives, form helpers (React Hook Form + Zod), DataTable, SearchableSelect, date/time pickers, dialogs and toasts. Import from npm — no copy-paste into src/components.",