@andreagiugni/tailwind-dashboard-ui 0.3.0 → 0.4.0

package/README.md

@@ -153,8 +153,8 @@ Legend: **(+native)** = also extends the element's native HTML attributes.
 | `DropdownItem` | `variant` (default/primary/outline, like Button), `bgColor`/`textColor`/`borderColor` overrides, `tag` (a/button), `href`, `onClick`, `onItemClick`, `baseClassName` (full override) |
 | `Modal` | `isOpen`, `onClose`, `showCloseButton`, `isFullscreen`, `closeOnBackdrop?`, `closeOnEsc?`; **alert preset** → `variant` (`success`/`info`/`warning`/`danger`) + `title`, `description`, `actionText?`, `onAction?`; (+native div) |
 | `Table` (composable) | `TableHeader` / `TableBody` / `TableRow` / `TableCell` with `children`, `isHeader` (cell), (+native table elements; `onClick` / `onDoubleClick` on rows & cells) |
-| `Table` (data-driven) | pass `data` + `columns` (`key`, `header`, `sortable?`, `align?`, `render?`, `className?`) to get search + per-column sort + pagination: `rowsPerPage?` (max rows/page, default 10), `rowsPerPageOptions?`, `searchKeys?` (**search box shown only when provided**), `searchPlaceholder?`, `defaultSortKey?` / `defaultSortDirection?`, `pagination?`, `showSizeSelector?`, `onRowClick?`, `getRowId?`, `emptyContent?` |
-| `Pagination` | `currentPage`, `totalPages`, `onPageChange` |
+| `Table` (data-driven) | pass `data` + `columns` (`key`, `header`, `sortable?`, `align?`, `render?`, `className?`) to get search + per-column sort + pagination: `rowsPerPage?` (max rows/page, default 10), `rowsPerPageOptions?`, `searchKeys?` (**search box shown only when provided**), `searchPlaceholder?`, `defaultSortKey?` / `defaultSortDirection?`, `pagination?`, `paginationAlign?` (`left`/`center`/`right`/`full`, default `right`), `showSizeSelector?`, `onRowClick?`, `getRowId?`, `emptyContent?` |
+| `Pagination` | `currentPage`, `totalPages`, `onPageChange`, `align?` (`left`/`center`/`right`/`full` — `full` pins Previous/Next to the edges with page indices centered) |
 | `Breadcrumb` | `pageTitle`, `items?`, (+native) |
 | `ThemeToggleButton` | `theme?` (controlled), `onToggle?`, (+native button) |
 | `Card` | `title?`, `description?`, `icon?`, `image?`, `imageAlt?`, `horizontal?`, `footer?`, `children?`, (+native div) (+override) |
@@ -279,7 +279,8 @@ const columns: TableColumn<Person>[] = [
 Key data-driven props: `data`, `columns` (each: `key`, `header`, `sortable?`, `align?`, `render?`,
 `className?`), `rowsPerPage` (default 10), `rowsPerPageOptions` (default `[5,10,25,50]`),
 `searchKeys` / `searchPlaceholder`, `defaultSortKey` / `defaultSortDirection`, `pagination`,
-`showSizeSelector`, `onRowClick`, `getRowId`, `emptyContent`.
+`paginationAlign` (`left` / `center` / `right` / `full`, default `right`), `showSizeSelector`,
+`onRowClick`, `getRowId`, `emptyContent`.
 
 > **Search visibility:** the search input renders **only** when you pass a non-empty `searchKeys`
 > array — those are also the exact fields the query matches. Omit `searchKeys` (or pass `[]`) to

package/dist/index.cjs

@@ -31,7 +31,7 @@ function styleOverride({
 }
 var sizeClasses = {
   sm: "px-4 py-3 text-sm",
-  md: "px-5 py-3.5 text-sm"
+  md: "px-5 py-2.5 text-sm"
 };
 var variantClasses = {
   primary: "bg-brand-500 text-white shadow-theme-xs hover:bg-brand-600 disabled:bg-brand-300",
@@ -552,64 +552,87 @@ var Dropzone = ({
     }
   );
 };
+var navButton = "flex h-10 items-center justify-center rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-700 shadow-theme-xs hover:bg-gray-50 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]";
+var justifyByAlign = {
+  left: "justify-start",
+  center: "justify-center",
+  right: "justify-end"
+};
 var Pagination = ({
   currentPage,
   totalPages,
-  onPageChange
+  onPageChange,
+  align
 }) => {
   const pagesAroundCurrent = Array.from(
     { length: Math.min(3, totalPages) },
     (_, i) => i + Math.max(currentPage - 1, 1)
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center ", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => onPageChange(currentPage - 1),
-        disabled: currentPage === 1,
-        "aria-label": "Previous",
-        className: chunkYERNSNT4_cjs.cn(
-          "mr-2.5 flex items-center h-10 justify-center rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-gray-700 shadow-theme-xs hover:bg-gray-50 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] text-sm"
-        ),
-        children: "Previous"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      currentPage > 3 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2", children: "..." }),
-      pagesAroundCurrent.map((page) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: () => onPageChange(page),
-          "aria-current": currentPage === page ? "page" : void 0,
-          className: chunkYERNSNT4_cjs.cn(
-            "flex w-10 items-center justify-center h-10 rounded-lg text-sm font-medium",
-            currentPage === page ? (
-              // active page keeps its color on hover (no hover restyle)
-              "bg-brand-500 text-white"
-            ) : (
-              // hover effect applies only to non-active page indices
-              "text-gray-700 hover:bg-blue-500/[0.08] hover:text-brand-500 dark:text-gray-400 dark:hover:text-brand-500"
-            )
-          ),
-          children: page
-        },
-        page
-      )),
-      currentPage < totalPages - 2 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2", children: "..." })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+  const prev = /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick: () => onPageChange(currentPage - 1),
+      disabled: currentPage === 1,
+      "aria-label": "Previous",
+      className: navButton,
+      children: "Previous"
+    }
+  );
+  const indices = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    currentPage > 3 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2", children: "..." }),
+    pagesAroundCurrent.map((page) => /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
-        onClick: () => onPageChange(currentPage + 1),
-        disabled: currentPage === totalPages,
-        "aria-label": "Next",
+        onClick: () => onPageChange(page),
+        "aria-current": currentPage === page ? "page" : void 0,
         className: chunkYERNSNT4_cjs.cn(
-          "ml-2.5 flex items-center justify-center rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-gray-700 shadow-theme-xs text-sm hover:bg-gray-50 h-10 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]"
+          "flex w-10 items-center justify-center h-10 rounded-lg text-sm font-medium",
+          currentPage === page ? (
+            // active page keeps its color on hover (no hover restyle)
+            "bg-brand-500 text-white"
+          ) : (
+            // hover effect applies only to non-active page indices
+            "text-gray-700 hover:bg-blue-500/[0.08] hover:text-brand-500 dark:text-gray-400 dark:hover:text-brand-500"
+          )
         ),
-        children: "Next"
-      }
-    )
+        children: page
+      },
+      page
+    )),
+    currentPage < totalPages - 2 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2", children: "..." })
   ] });
