@cryptlex/web-components 1.4.1 → 1.5.0

package/README.md

@@ -4,23 +4,14 @@ A React component library for Cryptlex.
 
 # Usage
 
-In your tailwind.config.ts, add the following code:
+In your root React file or global CSS, import the index.css
 
+TS
 ```ts
-import CtlxPreset from '@cryptlex/web-components/tailwind-preset';
-
-export default {
- ...
- presets:[CtlxPreset],
- content: [
-    ...
-    "./node_modules/@cryptlex/web-components/**/*.{js,ts,jsx,tsx}",
-  ],
-}
+import '@cryptlex/web-components/index.css';
 ```
 
-In your global index.css, import the following CSS:
-
+CSS
 ```css
 @import url('@cryptlex/web-components/index.css');
 ```

package/dist/components/data-table/column-picker.es.js

@@ -1,7 +1,6 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
 import "../ui/accordion.es.js";
 import "../ui/avatar.es.js";
-import "../ui/badge.es.js";
 import "../ui/breadcrumb.es.js";
 import { Button as c } from "../ui/button.es.js";
 import "../ui/calendar.es.js";
@@ -36,12 +35,12 @@ import "../ui/table.es.js";
 import "../ui/tabs.es.js";
 import "../ui/tooltip.es.js";
 import { getResourceDisplayName as C } from "./table-utils/constants.es.js";
