@sikka/hawa 0.40.1-next → 0.41.0-next

package/dist/dataTable/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 
 // elements/dataTable/DataTable.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import {
   flexRender,
   getCoreRowModel,
@@ -465,15 +465,151 @@ var Button = React5.forwardRef(
 );
 Button.displayName = "Button";
 
-// elements/dropdownMenu/DropdownMenu.tsx
+// elements/checkbox/Checkbox.tsx
 import * as React6 from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+var Checkbox = ({
+  id,
+  label,
+  sublabel,
+  helperText,
+  disabled,
+  size = "default",
+  radius = "inherit",
+  ...props
+}) => {
+  let labelLineHeightStyles = {
+    xs: sublabel || helperText ? 0.5 : 0.1,
+    sm: 0.6,
+    default: 1,
+    md: 0.8,
+    lg: 0.9,
+    xl: 1
+  };
+  return /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      className: cn(
+        "hawa-flex hawa-gap-2",
+        size === "default" ? "hawa-items-top" : "hawa-items-center"
+      )
+    },
+    /* @__PURE__ */ React6.createElement(
+      CheckboxElement,
+      {
+        ...props,
+        size,
+        radius,
+        disabled,
+        id
+      }
+    ),
+    (label || helperText) && /* @__PURE__ */ React6.createElement("div", { className: "hawa-grid hawa-gap-1.5" }, label && /* @__PURE__ */ React6.createElement(
+      "label",
+      {
+        htmlFor: id,
+        className: cn(
+          "hawa-w-fit hawa-select-none hawa-pt-0.5 hawa-text-sm hawa-font-medium",
+          disabled ? "hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70" : "hawa-cursor-pointer"
+        ),
+        style: {
+          // lineHeight: labelLineHeightStyles[size]
+          lineHeight: 1
+        }
+      },
+      label
+    ), sublabel && /* @__PURE__ */ React6.createElement(
+      "label",
+      {
+        htmlFor: id,
+        className: cn(
+          "hawa-w-fit hawa-select-none hawa-text-sm hawa-text-muted-foreground",
+          disabled ? "hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70" : "hawa-cursor-pointer"
+        )
+      },
+      sublabel
+    ), helperText && !disabled && /* @__PURE__ */ React6.createElement(
+      "label",
+      {
+        htmlFor: id,
+        className: cn(
+          "hawa-w-fit hawa-select-none hawa-text-xs hawa-text-helper-color",
+          disabled && "hawa-cursor-not-allowed hawa-opacity-70"
+        )
+      },
+      helperText
+    ))
+  );
+};
+var CheckboxElement = React6.forwardRef(({ radius = "inherit", size = "default", className, ...props }, ref) => {
+  let checkboxRadius = {
+    none: "hawa-rounded-none",
+    inherit: "hawa-rounded-sm",
+    full: "hawa-rounded-full"
+  };
+  let checkboxSizes = {
+    xs: "hawa-w-3 hawa-h-3",
+    sm: "hawa-w-6 hawa-h-6",
+    default: "hawa-icon",
+    md: "hawa-w-8 hawa-h-8",
+    lg: "hawa-w-10 hawa-h-10",
+    xl: "hawa-w-12 hawa-h-12"
+  };
+  let checkboxIndicatorSizes = {
+    xs: "0.5em",
+    default: "0.60em",
+    sm: "0.75em",
+    md: "0.875em",
+    lg: "1em",
+    xl: "1.25em"
+  };
+  return /* @__PURE__ */ React6.createElement(
+    CheckboxPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        "hawa-peer hawa-shrink-0 hawa-border hawa-border-primary hawa-ring-offset-background focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50 data-[state=checked]:hawa-bg-primary data-[state=checked]:hawa-text-primary-foreground",
+        checkboxSizes[size],
+        checkboxRadius[radius],
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React6.createElement(
+      CheckboxPrimitive.Indicator,
+      {
+        className: cn(
+          "hawa-flex hawa-items-center hawa-justify-center hawa-text-current"
+        )
+      },
+      /* @__PURE__ */ React6.createElement(
+        "svg",
+        {
+          "aria-label": "Check Mark",
+          stroke: "currentColor",
+          fill: "currentColor",
+          strokeWidth: "0",
+          viewBox: "0 0 512 512",
+          height: checkboxIndicatorSizes[size],
+          width: checkboxIndicatorSizes[size]
+        },
+        /* @__PURE__ */ React6.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
+      ),
+      " "
+    )
+  );
+});
+CheckboxElement.displayName = CheckboxPrimitive.Root.displayName;
+
+// elements/dropdownMenu/DropdownMenu.tsx
+import * as React7 from "react";
 import { Portal } from "@headlessui/react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 var DropdownMenuRoot = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React6.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+var DropdownMenuSubTrigger = React7.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ React7.createElement(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -484,9 +620,9 @@ var DropdownMenuSubTrigger = React6.forwardRef(({ className, inset, children, ..
     ),
     ...props
   },
