@mesob/ui 0.1.1 → 0.2.1

package/dist/components/data-table/index.js

@@ -30,7 +30,7 @@ function Table({ className, ...props }) {
         "table",
         {
           "data-slot": "table",
-          className: cn("w-full caption-bottom text-sm", className),
+          className: cn("w-full caption-bottom text-sm px-2", className),
           ...props
         }
       )
@@ -118,9 +118,22 @@ function DataTable({
   const [internalColumnFilters, setInternalColumnFilters] = React.useState(columnFilters);
   const [internalColumnVisibility, setInternalColumnVisibility] = React.useState(columnVisibility);
   const [internalRowSelection, setInternalRowSelection] = React.useState(rowSelection);
+  const processedColumns = React.useMemo(() => {
+    return columns.map((col) => {
+      if ((col.id === "actions" || col.id === "select") && col.size === void 0) {
+        return {
+          ...col,
+          size: 50,
+          minSize: col.minSize,
+          maxSize: col.maxSize
+        };
+      }
+      return col;
+    });
+  }, [columns]);
   const table = useReactTable({
     data,
-    columns,
+    columns: processedColumns,
     getRowId: getRowId || ((_, index) => String(index)),
     state: {
       sorting: onSortingChange ? sorting : internalSorting,
@@ -174,57 +187,81 @@ function DataTable({
     getFacetedUniqueValues: getFacetedUniqueValues()
   });
   return /* @__PURE__ */ jsx2("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs(Table, { children: [
-    /* @__PURE__ */ jsx2(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx2(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx2(TableHead, { colSpan: header.colSpan, children: header.isPlaceholder ? null : flexRender(
-      header.column.columnDef.header,
-      header.getContext()
-    ) }, header.id)) }, headerGroup.id)) }),
+    /* @__PURE__ */ jsx2(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx2(TableRow, { children: headerGroup.headers.map((header, index) => {
+      const isFirst = index === 0;
+      const isLast = index === headerGroup.headers.length - 1;
+      let className;
+      if (isFirst) {
+        className = "pl-4";
+      } else if (isLast) {
+        className = "pr-4";
+      }
+      return /* @__PURE__ */ jsx2(
+        TableHead,
+        {
+          colSpan: header.colSpan,
+          style: { width: header.getSize() },
+          className,
+          children: header.isPlaceholder ? null : flexRender(
+            header.column.columnDef.header,
+            header.getContext()
+          )
+        },
+        header.id
+      );
+    }) }, headerGroup.id)) }),
     /* @__PURE__ */ jsx2(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx2(
       TableRow,
       {
         "data-state": row.getIsSelected() && "selected",
-        children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx2(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+        className: "group",
+        children: row.getVisibleCells().map((cell, index) => {
+          const visibleCells = row.getVisibleCells();
+          const isFirst = index === 0;
+          const isLast = index === visibleCells.length - 1;
+          let className;
+          if (isFirst) {
+            className = "pl-4";
+          } else if (isLast) {
+            className = "pr-4";
+          }
+          return /* @__PURE__ */ jsx2(
+            TableCell,
+            {
+              style: { width: cell.column.getSize() },
+              className,
+              children: flexRender(
+                cell.column.columnDef.cell,
+                cell.getContext()
+              )
+            },
+            cell.id
+          );
+        })
       },
       row.id
     )) : /* @__PURE__ */ jsx2(TableRow, { children: /* @__PURE__ */ jsx2(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) })
   ] }) });
 }
 
-// src/components/data-table/data-table-column-header.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-function DataTableColumnHeader({
-  column,
-  title,
-  className
-}) {
-  if (!column.getCanSort()) {
-    return /* @__PURE__ */ jsx3("div", { className: cn(className), children: title });
-  }
-  return /* @__PURE__ */ jsx3("div", { className: cn("flex items-center gap-2", className), children: /* @__PURE__ */ jsx3("span", { children: title }) });
-}
-
-// src/components/data-table/data-table-pagination.tsx
-import {
-  IconChevronLeft,
-  IconChevronRight,
-  IconChevronsLeft,
-  IconChevronsRight
-} from "@tabler/icons-react";
+// src/components/data-table/data-table-action.tsx
+import { IconChevronRight } from "@tabler/icons-react";
 
 // src/components/button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsxs as jsxs2 } from "react/jsx-runtime";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        default: "bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-600 dark:hover:bg-secondary-400",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
