@andreagiugni/tailwind-dashboard-ui 0.3.0 → 0.4.0

package/dist/index.d.cts

@@ -137,6 +137,22 @@ interface DropzoneProps {
 /** Drag-and-drop file upload area — dependency-free (native HTML5 drag/drop). */
 declare const Dropzone: React.FC<DropzoneProps>;
 
+type PaginationAlign = "left" | "center" | "right" | "full";
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    /**
+     * How the controls are laid out within the available width:
+     * - `left` / `center` / `right`: the compact group is left/center/right aligned.
+     * - `full`: stretches full width with Previous/Next pinned to the edges and the
+     *   page indices centered between them.
+     * When omitted the controls shrink to their content (legacy behavior).
+     */
+    align?: PaginationAlign;
+}
+declare const Pagination: React.FC<PaginationProps>;
+
 type SortDirection = "asc" | "desc";
 interface TableColumn<T> {
     /** Key into the row object — also the value used for sorting/searching. */
@@ -168,6 +184,12 @@ interface TableProps<T = Record<string, unknown>> extends Omit<React.TableHTMLAt
     rowsPerPageOptions?: number[];
     /** Render pagination controls + the entry counter. Default: true. */
     pagination?: boolean;
+    /**
+     * Alignment of the pagination controls: `left` / `center` / `right`, or `full`
+     * (full width with Previous/Next pinned to the edges and the page indices
+     * centered). Default: `right`.
+     */
+    paginationAlign?: PaginationAlign;
     /** Render the "Show N entries" selector (only when pagination is on). Default: true. */
     showSizeSelector?: boolean;
     /**
@@ -199,14 +221,7 @@ interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
     isHeader?: boolean;
 }
 declare const TableCell: React.FC<TableCellProps>;
-declare function Table<T extends Record<string, unknown> = Record<string, unknown>>({ children, data, columns, rowsPerPage, rowsPerPageOptions, pagination, showSizeSelector, searchKeys, searchPlaceholder, defaultSortKey, defaultSortDirection, getRowId, onRowClick, emptyContent, className, ...rest }: TableProps<T>): React.JSX.Element;
-
-interface PaginationProps {
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
-}
-declare const Pagination: React.FC<PaginationProps>;
+declare function Table<T extends Record<string, unknown> = Record<string, unknown>>({ children, data, columns, rowsPerPage, rowsPerPageOptions, pagination, paginationAlign, showSizeSelector, searchKeys, searchPlaceholder, defaultSortKey, defaultSortDirection, getRowId, onRowClick, emptyContent, className, ...rest }: TableProps<T>): React.JSX.Element;
 
 interface BreadcrumbItem {
     label: string;
@@ -609,4 +624,4 @@ interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
 }
 declare const Slider: React.FC<SliderProps>;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionSelectionMode, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, AvatarText, type AvatarTextProps, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipColor, type ChipProps, type ChipSize, type ChipVariant, Code, type CodeColor, type CodeProps, type CodeSize, ColorOverrideProps, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, DropdownItem, type DropdownItemProps, type DropdownItemVariant, type DropdownProps, Dropzone, type DropzoneProps, FileInput, type FileInputProps, Form, type FormProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, type ModalVariant, MultiSelect, type MultiSelectProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressColor, type ProgressProps, type ProgressSize, Radio, type RadioProps, RadioSm, type RadioSmProps, Ribbon, type RibbonColor, type RibbonPosition, type RibbonProps, type RibbonVariant, Select, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderColor, type SliderProps, Snippet, type SnippetProps, type SnippetSize, type SortDirection, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, TableCell, type TableCellProps, type TableColumn, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSectionProps, Tabs, type TabsProps, type TabsVariant, TextArea, type TextAreaProps, ThemeToggleButton, type ThemeToggleButtonProps, Toast, type ToastProps, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, cn };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionSelectionMode, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, AvatarText, type AvatarTextProps, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipColor, type ChipProps, type ChipSize, type ChipVariant, Code, type CodeColor, type CodeProps, type CodeSize, ColorOverrideProps, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, DropdownItem, type DropdownItemProps, type DropdownItemVariant, type DropdownProps, Dropzone, type DropzoneProps, FileInput, type FileInputProps, Form, type FormProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, type ModalVariant, MultiSelect, type MultiSelectProps, Pagination, type PaginationAlign, type PaginationProps, PasswordInput, type PasswordInputProps, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressColor, type ProgressProps, type ProgressSize, Radio, type RadioProps, RadioSm, type RadioSmProps, Ribbon, type RibbonColor, type RibbonPosition, type RibbonProps, type RibbonVariant, Select, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderColor, type SliderProps, Snippet, type SnippetProps, type SnippetSize, type SortDirection, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, TableCell, type TableCellProps, type TableColumn, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSectionProps, Tabs, type TabsProps, type TabsVariant, TextArea, type TextAreaProps, ThemeToggleButton, type ThemeToggleButtonProps, Toast, type ToastProps, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, cn };

package/dist/index.d.ts

@@ -137,6 +137,22 @@ interface DropzoneProps {
 /** Drag-and-drop file upload area — dependency-free (native HTML5 drag/drop). */
 declare const Dropzone: React.FC<DropzoneProps>;
 
+type PaginationAlign = "left" | "center" | "right" | "full";
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    /**
+     * How the controls are laid out within the available width:
+     * - `left` / `center` / `right`: the compact group is left/center/right aligned.
+     * - `full`: stretches full width with Previous/Next pinned to the edges and the
+     *   page indices centered between them.
+     * When omitted the controls shrink to their content (legacy behavior).
+     */
+    align?: PaginationAlign;
+}
+declare const Pagination: React.FC<PaginationProps>;
+
 type SortDirection = "asc" | "desc";
 interface TableColumn<T> {
     /** Key into the row object — also the value used for sorting/searching. */
@@ -168,6 +184,12 @@ interface TableProps<T = Record<string, unknown>> extends Omit<React.TableHTMLAt
     rowsPerPageOptions?: number[];
     /** Render pagination controls + the entry counter. Default: true. */
     pagination?: boolean;
+    /**
+     * Alignment of the pagination controls: `left` / `center` / `right`, or `full`
+     * (full width with Previous/Next pinned to the edges and the page indices
+     * centered). Default: `right`.
+     */
+    paginationAlign?: PaginationAlign;
     /** Render the "Show N entries" selector (only when pagination is on). Default: true. */
     showSizeSelector?: boolean;
     /**
@@ -199,14 +221,7 @@ interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
     isHeader?: boolean;
 }
 declare const TableCell: React.FC<TableCellProps>;
-declare function Table<T extends Record<string, unknown> = Record<string, unknown>>({ children, data, columns, rowsPerPage, rowsPerPageOptions, pagination, showSizeSelector, searchKeys, searchPlaceholder, defaultSortKey, defaultSortDirection, getRowId, onRowClick, emptyContent, className, ...rest }: TableProps<T>): React.JSX.Element;
-
-interface PaginationProps {
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
-}
-declare const Pagination: React.FC<PaginationProps>;
+declare function Table<T extends Record<string, unknown> = Record<string, unknown>>({ children, data, columns, rowsPerPage, rowsPerPageOptions, pagination, paginationAlign, showSizeSelector, searchKeys, searchPlaceholder, defaultSortKey, defaultSortDirection, getRowId, onRowClick, emptyContent, className, ...rest }: TableProps<T>): React.JSX.Element;
 
 interface BreadcrumbItem {
     label: string;
@@ -609,4 +624,4 @@ interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
 }
 declare const Slider: React.FC<SliderProps>;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionSelectionMode, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, AvatarText, type AvatarTextProps, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipColor, type ChipProps, type ChipSize, type ChipVariant, Code, type CodeColor, type CodeProps, type CodeSize, ColorOverrideProps, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, DropdownItem, type DropdownItemProps, type DropdownItemVariant, type DropdownProps, Dropzone, type DropzoneProps, FileInput, type FileInputProps, Form, type FormProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, type ModalVariant, MultiSelect, type MultiSelectProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressColor, type ProgressProps, type ProgressSize, Radio, type RadioProps, RadioSm, type RadioSmProps, Ribbon, type RibbonColor, type RibbonPosition, type RibbonProps, type RibbonVariant, Select, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderColor, type SliderProps, Snippet, type SnippetProps, type SnippetSize, type SortDirection, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, TableCell, type TableCellProps, type TableColumn, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSectionProps, Tabs, type TabsProps, type TabsVariant, TextArea, type TextAreaProps, ThemeToggleButton, type ThemeToggleButtonProps, Toast, type ToastProps, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, cn };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionSelectionMode, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, AvatarText, type AvatarTextProps, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipColor, type ChipProps, type ChipSize, type ChipVariant, Code, type CodeColor, type CodeProps, type CodeSize, ColorOverrideProps, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, DropdownItem, type DropdownItemProps, type DropdownItemVariant, type DropdownProps, Dropzone, type DropzoneProps, FileInput, type FileInputProps, Form, type FormProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, type ModalVariant, MultiSelect, type MultiSelectProps, Pagination, type PaginationAlign, type PaginationProps, PasswordInput, type PasswordInputProps, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressColor, type ProgressProps, type ProgressSize, Radio, type RadioProps, RadioSm, type RadioSmProps, Ribbon, type RibbonColor, type RibbonPosition, type RibbonProps, type RibbonVariant, Select, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderColor, type SliderProps, Snippet, type SnippetProps, type SnippetSize, type SortDirection, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, TableCell, type TableCellProps, type TableColumn, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSectionProps, Tabs, type TabsProps, type TabsVariant, TextArea, type TextAreaProps, ThemeToggleButton, type ThemeToggleButtonProps, Toast, type ToastProps, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, cn };

package/dist/index.js

@@ -25,7 +25,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",
@@ -546,64 +546,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__ */ jsxs("div", { className: "flex items-center ", children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: () => onPageChange(currentPage - 1),
-        disabled: currentPage === 1,
-        "aria-label": "Previous",
-        className: 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      currentPage > 3 && /* @__PURE__ */ jsx("span", { className: "px-2", children: "..." }),
-      pagesAroundCurrent.map((page) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => onPageChange(page),
-          "aria-current": currentPage === page ? "page" : void 0,
-          className: 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__ */ jsx("span", { className: "px-2", children: "..." })
-    ] }),
-    /* @__PURE__ */ jsx(
+  const prev = /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => onPageChange(currentPage - 1),
+      disabled: currentPage === 1,
+      "aria-label": "Previous",
+      className: navButton,
+      children: "Previous"
+    }
+  );
+  const indices = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    currentPage > 3 && /* @__PURE__ */ jsx("span", { className: "px-2", children: "..." }),
+    pagesAroundCurrent.map((page) => /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: () => onPageChange(currentPage + 1),
-        disabled: currentPage === totalPages,
-        "aria-label": "Next",
+        onClick: () => onPageChange(page),
+        "aria-current": currentPage === page ? "page" : void 0,
         className: 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__ */ jsx("span", { className: "px-2", children: "..." })
   ] });