-  /* @__PURE__ */ React6.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2" }, children),
+  /* @__PURE__ */ React7.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2" }, children),
   " ",
-  /* @__PURE__ */ React6.createElement(
+  /* @__PURE__ */ React7.createElement(
     "svg",
     {
       "aria-label": "Chevron Right Icon",
@@ -498,7 +634,7 @@ var DropdownMenuSubTrigger = React6.forwardRef(({ className, inset, children, ..
       width: "1em",
       className: cn(props.dir === "rtl" ? "hawa-rotate-180" : "")
     },
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -508,7 +644,7 @@ var DropdownMenuSubTrigger = React6.forwardRef(({ className, inset, children, ..
   )
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+var DropdownMenuSubContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React7.createElement(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -520,7 +656,7 @@ var DropdownMenuSubContent = React6.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React6.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React6.createElement(Portal, null, /* @__PURE__ */ React6.createElement(
+var DropdownMenuContent = React7.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React7.createElement(Portal, null, /* @__PURE__ */ React7.createElement(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -533,8 +669,8 @@ var DropdownMenuContent = React6.forwardRef(({ className, sideOffset = 4, ...pro
   }
 )));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React6.forwardRef(({ className, inset, badged, slug, LinkComponent = "a", ...props }, ref) => {
-  return /* @__PURE__ */ React6.createElement(LinkComponent, { href: slug }, /* @__PURE__ */ React6.createElement(
+var DropdownMenuItem = React7.forwardRef(({ className, inset, badged, slug, LinkComponent = "a", ...props }, ref) => {
+  return /* @__PURE__ */ React7.createElement(LinkComponent, { href: slug }, /* @__PURE__ */ React7.createElement(
     DropdownMenuPrimitive.Item,
     {
       disabled: props.disabled,
@@ -547,14 +683,14 @@ var DropdownMenuItem = React6.forwardRef(({ className, inset, badged, slug, Link
       ),
       ...props
     },
-    /* @__PURE__ */ React6.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 " }, props.children),
+    /* @__PURE__ */ React7.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 " }, props.children),
     props.end && props.end,
-    !props.end && props.shortcut && /* @__PURE__ */ React6.createElement(DropdownMenuShortcut, null, props.shortcut),
-    !props.end && badged && /* @__PURE__ */ React6.createElement("div", { className: "hawa-h-3 hawa-w-3 hawa-rounded-full hawa-bg-red-500" })
+    !props.end && props.shortcut && /* @__PURE__ */ React7.createElement(DropdownMenuShortcut, null, props.shortcut),
+    !props.end && badged && /* @__PURE__ */ React7.createElement("div", { className: "hawa-h-3 hawa-w-3 hawa-rounded-full hawa-bg-red-500" })
   ));
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React6.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+var DropdownMenuCheckboxItem = React7.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ React7.createElement(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -565,7 +701,7 @@ var DropdownMenuCheckboxItem = React6.forwardRef(({ className, children, checked
     checked,
     ...props
   },
-  /* @__PURE__ */ React6.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React6.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React6.createElement(
+  /* @__PURE__ */ React7.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React7.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React7.createElement(
     "svg",
     {
       "aria-label": "Check Mark",
@@ -576,12 +712,12 @@ var DropdownMenuCheckboxItem = React6.forwardRef(({ className, children, checked
       height: "0.60em",
       width: "0.60em"
     },
-    /* @__PURE__ */ React6.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
+    /* @__PURE__ */ React7.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
   ), " ")),
   children
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+var DropdownMenuRadioItem = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React7.createElement(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -591,7 +727,7 @@ var DropdownMenuRadioItem = React6.forwardRef(({ className, children, ...props }
     ),
     ...props
   },
-  /* @__PURE__ */ React6.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React6.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React6.createElement(
+  /* @__PURE__ */ React7.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React7.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React7.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -606,12 +742,12 @@ var DropdownMenuRadioItem = React6.forwardRef(({ className, children, ...props }
       strokeLinejoin: "round",
       className: "hawa-h-2 hawa-w-2 hawa-fill-current"
     },
-    /* @__PURE__ */ React6.createElement("circle", { cx: "12", cy: "12", r: "10" })
+    /* @__PURE__ */ React7.createElement("circle", { cx: "12", cy: "12", r: "10" })
   ))),
   children
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React6.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+var DropdownMenuLabel = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React7.createElement(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -624,7 +760,7 @@ var DropdownMenuLabel = React6.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+var DropdownMenuSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React7.createElement(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -637,7 +773,7 @@ var DropdownMenuShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     "span",
     {
       className: cn(
@@ -679,10 +815,10 @@ var DropdownMenu = ({
     default: "hawa-px-2 hawa-py-3 ",
     sm: "hawa-text-xs hawa-px-1.5 hawa-py-1.5 "
   };
-  let [values, setValues] = React6.useState(
+  let [values, setValues] = React7.useState(
     items.map((item) => item.currentOption)
   );
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     DropdownMenuRoot,
     {
       onOpenChange,
@@ -690,7 +826,7 @@ var DropdownMenu = ({
       modal: false,
       dir: direction
     },
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(
       DropdownMenuTrigger,
       {
         asChild: true,
@@ -699,7 +835,7 @@ var DropdownMenu = ({
       },
       trigger
     ),
-    /* @__PURE__ */ React6.createElement(Portal, null, /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(Portal, null, /* @__PURE__ */ React7.createElement(
       DropdownMenuContent,
       {
         side,
@@ -721,7 +857,7 @@ var DropdownMenu = ({
         var _a;
         const ItemLinkComponent = item.slug ? LinkComponent : "a";
         if (item.itemType === "separator") {
-          return /* @__PURE__ */ React6.createElement(
+          return /* @__PURE__ */ React7.createElement(
             DropdownMenuSeparator,
             {
               key: index,
@@ -729,10 +865,10 @@ var DropdownMenu = ({
             }
           );
         } else if (item.itemType === "label") {
-          return /* @__PURE__ */ React6.createElement(DropdownMenuLabel, { key: index }, item.label);
+          return /* @__PURE__ */ React7.createElement(DropdownMenuLabel, { key: index }, item.label);
         } else if (item.itemType === "radio") {
           let dd = item.currentOption;
-          return /* @__PURE__ */ React6.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React6.createElement(
+          return /* @__PURE__ */ React7.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React7.createElement(
             DropdownMenuSubTrigger,
             {
               dir: direction,
@@ -740,7 +876,7 @@ var DropdownMenu = ({
             },
             item.icon && item.icon,
             item.label && item.label
-          ), /* @__PURE__ */ React6.createElement(DropdownMenuSubContent, null, /* @__PURE__ */ React6.createElement(
+          ), /* @__PURE__ */ React7.createElement(DropdownMenuSubContent, null, /* @__PURE__ */ React7.createElement(
             DropdownMenuRadioGroup,
             {
               value: values[index],
@@ -754,12 +890,12 @@ var DropdownMenu = ({
                 }
               }
             },
-            (_a = item.options) == null ? void 0 : _a.map((opt, i) => /* @__PURE__ */ React6.createElement(DropdownMenuRadioItem, { key: i, value: opt.value }, opt.label))
+            (_a = item.options) == null ? void 0 : _a.map((opt, i) => /* @__PURE__ */ React7.createElement(DropdownMenuRadioItem, { key: i, value: opt.value }, opt.label))
           )));
         } else if (item.itemType === "custom") {
-          return /* @__PURE__ */ React6.createElement("div", { key: index }, item.content);
+          return /* @__PURE__ */ React7.createElement("div", { key: index }, item.content);
         } else {
-          return item.subitems ? /* @__PURE__ */ React6.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React6.createElement(
+          return item.subitems ? /* @__PURE__ */ React7.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React7.createElement(
             DropdownMenuSubTrigger,
             {
               dir: direction,
@@ -767,9 +903,9 @@ var DropdownMenu = ({
             },
             item.icon && item.icon,
             item.label && item.label
-          ), /* @__PURE__ */ React6.createElement(Portal, null, /* @__PURE__ */ React6.createElement(DropdownMenuSubContent, null, item.subitems.map((subitem, subIndex) => {
+          ), /* @__PURE__ */ React7.createElement(Portal, null, /* @__PURE__ */ React7.createElement(DropdownMenuSubContent, null, item.subitems.map((subitem, subIndex) => {
             const SubitemLinkComponent = subitem.slug ? LinkComponent : "a";
-            return /* @__PURE__ */ React6.createElement(
+            return /* @__PURE__ */ React7.createElement(
               DropdownMenuItem,
               {
                 key: subIndex,
@@ -798,7 +934,7 @@ var DropdownMenu = ({
               subitem.icon && subitem.icon,
               subitem.label && subitem.label
             );
-          })))) : /* @__PURE__ */ React6.createElement(
+          })))) : /* @__PURE__ */ React7.createElement(
             DropdownMenuItem,
             {
               LinkComponent: ItemLinkComponent,
@@ -853,10 +989,10 @@ var DropdownMenu = ({
 };
 
 // elements/input/Input.tsx
-import React8, { forwardRef as forwardRef4 } from "react";
+import React9, { forwardRef as forwardRef5 } from "react";
 
 // elements/skeleton/Skeleton.tsx
-import React7 from "react";
+import React8 from "react";
 function Skeleton({
   className,
   content,
@@ -875,7 +1011,7 @@ function Skeleton({
     right: "hawa-mask-fade-right",
     left: "hawa-mask-fade-left "
   };
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(
     "div",
     {
       className: cn(
@@ -891,7 +1027,7 @@ function Skeleton({
 }
 
 // elements/input/Input.tsx
-var Input = forwardRef4(
+var Input = forwardRef5(
   ({
     margin = "none",
     width = "full",
@@ -935,7 +1071,7 @@ var Input = forwardRef4(
         props.onChange(newEvent);
       }
     };
-    return /* @__PURE__ */ React8.createElement(
+    return /* @__PURE__ */ React9.createElement(
       "div",
       {
         className: cn(
@@ -946,8 +1082,8 @@ var Input = forwardRef4(
           "hawa-w-full hawa-gap-2"
         )
       },
-      props.label && /* @__PURE__ */ React8.createElement(Label, { ...labelProps }, props.label),
-      /* @__PURE__ */ React8.createElement("div", { className: "hawa-flex hawa-flex-row hawa-w-full hawa-items-center " }, props.outsidePrefix && /* @__PURE__ */ React8.createElement(
+      props.label && /* @__PURE__ */ React9.createElement(Label, { ...labelProps }, props.label),
+      /* @__PURE__ */ React9.createElement("div", { className: "hawa-flex hawa-flex-row hawa-w-full hawa-items-center " }, props.outsidePrefix && /* @__PURE__ */ React9.createElement(
         "span",
         {
           className: cn(
@@ -956,12 +1092,12 @@ var Input = forwardRef4(
           )
         },
         props.outsidePrefix
-      ), props.isLoading ? /* @__PURE__ */ React8.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ React8.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : props.isLoadingError ? /* @__PURE__ */ React8.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ React8.createElement(
+      ), props.isLoading ? /* @__PURE__ */ React9.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ React9.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : props.isLoadingError ? /* @__PURE__ */ React9.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ React9.createElement(
         Skeleton,
         {
           animation: "none",
           className: "hawa-h-[40px] hawa-w-full !hawa-bg-destructive/[0.3]",
-          content: /* @__PURE__ */ React8.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ React8.createElement(
+          content: /* @__PURE__ */ React9.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ React9.createElement(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -975,12 +1111,12 @@ var Input = forwardRef4(
               strokeLinejoin: "round",
               className: "hawa-text-destructive"
             },
-            /* @__PURE__ */ React8.createElement("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
-            /* @__PURE__ */ React8.createElement("path", { d: "M12 9v4" }),
-            /* @__PURE__ */ React8.createElement("path", { d: "M12 17h.01" })
-          ), /* @__PURE__ */ React8.createElement("span", null, /* @__PURE__ */ React8.createElement("span", { className: "hawa-text-destructive" }, props.loadingErrorMesssage || "Error loading data")))
+            /* @__PURE__ */ React9.createElement("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+            /* @__PURE__ */ React9.createElement("path", { d: "M12 9v4" }),
+            /* @__PURE__ */ React9.createElement("path", { d: "M12 17h.01" })
+          ), /* @__PURE__ */ React9.createElement("span", null, /* @__PURE__ */ React9.createElement("span", { className: "hawa-text-destructive" }, props.loadingErrorMesssage || "Error loading data")))
         }
-      )) : /* @__PURE__ */ React8.createElement(React8.Fragment, null, !props.hideSeparator && /* @__PURE__ */ React8.createElement(
+      )) : /* @__PURE__ */ React9.createElement(React9.Fragment, null, !props.hideSeparator && /* @__PURE__ */ React9.createElement(
         "div",
         {
           className: cn(
@@ -988,7 +1124,7 @@ var Input = forwardRef4(
             preview ? "hawa-opacity-100" : "hawa-opacity-0"
           )
         }
-      ), /* @__PURE__ */ React8.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, /* @__PURE__ */ React8.createElement("div", { className: "hawa-relative" }, props.startIcon && /* @__PURE__ */ React8.createElement("div", { className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.startIcon), props.endIcon && /* @__PURE__ */ React8.createElement(
+      ), /* @__PURE__ */ React9.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, /* @__PURE__ */ React9.createElement("div", { className: "hawa-relative" }, props.startIcon && /* @__PURE__ */ React9.createElement("div", { className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.startIcon), props.endIcon && /* @__PURE__ */ React9.createElement(
         "div",
         {
           className: cn(
@@ -997,7 +1133,7 @@ var Input = forwardRef4(
           )
         },
         props.endIcon
-      ), /* @__PURE__ */ React8.createElement(
+      ), /* @__PURE__ */ React9.createElement(
         "input",
         {
           required: true,
@@ -1023,7 +1159,7 @@ var Input = forwardRef4(
             inputProps == null ? void 0 : inputProps.className
           )
         }
-      )), !forceHideHelperText && /* @__PURE__ */ React8.createElement(HelperText, { helperText: props.helperText }), !props.disabled && forceHideHelperText && /* @__PURE__ */ React8.createElement(
+      )), !forceHideHelperText && /* @__PURE__ */ React9.createElement(HelperText, { helperText: props.helperText }), !props.disabled && forceHideHelperText && /* @__PURE__ */ React9.createElement(
         "div",
         {
           className: cn(
@@ -1032,7 +1168,7 @@ var Input = forwardRef4(
           )
         },
         props.helperText
-      ), showCount && /* @__PURE__ */ React8.createElement(
+      ), showCount && /* @__PURE__ */ React9.createElement(
         "div",
         {
           className: cn(
@@ -1053,8 +1189,8 @@ var Input = forwardRef4(
 );
 
 // 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(
+import * as React10 from "react";
+var Table = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React10.createElement("div", { className: "hawa-relative hawa-w-full hawa-overflow-auto hawa-rounded hawa-border" }, /* @__PURE__ */ React10.createElement(
   "table",
   {
     ref,
@@ -1062,7 +1198,7 @@ var Table = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
     ...props
   }
 )));
-var TableHeader = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement(
+var TableHeader = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React10.createElement(
   "thead",
   {
     ref,
@@ -1070,18 +1206,18 @@ var TableHeader = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
     ...props
   }
 ));
-var TableHead = React9.forwardRef(
-  ({ className, condensed, clickable, dir, ...props }, ref) => /* @__PURE__ */ React9.createElement(
+var TableHead = React10.forwardRef(
+  ({ className, condensed, clickable, dir, ...props }, ref) => /* @__PURE__ */ React10.createElement(
     "th",
     {
       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
       ),
@@ -1089,8 +1225,8 @@ var TableHead = React9.forwardRef(
     }
   )
 );
-var TableBody = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement("tbody", { ref, className: cn("hawa-border-none", className), ...props }));
-var TableFooter = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement(
+var TableBody = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React10.createElement("tbody", { ref, className: cn("hawa-border-none", className), ...props }));
+var TableFooter = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React10.createElement(
   "tfoot",
   {
     ref,
@@ -1101,7 +1237,7 @@ var TableFooter = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
     ...props
   }
 ));
-var TableRow = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement(
+var TableRow = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React10.createElement(
   "tr",
   {
     ref,
@@ -1114,14 +1250,14 @@ var TableRow = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__
     ...props
   }
 ));
-var TableCell = React9.forwardRef(
+var TableCell = React10.forwardRef(
   ({ className, enablePadding = true, padding = "default", ...props }, ref) => {
     let paddingStyles = {
       condensed: "hawa-p-0 hawa-px-4",
       default: "hawa-p-4",
       noPadding: "hawa-p-0"
     };
-    return /* @__PURE__ */ React9.createElement(
+    return /* @__PURE__ */ React10.createElement(
       "td",
       {
         ref,
@@ -1131,7 +1267,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",
@@ -1142,7 +1278,7 @@ var TableCell = React9.forwardRef(
     );
   }
 );
-var TableCaption = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement(
+var TableCaption = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React10.createElement(
   "caption",
   {
     ref,
@@ -1170,27 +1306,61 @@ var DataTable = ({
   paginationPosition = "bottom",
   translateFn,
   enableHideColumns,
+  enableSelection,
   enableSearch,
   enableGoTo,
   ...props
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-  const [sorting, setSorting] = React10.useState(
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  const [sorting, setSorting] = React11.useState(
     props.defaultSort ? [{ id: props.defaultSort, desc: false }] : []
   );
-  const [columnFilters, setColumnFilters] = React10.useState(
+  const [columnFilters, setColumnFilters] = React11.useState(
     []
   );
-  const [globalFilter, setGlobalFilter] = React10.useState("");
-  const [expanded, setExpanded] = React10.useState({});
-  const [columnVisibility, setColumnVisibility] = React10.useState(() => {
+  const [globalFilter, setGlobalFilter] = React11.useState("");
+  const [expanded, setExpanded] = React11.useState({});
+  const [columnVisibility, setColumnVisibility] = React11.useState(() => {
     const savedVisibility = localStorage.getItem(LOCAL_STORAGE_KEY);
     return savedVisibility ? JSON.parse(savedVisibility) : {};
   });
-  const [rowSelection, setRowSelection] = React10.useState({});
+  const [rowSelection, setRowSelection] = React11.useState({});
+  let mainColumns = enableSelection ? [
+    {
+      id: "select",
+      maxSize: 16,
+      minSize: 16,
+      size: 16,
+      header: ({ table: table2 }) => /* @__PURE__ */ React11.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__ */ React11.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,
@@ -1216,10 +1386,10 @@ var DataTable = ({
     label: `${item} / ${pageText}`,
     value: item
   }));
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(columnVisibility));
   }, [columnVisibility]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     setColumnVisibility((prev) => {
       let newColumnVisibility = {};
       columns.forEach((column) => {
@@ -1234,7 +1404,7 @@ var DataTable = ({
       return newColumnVisibility;
     });
   }, [columns]);
-  return /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-4" }, (enableSearch || enableHideColumns) && /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-4" }, enableSearch && /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-4" }, (enableSearch || enableHideColumns) && /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-4" }, enableSearch && /* @__PURE__ */ React11.createElement(
     Input,
     {
       inputProps: { title: "" },
@@ -1245,7 +1415,7 @@ var DataTable = ({
       margin: "none",
       className: "hawa-w-full md:hawa-max-w-sm",
       endIconProps: { className: "!hawa-end-2" },
-      endIcon: globalFilter ? /* @__PURE__ */ React10.createElement(
+      endIcon: globalFilter ? /* @__PURE__ */ React11.createElement(
         Button,
         {
           onClick: () => setGlobalFilter(""),
@@ -1253,7 +1423,7 @@ var DataTable = ({
           size: "smallIcon",
           "aria-label": "Clear Search"
         },
-        /* @__PURE__ */ React10.createElement(
+        /* @__PURE__ */ React11.createElement(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -1267,43 +1437,45 @@ var DataTable = ({
             strokeLinejoin: "round",
             className: "hawa-icon hawa-text-muted-foreground"
           },
-          /* @__PURE__ */ React10.createElement("path", { d: "M18 6 6 18" }),
-          /* @__PURE__ */ React10.createElement("path", { d: "m6 6 12 12" })
+          /* @__PURE__ */ React11.createElement("path", { d: "M18 6 6 18" }),
+          /* @__PURE__ */ React11.createElement("path", { d: "m6 6 12 12" })
         )
       ) : null
     }
-  ), enableHideColumns && /* @__PURE__ */ React10.createElement(DropdownMenuRoot, null, /* @__PURE__ */ React10.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React10.createElement(
+  ), enableHideColumns && /* @__PURE__ */ React11.createElement(DropdownMenuRoot, null, /* @__PURE__ */ React11.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React11.createElement(
     Button,
     {
       variant: "outline",
       className: "hawa-flex hawa-flex-row hawa-gap-2"
     },
     ((_d = props.texts) == null ? void 0 : _d.columns) || "Columns",
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React11.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__ */ React11.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(
+  )), /* @__PURE__ */ React11.createElement(
     DropdownMenuContent,
     {
       align: props.direction === "rtl" ? "start" : "end"
     },
     table.getAllColumns().filter((column) => column.getCanHide()).map((column) => {
       var _a2, _b2;
-      return /* @__PURE__ */ React10.createElement(
+      return /* @__PURE__ */ React11.createElement(
         DropdownMenuCheckboxItem,
         {
           key: column.id,
@@ -1315,26 +1487,28 @@ var DataTable = ({
         ) : column.id
       );
     })
-  ))), props.isLoading ? /* @__PURE__ */ React10.createElement(Skeleton, { className: "hawa-h-[130px] hawa-w-full" }) : /* @__PURE__ */ React10.createElement(
+  ))), props.isLoading ? /* @__PURE__ */ React11.createElement(Skeleton, { className: "hawa-h-[130px] hawa-w-full" }) : /* @__PURE__ */ React11.createElement(
     "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"
       )
     },
-    /* @__PURE__ */ React10.createElement("div", { className: "hawa-rounded-md" }, /* @__PURE__ */ React10.createElement(Table, null, !props.hideHeader && table.getAllColumns().length > 0 && /* @__PURE__ */ React10.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React10.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
+    /* @__PURE__ */ React11.createElement("div", { className: "hawa-rounded-md" }, /* @__PURE__ */ React11.createElement(Table, null, !props.hideHeader && table.getAllColumns().length > 0 && /* @__PURE__ */ React11.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React11.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
       var _a2;
       let isSortable = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.sortable;
-      return /* @__PURE__ */ React10.createElement(
+      return /* @__PURE__ */ React11.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(
@@ -1342,7 +1516,7 @@ var DataTable = ({
           header.getContext()
         )
       );
-    })))), /* @__PURE__ */ React10.createElement(TableBody, null, ((_e = table.getRowModel().rows) == null ? void 0 : _e.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React10.createElement(
+    })))), /* @__PURE__ */ React11.createElement(TableBody, null, ((_e = table.getRowModel().rows) == null ? void 0 : _e.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React11.createElement(
       TableRow,
       {
         key: row.id,
@@ -1350,15 +1524,17 @@ var DataTable = ({
       },
       row.getVisibleCells().map((cell) => {
         var _a2;
-        return /* @__PURE__ */ React10.createElement(
+        return /* @__PURE__ */ React11.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,
@@ -1366,7 +1542,7 @@ var DataTable = ({
           )
         );
       })
-    )) : /* @__PURE__ */ React10.createElement(TableRow, null, /* @__PURE__ */ React10.createElement(
+    )) : /* @__PURE__ */ React11.createElement(TableRow, null, /* @__PURE__ */ React11.createElement(
       TableCell,
       {
         colSpan: columns.length,
@@ -1374,169 +1550,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__ */ React11.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__ */ React11.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__ */ React11.createElement("div", { className: "hawa-flex hawa-flex-row hawa-h-auto hawa-gap-4" }, /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-flex-row hawa-h-auto hawa-items-center hawa-justify-between" }, props.showCount && /* @__PURE__ */ React11.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__ */ React11.createElement("span", null, (_g = props.texts) == null ? void 0 : _g.total),
+        " ",
+        /* @__PURE__ */ React11.createElement("span", null, table.getFilteredRowModel().rows.length.toLocaleString())
+      ), props.showCount && table.getFilteredSelectedRowModel().rows.length > 0 && props.showSelectionCount && /* @__PURE__ */ React11.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__ */ React11.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__ */ React11.createElement("div", { className: "" }, /* @__PURE__ */ React11.createElement(
+        DropdownMenu,
+        {
+          size: "sm",
+          width: "sm",
+          direction: props.direction,
+          items: (props.bulkActions || []).map((action) => ({
+            ...action,
+            action: () => action.action(
+              table.getFilteredSelectedRowModel().rows
+            )
+          })),
+          trigger: /* @__PURE__ */ React11.createElement(Button, { size: "xs" }, ((_j = props.texts) == null ? void 0 : _j.bulkAction) || "Bulk Action")
+        }
+      ))) : null,
+      /* @__PURE__ */ React11.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__ */ React11.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2" }, /* @__PURE__ */ React11.createElement("span", { className: "hawa-text-sm" }, (_k = props.texts) == null ? void 0 : _k.goTo), /* @__PURE__ */ React11.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__ */ React11.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__ */ React11.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__ */ React11.createElement("div", { className: "hawa-bg--500 hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-bg--500 hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm" }, /* @__PURE__ */ React11.createElement("span", { className: "hawa-flex hawa-items-center hawa-gap-1" }, /* @__PURE__ */ React11.createElement("div", null, (_m = props.texts) == null ? void 0 : _m.page), /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-1" }, /* @__PURE__ */ React11.createElement("span", { className: "hawa-font-bold" }, table.getState().pagination.pageIndex + 1), /* @__PURE__ */ React11.createElement("span", null, (_n = props.texts) == null ? void 0 : _n.of), /* @__PURE__ */ React11.createElement("span", { className: "hawa-font-bold" }, table.getPageCount())))), /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2 hawa-items-center hawa-bg--500" }, /* @__PURE__ */ React11.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__ */ React11.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__ */ React11.createElement("path", { d: "m11 17-5-5 5-5" }),
+          /* @__PURE__ */ React11.createElement("path", { d: "m18 17-5-5 5-5" })
         )
-      },
-      /* @__PURE__ */ React10.createElement(
-        "svg",
+      ), /* @__PURE__ */ React11.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__ */ React11.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__ */ React11.createElement("path", { d: "m15 18-6-6 6-6" })
         )
-      },
-      /* @__PURE__ */ React10.createElement(
-        "svg",
+      ), /* @__PURE__ */ React11.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__ */ React11.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__ */ React11.createElement("path", { d: "m15 18-6-6 6-6" })
         )
-      },
-      /* @__PURE__ */ React10.createElement(
-        "svg",
+      ), /* @__PURE__ */ React11.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__ */ React11.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__ */ React11.createElement("path", { d: "m11 17-5-5 5-5" }),
+          /* @__PURE__ */ React11.createElement("path", { d: "m18 17-5-5 5-5" })
+        )
+      ))))
+    )
   ));
 };
 export {