@mesob/ui 0.1.1 → 0.2.0

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,46 +187,70 @@ 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 { jsx as jsx3 } 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",
   {
@@ -249,7 +286,7 @@ function Button({
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     Comp,
     {
       "data-slot": "button",
@@ -259,19 +296,94 @@ function Button({
   );
 }
 
+// src/components/data-table/data-table-action.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function DataTableAction({
+  onClick,
+  disabled,
+  "aria-label": ariaLabel = "Open menu"
+}) {
+  return /* @__PURE__ */ jsx4("div", { className: "flex justify-end align-center", children: /* @__PURE__ */ jsxs2(
+    Button,
+    {
+      variant: "ghost",
+      className: "h-8 w-8 p-0 opacity-0 transition-opacity group-hover:opacity-100 cursor-pointer",
+      onClick,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx4("span", { className: "sr-only", children: ariaLabel }),
+        /* @__PURE__ */ jsx4(IconChevronRight, { className: "h-4 w-4" })
+      ]
+    }
+  ) });
+}
+
+// src/components/data-table/data-table-column-header.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function DataTableColumnHeader({
+  column,
+  title,
+  className
+}) {
+  if (!column.getCanSort()) {
+    return /* @__PURE__ */ jsx5("div", { className: cn(className), children: title });
+  }
+  return /* @__PURE__ */ jsx5("div", { className: cn("flex items-center gap-2", className), children: /* @__PURE__ */ jsx5("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 jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// src/components/mesob-context.tsx
+import {
+  createContext,
+  useContext,
+  useMemo as useMemo2
+} from "react";
+import { jsx as jsx7 } 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(() => {
+    if (mesob?.t) {
+      return (key, params) => mesob.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 jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(SelectPrimitive.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ jsx8(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ jsx8(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
   className,
@@ -279,7 +391,7 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs4(
     SelectPrimitive.Trigger,
     {
       "data-slot": "select-trigger",
@@ -291,7 +403,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx5(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx5(IconChevronDown, { className: "size-4 opacity-50" }) })
+        /* @__PURE__ */ jsx8(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx8(IconChevronDown, { className: "size-4 opacity-50" }) })
       ]
     }
   );
@@ -303,7 +415,7 @@ function SelectContent({
   align = "center",
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx8(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs4(
     SelectPrimitive.Content,
     {
       "data-slot": "select-content",
@@ -316,8 +428,8 @@ function SelectContent({
       align,
       ...props,
       children: [
-        /* @__PURE__ */ jsx5(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx8(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx8(
           SelectPrimitive.Viewport,
           {
             className: cn(
@@ -327,7 +439,7 @@ function SelectContent({
             children
           }
         ),
-        /* @__PURE__ */ jsx5(SelectScrollDownButton, {})
+        /* @__PURE__ */ jsx8(SelectScrollDownButton, {})
       ]
     }
   ) });
@@ -337,7 +449,7 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs4(
     SelectPrimitive.Item,
     {
       "data-slot": "select-item",
@@ -347,8 +459,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__ */ jsx8("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx8(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx8(IconCheck, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx8(SelectPrimitive.ItemText, { children })
       ]
     }
   );
@@ -357,7 +469,7 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx8(
     SelectPrimitive.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
@@ -366,7 +478,7 @@ function SelectScrollUpButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx5(IconChevronUp, { className: "size-4" })
+      children: /* @__PURE__ */ jsx8(IconChevronUp, { className: "size-4" })
     }
   );
 }
@@ -374,7 +486,7 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx8(
     SelectPrimitive.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
@@ -383,13 +495,45 @@ function SelectScrollDownButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx5(IconChevronDown, { className: "size-4" })
+      children: /* @__PURE__ */ jsx8(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 jsx9, jsxs as jsxs5 } 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,44 +544,40 @@ 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__ */ jsxs5("div", { className: "flex flex-col gap-4 px-2 py-4 sm:flex-row sm:items-center sm:justify-between", children: [
+    /* @__PURE__ */ jsx9("div", { className: "text-muted-foreground text-sm", children: /* @__PURE__ */ jsxs5("span", { children: [
+      rowText,
+      /* @__PURE__ */ jsx9("span", { className: "mx-2", children: "\xB7" }),
+      pageText
+    ] }) }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap items-center gap-4 sm:gap-6 lg:gap-8", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium whitespace-nowrap", children: t("rowsPerPage") }),
+        /* @__PURE__ */ jsxs5(
           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__ */ jsx9(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ jsx9(SelectValue, { placeholder: pageSize }) }),
+              /* @__PURE__ */ jsx9(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx9(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(
+      /* @__PURE__ */ jsxs5("nav", { "aria-label": "Pagination", className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs5(
           Button,
           {
             variant: "outline",
@@ -445,13 +585,14 @@ function DataTablePagination({
             className: "hidden h-8 w-8 lg:flex",
             onClick: () => onPageChange(0),
             disabled: !canPreviousPage,
+            "aria-label": t("firstPage"),
             children: [
-              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to first page" }),
-              /* @__PURE__ */ jsx6(IconChevronsLeft, { className: "h-4 w-4" })
+              /* @__PURE__ */ jsx9(IconChevronsLeft, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx9("span", { className: "sr-only", children: t("firstPage") })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs5(
           Button,
           {
             variant: "outline",
@@ -459,13 +600,44 @@ function DataTablePagination({
             className: "h-8 w-8",
             onClick: () => onPageChange(pageIndex - 1),
             disabled: !canPreviousPage,
+            "aria-label": t("previousPage"),
             children: [
-              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to previous page" }),
-              /* @__PURE__ */ jsx6(IconChevronLeft, { className: "h-4 w-4" })
+              /* @__PURE__ */ jsx9(IconChevronLeft, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx9("span", { className: "sr-only", children: t("previousPage") })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs3(
+        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__ */ jsx9(
+              "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__ */ jsx9(
+            Button,
+            {
+              variant: isActive ? "default" : "outline",
+              size: "icon",
+              className: "h-8 w-8",
+              onClick: () => onPageChange(pageNum - 1),
+              "aria-label": `${t("goToPage")} ${pageNum}`,
+              "aria-current": isActive ? "page" : void 0,
+              children: pageNum
+            },
+            pageNum
+          );
+        }),
+        /* @__PURE__ */ jsxs5(
           Button,
           {
             variant: "outline",
@@ -473,13 +645,14 @@ function DataTablePagination({
             className: "h-8 w-8",
             onClick: () => onPageChange(pageIndex + 1),
             disabled: !canNextPage,
+            "aria-label": t("nextPage"),
             children: [
-              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to next page" }),
-              /* @__PURE__ */ jsx6(IconChevronRight, { className: "h-4 w-4" })
+              /* @__PURE__ */ jsx9(IconChevronRight2, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx9("span", { className: "sr-only", children: t("nextPage") })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs5(
           Button,
           {
             variant: "outline",
@@ -487,9 +660,10 @@ function DataTablePagination({
             className: "hidden h-8 w-8 lg:flex",
             onClick: () => onPageChange(pageCount - 1),
             disabled: !canNextPage,
+            "aria-label": t("lastPage"),
             children: [
-              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to last page" }),
-              /* @__PURE__ */ jsx6(IconChevronsRight, { className: "h-4 w-4" })
+              /* @__PURE__ */ jsx9(IconChevronsRight, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx9("span", { className: "sr-only", children: t("lastPage") })
             ]
           }
         )
@@ -503,17 +677,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 jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ jsx10(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx10(
     DropdownMenuPrimitive.Trigger,
     {
       "data-slot": "dropdown-menu-trigger",
@@ -526,7 +700,7 @@ function DropdownMenuContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx10(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx10(
     DropdownMenuPrimitive.Content,
     {
       "data-slot": "dropdown-menu-content",
@@ -545,7 +719,7 @@ function DropdownMenuCheckboxItem({
   checked,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs6(
     DropdownMenuPrimitive.CheckboxItem,
     {
       "data-slot": "dropdown-menu-checkbox-item",
@@ -556,7 +730,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__ */ jsx10("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx10(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx10(IconCheck2, { className: "size-4" }) }) }),
         children
       ]
     }
@@ -567,7 +741,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx10(
     DropdownMenuPrimitive.Label,
     {
       "data-slot": "dropdown-menu-label",
@@ -584,7 +758,7 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx10(
     DropdownMenuPrimitive.Separator,
     {
       "data-slot": "dropdown-menu-separator",
@@ -595,29 +769,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 jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function DataTableViewOptions({
   table
 }) {
-  return /* @__PURE__ */ jsxs5(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx8(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs7(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx11(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs7(
       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__ */ jsx11(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__ */ jsxs7(DropdownMenuContent, { align: "end", className: "w-[150px]", children: [
+      /* @__PURE__ */ jsx11(DropdownMenuLabel, { children: "Toggle columns" }),
+      /* @__PURE__ */ jsx11(DropdownMenuSeparator, {}),
       table.getAllColumns().filter(
         (column) => typeof column.accessorFn !== "undefined" && column.getCanHide()
-      ).map((column) => /* @__PURE__ */ jsx8(
+      ).map((column) => /* @__PURE__ */ jsx11(
         DropdownMenuCheckboxItem,
         {
           className: "capitalize",
@@ -632,6 +806,7 @@ function DataTableViewOptions({
 }
 export {
   DataTable,
+  DataTableAction,
   DataTableColumnHeader,
   DataTablePagination,
   DataTableViewOptions