+  const next = /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => onPageChange(currentPage + 1),
+      disabled: currentPage === totalPages,
+      "aria-label": "Next",
+      className: navButton,
+      children: "Next"
+    }
+  );
+  if (align === "full") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
+      prev,
+      indices,
+      next
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2.5",
+        align && "w-full",
+        align && justifyByAlign[align]
+      ),
+      children: [
+        prev,
+        indices,
+        next
+      ]
+    }
+  );
 };
 var Input = ({
   className,
@@ -669,6 +692,7 @@ function DataDrivenTable({
   rowsPerPage = 10,
   rowsPerPageOptions = [5, 10, 25, 50],
   pagination = true,
+  paginationAlign = "right",
   showSizeSelector = true,
   searchKeys,
   searchPlaceholder = "Search...",
@@ -720,6 +744,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__ */ jsxs(
     "div",
     {
@@ -818,10 +843,36 @@ function DataDrivenTable({
             pageRows.length === 0 && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "px-5 py-6 text-center text-sm text-gray-400", children: emptyContent }) })
           ] })
         ] }) }),
-        pagination && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 p-4", children: [
-          /* @__PURE__ */ 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__ */ jsx(Pagination, { currentPage: current, totalPages, onPageChange: setPage })
-        ] })
+        pagination && /* @__PURE__ */ jsx("div", { className: "p-4", children: paginationAlign === "right" ? (
+          // Default layout: entry counter on the left, controls on the right.
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: counterText }),
+            totalPages > 1 && /* @__PURE__ */ jsx(Pagination, { currentPage: current, totalPages, onPageChange: setPage })
+          ] })
+        ) : (
+          // Aligned layout: controls aligned/stretched, counter underneath.
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+            totalPages > 1 && /* @__PURE__ */ jsx(
+              Pagination,
+              {
+                align: paginationAlign,
+                currentPage: current,
+                totalPages,
+                onPageChange: setPage
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "text-sm text-gray-500 dark:text-gray-400",
+                  paginationAlign === "center" && "text-center"
+                ),
+                children: counterText
+              }
+            )
+          ] })
+        ) })
       ]
     }
   );
@@ -833,6 +884,7 @@ function Table({
   rowsPerPage,
   rowsPerPageOptions,
   pagination,
+  paginationAlign,
   showSizeSelector,
   searchKeys,
   searchPlaceholder,
@@ -853,6 +905,7 @@ function Table({
         rowsPerPage,
         rowsPerPageOptions,
         pagination,
+        paginationAlign,
         showSizeSelector,
         searchKeys,
         searchPlaceholder,