+        link: "text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 hover:underline"
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -246,32 +283,116 @@ function Button({
   variant,
   size,
   asChild = false,
+  leftIcon,
+  rightIcon,
+  children,
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs2(
     Comp,
     {
       "data-slot": "button",
       className: cn(buttonVariants({ variant, size, className })),
-      ...props
+      ...props,
+      children: [
+        leftIcon,
+        children,
+        rightIcon
+      ]
     }
   );
 }
 
+// src/components/data-table/data-table-action.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function DataTableAction({
+  onClick,
+  disabled,
+  "aria-label": ariaLabel = "Open menu"
+}) {
+  return /* @__PURE__ */ jsx3("div", { className: "flex justify-end align-center", children: /* @__PURE__ */ jsxs3(
+    Button,
+    {
+      variant: "ghost",
+      className: "h-8 w-8 p-0 opacity-0 transition-opacity group-hover:opacity-100 cursor-pointer",
+      onClick,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx3("span", { className: "sr-only", children: ariaLabel }),
+        /* @__PURE__ */ jsx3(IconChevronRight, { className: "h-4 w-4" })
+      ]
+    }
+  ) });
+}
+
+// src/components/data-table/data-table-column-header.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function DataTableColumnHeader({
+  column,
+  title,
+  className
+}) {
+  if (!column.getCanSort()) {
+    return /* @__PURE__ */ jsx4("div", { className: cn(className), children: title });
+  }
+  return /* @__PURE__ */ jsx4("div", { className: cn("flex items-center gap-2", className), children: /* @__PURE__ */ jsx4("span", { children: title }) });
+}
+
+// src/hooks/use-translation.ts
+import { useTranslations } from "next-intl";
+import { useMemo as useMemo3 } from "react";
+
+// src/components/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+
+// src/components/mesob-context.tsx
+import {
+  createContext,
+  useContext,
+  useMemo as useMemo2
+} from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var MesobContext = createContext(null);
+function useMesob() {
+  return useContext(MesobContext);
+}
+
+// src/hooks/use-translation.ts
+function useTranslation(namespace) {
+  const mesob = useMesob();
+  const nextIntlT = useTranslations(namespace);
+  return useMemo3(() => {
+    const t = mesob?.t;
+    if (t) {
+      return (key, params) => t(namespace ? `${namespace}.${key}` : key, params);
+    }
+    return nextIntlT;
+  }, [mesob?.t, namespace, nextIntlT]);
+}
+
+// src/components/data-table/data-table-pagination.tsx
+import {
+  IconChevronLeft,
+  IconChevronRight as IconChevronRight2,
+  IconChevronsLeft,
+  IconChevronsRight
+} from "@tabler/icons-react";
+
 // src/components/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { IconCheck, IconChevronDown, IconChevronUp } from "@tabler/icons-react";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(SelectPrimitive.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ jsx7(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ jsx7(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
   className,
@@ -279,7 +400,7 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs5(
     SelectPrimitive.Trigger,
     {
       "data-slot": "select-trigger",
@@ -291,7 +412,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx5(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx5(IconChevronDown, { className: "size-4 opacity-50" }) })
+        /* @__PURE__ */ jsx7(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx7(IconChevronDown, { className: "size-4 opacity-50" }) })
       ]
     }
   );
