npm - @blencm/ui - Versions diffs - 0.0.1 → 0.0.3 - Mend

@blencm/ui 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md +22 -68
package/dist/index.cjs +78 -91
package/dist/index.js +78 -91
package/dist/shared/data-table.d.ts +2 -1
package/dist/style.css +15 -6
package/package.json +1 -1

package/README.md CHANGED Viewed

@@ -1,13 +1,8 @@
 # @blencm/ui
-**Accessible, reusable React components built with Radix UI and Tailwind CSS.**
+**Accessible React components on Radix UI and Tailwind CSS.**
-Install the package, import the components you need, and start building.
-No copying components into `src/components`, no manual setup, and no duplicated UI code across projects.
-## Documentation & Live Components
-**Explore all components, live examples, and copy the demo code:**
+Install the package, import a component, and start. No copy-paste into `src/components`.
 View components [here](https://ui.blencm.com).
@@ -15,24 +10,25 @@ View components [here](https://ui.blencm.com).
 ## Installation
-Install the package with your preferred package manager:
 ```bash
 pnpm add @blencm/ui
 ```
-React and React DOM are peer dependencies:
+```bash
+npm install @blencm/ui
+```
-```text
-react >=17 <21
-react-dom >=17 <21
+```bash
+yarn add @blencm/ui
 ```
+React and React DOM are peer dependencies (`>=17`).
 ---
-## Quick Start
+## Usage
-Import components directly from the package:
+Styles, theme tokens, and the CSS reset load with the package.
 ```tsx
 import { Button } from '@blencm/ui';
@@ -47,82 +43,40 @@ export function Example() {
 }
 ```
-That's it. Components, theme tokens, base styles, and the CSS reset are included with the package.
----
-## Styles
-In most setups, styles are loaded automatically.
-If your bundler does not process CSS side-effect imports, import the stylesheet manually:
+If your bundler does not follow CSS side-effect imports:
 ```tsx
 import '@blencm/ui/style.css';
 ```
-### Dark Mode
-Dark mode is controlled by adding the `dark` class to an ancestor element, typically `<html>`:
+Dark mode follows a `dark` class on an ancestor:
 ```html
 <html class="dark">
+  <body><!-- app --></body>
+</html>
 ```
-### Theme Customization
-Customize the design system by overriding CSS variables in your application.
-For example:
+Override CSS variables in your app:
 ```css
 :root {
-  --primary: 160 84% 39%;
-  --radius: 0.5rem;
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --radius: 0.625rem;
 }
 ```
-This allows you to adapt colors, border radius, and other theme tokens without modifying the library itself.
----
-## Why @blencm/ui?
-`@blencm/ui` is designed for teams and developers who want a consistent component system without maintaining a local copy of every UI component.
-* **Accessible by default** — built on top of Radix UI primitives.
-* **Reusable** — install once and use across multiple React projects.
-* **Tailwind CSS friendly** — designed to work naturally with utility-first styling.
-* **Themeable** — customize the appearance through CSS variables.
-* **Dark mode ready** — supports class-based dark mode.
-* **TypeScript friendly** — designed for modern React and TypeScript applications.
-* **No copy-paste workflow** — components are imported directly from the package.
 ---
 ## Sponsor
-### MultiBase Studio
-**[MultiBase Studio](https://multibasestudio.com/)** is a cross-platform desktop database client for **SQL, NoSQL, and cloud databases**.
-Connect to PostgreSQL, MySQL, MongoDB, Redis, SQLite, and **40+ database engines** from a single application.
-With MultiBase Studio you can:
-* Write queries with autocomplete
-* Explore databases, tables, collections, and schemas
-* Browse and edit data
-* Manage multiple database connections
-* Run backups
-* Work across different database engines without switching tools
-Available for **Windows, macOS, and Linux**.
+**[MultiBase Studio](https://multibasestudio.com/)** is a desktop client for SQL, NoSQL, and cloud databases. Connect PostgreSQL, MySQL, MongoDB, Redis, SQLite, and 40+ engines from one app — query with autocomplete, explore schemas, edit data, and run backups without switching tools.
-The **[free plan](https://multibasestudio.com/)** does not expire and does not require a credit card.
+Available on Windows, macOS, and Linux. The [free plan](https://multibasestudio.com/) does not expire and does not require a credit card.
 ---
 ## License
-Licensed under the [MIT License](./LICENSE).
+[MIT](./LICENSE) · [GitHub](https://github.com/blencm/ui)

package/dist/index.cjs CHANGED Viewed

@@ -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: "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 CHANGED Viewed

@@ -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: "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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@blencm/ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "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.",