@sikka/hawa 0.40.0-next → 0.41.0-next

package/dist/elements/index.mjs

@@ -26,7 +26,7 @@ import {
   TabsList,
   TabsTrigger,
   Textarea
-} from "../chunk-UBUVHGW4.mjs";
+} from "../chunk-FJXDCBMQ.mjs";
 import {
   useClipboard
 } from "../chunk-XCW5YNMS.mjs";
@@ -41,7 +41,7 @@ import {
   SheetPortal,
   SheetTitle,
   SheetTrigger
-} from "../chunk-27G5FKOP.mjs";
+} from "../chunk-IS73LH5Y.mjs";
 import {
   Button,
   Card,
@@ -81,7 +81,7 @@ import {
   buttonVariants,
   calculateLuminance,
   cn
-} from "../chunk-GU2DOJ7Q.mjs";
+} from "../chunk-JGP3PSJL.mjs";
 import {
   __require
 } from "../chunk-SYGWSBJL.mjs";
@@ -823,7 +823,7 @@ import {
 
 // elements/table/Table.tsx
 import * as React9 from "react";
-var Table = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement("div", { className: "hawa-relative hawa-w-full  hawa-overflow-auto hawa-rounded hawa-border" }, /* @__PURE__ */ React9.createElement(
+var Table = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement("div", { className: "hawa-relative hawa-w-full hawa-overflow-auto hawa-rounded hawa-border" }, /* @__PURE__ */ React9.createElement(
   "table",
   {
     ref,
@@ -845,12 +845,12 @@ var TableHead = React9.forwardRef(
     {
       ref,
       className: cn(
-        "hawa-bg-muted/60 hawa-text-start hawa-align-middle hawa-font-medium hawa-text-muted-foreground dark:hawa-bg-muted/40 [&:has([role=checkbox])]:hawa-pr-0 [&:not(:last-child)&:not(:first-child)]:hawa-border-x",
+        "hawa-bg-muted/60 hawa-text-nowrap hawa-text-start hawa-align-middle hawa-font-medium hawa-text-muted-foreground dark:hawa-bg-muted/40 [&:has([role=checkbox])]:hawa-pr-0 [&:not(:last-child)&:not(:first-child)]:hawa-border-x",
         dir === "rtl" ? "[&:not(:last-child)]:hawa-border-l" : "[&:not(:last-child)]:hawa-border-r",
         condensed ? "hawa-h-8" : "hawa-h-12",
         clickable ? "hawa-px-1" : "hawa-px-4",
         //First and last columns
-        clickable ? " [&:not(:last-child)&:not(:first-child)]:hawa-p-1" : "hawa-px-4",
+        clickable ? "[&:not(:last-child)&:not(:first-child)]:hawa-p-1" : "hawa-px-4",
         //Columns in between
         className
       ),
@@ -900,7 +900,7 @@ var TableCell = React9.forwardRef(
           // enablePadding ? "hawa-p-4" : "hawa-p-0",
           // props.disablePadding ? "hawa-p-0" : "hawa-p-4",
           // props.condensed ? "hawa-p-0 hawa-px-4" : "hawa-p-4",
-          "hawa-align-middle [&:has([role=checkbox])]:hawa-pr-0 ",
+          "hawa-align-middle [&:has([role=checkbox])]:hawa-pr-0",
           "[&:not(:last-child)&:not(:first-child)]:hawa-border-x",
           // "[&:not(:last-child)]:hawa-border-r",
           props.dir === "rtl" ? "[&:not(:last-child)]:hawa-border-l" : "[&:not(:last-child)]:hawa-border-r",
@@ -939,11 +939,12 @@ var DataTable = ({
   paginationPosition = "bottom",
   translateFn,
   enableHideColumns,
+  enableSelection,
   enableSearch,
   enableGoTo,
   ...props
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
   const [sorting, setSorting] = React10.useState(
     props.defaultSort ? [{ id: props.defaultSort, desc: false }] : []
   );
@@ -957,9 +958,42 @@ var DataTable = ({
     return savedVisibility ? JSON.parse(savedVisibility) : {};
   });
   const [rowSelection, setRowSelection] = React10.useState({});
+  let mainColumns = enableSelection ? [
+    {
+      id: "select",
+      maxSize: 16,
+      minSize: 16,
+      size: 16,
+      header: ({ table: table2 }) => /* @__PURE__ */ React10.createElement(
+        Checkbox,
+        {
+          dir: props.direction,
+          id: "select_all",
+          "aria-label": "Select all",
+          className: props.direction === "rtl" ? "hawa-ms-4" : "hawa-me-0",
+          checked: table2.getIsAllPageRowsSelected() || table2.getIsSomePageRowsSelected() && "indeterminate",
+          onCheckedChange: (value) => table2.toggleAllPageRowsSelected(!!value)
+        }
+      ),
+      cell: ({ row }) => /* @__PURE__ */ React10.createElement(
+        Checkbox,
+        {
+          dir: props.direction,
+          id: "select_row",
+          className: props.direction === "rtl" ? "hawa-ms-4" : "hawa-me-4",
+          checked: row.getIsSelected(),
+          onCheckedChange: (value) => row.toggleSelected(!!value),
+          "aria-label": "Select row"
+        }
+      ),
+      enableSorting: false,
+      enableHiding: false
+    },
+    ...columns
+  ] : columns;
   const table = useReactTable({
     data,
-    columns,
+    columns: mainColumns,
     onExpandedChange: setExpanded,
     getExpandedRowModel: getExpandedRowModel(),
     onGlobalFilterChange: setGlobalFilter,
@@ -1051,19 +1085,21 @@ var DataTable = ({
     /* @__PURE__ */ React10.createElement(
       "svg",
       {
-        "aria-label": "Chevron Down Icon",
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
+        width: "15",
+        height: "15",
+        viewBox: "0 0 15 15",
         fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        className: "hawa-icon hawa-rotate-90"
+        xmlns: "http://www.w3.org/2000/svg"
       },
-      /* @__PURE__ */ React10.createElement("path", { d: "m9 18 6-6-6-6" })
+      /* @__PURE__ */ React10.createElement(
+        "path",
+        {
+          d: "M5.5 3C4.67157 3 4 3.67157 4 4.5C4 5.32843 4.67157 6 5.5 6C6.32843 6 7 5.32843 7 4.5C7 3.67157 6.32843 3 5.5 3ZM3 5C3.01671 5 3.03323 4.99918 3.04952 4.99758C3.28022 6.1399 4.28967 7 5.5 7C6.71033 7 7.71978 6.1399 7.95048 4.99758C7.96677 4.99918 7.98329 5 8 5H13.5C13.7761 5 14 4.77614 14 4.5C14 4.22386 13.7761 4 13.5 4H8C7.98329 4 7.96677 4.00082 7.95048 4.00242C7.71978 2.86009 6.71033 2 5.5 2C4.28967 2 3.28022 2.86009 3.04952 4.00242C3.03323 4.00082 3.01671 4 3 4H1.5C1.22386 4 1 4.22386 1 4.5C1 4.77614 1.22386 5 1.5 5H3ZM11.9505 10.9976C11.7198 12.1399 10.7103 13 9.5 13C8.28967 13 7.28022 12.1399 7.04952 10.9976C7.03323 10.9992 7.01671 11 7 11H1.5C1.22386 11 1 10.7761 1 10.5C1 10.2239 1.22386 10 1.5 10H7C7.01671 10 7.03323 10.0008 7.04952 10.0024C7.28022 8.8601 8.28967 8 9.5 8C10.7103 8 11.7198 8.8601 11.9505 10.0024C11.9668 10.0008 11.9833 10 12 10H13.5C13.7761 10 14 10.2239 14 10.5C14 10.7761 13.7761 11 13.5 11H12C11.9833 11 11.9668 10.9992 11.9505 10.9976ZM8 10.5C8 9.67157 8.67157 9 9.5 9C10.3284 9 11 9.67157 11 10.5C11 11.3284 10.3284 12 9.5 12C8.67157 12 8 11.3284 8 10.5Z",
+          fill: "currentColor",
+          "fill-rule": "evenodd",
+          "clip-rule": "evenodd"
+        }
+      )
     )
   )), /* @__PURE__ */ React10.createElement(
     DropdownMenuContent,
@@ -1088,7 +1124,7 @@ var DataTable = ({
     "div",
     {
       className: cn(
-        "hawa-flex hawa-w-full  hawa-gap-4",
+        "hawa-flex hawa-w-full hawa-gap-4",
         paginationPosition === "top" ? "hawa-flex-col-reverse" : "hawa-flex-col"
       )
     },
@@ -1098,12 +1134,14 @@ var DataTable = ({
       return /* @__PURE__ */ React10.createElement(
         TableHead,
         {
+          key: header.id,
           dir: props.direction,
           condensed: props.condensed,
           clickable: Boolean(isSortable),
-          key: header.id,
           style: {
-            maxWidth: header.column.columnDef.maxSize
+            maxWidth: `${header.column.columnDef.maxSize}px !important`,
+            minWidth: `${header.column.columnDef.minSize}px !important`,
+            width: `${header.column.columnDef.size}px !important`
           }
         },
         header.isPlaceholder ? null : flexRender(
@@ -1122,12 +1160,14 @@ var DataTable = ({
         return /* @__PURE__ */ React10.createElement(
           TableCell,
           {
+            key: cell.id,
+            dir: props.direction,
             style: {
-              maxWidth: cell.column.columnDef.maxSize
+              maxWidth: `${cell.column.columnDef.maxSize}px !important`,
+              minWidth: `${cell.column.columnDef.minSize}px !important`,
+              width: `${cell.column.columnDef.size}px !important`
             },
-            dir: props.direction,
-            padding: props.condensed ? "condensed" : (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.padding,
-            key: cell.id
+            padding: props.condensed ? "condensed" : (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.padding
           },
           flexRender(
             cell.column.columnDef.cell,
@@ -1143,169 +1183,207 @@ var DataTable = ({
       },
       (_f = props.texts) == null ? void 0 : _f.noData
     ))))),
-    /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-items-center hawa-justify-between" }, !props.showCount && /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm hawa-text-muted-foreground" }), props.showCount && /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React10.createElement(
       "div",
       {
-        className: "text-muted-foreground text-sm",
-        dir: props.direction
-      },
-      /* @__PURE__ */ React10.createElement("span", null, (_g = props.texts) == null ? void 0 : _g.total),
-      " ",
-      /* @__PURE__ */ React10.createElement("span", null, table.getFilteredRowModel().rows.length.toLocaleString())
-    ), /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 " }, enableGoTo && /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2" }, /* @__PURE__ */ React10.createElement("span", { className: "hawa-text-sm" }, (_h = props.texts) == null ? void 0 : _h.goTo), /* @__PURE__ */ React10.createElement(
-      "input",
-      {
-        max: table.getPageCount(),
-        min: 0,
-        type: "number",
-        defaultValue: table.getState().pagination.pageIndex + 1,
-        onChange: (e) => {
-          let page = Number(e.target.value) - 1;
-          const max = table.getPageCount();
-          if (!isNaN(page) && Number(page) > max) {
-            page = max - 1;
-          }
-          table.setPageIndex(page);
-        },
-        className: "hawa-w-16 hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-text-sm placeholder:hawa-text-muted-foreground"
-      }
-    )), /* @__PURE__ */ React10.createElement(
-      DropdownMenu,
-      {
-        size: "sm",
-        width: "sm",
-        direction: props.direction,
-        items: itemsPerPageOptions || [
-          { label: `10 / ${pageText}`, value: 10 },
-          { label: `20 / ${pageText}`, value: 20 },
-          { label: `30 / ${pageText}`, value: 30 },
-          { label: `40 / ${pageText}`, value: 40 },
-          { label: `50 / ${pageText}`, value: 50 }
-        ],
-        trigger: /* @__PURE__ */ React10.createElement(
-          Button,
-          {
-            variant: "outline",
-            size: "icon",
-            className: "hawa-h-fit hawa-w-fit hawa-p-0 hawa-px-2 hawa-py-1 "
-          },
-          `${table.getState().pagination.pageSize} / ${(_i = props.texts) == null ? void 0 : _i.page}`
-        ),
-        onItemSelect: (e) => table.setPageSize(Number(e))
-      }
-    ), table.getPageCount() > 1 && /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm  " }, /* @__PURE__ */ React10.createElement("span", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ React10.createElement("div", null, (_j = props.texts) == null ? void 0 : _j.page), /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-1" }, /* @__PURE__ */ React10.createElement("span", { className: "hawa-font-bold" }, table.getState().pagination.pageIndex + 1), /* @__PURE__ */ React10.createElement("span", null, (_k = props.texts) == null ? void 0 : _k.of), /* @__PURE__ */ React10.createElement("span", { className: "hawa-font-bold" }, table.getPageCount())))), /* @__PURE__ */ React10.createElement(
-      Button,
-      {
-        "aria-label": "Next Table Page",
-        variant: "outline",
-        size: "smallIcon",
-        onClick: () => table.setPageIndex(0),
-        disabled: !table.getCanPreviousPage(),
         className: cn(
-          props.direction === "rtl" && "hawa-rotate-180"
+          "hawa-flex hawa-justify-between hawa-gap-4 tablet:hawa-gap-0",
+          props.showSelectionCount ? "hawa-flex-col tablet:hawa-flex-row" : "hawa-flex-col mobile:hawa-flex-row"
         )
       },
-      /* @__PURE__ */ React10.createElement(
-        "svg",
+      !props.showCount && /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm hawa-text-muted-foreground" }),
+      props.showCount || table.getFilteredSelectedRowModel().rows.length > 0 && props.showSelectionCount ? /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-h-auto hawa-gap-4" }, /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-h-auto hawa-items-center hawa-justify-between" }, props.showCount && /* @__PURE__ */ React10.createElement(
+        "div",
         {
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "20",
-          height: "20",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          className: "hawa-text-muted-foreground hawa-text-sm",
+          dir: props.direction
         },
-        /* @__PURE__ */ React10.createElement("path", { d: "m11 17-5-5 5-5" }),
-        /* @__PURE__ */ React10.createElement("path", { d: "m18 17-5-5 5-5" })
-      )
-    ), /* @__PURE__ */ React10.createElement(
-      Button,
-      {
-        "aria-label": "Previous Table Page",
-        variant: "outline",
-        size: "smallIcon",
-        onClick: () => table.previousPage(),
-        disabled: !table.getCanPreviousPage(),
-        className: cn(
-          props.direction === "rtl" && "hawa-rotate-180"
+        /* @__PURE__ */ React10.createElement("span", null, (_g = props.texts) == null ? void 0 : _g.total),
+        " ",
+        /* @__PURE__ */ React10.createElement("span", null, table.getFilteredRowModel().rows.length.toLocaleString())
+      ), props.showCount && table.getFilteredSelectedRowModel().rows.length > 0 && props.showSelectionCount && /* @__PURE__ */ React10.createElement("div", { className: "hawa-w-[0.5px] hawa-mx-2 hawa-bg-red-500 hawa-h-full" }), table.getFilteredSelectedRowModel().rows.length > 0 && props.showSelectionCount && /* @__PURE__ */ React10.createElement(
+        "div",
+        {
+          className: "hawa-text-muted-foreground hawa-text-sm",
+          dir: props.direction
+        },
+        table.getFilteredSelectedRowModel().rows.length,
+        " ",
+        (_h = props.texts) == null ? void 0 : _h.of,
+        " ",
+        table.getFilteredRowModel().rows.length,
+        " ",
+        (_i = props.texts) == null ? void 0 : _i.selectedRows
+      )), table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ React10.createElement("div", { className: "" }, /* @__PURE__ */ React10.createElement(
+        DropdownMenu,
+        {
+          size: "sm",
+          width: "sm",
+          direction: props.direction,
+          items: (props.bulkActions || []).map((action) => ({
+            ...action,
+            action: () => action.action(
+              table.getFilteredSelectedRowModel().rows
+            )
+          })),
+          trigger: /* @__PURE__ */ React10.createElement(Button, { size: "xs" }, ((_j = props.texts) == null ? void 0 : _j.bulkAction) || "Bulk Action")
+        }
+      ))) : null,
+      /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-row hawa-items-center hawa-gap-2 hawa-bg--500 tablet:hawa-w-fit hawa-justify-between" }, enableGoTo && /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2" }, /* @__PURE__ */ React10.createElement("span", { className: "hawa-text-sm" }, (_k = props.texts) == null ? void 0 : _k.goTo), /* @__PURE__ */ React10.createElement(
+        "input",
+        {
+          max: table.getPageCount(),
+          min: 0,
+          type: "number",
+          defaultValue: table.getState().pagination.pageIndex + 1,
+          onChange: (e) => {
+            let page = Number(e.target.value) - 1;
+            const max = table.getPageCount();
+            if (!isNaN(page) && Number(page) > max) {
+              page = max - 1;
+            }
+            table.setPageIndex(page);
+          },
+          className: "hawa-w-16 hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-text-sm placeholder:hawa-text-muted-foreground"
+        }
+      )), /* @__PURE__ */ React10.createElement(
+        DropdownMenu,
+        {
+          size: "sm",
+          width: "sm",
+          direction: props.direction,
+          items: itemsPerPageOptions || [
+            { label: `10 / ${pageText}`, value: 10 },
+            { label: `20 / ${pageText}`, value: 20 },
+            { label: `30 / ${pageText}`, value: 30 },
+            { label: `40 / ${pageText}`, value: 40 },
+            { label: `50 / ${pageText}`, value: 50 }
+          ],
+          trigger: /* @__PURE__ */ React10.createElement(
+            Button,
+            {
+              variant: "outline",
+              size: "icon",
+              className: "hawa-h-fit hawa-w-fit hawa-p-0 hawa-px-2 hawa-py-1 hawa-whitespace-nowrap"
+            },
+            `${table.getState().pagination.pageSize} / ${(_l = props.texts) == null ? void 0 : _l.page}`
+          ),
+          onItemSelect: (e) => table.setPageSize(Number(e))
+        }
+      ), table.getPageCount() > 1 && /* @__PURE__ */ React10.createElement("div", { className: "hawa-bg--500 hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-bg--500 hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm" }, /* @__PURE__ */ React10.createElement("span", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ React10.createElement("div", null, (_m = props.texts) == null ? void 0 : _m.page), /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-1" }, /* @__PURE__ */ React10.createElement("span", { className: "hawa-font-bold" }, table.getState().pagination.pageIndex + 1), /* @__PURE__ */ React10.createElement("span", null, (_n = props.texts) == null ? void 0 : _n.of), /* @__PURE__ */ React10.createElement("span", { className: "hawa-font-bold" }, table.getPageCount())))), /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2 hawa-items-center hawa-bg--500" }, /* @__PURE__ */ React10.createElement(
+        Button,
+        {
+          "aria-label": "Next Table Page",
+          variant: "outline",
+          size: "smallIcon",
+          onClick: () => table.setPageIndex(0),
+          disabled: !table.getCanPreviousPage(),
+          className: cn(
+            props.direction === "rtl" && "hawa-rotate-180"
+          )
+        },
+        /* @__PURE__ */ React10.createElement(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          },
+          /* @__PURE__ */ React10.createElement("path", { d: "m11 17-5-5 5-5" }),
+          /* @__PURE__ */ React10.createElement("path", { d: "m18 17-5-5 5-5" })
         )
-      },
-      /* @__PURE__ */ React10.createElement(
-        "svg",
+      ), /* @__PURE__ */ React10.createElement(
+        Button,
         {
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "20",
-          height: "20",
-          "aria-label": "Single Chevron Icon",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          "aria-label": "Previous Table Page",
+          variant: "outline",
+          size: "smallIcon",
+          onClick: () => table.previousPage(),
+          disabled: !table.getCanPreviousPage(),
+          className: cn(
+            props.direction === "rtl" && "hawa-rotate-180"
+          )
         },
-        /* @__PURE__ */ React10.createElement("path", { d: "m15 18-6-6 6-6" })
-      )
-    ), /* @__PURE__ */ React10.createElement(
-      Button,
-      {
-        "aria-label": "Next Table Page",
-        variant: "outline",
-        size: "smallIcon",
-        onClick: () => table.nextPage(),
-        disabled: !table.getCanNextPage(),
-        className: cn(
-          props.direction === "ltr" && "hawa-rotate-180"
+        /* @__PURE__ */ React10.createElement(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "20",
+            height: "20",
+            "aria-label": "Single Chevron Icon",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          },
+          /* @__PURE__ */ React10.createElement("path", { d: "m15 18-6-6 6-6" })
         )
-      },
-      /* @__PURE__ */ React10.createElement(
-        "svg",
+      ), /* @__PURE__ */ React10.createElement(
+        Button,
         {
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "20",
-          height: "20",
-          "aria-label": "Single Chevron Icon",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          "aria-label": "Next Table Page",
+          variant: "outline",
+          size: "smallIcon",
+          onClick: () => table.nextPage(),
+          disabled: !table.getCanNextPage(),
+          className: cn(
+            props.direction === "ltr" && "hawa-rotate-180"
+          )
         },
-        /* @__PURE__ */ React10.createElement("path", { d: "m15 18-6-6 6-6" })
-      )
-    ), /* @__PURE__ */ React10.createElement(
-      Button,
-      {
-        "aria-label": "Next Table Page",
-        variant: "outline",
-        size: "smallIcon",
-        onClick: () => table.setPageIndex(table.getPageCount() - 1),
-        disabled: !table.getCanNextPage(),
-        className: cn(
-          props.direction === "ltr" && "hawa-rotate-180"
+        /* @__PURE__ */ React10.createElement(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "20",
+            height: "20",
+            "aria-label": "Single Chevron Icon",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          },
+          /* @__PURE__ */ React10.createElement("path", { d: "m15 18-6-6 6-6" })
         )
-      },
-      /* @__PURE__ */ React10.createElement(
-        "svg",
+      ), /* @__PURE__ */ React10.createElement(
+        Button,
         {
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "20",
-          height: "20",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          "aria-label": "Next Table Page",
+          variant: "outline",
+          size: "smallIcon",
+          onClick: () => table.setPageIndex(table.getPageCount() - 1),
+          disabled: !table.getCanNextPage(),
+          className: cn(
+            props.direction === "ltr" && "hawa-rotate-180"
+          )
         },
-        /* @__PURE__ */ React10.createElement("path", { d: "m11 17-5-5 5-5" }),
-        /* @__PURE__ */ React10.createElement("path", { d: "m18 17-5-5 5-5" })
-      )
-    ))))
+        /* @__PURE__ */ React10.createElement(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          },
+          /* @__PURE__ */ React10.createElement("path", { d: "m11 17-5-5 5-5" }),
+          /* @__PURE__ */ React10.createElement("path", { d: "m18 17-5-5 5-5" })
+        )
+      ))))
+    )
   ));
 };