-function ie({ table: r }) {
+function oe({ table: r }) {
   const [t, p] = d(""), m = r.getAllColumns().filter(
     (e) => e.getCanHide() && e.id.toLowerCase().includes(t.toLowerCase())
   );
   return /* @__PURE__ */ i(h, { children: [
-    /* @__PURE__ */ o(f, { asChild: !0, children: /* @__PURE__ */ o(c, { icon: a, variant: "outline", children: "Columns" }) }),
+    /* @__PURE__ */ o(f, { asChild: !0, children: /* @__PURE__ */ o(c, { icon: a, variant: "outline", size: "sm", children: "Columns" }) }),
     /* @__PURE__ */ i(g, { className: "flex flex-col gap-4 divide-y-1", children: [
       /* @__PURE__ */ o("div", { className: " flex gap-1 justify-center items-center sticky top-0", children: /* @__PURE__ */ o(u, { value: t, onChange: (e) => p(e) }) }),
       /* @__PURE__ */ i("div", { className: "flex items-center space-x-2", children: [
@@ -74,6 +73,6 @@ function ie({ table: r }) {
   ] });
 }
 export {
-  ie as ColumnPicker
+  oe as ColumnPicker
 };
 //# sourceMappingURL=column-picker.es.js.map

package/dist/components/data-table/column-picker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-picker.es.js","sources":["../../../lib/components/data-table/column-picker.tsx"],"sourcesContent":["import {\n  Button,\n  Checkbox,\n  Label,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  SearchInput,\n} from '@/index';\nimport { Table } from '@tanstack/react-table';\nimport { Columns3 } from 'lucide-react';\nimport { useState } from 'react';\nimport { getResourceDisplayName } from './table-utils';\n\nexport function ColumnPicker<TData>({ table }: { table: Table<TData> }) {\n  const [columnsSearch, setColumnsSearch] = useState('');\n\n  const filteredColumns = table\n    .getAllColumns()\n    .filter(\n      (column) =>\n        column.getCanHide() && column.id.toLowerCase().includes(columnsSearch.toLowerCase()),\n    );\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button icon={Columns3} variant=\"outline\">\n          Columns\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"flex flex-col gap-4 divide-y-1\">\n        <div className=\" flex gap-1 justify-center items-center sticky top-0\">\n          <SearchInput value={columnsSearch} onChange={(e) => setColumnsSearch(e)} />\n        </div>\n        <div className=\"flex items-center space-x-2\">\n          <Checkbox\n            id=\"selectAll\"\n            checked={table.getIsAllColumnsVisible()}\n            onCheckedChange={() => table.toggleAllColumnsVisible()}\n          />\n          <Label className=\"font-normal cursor-pointer\" htmlFor={'selectAll'}>\n            Show All Columns\n          </Label>\n        </div>\n        {/* Filtered Columns */}\n        <div className=\"flex flex-col gap-3 max-h-96 overflow-auto\">\n          {filteredColumns.map((column) => (\n            <div key={column.id} className=\"flex items-center space-x-2\">\n              <Checkbox\n                id={column.id}\n                checked={column.getIsVisible()}\n                onCheckedChange={(value) => column.toggleVisibility(!!value)}\n              />\n              <Label className=\"font-normal cursor-pointer\" htmlFor={column.id}>\n                {getResourceDisplayName(column.id, 'admin-portal')}\n              </Label>\n            </div>\n          ))}{' '}\n          {/* No columns found */}\n          {filteredColumns.length === 0 && (\n            <p className=\"text-gray-500 text-sm italic\">No matching columns found.</p>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"names":["ColumnPicker","table","columnsSearch","setColumnsSearch","useState","filteredColumns","column","Popover","jsx","PopoverTrigger","Button","Columns3","jsxs","PopoverContent","SearchInput","Checkbox","Label","value","getResourceDisplayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcgB,SAAAA,GAAoB,EAAE,OAAAC,KAAkC;AACtE,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAS,EAAE,GAE/CC,IAAkBJ,EACrB,cAAA,EACA;AAAA,IACC,CAACK,MACCA,EAAO,WAAA,KAAgBA,EAAO,GAAG,cAAc,SAASJ,EAAc,YAAa,CAAA;AAAA,EACvF;AAEF,2BACGK,GACC,EAAA,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAe,SAAO,IACrB,UAAC,gBAAAD,EAAAE,GAAA,EAAO,MAAMC,GAAU,SAAQ,WAAU,UAAA,UAE1C,CAAA,GACF;AAAA,IACA,gBAAAC,EAACC,GAAe,EAAA,WAAU,kCACxB,UAAA;AAAA,MAAA,gBAAAL,EAAC,OAAI,EAAA,WAAU,wDACb,UAAA,gBAAAA,EAACM,GAAY,EAAA,OAAOZ,GAAe,UAAU,CAAC,MAAMC,EAAiB,CAAC,EAAG,CAAA,GAC3E;AAAA,MACA,gBAAAS,EAAC,OAAI,EAAA,WAAU,+BACb,UAAA;AAAA,QAAA,gBAAAJ;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,SAASd,EAAM,uBAAuB;AAAA,YACtC,iBAAiB,MAAMA,EAAM,wBAAwB;AAAA,UAAA;AAAA,QACvD;AAAA,0BACCe,GAAM,EAAA,WAAU,8BAA6B,SAAS,aAAa,UAEpE,mBAAA,CAAA;AAAA,MAAA,GACF;AAAA,MAEA,gBAAAJ,EAAC,OAAI,EAAA,WAAU,8CACZ,UAAA;AAAA,QAAAP,EAAgB,IAAI,CAACC,MACnB,gBAAAM,EAAA,OAAA,EAAoB,WAAU,+BAC7B,UAAA;AAAA,UAAA,gBAAAJ;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,IAAIT,EAAO;AAAA,cACX,SAASA,EAAO,aAAa;AAAA,cAC7B,iBAAiB,CAACW,MAAUX,EAAO,iBAAiB,CAAC,CAACW,CAAK;AAAA,YAAA;AAAA,UAC7D;AAAA,UACA,gBAAAT,EAACQ,GAAM,EAAA,WAAU,8BAA6B,SAASV,EAAO,IAC3D,UAAuBY,EAAAZ,EAAO,IAAI,cAAc,EACnD,CAAA;AAAA,QAAA,KARQA,EAAO,EASjB,CACD;AAAA,QAAG;AAAA,QAEHD,EAAgB,WAAW,uBACzB,KAAE,EAAA,WAAU,gCAA+B,UAA0B,6BAAA,CAAA;AAAA,MAAA,EAE1E,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"column-picker.es.js","sources":["../../../lib/components/data-table/column-picker.tsx"],"sourcesContent":["import {\n  Button,\n  Checkbox,\n  Label,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  SearchInput,\n} from '@/index';\nimport { Table } from '@tanstack/react-table';\nimport { Columns3 } from 'lucide-react';\nimport { useState } from 'react';\nimport { getResourceDisplayName } from './table-utils';\n\nexport function ColumnPicker<TData>({ table }: { table: Table<TData> }) {\n  const [columnsSearch, setColumnsSearch] = useState('');\n\n  const filteredColumns = table\n    .getAllColumns()\n    .filter(\n      (column) =>\n        column.getCanHide() && column.id.toLowerCase().includes(columnsSearch.toLowerCase()),\n    );\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button icon={Columns3} variant=\"outline\" size=\"sm\">\n          Columns\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"flex flex-col gap-4 divide-y-1\">\n        <div className=\" flex gap-1 justify-center items-center sticky top-0\">\n          <SearchInput value={columnsSearch} onChange={(e) => setColumnsSearch(e)} />\n        </div>\n        <div className=\"flex items-center space-x-2\">\n          <Checkbox\n            id=\"selectAll\"\n            checked={table.getIsAllColumnsVisible()}\n            onCheckedChange={() => table.toggleAllColumnsVisible()}\n          />\n          <Label className=\"font-normal cursor-pointer\" htmlFor={'selectAll'}>\n            Show All Columns\n          </Label>\n        </div>\n        {/* Filtered Columns */}\n        <div className=\"flex flex-col gap-3 max-h-96 overflow-auto\">\n          {filteredColumns.map((column) => (\n            <div key={column.id} className=\"flex items-center space-x-2\">\n              <Checkbox\n                id={column.id}\n                checked={column.getIsVisible()}\n                onCheckedChange={(value) => column.toggleVisibility(!!value)}\n              />\n              <Label className=\"font-normal cursor-pointer\" htmlFor={column.id}>\n                {getResourceDisplayName(column.id, 'admin-portal')}\n              </Label>\n            </div>\n          ))}{' '}\n          {/* No columns found */}\n          {filteredColumns.length === 0 && (\n            <p className=\"text-gray-500 text-sm italic\">No matching columns found.</p>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"names":["ColumnPicker","table","columnsSearch","setColumnsSearch","useState","filteredColumns","column","Popover","jsx","PopoverTrigger","Button","Columns3","jsxs","PopoverContent","SearchInput","Checkbox","Label","value","getResourceDisplayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcgB,SAAAA,GAAoB,EAAE,OAAAC,KAAkC;AACtE,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAS,EAAE,GAE/CC,IAAkBJ,EACrB,cAAA,EACA;AAAA,IACC,CAACK,MACCA,EAAO,WAAA,KAAgBA,EAAO,GAAG,cAAc,SAASJ,EAAc,YAAa,CAAA;AAAA,EACvF;AAEF,2BACGK,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAe,EAAA,SAAO,IACrB,UAAA,gBAAAD,EAACE,GAAO,EAAA,MAAMC,GAAU,SAAQ,WAAU,MAAK,MAAK,UAAA,UAEpD,CAAA,GACF;AAAA,IACA,gBAAAC,EAACC,GAAe,EAAA,WAAU,kCACxB,UAAA;AAAA,MAAA,gBAAAL,EAAC,OAAI,EAAA,WAAU,wDACb,UAAA,gBAAAA,EAACM,GAAY,EAAA,OAAOZ,GAAe,UAAU,CAAC,MAAMC,EAAiB,CAAC,EAAG,CAAA,GAC3E;AAAA,MACA,gBAAAS,EAAC,OAAI,EAAA,WAAU,+BACb,UAAA;AAAA,QAAA,gBAAAJ;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,SAASd,EAAM,uBAAuB;AAAA,YACtC,iBAAiB,MAAMA,EAAM,wBAAwB;AAAA,UAAA;AAAA,QACvD;AAAA,0BACCe,GAAM,EAAA,WAAU,8BAA6B,SAAS,aAAa,UAEpE,mBAAA,CAAA;AAAA,MAAA,GACF;AAAA,MAEA,gBAAAJ,EAAC,OAAI,EAAA,WAAU,8CACZ,UAAA;AAAA,QAAAP,EAAgB,IAAI,CAACC,MACnB,gBAAAM,EAAA,OAAA,EAAoB,WAAU,+BAC7B,UAAA;AAAA,UAAA,gBAAAJ;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,IAAIT,EAAO;AAAA,cACX,SAASA,EAAO,aAAa;AAAA,cAC7B,iBAAiB,CAACW,MAAUX,EAAO,iBAAiB,CAAC,CAACW,CAAK;AAAA,YAAA;AAAA,UAC7D;AAAA,UACA,gBAAAT,EAACQ,GAAM,EAAA,WAAU,8BAA6B,SAASV,EAAO,IAC3D,UAAuBY,EAAAZ,EAAO,IAAI,cAAc,EACnD,CAAA;AAAA,QAAA,KARQA,EAAO,EASjB,CACD;AAAA,QAAG;AAAA,QAEHD,EAAgB,WAAW,uBACzB,KAAE,EAAA,WAAU,gCAA+B,UAA0B,6BAAA,CAAA;AAAA,MAAA,EAE1E,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -1,9 +1,8 @@
 "use client";
-import { jsx as i, jsxs as c } from "react/jsx-runtime";
-import { TableFilter as q } from "./table-filter.es.js";
+import { jsx as i, jsxs as c, Fragment as H } from "react/jsx-runtime";
+import { TableFilter as W } from "./table-filter.es.js";
 import "../ui/accordion.es.js";
 import "../ui/avatar.es.js";
-import "../ui/badge.es.js";
 import "../ui/breadcrumb.es.js";
 import "../ui/button.es.js";
 import "../ui/calendar.es.js";
@@ -12,8 +11,8 @@ import "../ui/chart.es.js";
 import "../ui/checkbox.es.js";
 import "@radix-ui/react-collapsible";
 import "../ui/command.es.js";
-import { Info as H } from "lucide-react";
-import { useState as A, useEffect as W, useMemo as u } from "react";
+import { Info as G } from "lucide-react";
+import { useState as M, useEffect as X, useMemo as d } from "react";
 import "../ui/dialog.es.js";
 import "../ui/drawer.es.js";
 import "../ui/dropdown-menu.es.js";
@@ -35,28 +34,28 @@ import "../ui/sidebar.es.js";
 import "sonner";
 import "../ui/table.es.js";
 import "../ui/tabs.es.js";
-import { TooltipProvider as G, Tooltip as X, TooltipTrigger as J, TooltipContent as Y } from "../ui/tooltip.es.js";
-import { useQuery as Z, keepPreviousData as $ } from "@tanstack/react-query";
-import { createColumnHelper as Q, useReactTable as tt, getCoreRowModel as et } from "@tanstack/react-table";
-import { useDebounce as ot } from "use-debounce";
-import { ColumnPicker as it } from "./column-picker.es.js";
-import { PageSize as rt } from "./page-size.es.js";
-import { Paginator as nt } from "./paginator.es.js";
-import at from "./table-actions.es.js";
-import { TableContent as lt } from "./table-content.es.js";
-import { TABLE_CHECK_BOX_COLUMN as st, TABLE_ID_COLUMN as mt, TABLE_DEFAULT_DATE_COLUMNS as ct } from "./table-commons.es.js";
-import { DEFAULT_FILTERABLE_FIELDS as pt } from "./table-utils/constants.es.js";
-const ne = "actions_button";
+import { TooltipProvider as J, Tooltip as Y, TooltipTrigger as Z, TooltipContent as $ } from "../ui/tooltip.es.js";
+import { useQuery as Q, keepPreviousData as tt } from "@tanstack/react-query";
+import { createColumnHelper as et, useReactTable as ot, getCoreRowModel as it } from "@tanstack/react-table";
+import { useDebounce as rt } from "use-debounce";
+import { ColumnPicker as nt } from "./column-picker.es.js";
+import { PageSize as at } from "./page-size.es.js";
+import { Paginator as lt } from "./paginator.es.js";
+import mt from "./table-actions.es.js";
+import { TableContent as st } from "./table-content.es.js";
+import { TABLE_CHECK_BOX_COLUMN as ct, TABLE_ID_COLUMN as pt, TABLE_DEFAULT_DATE_COLUMNS as ft } from "./table-commons.es.js";
+import { DEFAULT_FILTERABLE_FIELDS as ut } from "./table-utils/constants.es.js";
+const N = "actions_button";
 function ae({
   columns: g,
-  fetchFn: M,
-  tableName: O,
+  fetchFn: O,
+  tableName: I,
   tableActions: h,
   columnsToHideByDefault: S,
-  filterableFields: I
+  filterableFields: V
 }) {
-  var F, _, D, E, L, N;
-  const [V, U] = A({
+  var D, E, L, v, x, P;
+  const [U, R] = M({
     sorting: [],
     // Sorting state
     columnFilters: [],
@@ -70,24 +69,24 @@ function ae({
     pagination: { pageIndex: 0, pageSize: 20 }
     // Pagination state
   }), a = (t) => {
-    U((e) => ({ ...e, ...t }));
-  }, { sorting: p, columnFilters: w, searching: y, columnVisibility: T, rowSelection: f, pagination: d } = V, [j] = ot(y.trim(), 300);
-  W(() => {
+    R((e) => ({ ...e, ...t }));
+  }, { sorting: p, columnFilters: w, searching: y, columnVisibility: T, rowSelection: f, pagination: u } = U, [j] = rt(y.trim(), 300);
+  X(() => {
     a({
       columnVisibility: { id: !1, updatedAt: !1, ...S }
     });
   }, [S]);
-  const [C, R] = A([]), x = u(() => C.reduce((t, e) => {
+  const [C, k] = M([]), F = d(() => C.reduce((t, e) => {
     const { property: r, value: n, operator: l } = e;
     return t[r] || (t[r] = {}), t[r][l] = n, t;
-  }, {}), [C]), o = Z({
-    queryKey: [O, d, p, j, x],
-    queryFn: () => M(d, p, y.trim(), x),
-    placeholderData: $,
+  }, {}), [C]), o = Q({
+    queryKey: [I, u, p, j, F],
+    queryFn: () => O(u, p, y.trim(), F),
+    placeholderData: tt,
     // Keep previous data while loading new data
     retry: 0,
     refetchOnWindowFocus: !1
-  }), k = Q(), b = u(() => {
+  }), B = et(), b = d(() => {
     var r;
     const t = (r = o.data) == null ? void 0 : r.data;
     if (!(t != null && t.length)) return [];
@@ -97,53 +96,53 @@ function ae({
         e.add(l.key);
       });
     }), Array.from(e).map(
-      (n) => k.accessor(
+      (n) => B.accessor(
         (l) => {
-          var P;
-          const s = (P = l.metadata) == null ? void 0 : P.find((K) => K.key === n);
-          return s == null ? void 0 : s.value;
+          var A;
+          const m = (A = l.metadata) == null ? void 0 : A.find((q) => q.key === n);
+          return m == null ? void 0 : m.value;
         },
         {
-          header: () => /* @__PURE__ */ i(G, { delayDuration: 0, children: /* @__PURE__ */ c(X, { children: [
-            /* @__PURE__ */ i(J, { asChild: !0, children: /* @__PURE__ */ c("span", { className: "flex gap-1 items-center align-middle", children: [
+          header: () => /* @__PURE__ */ i(J, { delayDuration: 0, children: /* @__PURE__ */ c(Y, { children: [
+            /* @__PURE__ */ i(Z, { asChild: !0, children: /* @__PURE__ */ c("span", { className: "flex gap-1 items-center align-middle", children: [
               n,
               " ",
-              /* @__PURE__ */ i(H, { size: 18, strokeWidth: "1px" })
+              /* @__PURE__ */ i(G, { size: 18, strokeWidth: "1px" })
             ] }) }),
-            /* @__PURE__ */ i(Y, { children: "Metadata Key" })
+            /* @__PURE__ */ i($, { children: "Metadata Key" })
           ] }) }),
           // Use the metadata key as the column header
           id: n,
           enableSorting: !1,
           cell: (l) => {
-            const s = l.getValue();
-            return s == null ? "" : String(s);
+            const m = l.getValue();
+            return m == null ? "" : String(m);
           }
         }
       )
     );
-  }, [(F = o.data) == null ? void 0 : F.data]), v = u(() => [
-    ...h.selection ? st : [],
-    ...mt,
-    ...g.filter((e) => e.id !== "actions"),
+  }, [(D = o.data) == null ? void 0 : D.data]), _ = d(() => [
+    ...h.selection ? ct : [],
+    ...pt,
+    ...g.filter((e) => e.id !== N),
     ...b.length ? b : [],
-    ...ct,
-    ...g.filter((e) => e.id === "actions")
-  ], [g, b, (_ = o.data) == null ? void 0 : _.data, h.selection]), z = u(
+    ...ft,
+    ...g.filter((e) => e.id === N)
+  ], [g, b, (E = o.data) == null ? void 0 : E.data, h.selection]), K = d(
     () => Object.entries(f).map((t) => {
       var e, r;
       return (r = (e = o == null ? void 0 : o.data) == null ? void 0 : e.data) == null ? void 0 : r[t[0]];
     }),
-    [(D = o == null ? void 0 : o.data) == null ? void 0 : D.data, f]
-  ), m = tt({
-    data: ((E = o.data) == null ? void 0 : E.data) ?? [],
-    columns: v,
-    getCoreRowModel: et(),
-    rowCount: (L = o.data) == null ? void 0 : L.total,
+    [(L = o == null ? void 0 : o.data) == null ? void 0 : L.data, f]
+  ), s = ot({
+    data: ((v = o.data) == null ? void 0 : v.data) ?? [],
+    columns: _,
+    getCoreRowModel: it(),
+    rowCount: (x = o.data) == null ? void 0 : x.total,
     manualPagination: !0,
     // Handle pagination manually
     onPaginationChange: (t) => {
-      const e = typeof t == "function" ? t(d) : t;
+      const e = typeof t == "function" ? t(u) : t;
       a({ pagination: e });
     },
     manualSorting: !0,
@@ -170,47 +169,47 @@ function ae({
       sorting: p,
       columnFilters: w,
       columnVisibility: T,
-      pagination: d,
+      pagination: u,
       rowSelection: f
     },
     meta: {
       refetch: o.refetch
     }
-  }), B = {
+  }), z = {
     key: "",
-    stateData: z
+    stateData: K
   };
-  return /* @__PURE__ */ c("div", { className: "flex flex-col gap-1 w-full bg-card", children: [
-    /* @__PURE__ */ i("div", { className: " px-1", children: /* @__PURE__ */ i(
-      q,
+  return /* @__PURE__ */ c(H, { children: [
+    /* @__PURE__ */ i(
+      W,
       {
-        filterableProperties: { ...I, ...pt },
+        filterableProperties: { ...V, ...ut },
         filters: C,
-        onFiltersChange: R
+        onFiltersChange: k
       }
-    ) }),
-    /* @__PURE__ */ i("div", { className: "border px-1", children: /* @__PURE__ */ i(
-      at,
+    ),
+    /* @__PURE__ */ i(
+      mt,
       {
         dataQuery: o,
-        table: m,
+        table: s,
         tableActions: h,
-        stateToPass: B,
+        stateToPass: z,
         handleSearching: (t) => a({ searching: t })
       }
-    ) }),
-    /* @__PURE__ */ i("div", { className: "relative h-[60vh] z-10 overflow-x-auto border-x align-top justify-start", children: /* @__PURE__ */ i(lt, { table: m, columns: v, dataQuery: o }) }),
-    /* @__PURE__ */ c("div", { className: "flex overflow-auto flex-row w-full justify-between border  gap-4 px-1 py-2", children: [
-      /* @__PURE__ */ c("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ i(it, { table: m }),
-        /* @__PURE__ */ i(rt, { table: m })
+    ),
+    /* @__PURE__ */ i("div", { className: "w-full bg-card overflow-auto border-x", children: /* @__PURE__ */ i(st, { table: s, columns: _, dataQuery: o }) }),
+    /* @__PURE__ */ c("div", { className: "bg-card flex w-full justify-between border gap-4 p-4", children: [
+      /* @__PURE__ */ c("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ i(nt, { table: s }),
+        /* @__PURE__ */ i(at, { table: s })
       ] }),
-      /* @__PURE__ */ i(nt, { table: m, rowCount: ((N = o.data) == null ? void 0 : N.total) ?? 0 })
+      /* @__PURE__ */ i(lt, { table: s, rowCount: ((P = o.data) == null ? void 0 : P.total) ?? 0 })
     ] })
   ] });
 }
 export {
-  ne as ACTIONS_COLUMN_ID,
+  N as ACTIONS_COLUMN_ID,
   ae as DataTable
 };
 //# sourceMappingURL=data-table.es.js.map

package/dist/components/data-table/data-table.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.es.js","sources":["../../../lib/components/data-table/data-table.tsx"],"sourcesContent":["'use client';\nimport { TableFilter, type FilterFormType } from '@/components/data-table/table-filter';\nimport {\n  DEFAULT_FILTERABLE_FIELDS,\n  TABLE_CHECK_BOX_COLUMN,\n  TABLE_DEFAULT_DATE_COLUMNS,\n  TABLE_ID_COLUMN,\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/index';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  createColumnHelper,\n  getCoreRowModel,\n  PaginationState,\n  SortingState,\n  useReactTable,\n  VisibilityState,\n} from '@tanstack/react-table';\nimport { Info } from 'lucide-react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { useDebounce } from 'use-debounce';\nimport { ColumnPicker } from './column-picker';\nimport { PageSize } from './page-size';\nimport { Paginator } from './paginator';\nimport Actions from './table-actions';\nimport { TableContent } from './table-content';\nimport type { FilterableProperties, MetadataDto, TableActions, TableFetchFn } from './table-utils';\n\n/** Reserved name for actions column */\nexport const ACTIONS_COLUMN_ID = 'actions_button';\n\n// Props type for the DataTable component\nexport interface DataTableProps<TData, TValue = any> {\n  columns: ColumnDef<TData, TValue>[]; // Columns for the table\n  tableName: string; // Table name used as query key\n  fetchFn: TableFetchFn<TData>; // Function for fetching data from the server\n  tableActions: TableActions;\n  filterableFields: FilterableProperties<TData>; // Fields that can be filtered\n  columnsToHideByDefault: VisibilityState; // Columns that are hidden by default\n}\nexport function DataTable<TData extends Record<string, any>, TValue = any>({\n  columns,\n  fetchFn,\n  tableName,\n  tableActions,\n  columnsToHideByDefault,\n  filterableFields,\n}: DataTableProps<TData, TValue>) {\n  // State for managing table data and filters\n  //TODO: This is later to be stored in url as params\n  const [tableState, setTableState] = useState({\n    sorting: [] as SortingState, // Sorting state\n    columnFilters: [] as ColumnFiltersState, // Filters for columns\n    searching: '', // Search query state\n    columnVisibility: {} as VisibilityState, // Visibility of columns\n    rowSelection: {}, // Row selection state\n    pagination: { pageIndex: 0, pageSize: 20 } as PaginationState, // Pagination state\n  });\n\n  // Update table state with new values\n  const updateTableState = (updates: Partial<typeof tableState>) => {\n    setTableState((prev) => ({ ...prev, ...updates }));\n  };\n\n  // Destructuring the table state for easier access\n  const { sorting, columnFilters, searching, columnVisibility, rowSelection, pagination } =\n    tableState;\n\n  // Debounce the search query to avoid making a request on every keystroke\n  const [debouncedQuery] = useDebounce(searching.trim(), 300);\n\n  // Update column visibility when columnsToHideByDefault changes\n  useEffect(() => {\n    updateTableState({\n      columnVisibility: { id: false, updatedAt: false, ...columnsToHideByDefault },\n    });\n  }, [columnsToHideByDefault]);\n  const [filters, setFilters] = useState<FilterFormType[]>([]);\n\n  const formatedFilters = useMemo(() => {\n    return filters.reduce((acc, filter) => {\n      const { property, value, operator } = filter;\n      if (!acc[property]) {\n        acc[property] = {};\n      }\n      acc[property][operator] = value;\n      return acc;\n    }, {} as Record<string, Record<string, any>>);\n  }, [filters]);\n\n  // Fetch table data using the fetchFn and react-query's useQuery hook\n  const dataQuery = useQuery({\n    queryKey: [tableName, pagination, sorting, debouncedQuery, formatedFilters],\n    queryFn: () => fetchFn(pagination, sorting, searching.trim(), formatedFilters),\n    placeholderData: keepPreviousData, // Keep previous data while loading new data\n    retry: 0,\n    refetchOnWindowFocus: false,\n  });\n\n  // Create column helpers for dynamic column generation\n  const columnHelper = createColumnHelper<TData>();\n  const metadataColumns = useMemo<ColumnDef<TData, TValue>[]>(() => {\n    const data = dataQuery.data?.data;\n    if (!data?.length) return [];\n    // set of all the keys present in a given view\n    const allMetadataKeys = new Set<string>();\n\n    // Collect all unique metadata keys\n    data.forEach((row: TData) => {\n      if (row.metadata) {\n        row.metadata.forEach((meta: MetadataDto) => {\n          allMetadataKeys.add(meta.key);\n        });\n      }\n    });\n\n    // Generate columns for all unique metadata keys\n    return Array.from(allMetadataKeys).map((key) =>\n      columnHelper.accessor(\n        (row: TData) => {\n          // Find the metadata object with the matching key\n          const metadataEntry = row.metadata?.find((meta: MetadataDto) => meta.key === key);\n          return metadataEntry?.value; // Return the value for the specific key\n        },\n        {\n          header: () => (\n            <TooltipProvider delayDuration={0}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <span className=\"flex gap-1 items-center align-middle\">\n                    {key} <Info size={18} strokeWidth={'1px'} />\n                  </span>\n                </TooltipTrigger>\n                <TooltipContent>Metadata Key</TooltipContent>\n              </Tooltip>\n            </TooltipProvider>\n          ), // Use the metadata key as the column header\n          id: key,\n          enableSorting: false,\n          cell: (info) => {\n            const value = info.getValue();\n            // Handle null/undefined values\n            if (value === null || value === undefined) return '';\n            // For primitive types, return the string representation\n            return String(value);\n          },\n        },\n      ),\n    );\n  }, [dataQuery.data?.data]);\n\n  /**\n   * ID,createdAt and updatedAt will be added by default for all tables\n   * If selection is allowed, checkbox will be added\n   * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n   * If there are actions for the table, they will be placed fixed at the right side of table.\n   */\n  const extendedColumns = useMemo<ColumnDef<any, any>[]>(() => {\n    const _columns = [\n      ...(tableActions.selection ? TABLE_CHECK_BOX_COLUMN : []),\n      ...TABLE_ID_COLUMN,\n      ...columns.filter((col) => col.id !== 'actions'),\n      ...(metadataColumns.length ? metadataColumns : []),\n      ...TABLE_DEFAULT_DATE_COLUMNS,\n      ...columns.filter((col) => col.id === 'actions'),\n    ];\n\n    return _columns;\n  }, [columns, metadataColumns, dataQuery.data?.data, tableActions.selection]);\n\n  // Get selected row data\n  const rowSelectedData = useMemo(\n    () => Object.entries(rowSelection).map((d: any) => dataQuery?.data?.data?.[d[0]]),\n    [dataQuery?.data?.data, rowSelection],\n  );\n\n  // Use react-table's hook to create the table instance\n  const table = useReactTable({\n    data: dataQuery.data?.data ?? [],\n    columns: extendedColumns,\n    getCoreRowModel: getCoreRowModel(),\n    rowCount: dataQuery.data?.total,\n    manualPagination: true, // Handle pagination manually\n    onPaginationChange: (updater) => {\n      const newPagination = typeof updater === 'function' ? updater(pagination) : updater;\n      updateTableState({ pagination: newPagination });\n    },\n    manualSorting: true, // Handle sorting manually\n    onSortingChange: (updater) => {\n      const newSorting = typeof updater === 'function' ? updater(sorting) : updater;\n      updateTableState({ sorting: newSorting });\n    },\n    manualFiltering: true, // Handle filtering manually\n    onGlobalFilterChange: (updater) => {\n      const newFilters = typeof updater === 'function' ? updater(columnFilters) : updater;\n      updateTableState({ columnFilters: newFilters });\n    },\n    onColumnVisibilityChange: (updater) => {\n      const newVisibility = typeof updater === 'function' ? updater(columnVisibility) : updater;\n      updateTableState({ columnVisibility: newVisibility });\n    },\n    onRowSelectionChange: (updater) => {\n      const newSelection = typeof updater === 'function' ? updater(rowSelection) : updater;\n      updateTableState({ rowSelection: newSelection });\n    },\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      pagination,\n      rowSelection,\n    },\n    meta: {\n      refetch: dataQuery.refetch,\n    },\n  });\n  const stateToPass = {\n    key: '',\n    stateData: rowSelectedData,\n  };\n\n  return (\n    <div className=\"flex flex-col gap-1 w-full bg-card\">\n      <div className=\" px-1\">\n        <TableFilter\n          filterableProperties={{ ...filterableFields, ...DEFAULT_FILTERABLE_FIELDS }}\n          filters={filters}\n          onFiltersChange={setFilters}\n        />\n      </div>\n      {/* Table Actions Section */}\n      <div className=\"border px-1\">\n        <Actions\n          dataQuery={dataQuery}\n          table={table}\n          tableActions={tableActions}\n          stateToPass={stateToPass}\n          handleSearching={(value) => updateTableState({ searching: value })}\n        />\n      </div>\n\n      {/* Table Content Section */}\n      <div className=\"relative h-[60vh] z-10 overflow-x-auto border-x align-top justify-start\">\n        <TableContent table={table} columns={extendedColumns} dataQuery={dataQuery} />\n      </div>\n\n      {/* Table Footer Section with Pagination and Column Picker */}\n      <div className=\"flex overflow-auto flex-row w-full justify-between border  gap-4 px-1 py-2\">\n        <div className=\"flex gap-2\">\n          <ColumnPicker table={table} />\n          <PageSize table={table} />\n        </div>\n        <Paginator table={table} rowCount={dataQuery.data?.total ?? 0} />\n      </div>\n    </div>\n  );\n}\n"],"names":["ACTIONS_COLUMN_ID","DataTable","columns","fetchFn","tableName","tableActions","columnsToHideByDefault","filterableFields","tableState","setTableState","useState","updateTableState","updates","prev","sorting","columnFilters","searching","columnVisibility","rowSelection","pagination","debouncedQuery","useDebounce","useEffect","filters","setFilters","formatedFilters","useMemo","acc","filter","property","value","operator","dataQuery","useQuery","keepPreviousData","columnHelper","createColumnHelper","metadataColumns","data","_a","allMetadataKeys","row","meta","key","metadataEntry","jsx","TooltipProvider","Tooltip","TooltipTrigger","jsxs","Info","TooltipContent","info","extendedColumns","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","_b","rowSelectedData","d","_c","table","useReactTable","_d","getCoreRowModel","_e","updater","newPagination","newSorting","newFilters","newVisibility","newSelection","stateToPass","TableFilter","DEFAULT_FILTERABLE_FIELDS","Actions","TableContent","ColumnPicker","PageSize","Paginator","_f"],"mappings":"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"}
+{"version":3,"file":"data-table.es.js","sources":["../../../lib/components/data-table/data-table.tsx"],"sourcesContent":["'use client';\nimport { TableFilter, type FilterFormType } from '@/components/data-table/table-filter';\nimport {\n  DEFAULT_FILTERABLE_FIELDS,\n  TABLE_CHECK_BOX_COLUMN,\n  TABLE_DEFAULT_DATE_COLUMNS,\n  TABLE_ID_COLUMN,\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/index';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  createColumnHelper,\n  getCoreRowModel,\n  PaginationState,\n  SortingState,\n  useReactTable,\n  VisibilityState,\n} from '@tanstack/react-table';\nimport { Info } from 'lucide-react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { useDebounce } from 'use-debounce';\nimport { ColumnPicker } from './column-picker';\nimport { PageSize } from './page-size';\nimport { Paginator } from './paginator';\nimport Actions from './table-actions';\nimport { TableContent } from './table-content';\nimport type { FilterableProperties, MetadataDto, TableActions, TableFetchFn } from './table-utils';\n\n/** Reserved name for actions column */\nexport const ACTIONS_COLUMN_ID = 'actions_button';\n\n// Props type for the DataTable component\nexport interface DataTableProps<TData, TValue = any> {\n  columns: ColumnDef<TData, TValue>[]; // Columns for the table\n  tableName: string; // Table name used as query key\n  fetchFn: TableFetchFn<TData>; // Function for fetching data from the server\n  tableActions: TableActions;\n  filterableFields: FilterableProperties<TData>; // Fields that can be filtered\n  columnsToHideByDefault: VisibilityState; // Columns that are hidden by default\n}\nexport function DataTable<TData extends Record<string, any>, TValue = any>({\n  columns,\n  fetchFn,\n  tableName,\n  tableActions,\n  columnsToHideByDefault,\n  filterableFields,\n}: DataTableProps<TData, TValue>) {\n  // State for managing table data and filters\n\n  //TODO: This is later to be stored in url as params\n  const [tableState, setTableState] = useState({\n    sorting: [] as SortingState, // Sorting state\n    columnFilters: [] as ColumnFiltersState, // Filters for columns\n    searching: '', // Search query state\n    columnVisibility: {} as VisibilityState, // Visibility of columns\n    rowSelection: {}, // Row selection state\n    pagination: { pageIndex: 0, pageSize: 20 } as PaginationState, // Pagination state\n  });\n\n  // Update table state with new values\n  const updateTableState = (updates: Partial<typeof tableState>) => {\n    setTableState((prev) => ({ ...prev, ...updates }));\n  };\n\n  // Destructuring the table state for easier access\n  const { sorting, columnFilters, searching, columnVisibility, rowSelection, pagination } =\n    tableState;\n\n  // Debounce the search query to avoid making a request on every keystroke\n  const [debouncedQuery] = useDebounce(searching.trim(), 300);\n\n  // Update column visibility when columnsToHideByDefault changes\n  useEffect(() => {\n    updateTableState({\n      columnVisibility: { id: false, updatedAt: false, ...columnsToHideByDefault },\n    });\n  }, [columnsToHideByDefault]);\n  const [filters, setFilters] = useState<FilterFormType[]>([]);\n\n  const formatedFilters = useMemo(() => {\n    return filters.reduce((acc, filter) => {\n      const { property, value, operator } = filter;\n      if (!acc[property]) {\n        acc[property] = {};\n      }\n      acc[property][operator] = value;\n      return acc;\n    }, {} as Record<string, Record<string, any>>);\n  }, [filters]);\n\n  // Fetch table data using the fetchFn and react-query's useQuery hook\n  const dataQuery = useQuery({\n    queryKey: [tableName, pagination, sorting, debouncedQuery, formatedFilters],\n    queryFn: () => fetchFn(pagination, sorting, searching.trim(), formatedFilters),\n    placeholderData: keepPreviousData, // Keep previous data while loading new data\n    retry: 0,\n    refetchOnWindowFocus: false,\n  });\n\n  // Create column helpers for dynamic column generation\n  const columnHelper = createColumnHelper<TData>();\n  const metadataColumns = useMemo<ColumnDef<TData, TValue>[]>(() => {\n    const data = dataQuery.data?.data;\n    if (!data?.length) return [];\n    // set of all the keys present in a given view\n    const allMetadataKeys = new Set<string>();\n\n    // Collect all unique metadata keys\n    data.forEach((row: TData) => {\n      if (row.metadata) {\n        row.metadata.forEach((meta: MetadataDto) => {\n          allMetadataKeys.add(meta.key);\n        });\n      }\n    });\n\n    // Generate columns for all unique metadata keys\n    return Array.from(allMetadataKeys).map((key) =>\n      columnHelper.accessor(\n        (row: TData) => {\n          // Find the metadata object with the matching key\n          const metadataEntry = row.metadata?.find((meta: MetadataDto) => meta.key === key);\n          return metadataEntry?.value; // Return the value for the specific key\n        },\n        {\n          header: () => (\n            <TooltipProvider delayDuration={0}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <span className=\"flex gap-1 items-center align-middle\">\n                    {key} <Info size={18} strokeWidth={'1px'} />\n                  </span>\n                </TooltipTrigger>\n                <TooltipContent>Metadata Key</TooltipContent>\n              </Tooltip>\n            </TooltipProvider>\n          ), // Use the metadata key as the column header\n          id: key,\n          enableSorting: false,\n          cell: (info) => {\n            const value = info.getValue();\n            // Handle null/undefined values\n            if (value === null || value === undefined) return '';\n            // For primitive types, return the string representation\n            return String(value);\n          },\n        },\n      ),\n    );\n  }, [dataQuery.data?.data]);\n\n  /**\n   * ID,createdAt and updatedAt will be added by default for all tables\n   * If selection is allowed, checkbox will be added\n   * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n   * If there are actions for the table, they will be placed fixed at the right side of table.\n   */\n  const extendedColumns = useMemo<ColumnDef<any, any>[]>(() => {\n    const _columns = [\n      ...(tableActions.selection ? TABLE_CHECK_BOX_COLUMN : []),\n      ...TABLE_ID_COLUMN,\n      ...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),\n      ...(metadataColumns.length ? metadataColumns : []),\n      ...TABLE_DEFAULT_DATE_COLUMNS,\n      ...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),\n    ];\n\n    return _columns;\n  }, [columns, metadataColumns, dataQuery.data?.data, tableActions.selection]);\n\n  // Get selected row data\n  const rowSelectedData = useMemo(\n    () => Object.entries(rowSelection).map((d: any) => dataQuery?.data?.data?.[d[0]]),\n    [dataQuery?.data?.data, rowSelection],\n  );\n\n  // Use react-table's hook to create the table instance\n  const table = useReactTable({\n    data: dataQuery.data?.data ?? [],\n    columns: extendedColumns,\n    getCoreRowModel: getCoreRowModel(),\n    rowCount: dataQuery.data?.total,\n    manualPagination: true, // Handle pagination manually\n    onPaginationChange: (updater) => {\n      const newPagination = typeof updater === 'function' ? updater(pagination) : updater;\n      updateTableState({ pagination: newPagination });\n    },\n    manualSorting: true, // Handle sorting manually\n    onSortingChange: (updater) => {\n      const newSorting = typeof updater === 'function' ? updater(sorting) : updater;\n      updateTableState({ sorting: newSorting });\n    },\n    manualFiltering: true, // Handle filtering manually\n    onGlobalFilterChange: (updater) => {\n      const newFilters = typeof updater === 'function' ? updater(columnFilters) : updater;\n      updateTableState({ columnFilters: newFilters });\n    },\n    onColumnVisibilityChange: (updater) => {\n      const newVisibility = typeof updater === 'function' ? updater(columnVisibility) : updater;\n      updateTableState({ columnVisibility: newVisibility });\n    },\n    onRowSelectionChange: (updater) => {\n      const newSelection = typeof updater === 'function' ? updater(rowSelection) : updater;\n      updateTableState({ rowSelection: newSelection });\n    },\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      pagination,\n      rowSelection,\n    },\n    meta: {\n      refetch: dataQuery.refetch,\n    },\n  });\n  const stateToPass = {\n    key: '',\n    stateData: rowSelectedData,\n  };\n\n  return (\n    <>\n      <TableFilter\n        filterableProperties={{ ...filterableFields, ...DEFAULT_FILTERABLE_FIELDS }}\n        filters={filters}\n        onFiltersChange={setFilters}\n      />\n\n      {/* Table Actions Section */}\n      <Actions\n        dataQuery={dataQuery}\n        table={table}\n        tableActions={tableActions}\n        stateToPass={stateToPass}\n        handleSearching={(value) => updateTableState({ searching: value })}\n      />\n\n      {/* Table Content Section */}\n      {/* TODO, content tabindex */}\n      {/* TODO set height */}\n      <div className='w-full bg-card overflow-auto border-x'>\n        <TableContent table={table} columns={extendedColumns} dataQuery={dataQuery} />\n      </div>\n\n      {/* Table Footer Section with Pagination and Column Picker */}\n      <div className=\"bg-card flex w-full justify-between border gap-4 p-4\">\n        <div className=\"flex gap-4\">\n          <ColumnPicker table={table} />\n          <PageSize table={table} />\n        </div>\n        <Paginator table={table} rowCount={dataQuery.data?.total ?? 0} />\n      </div>\n    </>\n  );\n}\n"],"names":["ACTIONS_COLUMN_ID","DataTable","columns","fetchFn","tableName","tableActions","columnsToHideByDefault","filterableFields","tableState","setTableState","useState","updateTableState","updates","prev","sorting","columnFilters","searching","columnVisibility","rowSelection","pagination","debouncedQuery","useDebounce","useEffect","filters","setFilters","formatedFilters","useMemo","acc","filter","property","value","operator","dataQuery","useQuery","keepPreviousData","columnHelper","createColumnHelper","metadataColumns","data","_a","allMetadataKeys","row","meta","key","metadataEntry","jsx","TooltipProvider","Tooltip","TooltipTrigger","jsxs","Info","TooltipContent","info","extendedColumns","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","_b","rowSelectedData","d","_c","table","useReactTable","_d","getCoreRowModel","_e","updater","newPagination","newSorting","newFilters","newVisibility","newSelection","stateToPass","Fragment","TableFilter","DEFAULT_FILTERABLE_FIELDS","Actions","TableContent","ColumnPicker","PageSize","Paginator","_f"],"mappings":"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"}

package/dist/components/data-table/page-size.es.js

@@ -1,12 +1,12 @@
 import { jsxs as t, jsx as n } from "react/jsx-runtime";
 import { Button as i } from "../ui/button.es.js";
-import { DropdownMenu as a, DropdownMenuTrigger as c, DropdownMenuContent as u, DropdownMenuItem as m } from "../ui/dropdown-menu.es.js";
-import { Menu as p } from "lucide-react";
+import { DropdownMenu as s, DropdownMenuTrigger as a, DropdownMenuContent as c, DropdownMenuItem as m } from "../ui/dropdown-menu.es.js";
+import { Menu as u } from "lucide-react";
 function f({ table: r }) {
   const o = r.getState().pagination.pageSize;
-  return /* @__PURE__ */ t(a, { children: [
-    /* @__PURE__ */ n(c, { asChild: !0, children: /* @__PURE__ */ n(i, { icon: p, variant: "outline", children: o }) }),
-    /* @__PURE__ */ n(u, { children: [2, 10, 20, 30, 40, 50].map((e) => /* @__PURE__ */ n(
+  return /* @__PURE__ */ t(s, { children: [
+    /* @__PURE__ */ n(a, { asChild: !0, children: /* @__PURE__ */ n(i, { size: "sm", icon: u, variant: "outline", children: o }) }),
+    /* @__PURE__ */ n(c, { children: [10, 20, 30, 40, 50].map((e) => /* @__PURE__ */ n(
       m,
       {
         onSelect: () => r.setPageSize(e),

package/dist/components/data-table/page-size.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-size.es.js","sources":["../../../lib/components/data-table/page-size.tsx"],"sourcesContent":["import { Button } from '@/components/ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { Table } from '@tanstack/react-table';\nimport { Menu } from 'lucide-react';\n\nexport function PageSize<TData>({ table }: { table: Table<TData> }) {\n  const currentPageSize = table.getState().pagination.pageSize;\n  //TODO: Remove the 2, just for testing purposes\n  const pageSizes = [2, 10, 20, 30, 40, 50];\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button icon={Menu} variant=\"outline\">\n          {currentPageSize}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        {pageSizes.map((pageSize) => (\n          <DropdownMenuItem\n            key={pageSize}\n            onSelect={() => table.setPageSize(pageSize)}\n            className={`${pageSize === currentPageSize ? 'bg-neutral-5' : ''}`}\n          >\n            {pageSize}\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"names":["PageSize","table","currentPageSize","DropdownMenu","jsx","DropdownMenuTrigger","Button","Menu","DropdownMenuContent","pageSize","DropdownMenuItem"],"mappings":";;;;AAUgB,SAAAA,EAAgB,EAAE,OAAAC,KAAkC;AAClE,QAAMC,IAAkBD,EAAM,SAAS,EAAE,WAAW;AAIpD,2BACGE,GACC,EAAA,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAoB,SAAO,IAC1B,UAAC,gBAAAD,EAAAE,GAAA,EAAO,MAAMC,GAAM,SAAQ,WACzB,UAAAL,EACH,CAAA,GACF;AAAA,IACC,gBAAAE,EAAAI,GAAA,EACE,UAVW,CAAC,GAAG,IAAI,IAAI,IAAI,IAAI,EAAE,EAUvB,IAAI,CAACC,MACd,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QAEC,UAAU,MAAMT,EAAM,YAAYQ,CAAQ;AAAA,QAC1C,WAAW,GAAGA,MAAaP,IAAkB,iBAAiB,EAAE;AAAA,QAE/D,UAAAO;AAAA,MAAA;AAAA,MAJIA;AAAA,IAAA,CAMR,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"page-size.es.js","sources":["../../../lib/components/data-table/page-size.tsx"],"sourcesContent":["import { Button } from '@/components/ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { Table } from '@tanstack/react-table';\nimport { Menu } from 'lucide-react';\n\nexport function PageSize<TData>({ table }: { table: Table<TData> }) {\n  const currentPageSize = table.getState().pagination.pageSize;\n  // TODO: Remove the 2, just for testing purposes\n  const pageSizes = [10, 20, 30, 40, 50];\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button size=\"sm\" icon={Menu} variant=\"outline\">\n          {currentPageSize}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        {pageSizes.map((pageSize) => (\n          <DropdownMenuItem\n            key={pageSize}\n            onSelect={() => table.setPageSize(pageSize)}\n            className={`${pageSize === currentPageSize ? 'bg-neutral-5' : ''}`}\n          >\n            {pageSize}\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"names":["PageSize","table","currentPageSize","DropdownMenu","jsx","DropdownMenuTrigger","Button","Menu","DropdownMenuContent","pageSize","DropdownMenuItem"],"mappings":";;;;AAUgB,SAAAA,EAAgB,EAAE,OAAAC,KAAkC;AAClE,QAAMC,IAAkBD,EAAM,SAAS,EAAE,WAAW;AAIpD,2BACGE,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAoB,EAAA,SAAO,IAC1B,UAAA,gBAAAD,EAACE,GAAO,EAAA,MAAK,MAAK,MAAMC,GAAM,SAAQ,WACnC,UAAAL,EACH,CAAA,GACF;AAAA,IACC,gBAAAE,EAAAI,GAAA,EACE,UAVW,CAAC,IAAI,IAAI,IAAI,IAAI,EAAE,EAUpB,IAAI,CAACC,MACd,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QAEC,UAAU,MAAMT,EAAM,YAAYQ,CAAQ;AAAA,QAC1C,WAAW,GAAGA,MAAaP,IAAkB,iBAAiB,EAAE;AAAA,QAE/D,UAAAO;AAAA,MAAA;AAAA,MAJIA;AAAA,IAAA,CAMR,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/data-table/paginator.es.js

@@ -1,63 +1,57 @@
-import { jsxs as a, jsx as n } from "react/jsx-runtime";
-import { Button as t } from "../ui/button.es.js";
-import { ChevronFirst as o, ChevronLeft as g, ChevronRight as s, ChevronLast as r } from "lucide-react";
-function l({ table: e, rowCount: i }) {
-  return /* @__PURE__ */ a("div", { className: "relative flex  items-center gap-2", children: [
-    /* @__PURE__ */ a("div", { className: "inline-flex items-center space-x-1 whitespace-nowrap", children: [
-      /* @__PURE__ */ a("span", { children: [
-        e.getState().pagination.pageIndex * e.getState().pagination.pageSize + 1,
-        "–",
-        Math.min(
-          (e.getState().pagination.pageIndex + 1) * e.getState().pagination.pageSize,
-          i
-        )
-      ] }),
-      /* @__PURE__ */ a("span", { children: [
-        "of ",
-        i == null ? void 0 : i.toLocaleString()
-      ] })
-    ] }),
-    /* @__PURE__ */ n(
-      t,
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { Button as n } from "../ui/button.es.js";
+import { ChevronFirst as s, ChevronLeft as o, ChevronRight as g, ChevronLast as r } from "lucide-react";
+function p({ table: e, rowCount: a }) {
+  return /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ i("span", { className: "whitespace-nowrap caption text-muted-foreground", children: `${e.getState().pagination.pageIndex * e.getState().pagination.pageSize + 1} - ${Math.min(
+      (e.getState().pagination.pageIndex + 1) * e.getState().pagination.pageSize,
+      a
+    )} of ${a == null ? void 0 : a.toLocaleString()}` }),
+    /* @__PURE__ */ i(
+      n,
       {
         onClick: () => e.firstPage(),
         disabled: !e.getCanPreviousPage(),
         variant: "outline",
         className: "hidden md:block",
-        icon: o
+        size: "sm",
+        icon: s
       }
     ),
-    /* @__PURE__ */ n(
-      t,
+    /* @__PURE__ */ i(
+      n,
       {
         onClick: () => e.previousPage(),
         disabled: !e.getCanPreviousPage(),
         variant: "outline",
-        icon: g
+        size: "sm",
+        icon: o
       }
     ),
-    /* @__PURE__ */ n(
-      t,
+    /* @__PURE__ */ i(
+      n,
       {
         onClick: () => e.nextPage(),
         disabled: !e.getCanNextPage(),
         variant: "outline",
-        icon: s
+        size: "sm",
+        icon: g
       }
     ),
-    /* @__PURE__ */ n(
-      t,
+    /* @__PURE__ */ i(
+      n,
       {
         onClick: () => e.lastPage(),
         disabled: !e.getCanNextPage(),
         variant: "outline",
         className: "hidden md:block",
+        size: "sm",
         icon: r
       }
     )
   ] });
 }
 export {
-  l as Paginator
+  p as Paginator
 };
 //# sourceMappingURL=paginator.es.js.map

package/dist/components/data-table/paginator.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"paginator.es.js","sources":["../../../lib/components/data-table/paginator.tsx"],"sourcesContent":["import { Button } from '@/components/ui/button';\nimport { Table } from '@tanstack/react-table';\nimport { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight } from 'lucide-react';\n\nexport function Paginator<TData>({ table, rowCount }: { table: Table<TData>; rowCount: number }) {\n  return (\n    <div className=\"relative flex  items-center gap-2\">\n      <div className=\"inline-flex items-center space-x-1 whitespace-nowrap\">\n        <span>\n          {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}–\n          {Math.min(\n            (table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize,\n            rowCount,\n          )}\n        </span>\n        <span>of {rowCount?.toLocaleString()}</span>\n      </div>\n\n      <Button\n        onClick={() => table.firstPage()}\n        disabled={!table.getCanPreviousPage()}\n        variant=\"outline\"\n        className=\"hidden md:block\"\n        icon={ChevronFirst}\n      />\n      <Button\n        onClick={() => table.previousPage()}\n        disabled={!table.getCanPreviousPage()}\n        variant=\"outline\"\n        icon={ChevronLeft}\n      />\n      <Button\n        onClick={() => table.nextPage()}\n        disabled={!table.getCanNextPage()}\n        variant=\"outline\"\n        icon={ChevronRight}\n      />\n      <Button\n        onClick={() => table.lastPage()}\n        disabled={!table.getCanNextPage()}\n        variant=\"outline\"\n        className=\"hidden md:block\"\n        icon={ChevronLast}\n      />\n    </div>\n  );\n}\n"],"names":["Paginator","table","rowCount","jsxs","jsx","Button","ChevronFirst","ChevronLeft","ChevronRight","ChevronLast"],"mappings":";;;AAIO,SAASA,EAAiB,EAAE,OAAAC,GAAO,UAAAC,KAAuD;AAE7F,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,qCACb,UAAA;AAAA,IAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,wDACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,QACE,EAAA,UAAA;AAAA,QAAMF,EAAA,WAAW,WAAW,YAAYA,EAAM,SAAS,EAAE,WAAW,WAAW;AAAA,QAAE;AAAA,QACjF,KAAK;AAAA,WACHA,EAAM,SAAW,EAAA,WAAW,YAAY,KAAKA,EAAM,WAAW,WAAW;AAAA,UAC1EC;AAAA,QAAA;AAAA,MACF,GACF;AAAA,wBACC,QAAK,EAAA,UAAA;AAAA,QAAA;AAAA,QAAIA,KAAA,gBAAAA,EAAU;AAAA,MAAe,EAAE,CAAA;AAAA,IAAA,GACvC;AAAA,IAEA,gBAAAE;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS,MAAMJ,EAAM,UAAU;AAAA,QAC/B,UAAU,CAACA,EAAM,mBAAmB;AAAA,QACpC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,MAAMK;AAAA,MAAA;AAAA,IACR;AAAA,IACA,gBAAAF;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS,MAAMJ,EAAM,aAAa;AAAA,QAClC,UAAU,CAACA,EAAM,mBAAmB;AAAA,QACpC,SAAQ;AAAA,QACR,MAAMM;AAAA,MAAA;AAAA,IACR;AAAA,IACA,gBAAAH;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS,MAAMJ,EAAM,SAAS;AAAA,QAC9B,UAAU,CAACA,EAAM,eAAe;AAAA,QAChC,SAAQ;AAAA,QACR,MAAMO;AAAA,MAAA;AAAA,IACR;AAAA,IACA,gBAAAJ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS,MAAMJ,EAAM,SAAS;AAAA,QAC9B,UAAU,CAACA,EAAM,eAAe;AAAA,QAChC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,MAAMQ;AAAA,MAAA;AAAA,IAAA;AAAA,EACR,GACF;AAEJ;"}
+{"version":3,"file":"paginator.es.js","sources":["../../../lib/components/data-table/paginator.tsx"],"sourcesContent":["import { Button } from '@/components/ui/button';\nimport { Table } from '@tanstack/react-table';\nimport { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight } from 'lucide-react';\n\nexport function Paginator<TData>({ table, rowCount }: { table: Table<TData>; rowCount: number }) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <span className='whitespace-nowrap caption text-muted-foreground'>\n        {`${table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1} - ${Math.min(\n          (table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize,\n          rowCount,\n        )} of ${rowCount?.toLocaleString()}`}\n      </span>\n\n\n      <Button\n        onClick={() => table.firstPage()}\n        disabled={!table.getCanPreviousPage()}\n        variant=\"outline\"\n        className=\"hidden md:block\"\n        size={'sm'}\n        icon={ChevronFirst}\n      />\n      <Button\n        onClick={() => table.previousPage()}\n        disabled={!table.getCanPreviousPage()}\n        variant=\"outline\"\n        size={'sm'}\n        icon={ChevronLeft}\n      />\n      <Button\n        onClick={() => table.nextPage()}\n        disabled={!table.getCanNextPage()}\n        variant=\"outline\"\n        size={'sm'}\n        icon={ChevronRight}\n      />\n      <Button\n        onClick={() => table.lastPage()}\n        disabled={!table.getCanNextPage()}\n        variant=\"outline\"\n        className=\"hidden md:block\"\n        size={'sm'}\n        icon={ChevronLast}\n      />\n    </div>\n  );\n}\n"],"names":["Paginator","table","rowCount","jsxs","jsx","Button","ChevronFirst","ChevronLeft","ChevronRight","ChevronLast"],"mappings":";;;AAIO,SAASA,EAAiB,EAAE,OAAAC,GAAO,UAAAC,KAAuD;AAE7F,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,2BACb,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAK,WAAU,mDACb,UAAG,GAAAH,EAAM,SAAW,EAAA,WAAW,YAAYA,EAAM,WAAW,WAAW,WAAW,CAAC,MAAM,KAAK;AAAA,OAC5FA,EAAM,SAAW,EAAA,WAAW,YAAY,KAAKA,EAAM,WAAW,WAAW;AAAA,MAC1EC;AAAA,IACD,CAAA,OAAOA,KAAA,gBAAAA,EAAU,gBAAgB,GACpC,CAAA;AAAA,IAGA,gBAAAE;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS,MAAMJ,EAAM,UAAU;AAAA,QAC/B,UAAU,CAACA,EAAM,mBAAmB;AAAA,QACpC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,MAAM;AAAA,QACN,MAAMK;AAAA,MAAA;AAAA,IACR;AAAA,IACA,gBAAAF;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS,MAAMJ,EAAM,aAAa;AAAA,QAClC,UAAU,CAACA,EAAM,mBAAmB;AAAA,QACpC,SAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAMM;AAAA,MAAA;AAAA,IACR;AAAA,IACA,gBAAAH;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS,MAAMJ,EAAM,SAAS;AAAA,QAC9B,UAAU,CAACA,EAAM,eAAe;AAAA,QAChC,SAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAMO;AAAA,MAAA;AAAA,IACR;AAAA,IACA,gBAAAJ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS,MAAMJ,EAAM,SAAS;AAAA,QAC9B,UAAU,CAACA,EAAM,eAAe;AAAA,QAChC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,MAAM;AAAA,QACN,MAAMQ;AAAA,MAAA;AAAA,IAAA;AAAA,EACR,GACF;AAEJ;"}