+  const next = /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick: () => onPageChange(currentPage + 1),
+      disabled: currentPage === totalPages,
+      "aria-label": "Next",
+      className: navButton,
+      children: "Next"
+    }
+  );
+  if (align === "full") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between", children: [
+      prev,
+      indices,
+      next
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkYERNSNT4_cjs.cn(
+        "flex items-center gap-2.5",
+        align && "w-full",
+        align && justifyByAlign[align]
+      ),
+      children: [
+        prev,
+        indices,
+        next
+      ]
+    }
+  );
 };
 var Input = ({
   className,
@@ -675,6 +698,7 @@ function DataDrivenTable({
   rowsPerPage = 10,
   rowsPerPageOptions = [5, 10, 25, 50],
   pagination = true,
+  paginationAlign = "right",
   showSizeSelector = true,
   searchKeys,
   searchPlaceholder = "Search...",
@@ -726,6 +750,7 @@ function DataDrivenTable({
   const sizeOptions = rowsPerPageOptions.length ? rowsPerPageOptions : [];
   const showSelector = pagination && showSizeSelector && sizeOptions.length > 1;
   const showControls = showSearch || showSelector;
+  const counterText = total === 0 ? "Showing 0 entries" : `Showing ${start + 1} to ${Math.min(start + pageSize, total)} of ${total} entries`;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -824,10 +849,36 @@ function DataDrivenTable({
             pageRows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: columns.length, className: "px-5 py-6 text-center text-sm text-gray-400", children: emptyContent }) })
           ] })
         ] }) }),
-        pagination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 p-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: total === 0 ? "Showing 0 entries" : `Showing ${start + 1} to ${Math.min(start + pageSize, total)} of ${total} entries` }),
-          totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsx(Pagination, { currentPage: current, totalPages, onPageChange: setPage })
-        ] })
+        pagination && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: paginationAlign === "right" ? (
+          // Default layout: entry counter on the left, controls on the right.
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: counterText }),
+            totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsx(Pagination, { currentPage: current, totalPages, onPageChange: setPage })
+          ] })
+        ) : (
+          // Aligned layout: controls aligned/stretched, counter underneath.
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+            totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+              Pagination,
+              {
+                align: paginationAlign,
+                currentPage: current,
+                totalPages,
+                onPageChange: setPage
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: chunkYERNSNT4_cjs.cn(
+                  "text-sm text-gray-500 dark:text-gray-400",
+                  paginationAlign === "center" && "text-center"
+                ),
+                children: counterText
+              }
+            )
+          ] })
+        ) })
       ]
     }
   );
@@ -839,6 +890,7 @@ function Table({
   rowsPerPage,
   rowsPerPageOptions,
   pagination,
+  paginationAlign,
   showSizeSelector,
   searchKeys,
   searchPlaceholder,
@@ -859,6 +911,7 @@ function Table({
         rowsPerPage,
         rowsPerPageOptions,
         pagination,
+        paginationAlign,
         showSizeSelector,
         searchKeys,
         searchPlaceholder,