@@ -303,12 +424,12 @@ function SelectContent({
   align = "center",
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx7(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs5(
     SelectPrimitive.Content,
     {
       "data-slot": "select-content",
       className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        "bg-popover text-popover-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       ),
@@ -316,8 +437,8 @@ function SelectContent({
       align,
       ...props,
       children: [
-        /* @__PURE__ */ jsx5(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx7(
           SelectPrimitive.Viewport,
           {
             className: cn(
@@ -327,7 +448,7 @@ function SelectContent({
             children
           }
         ),
-        /* @__PURE__ */ jsx5(SelectScrollDownButton, {})
+        /* @__PURE__ */ jsx7(SelectScrollDownButton, {})
       ]
     }
   ) });
@@ -337,7 +458,7 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs5(
     SelectPrimitive.Item,
     {
       "data-slot": "select-item",
@@ -347,8 +468,8 @@ function SelectItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx5("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx5(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx5(IconCheck, { className: "size-4" }) }) }),
-        /* @__PURE__ */ jsx5(SelectPrimitive.ItemText, { children })
+        /* @__PURE__ */ jsx7("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx7(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx7(IconCheck, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx7(SelectPrimitive.ItemText, { children })
       ]
     }
   );
@@ -357,7 +478,7 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     SelectPrimitive.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
@@ -366,7 +487,7 @@ function SelectScrollUpButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx5(IconChevronUp, { className: "size-4" })
+      children: /* @__PURE__ */ jsx7(IconChevronUp, { className: "size-4" })
     }
   );
 }
@@ -374,7 +495,7 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     SelectPrimitive.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
@@ -383,13 +504,45 @@ function SelectScrollDownButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx5(IconChevronDown, { className: "size-4" })
+      children: /* @__PURE__ */ jsx7(IconChevronDown, { className: "size-4" })
     }
   );
 }
 
 // src/components/data-table/data-table-pagination.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function addRange(pages, start, end) {
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+}
+function getPageNumbers(pageIndex, pageCount) {
+  const total = pageCount || 1;
+  const current = pageIndex + 1;
+  const pages = [];
+  if (total <= 1) {
+    return [1];
+  }
+  if (total <= 5) {
+    addRange(pages, 1, total);
+    return pages;
+  }
+  pages.push(1);
+  const isNearStart = current <= 3;
+  const isNearEnd = current >= total - 2;
+  if (isNearStart) {
+    addRange(pages, 2, 4);
+    pages.push("ellipsis", total);
+  } else if (isNearEnd) {
+    pages.push("ellipsis");
+    addRange(pages, total - 3, total);
+  } else {
+    pages.push("ellipsis");
+    addRange(pages, current - 1, current + 1);
+    pages.push("ellipsis", total);
+  }
+  return pages;
+}
 function DataTablePagination({
   pageIndex,
   pageSize,
@@ -400,101 +553,131 @@ function DataTablePagination({
   onPageSizeChange,
   pageSizeOptions = [10, 20, 30, 50]
 }) {
+  const t = useTranslation("Pagination");
+  if (pageCount <= 1) {
+    return null;
+  }
   const canPreviousPage = pageIndex > 0;
   const canNextPage = pageIndex < pageCount - 1;
-  return /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-2 py-4", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "text-muted-foreground flex-1 text-sm", children: [
-      selectedRows > 0 && /* @__PURE__ */ jsxs3("span", { children: [
-        selectedRows,
-        " of ",
-        totalRows,
-        " row(s) selected."
-      ] }),
-      selectedRows === 0 && /* @__PURE__ */ jsxs3("span", { children: [
-        totalRows,
-        " row(s) total."
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "flex items-center space-x-6 lg:space-x-8", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ jsx6("p", { className: "text-sm font-medium", children: "Rows per page" }),
-        /* @__PURE__ */ jsxs3(
+  const pageNumbers = getPageNumbers(pageIndex, pageCount);
+  const rowLabel = totalRows === 1 ? t("row") : t("rows");
+  const hasSelection = selectedRows > 0;
+  const rowText = hasSelection ? `${selectedRows} ${t("of")} ${totalRows} ${rowLabel} ${t("selected")}` : `${totalRows} ${rowLabel} ${t("total")}`;
+  const pageText = `${t("page")} ${pageIndex + 1} ${t("of")} ${pageCount || 1}`;
+  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-4 px-2 sm:flex-row sm:items-center sm:justify-between", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-center gap-4 sm:justify-start", children: [
+      /* @__PURE__ */ jsx8("div", { className: "text-muted-foreground text-sm", children: /* @__PURE__ */ jsxs6("span", { children: [
+        rowText,
+        /* @__PURE__ */ jsx8("span", { className: "mx-2", children: "\xB7" }),
+        pageText
+      ] }) }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx8("span", { className: "text-sm font-medium whitespace-nowrap", children: t("rowsPerPage") }),
+        /* @__PURE__ */ jsxs6(
           Select,
           {
             value: `${pageSize}`,
             onValueChange: (value) => onPageSizeChange(Number(value)),
             children: [
-              /* @__PURE__ */ jsx6(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ jsx6(SelectValue, { placeholder: pageSize }) }),
-              /* @__PURE__ */ jsx6(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx6(SelectItem, { value: `${size}`, children: size }, size)) })
+              /* @__PURE__ */ jsx8(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ jsx8(SelectValue, { placeholder: pageSize }) }),
+              /* @__PURE__ */ jsx8(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx8(SelectItem, { value: `${size}`, children: size }, size)) })
             ]
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
-        "Page ",
-        pageIndex + 1,
-        " of ",
-        pageCount || 1
-      ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ jsxs3(
-          Button,
-          {
-            variant: "outline",
-            size: "icon",
-            className: "hidden h-8 w-8 lg:flex",
-            onClick: () => onPageChange(0),
-            disabled: !canPreviousPage,
-            children: [
-              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to first page" }),
-              /* @__PURE__ */ jsx6(IconChevronsLeft, { className: "h-4 w-4" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs3(
-          Button,
-          {
-            variant: "outline",
-            size: "icon",
-            className: "h-8 w-8",
-            onClick: () => onPageChange(pageIndex - 1),
-            disabled: !canPreviousPage,
-            children: [
-              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to previous page" }),
-              /* @__PURE__ */ jsx6(IconChevronLeft, { className: "h-4 w-4" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs3(
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx8("div", { className: "flex justify-center sm:justify-end", children: /* @__PURE__ */ jsxs6("nav", { "aria-label": "Pagination", className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxs6(
+        Button,
+        {
+          variant: "outline",
+          size: "icon",
+          className: "hidden h-8 w-8 lg:flex",
+          onClick: () => onPageChange(0),
+          disabled: !canPreviousPage,
+          "aria-label": t("firstPage"),
+          children: [
+            /* @__PURE__ */ jsx8(IconChevronsLeft, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx8("span", { className: "sr-only", children: t("firstPage") })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs6(
+        Button,
+        {
+          variant: "outline",
+          size: "icon",
+          className: "h-8 w-8",
+          onClick: () => onPageChange(pageIndex - 1),
+          disabled: !canPreviousPage,
+          "aria-label": t("previousPage"),
+          children: [
+            /* @__PURE__ */ jsx8(IconChevronLeft, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx8("span", { className: "sr-only", children: t("previousPage") })
+          ]
+        }
+      ),
+      pageNumbers.map((page, idx) => {
+        if (page === "ellipsis") {
+          const prevPage = idx > 0 ? pageNumbers[idx - 1] : null;
+          const nextPage = idx < pageNumbers.length - 1 ? pageNumbers[idx + 1] : null;
+          return /* @__PURE__ */ jsx8(
+            "span",
+            {
+              className: "flex h-8 w-8 items-center justify-center text-muted-foreground",
+              "aria-hidden": "true",
+              children: "..."
+            },
+            `ellipsis-${prevPage}-${nextPage}`
+          );
+        }
+        const pageNum = page;
+        const isActive = pageNum === pageIndex + 1;
+        return /* @__PURE__ */ jsx8(
           Button,
           {
-            variant: "outline",
+            variant: isActive ? "default" : "outline",
             size: "icon",
             className: "h-8 w-8",
-            onClick: () => onPageChange(pageIndex + 1),
-            disabled: !canNextPage,
-            children: [
-              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to next page" }),
-              /* @__PURE__ */ jsx6(IconChevronRight, { className: "h-4 w-4" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs3(
-          Button,
-          {
-            variant: "outline",
-            size: "icon",
-            className: "hidden h-8 w-8 lg:flex",
-            onClick: () => onPageChange(pageCount - 1),
-            disabled: !canNextPage,
-            children: [
-              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to last page" }),
-              /* @__PURE__ */ jsx6(IconChevronsRight, { className: "h-4 w-4" })
-            ]
-          }
-        )
-      ] })
-    ] })
+            onClick: () => onPageChange(pageNum - 1),
+            "aria-label": `${t("goToPage")} ${pageNum}`,
+            "aria-current": isActive ? "page" : void 0,
+            children: pageNum
+          },
+          pageNum
+        );
+      }),
+      /* @__PURE__ */ jsxs6(
+        Button,
+        {
+          variant: "outline",
+          size: "icon",
+          className: "h-8 w-8",
+          onClick: () => onPageChange(pageIndex + 1),
+          disabled: !canNextPage,
+          "aria-label": t("nextPage"),
+          children: [
+            /* @__PURE__ */ jsx8(IconChevronRight2, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx8("span", { className: "sr-only", children: t("nextPage") })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs6(
+        Button,
+        {
+          variant: "outline",
+          size: "icon",
+          className: "hidden h-8 w-8 lg:flex",
+          onClick: () => onPageChange(pageCount - 1),
+          disabled: !canNextPage,
+          "aria-label": t("lastPage"),
+          children: [
+            /* @__PURE__ */ jsx8(IconChevronsRight, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx8("span", { className: "sr-only", children: t("lastPage") })
+          ]
+        }
+      )
+    ] }) })
   ] });
 }
 
@@ -503,17 +686,17 @@ import { IconSettings } from "@tabler/icons-react";
 
 // src/components/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { IconCheck as IconCheck2, IconChevronRight as IconChevronRight2, IconCircle } from "@tabler/icons-react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { IconCheck as IconCheck2, IconChevronRight as IconChevronRight3, IconCircle } from "@tabler/icons-react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ jsx9(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx9(
     DropdownMenuPrimitive.Trigger,
     {
       "data-slot": "dropdown-menu-trigger",
@@ -526,13 +709,13 @@ function DropdownMenuContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx9(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx9(
     DropdownMenuPrimitive.Content,
     {
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        "bg-popover text-popover-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
         className
       ),
       ...props
@@ -545,7 +728,7 @@ function DropdownMenuCheckboxItem({
   checked,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs7(
     DropdownMenuPrimitive.CheckboxItem,
     {
       "data-slot": "dropdown-menu-checkbox-item",
@@ -556,7 +739,7 @@ function DropdownMenuCheckboxItem({
       checked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx7("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx7(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx7(IconCheck2, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx9("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx9(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx9(IconCheck2, { className: "size-4" }) }) }),
         children
       ]
     }
@@ -567,7 +750,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx9(
     DropdownMenuPrimitive.Label,
     {
       "data-slot": "dropdown-menu-label",
@@ -584,7 +767,7 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx9(
     DropdownMenuPrimitive.Separator,
     {
       "data-slot": "dropdown-menu-separator",
@@ -595,29 +778,29 @@ function DropdownMenuSeparator({
 }
 
 // src/components/data-table/data-table-view-options.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function DataTableViewOptions({
   table
 }) {
-  return /* @__PURE__ */ jsxs5(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx8(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs8(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx10(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs8(
       Button,
       {
         variant: "outline",
         size: "sm",
         className: "ml-auto hidden h-8 lg:flex",
         children: [
-          /* @__PURE__ */ jsx8(IconSettings, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsx10(IconSettings, { className: "mr-2 h-4 w-4" }),
           "View"
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs5(DropdownMenuContent, { align: "end", className: "w-[150px]", children: [
-      /* @__PURE__ */ jsx8(DropdownMenuLabel, { children: "Toggle columns" }),
-      /* @__PURE__ */ jsx8(DropdownMenuSeparator, {}),
+    /* @__PURE__ */ jsxs8(DropdownMenuContent, { align: "end", className: "w-[150px]", children: [
+      /* @__PURE__ */ jsx10(DropdownMenuLabel, { children: "Toggle columns" }),
+      /* @__PURE__ */ jsx10(DropdownMenuSeparator, {}),
       table.getAllColumns().filter(
         (column) => typeof column.accessorFn !== "undefined" && column.getCanHide()
-      ).map((column) => /* @__PURE__ */ jsx8(
+      ).map((column) => /* @__PURE__ */ jsx10(
         DropdownMenuCheckboxItem,
         {
           className: "capitalize",
@@ -632,6 +815,7 @@ function DataTableViewOptions({
 }
 export {
   DataTable,
+  DataTableAction,
   DataTableColumnHeader,
   DataTablePagination,
   DataTableViewOptions