@wealthx/shadcn 1.2.2 → 1.3.0

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

@@ -69,7 +69,7 @@ __export(data_table_exports, {
 module.exports = __toCommonJS(data_table_exports);
 var React3 = __toESM(require("react"));
 var import_react_table = require("@tanstack/react-table");
-var import_lucide_react5 = require("lucide-react");
+var import_lucide_react6 = require("lucide-react");
 
 // src/lib/utils.ts
 var import_clsx = require("clsx");
@@ -272,10 +272,10 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         secondary: "bg-brand-secondary text-brand-secondary-foreground shadow-xs hover:bg-brand-secondary/80 focus-visible:ring-brand-secondary/30",
         destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 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",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:ring-border/50 dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         "outline-primary": "border border-primary text-foreground bg-transparent shadow-xs hover:bg-primary/5 focus-visible:ring-primary/50",
         "outline-secondary": "border border-brand-secondary text-brand-secondary bg-transparent shadow-xs hover:bg-brand-secondary/10 focus-visible:ring-brand-secondary/30",
-        ghost: "hover:bg-accent hover:text-accent-foreground hover:shadow-xs dark:hover:bg-accent/50",
+        ghost: "hover:bg-accent hover:text-accent-foreground hover:shadow-xs focus-visible:ring-border/50 dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
@@ -534,17 +534,76 @@ function SelectScrollDownButton(_a) {
   );
 }
 
-// src/components/ui/dropdown-menu.tsx
+// src/components/ui/pagination.tsx
 var import_lucide_react4 = require("lucide-react");
-var import_menu = require("@base-ui/react/menu");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+function PaginationNavButtons({
+  hasPrev,
+  hasNext,
+  onFirst,
+  onPrev,
+  onNext,
+  onLast
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Button,
+      {
+        "aria-label": "Go to first page",
+        disabled: !hasPrev,
+        onClick: onFirst,
+        size: "icon-sm",
+        variant: "outline",
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.ChevronsLeftIcon, { className: "size-4" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Button,
+      {
+        "aria-label": "Go to previous page",
+        disabled: !hasPrev,
+        onClick: onPrev,
+        size: "icon-sm",
+        variant: "outline",
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.ChevronLeftIcon, { className: "size-4" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Button,
+      {
+        "aria-label": "Go to next page",
+        disabled: !hasNext,
+        onClick: onNext,
+        size: "icon-sm",
+        variant: "outline",
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.ChevronRightIcon, { className: "size-4" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Button,
+      {
+        "aria-label": "Go to last page",
+        disabled: !hasNext,
+        onClick: onLast,
+        size: "icon-sm",
+        variant: "outline",
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.ChevronsRightIcon, { className: "size-4" })
+      }
+    )
+  ] });
+}
+
+// src/components/ui/dropdown-menu.tsx
+var import_lucide_react5 = require("lucide-react");
+var import_menu = require("@base-ui/react/menu");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function DropdownMenu(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_menu.Menu.Root, __spreadValues({ "data-slot": "dropdown-menu" }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_menu.Menu.Root, __spreadValues({ "data-slot": "dropdown-menu" }, props));
 }
 function DropdownMenuTrigger(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_menu.Menu.Trigger, __spreadValues({ "data-slot": "dropdown-menu-trigger" }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_menu.Menu.Trigger, __spreadValues({ "data-slot": "dropdown-menu-trigger" }, props));
 }
 function DropdownMenuContent(_a) {
   var _b = _a, {
@@ -557,7 +616,7 @@ function DropdownMenuContent(_a) {
     "style"
   ]);
   const themeVars = useThemeVars();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_menu.Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_menu.Menu.Positioner, { sideOffset, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_menu.Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_menu.Menu.Positioner, { sideOffset, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_menu.Menu.Popup,
     __spreadValues({
       className: cn(
@@ -571,7 +630,7 @@ function DropdownMenuContent(_a) {
 }
 function DropdownMenuGroup(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_menu.Menu.Group, __spreadValues({ "data-slot": "dropdown-menu-group" }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_menu.Menu.Group, __spreadValues({ "data-slot": "dropdown-menu-group" }, props));
 }
 function DropdownMenuCheckboxItem(_a) {
   var _b = _a, {
@@ -583,7 +642,7 @@ function DropdownMenuCheckboxItem(_a) {
     "children",
     "checked"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     import_menu.Menu.CheckboxItem,
     __spreadProps(__spreadValues({
       checked,
@@ -594,7 +653,7 @@ function DropdownMenuCheckboxItem(_a) {
       "data-slot": "dropdown-menu-checkbox-item"
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_menu.Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_menu.Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.CheckIcon, { className: "size-4" }) }) }),
         children
       ]
     })
@@ -608,7 +667,7 @@ function DropdownMenuLabel(_a) {
     "className",
     "inset"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_menu.Menu.GroupLabel,
     __spreadValues({
       className: cn("px-2 py-1.5 text-label-medium data-inset:pl-8", className),
@@ -623,7 +682,7 @@ function DropdownMenuSeparator(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_menu.Menu.Separator,
     __spreadValues({
       className: cn("-mx-1 my-1 h-px bg-border", className),
@@ -633,10 +692,10 @@ function DropdownMenuSeparator(_a) {
 }
 
 // src/components/ui/skeleton.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function Skeleton(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     __spreadValues({
       className: cn("animate-pulse bg-muted", className),
@@ -646,25 +705,25 @@ function Skeleton(_a) {
 }
 
 // src/components/ui/data-table.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function DataTableColumnHeader({
   column,
   title,
   className
 }) {
   if (!column.getCanSort()) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className, children: title });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className, children: title });
   }
   const sorted = column.getIsSorted();
   let sortIcon;
   if (sorted === "asc") {
-    sortIcon = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react5.ArrowUp, { className: "ml-1 size-3.5" });
+    sortIcon = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.ArrowUp, { className: "ml-1 size-3.5" });
   } else if (sorted === "desc") {
-    sortIcon = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react5.ArrowDown, { className: "ml-1 size-3.5" });
+    sortIcon = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.ArrowDown, { className: "ml-1 size-3.5" });
   } else {
-    sortIcon = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react5.ArrowUpDown, { className: "ml-1 size-3.5" });
+    sortIcon = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.ArrowUpDown, { className: "ml-1 size-3.5" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     Button,
     {
       className: cn(
@@ -686,7 +745,7 @@ function DataTableColumnHeader({
 function getSelectionColumn() {
   return {
     id: "select",
-    header: ({ table }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    header: ({ table }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       Checkbox,
       {
         "aria-label": "Select all",
@@ -697,7 +756,7 @@ function getSelectionColumn() {
         }
       }
     ),
-    cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       Checkbox,
       {
         "aria-label": "Select row",
@@ -718,13 +777,13 @@ function DataTableToolbar({
   enableColumnVisibility
 }) {
   var _a;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className: "flex items-center justify-between gap-2 py-4",
       "data-slot": "data-table-toolbar",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-1 items-center gap-2", children: searchKey ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-1 items-center gap-2", children: searchKey ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           Input,
           {
             className: "max-w-xs",
@@ -736,11 +795,11 @@ function DataTableToolbar({
             value: (_a = table.getColumn(searchKey)) == null ? void 0 : _a.getFilterValue()
           }
         ) : null }),
-        enableColumnVisibility ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenu, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        enableColumnVisibility ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DropdownMenu, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             DropdownMenuTrigger,
             {
-              render: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              render: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 Button,
                 {
                   className: "ml-auto h-8 gap-1.5",
@@ -749,15 +808,15 @@ function DataTableToolbar({
                 }
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react5.SlidersHorizontal, { className: "size-3.5" }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "hidden sm:inline", children: "Columns" })
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.SlidersHorizontal, { className: "size-3.5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "hidden sm:inline", children: "Columns" })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuContent, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenuGroup, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuLabel, { children: "Toggle columns" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuSeparator, {}),
-            table.getAllColumns().filter((col) => col.getCanHide()).map((col) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuContent, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DropdownMenuGroup, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuLabel, { children: "Toggle columns" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuSeparator, {}),
+            table.getAllColumns().filter((col) => col.getCanHide()).map((col) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               DropdownMenuCheckboxItem,
               {
                 checked: col.getIsVisible(),
@@ -779,102 +838,65 @@ function DataTablePagination({
   table,
   pageSizeOptions = [10, 20, 30, 50]
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
-      className: "flex items-center justify-between gap-4 py-4",
+      className: "flex items-center gap-4 py-4",
       "data-slot": "data-table-pagination",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-body-small text-muted-foreground", children: table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-body-small text-muted-foreground", children: [
           table.getFilteredSelectedRowModel().rows.length,
           " of",
           " ",
           table.getFilteredRowModel().rows.length,
           " row(s) selected."
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-body-small text-muted-foreground whitespace-nowrap", children: "Rows per page" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ml-auto flex items-center gap-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-body-small text-muted-foreground whitespace-nowrap", children: "Rows per page" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               Select,
               {
-                onValueChange: (value) => {
-                  table.setPageSize(Number(value));
-                },
+                onValueChange: (value) => table.setPageSize(Number(value)),
                 value: `${table.getState().pagination.pageSize}`,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectTrigger, { className: "w-[70px]", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                    SelectValue,
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    SelectTrigger,
                     {
-                      placeholder: `${table.getState().pagination.pageSize}`
+                      "aria-label": "Rows per page",
+                      className: "w-[70px]",
+                      size: "sm",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        SelectValue,
+                        {
+                          placeholder: `${table.getState().pagination.pageSize}`
+                        }
+                      )
                     }
-                  ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectContent, { children: pageSizeOptions.map((pageSize) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectItem, { value: `${pageSize}`, children: pageSize }, pageSize)) })
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectContent, { children: pageSizeOptions.map((pageSize) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectItem, { value: `${pageSize}`, children: pageSize }, pageSize)) })
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "text-body-small text-muted-foreground whitespace-nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-body-small text-muted-foreground whitespace-nowrap", children: [
             "Page ",
             table.getState().pagination.pageIndex + 1,
             " of",
             " ",
             table.getPageCount()
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              Button,
-              {
-                "aria-label": "Go to first page",
-                disabled: !table.getCanPreviousPage(),
-                onClick: () => {
-                  table.setPageIndex(0);
-                },
-                size: "icon-sm",
-                variant: "outline",
-                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react5.ChevronsLeftIcon, { className: "size-4" })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              Button,
-              {
-                "aria-label": "Go to previous page",
-                disabled: !table.getCanPreviousPage(),
-                onClick: () => {
-                  table.previousPage();
-                },
-                size: "icon-sm",
-                variant: "outline",
-                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react5.ChevronLeftIcon, { className: "size-4" })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              Button,
-              {
-                "aria-label": "Go to next page",
-                disabled: !table.getCanNextPage(),
-                onClick: () => {
-                  table.nextPage();
-                },
-                size: "icon-sm",
-                variant: "outline",
-                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react5.ChevronRightIcon, { className: "size-4" })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              Button,
-              {
-                "aria-label": "Go to last page",
-                disabled: !table.getCanNextPage(),
-                onClick: () => {
-                  table.setPageIndex(table.getPageCount() - 1);
-                },
-                size: "icon-sm",
-                variant: "outline",
-                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react5.ChevronsRightIcon, { className: "size-4" })
-              }
-            )
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            PaginationNavButtons,
+            {
+              hasNext: table.getCanNextPage(),
+              hasPrev: table.getCanPreviousPage(),
+              onFirst: () => table.setPageIndex(0),
+              onLast: () => table.setPageIndex(table.getPageCount() - 1),
+              onNext: () => table.nextPage(),
+              onPrev: () => table.previousPage()
+            }
+          )
         ] })
       ]
     }
@@ -884,10 +906,10 @@ function DataTableSkeleton({
   columnCount,
   rowCount = 5
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: Array.from({ length: rowCount }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableRow, { children: Array.from({ length: columnCount }).map((_inner, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: Array.from({ length: rowCount }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TableRow, { children: Array.from({ length: columnCount }).map((_inner, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     TableCell,
     {
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Skeleton, { className: "h-4 w-3/4" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Skeleton, { className: "h-4 w-3/4" })
     },
     `skeleton-cell-${String(rowIdx)}-${String(colIdx)}`
   )) }, `skeleton-row-${String(rowIdx)}`)) });
@@ -953,8 +975,7 @@ function DataTable({
     },
     onColumnFiltersChange: (updater) => {
       const next = typeof updater === "function" ? updater(columnFilters) : updater;
-      if (controlledColumnFilters === void 0)
-        setInternalColumnFilters(next);
+      if (controlledColumnFilters === void 0) setInternalColumnFilters(next);
       onColumnFiltersChangeProp == null ? void 0 : onColumnFiltersChangeProp(next);
     },
     onPaginationChange: (updater) => {
@@ -974,7 +995,7 @@ function DataTable({
   }));
   function renderTableBody() {
     if (loading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         DataTableSkeleton,
         {
           columnCount: resolvedColumns.length,
@@ -983,16 +1004,16 @@ function DataTable({
       );
     }
     if (table.getRowModel().rows.length) {
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         TableRow,
         {
           "data-state": row.getIsSelected() ? "selected" : void 0,
-          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableCell, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TableCell, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
         },
         row.id
       )) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       TableCell,
       {
         className: "h-24 text-center text-muted-foreground",
@@ -1001,8 +1022,8 @@ function DataTable({
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("w-full font-sans", className), "data-slot": "data-table", children: [
-    toolbar ? toolbar(table) : (searchKey || enableColumnVisibility) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("w-full font-sans", className), "data-slot": "data-table", children: [
+    toolbar ? toolbar(table) : (searchKey || enableColumnVisibility) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       DataTableToolbar,
       {
         enableColumnVisibility,
@@ -1011,14 +1032,14 @@ function DataTable({
         table
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "border border-border", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Table, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableHead, { children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "border border-border", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Table, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TableHead, { children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
         header.column.columnDef.header,
         header.getContext()
       ) }, header.id)) }, headerGroup.id)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableBody, { children: renderTableBody() })
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TableBody, { children: renderTableBody() })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DataTablePagination, { pageSizeOptions, table })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DataTablePagination, { pageSizeOptions, table })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/ui/data-table.mjs

@@ -5,14 +5,15 @@ import {
   DataTableSkeleton,
   DataTableToolbar,
   getSelectionColumn
-} from "../../chunk-UT4KJR7V.mjs";
+} from "../../chunk-IHMFS7NZ.mjs";
 import "../../chunk-66MI7Q4B.mjs";
+import "../../chunk-PBL4OQV2.mjs";
 import "../../chunk-EFRENWEJ.mjs";
 import "../../chunk-D6ID6M4V.mjs";
 import "../../chunk-7PYJD5JI.mjs";
 import "../../chunk-RGVKLTLH.mjs";
 import "../../chunk-GYMYRIZP.mjs";
-import "../../chunk-2I5S2AMY.mjs";
+import "../../chunk-XREGSKX3.mjs";
 import "../../chunk-DBHJ5KC3.mjs";
 import "../../chunk-FEZKMUCF.mjs";
 import "../../chunk-QOJ2DQD6.mjs";