@andreagiugni/tailwind-dashboard-ui 0.2.0 → 0.4.0

package/dist/index.d.cts

@@ -137,30 +137,24 @@ interface DropzoneProps {
 /** Drag-and-drop file upload area — dependency-free (native HTML5 drag/drop). */
 declare const Dropzone: React.FC<DropzoneProps>;
 
-interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
-}
-declare const Table: React.FC<TableProps>;
-interface TableSectionProps extends React.HTMLAttributes<HTMLTableSectionElement> {
-}
-declare const TableHeader: React.FC<TableSectionProps>;
-declare const TableBody: React.FC<TableSectionProps>;
-interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
-}
-declare const TableRow: React.FC<TableRowProps>;
-interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
-    isHeader?: boolean;
-}
-declare const TableCell: React.FC<TableCellProps>;
-
+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 DataTableColumn<T> {
+interface TableColumn<T> {
     /** Key into the row object — also the value used for sorting/searching. */
     key: Extract<keyof T, string>;
     /** Column header label. */
@@ -174,25 +168,37 @@ interface DataTableColumn<T> {
     /** Extra classes applied to this column's header and body cells. */
     className?: string;
 }
-interface DataTableProps<T> {
+interface TableProps<T = Record<string, unknown>> extends Omit<React.TableHTMLAttributes<HTMLTableElement>, "children"> {
+    /**
+     * Composable content (Table / TableHeader / TableBody / TableRow / TableCell).
+     * Used when `columns` is **not** provided.
+     */
+    children?: React.ReactNode;
     /** The array of row objects to display. */
-    data: T[];
-    /** Column definitions (label, sortable, custom render, …). */
-    columns: DataTableColumn<T>[];
-    /** Rows shown per page. Default: 10. */
+    data?: T[];
+    /** Column definitions. Providing this switches Table into data-driven mode. */
+    columns?: TableColumn<T>[];
+    /** Maximum number of rows shown per page. Default: 10. */
     rowsPerPage?: number;
     /** Options for the "Show N entries" selector. Default: [5, 10, 25, 50]. Pass [] to hide it. */
     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;
-    /** Render the search field. Default: true. */
-    searchable?: boolean;
+    /**
+     * Fields matched when searching. The search input is shown **only** when this
+     * is a non-empty array — omit it (or pass `[]`) to hide the search box.
+     */
+    searchKeys?: Extract<keyof T, string>[];
     /** Placeholder for the search field. Default: "Search...". */
     searchPlaceholder?: string;
-    /** Keys matched when searching. Defaults to every column key. */
-    searchKeys?: Extract<keyof T, string>[];
     /** Column sorted on first render. */
     defaultSortKey?: Extract<keyof T, string>;
     /** Initial sort direction. Default: "asc". */
@@ -203,10 +209,19 @@ interface DataTableProps<T> {
     onRowClick?: (row: T, index: number) => void;
     /** Shown when no rows match. Default: "No matching records". */
     emptyContent?: React.ReactNode;
-    /** Extra classes for the outer wrapper. */
-    className?: string;
 }
-declare function DataTable<T extends Record<string, unknown>>({ data, columns, rowsPerPage, rowsPerPageOptions, pagination, showSizeSelector, searchable, searchPlaceholder, searchKeys, defaultSortKey, defaultSortDirection, getRowId, onRowClick, emptyContent, className, }: DataTableProps<T>): React.JSX.Element;
+interface TableSectionProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+declare const TableHeader: React.FC<TableSectionProps>;
+declare const TableBody: React.FC<TableSectionProps>;
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+}
+declare const TableRow: React.FC<TableRowProps>;
+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, 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, DataTable, type DataTableColumn, type DataTableProps, 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, 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,30 +137,24 @@ interface DropzoneProps {
 /** Drag-and-drop file upload area — dependency-free (native HTML5 drag/drop). */
 declare const Dropzone: React.FC<DropzoneProps>;
 
-interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
-}
-declare const Table: React.FC<TableProps>;
-interface TableSectionProps extends React.HTMLAttributes<HTMLTableSectionElement> {
-}
-declare const TableHeader: React.FC<TableSectionProps>;
-declare const TableBody: React.FC<TableSectionProps>;
-interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
-}
-declare const TableRow: React.FC<TableRowProps>;
-interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
-    isHeader?: boolean;
-}
-declare const TableCell: React.FC<TableCellProps>;
-
+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 DataTableColumn<T> {
+interface TableColumn<T> {
     /** Key into the row object — also the value used for sorting/searching. */
     key: Extract<keyof T, string>;
     /** Column header label. */
@@ -174,25 +168,37 @@ interface DataTableColumn<T> {
     /** Extra classes applied to this column's header and body cells. */
     className?: string;
 }
-interface DataTableProps<T> {
+interface TableProps<T = Record<string, unknown>> extends Omit<React.TableHTMLAttributes<HTMLTableElement>, "children"> {
+    /**
+     * Composable content (Table / TableHeader / TableBody / TableRow / TableCell).
+     * Used when `columns` is **not** provided.
+     */
+    children?: React.ReactNode;
     /** The array of row objects to display. */
-    data: T[];
-    /** Column definitions (label, sortable, custom render, …). */
-    columns: DataTableColumn<T>[];
-    /** Rows shown per page. Default: 10. */
+    data?: T[];
+    /** Column definitions. Providing this switches Table into data-driven mode. */
+    columns?: TableColumn<T>[];
+    /** Maximum number of rows shown per page. Default: 10. */
     rowsPerPage?: number;
     /** Options for the "Show N entries" selector. Default: [5, 10, 25, 50]. Pass [] to hide it. */
     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;
-    /** Render the search field. Default: true. */
-    searchable?: boolean;
+    /**
+     * Fields matched when searching. The search input is shown **only** when this
+     * is a non-empty array — omit it (or pass `[]`) to hide the search box.
+     */
+    searchKeys?: Extract<keyof T, string>[];
     /** Placeholder for the search field. Default: "Search...". */
     searchPlaceholder?: string;
-    /** Keys matched when searching. Defaults to every column key. */
-    searchKeys?: Extract<keyof T, string>[];
     /** Column sorted on first render. */
     defaultSortKey?: Extract<keyof T, string>;
     /** Initial sort direction. Default: "asc". */
@@ -203,10 +209,19 @@ interface DataTableProps<T> {
     onRowClick?: (row: T, index: number) => void;
     /** Shown when no rows match. Default: "No matching records". */
     emptyContent?: React.ReactNode;
-    /** Extra classes for the outer wrapper. */
-    className?: string;
 }
-declare function DataTable<T extends Record<string, unknown>>({ data, columns, rowsPerPage, rowsPerPageOptions, pagination, showSizeSelector, searchable, searchPlaceholder, searchKeys, defaultSortKey, defaultSortDirection, getRowId, onRowClick, emptyContent, className, }: DataTableProps<T>): React.JSX.Element;
+interface TableSectionProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+declare const TableHeader: React.FC<TableSectionProps>;
+declare const TableBody: React.FC<TableSectionProps>;
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+}
+declare const TableRow: React.FC<TableRowProps>;
+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, 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, DataTable, type DataTableColumn, type DataTableProps, 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, 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

@@ -7,7 +7,7 @@ export { Editor } from './chunk-4OETC46A.js';
 import { cn } from './chunk-ZLIYUUA4.js';
 export { cn } from './chunk-ZLIYUUA4.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React5, { useRef, useEffect, useState, useMemo, useCallback, useId } from 'react';
+import React5, { useRef, useEffect, useState, useCallback, useId, useMemo } from 'react';
 import flatpickr from 'flatpickr';
 import 'flatpickr/dist/flatpickr.css';
 
@@ -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,77 +546,87 @@ var Dropzone = ({
     }
   );
 };
-var Table = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("table", { className: cn("min-w-full", className), ...rest, children });
-var TableHeader = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("thead", { className, ...rest, children });
-var TableBody = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("tbody", { className, ...rest, children });
-var TableRow = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("tr", { className, ...rest, children });
-var TableCell = ({
-  children,
-  isHeader = false,
-  className,
-  ...rest
-}) => {
-  const Tag = isHeader ? "th" : "td";
-  return /* @__PURE__ */ jsx(Tag, { className, ...rest, children });
+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,
@@ -648,6 +658,18 @@ var Input = ({
     hint && /* @__PURE__ */ jsx("p", { className: cn("mt-1.5 text-xs", error ? "text-error-500" : success ? "text-success-500" : "text-gray-500"), children: hint })
   ] });
 };
+var TableHeader = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("thead", { className, ...rest, children });
+var TableBody = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("tbody", { className, ...rest, children });
+var TableRow = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("tr", { className, ...rest, children });
+var TableCell = ({
+  children,
+  isHeader = false,
+  className,
+  ...rest
+}) => {
+  const Tag = isHeader ? "th" : "td";
+  return /* @__PURE__ */ jsx(Tag, { className, ...rest, children });
+};
 var alignClass = {
   left: "text-left",
   center: "text-center",
@@ -664,16 +686,16 @@ function SortIcon({
     /* @__PURE__ */ jsx("svg", { width: "10", height: "6", viewBox: "0 0 10 6", fill: "currentColor", "aria-hidden": "true", className: active && direction === "desc" ? on : off, children: /* @__PURE__ */ jsx("path", { d: "M5 6 1 1h8z" }) })
   ] });
 }
-function DataTable({
+function DataDrivenTable({
   data,
   columns,
   rowsPerPage = 10,
   rowsPerPageOptions = [5, 10, 25, 50],
   pagination = true,
+  paginationAlign = "right",
   showSizeSelector = true,
-  searchable = true,
-  searchPlaceholder = "Search...",
   searchKeys,
+  searchPlaceholder = "Search...",
   defaultSortKey,
   defaultSortDirection = "asc",
   getRowId,
@@ -686,13 +708,13 @@ function DataTable({
   const [sortKey, setSortKey] = useState(defaultSortKey);
   const [sortDir, setSortDir] = useState(defaultSortDirection);
   const [page, setPage] = useState(1);
+  const showSearch = !!(searchKeys && searchKeys.length > 0);
   const filtered = useMemo(() => {
-    const keys = searchKeys ?? columns.map((c) => c.key);
     const q = search.trim().toLowerCase();
     let rows = data;
-    if (searchable && q) {
+    if (showSearch && q) {
       rows = rows.filter(
-        (row) => keys.some((k) => String(row[k] ?? "").toLowerCase().includes(q))
+        (row) => searchKeys.some((k) => String(row[k] ?? "").toLowerCase().includes(q))
       );
     }
     if (sortKey) {
@@ -704,7 +726,7 @@ function DataTable({
       });
     }
     return rows;
-  }, [data, columns, search, searchable, searchKeys, sortKey, sortDir]);
+  }, [data, search, showSearch, searchKeys, sortKey, sortDir]);
   const total = filtered.length;
   const totalPages = pagination ? Math.max(1, Math.ceil(total / pageSize)) : 1;
   const current = Math.min(page, totalPages);
@@ -721,7 +743,8 @@ function DataTable({
   };
   const sizeOptions = rowsPerPageOptions.length ? rowsPerPageOptions : [];
   const showSelector = pagination && showSizeSelector && sizeOptions.length > 1;
-  const showControls = searchable || showSelector;
+  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",
     {
@@ -748,7 +771,7 @@ function DataTable({
             ),
             "entries"
           ] }) : /* @__PURE__ */ jsx("span", {}),
-          searchable && /* @__PURE__ */ jsx(
+          showSearch && /* @__PURE__ */ jsx(
             Input,
             {
               type: "search",
@@ -763,7 +786,7 @@ function DataTable({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "overflow-x-auto border-y border-gray-100 dark:border-white/[0.05]", children: /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx("div", { className: "overflow-x-auto border-y border-gray-100 dark:border-white/[0.05]", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full", children: [
           /* @__PURE__ */ jsx(TableHeader, { className: "border-b border-gray-100 bg-gray-50 dark:border-white/[0.05] dark:bg-white/[0.06]", children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => {
             const isActive = sortKey === col.key;
             return /* @__PURE__ */ jsx(
@@ -820,14 +843,83 @@ function DataTable({
             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
+              }
+            )
+          ] })
+        ) })
       ]
     }
   );
 }
+function Table({
+  children,
+  data,
+  columns,
+  rowsPerPage,
+  rowsPerPageOptions,
+  pagination,
+  paginationAlign,
+  showSizeSelector,
+  searchKeys,
+  searchPlaceholder,
+  defaultSortKey,
+  defaultSortDirection,
+  getRowId,
+  onRowClick,
+  emptyContent,
+  className,
+  ...rest
+}) {
+  if (columns && data) {
+    return /* @__PURE__ */ jsx(
+      DataDrivenTable,
+      {
+        data,
+        columns,
+        rowsPerPage,
+        rowsPerPageOptions,
+        pagination,
+        paginationAlign,
+        showSizeSelector,
+        searchKeys,
+        searchPlaceholder,
+        defaultSortKey,
+        defaultSortDirection,
+        getRowId,
+        onRowClick,
+        emptyContent,
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("table", { className: cn("min-w-full", className), ...rest, children });
+}
 var ChevronIcon = () => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -3035,6 +3127,6 @@ var Slider = ({
   ] });
 };
 
-export { Accordion, AccordionItem, Alert, Avatar, AvatarText, Badge, Breadcrumb, Button, Card, Checkbox, Chip, Code, DataTable, DatePicker, DateTimePicker, Drawer, Dropdown, DropdownItem, Dropzone, FileInput, Form, Input, Label, MultiSelect, Pagination, PasswordInput, Popover, Progress, Radio, RadioSm, Ribbon, Select, Skeleton, Slider, Snippet, Spinner, Switch, Tab, Table, TableBody, TableCell, TableHeader, TableRow, Tabs, TextArea, ThemeToggleButton, Toast, Tooltip, styleOverride };
+export { Accordion, AccordionItem, Alert, Avatar, AvatarText, Badge, Breadcrumb, Button, Card, Checkbox, Chip, Code, DatePicker, DateTimePicker, Drawer, Dropdown, DropdownItem, Dropzone, FileInput, Form, Input, Label, MultiSelect, Pagination, PasswordInput, Popover, Progress, Radio, RadioSm, Ribbon, Select, Skeleton, Slider, Snippet, Spinner, Switch, Tab, Table, TableBody, TableCell, TableHeader, TableRow, Tabs, TextArea, ThemeToggleButton, Toast, Tooltip, styleOverride };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map