@sikka/hawa 0.40.1-next → 0.41.1-next

package/dist/dataTable/index.js

@@ -36,7 +36,7 @@ __export(dataTable_exports, {
 module.exports = __toCommonJS(dataTable_exports);
 
 // elements/dataTable/DataTable.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_react_table = require("@tanstack/react-table");
 
 // util/index.ts
@@ -492,15 +492,151 @@ var Button = React5.forwardRef(
 );
 Button.displayName = "Button";
 
-// elements/dropdownMenu/DropdownMenu.tsx
+// elements/checkbox/Checkbox.tsx
 var React6 = __toESM(require("react"));
+var CheckboxPrimitive = __toESM(require("@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
+var React7 = __toESM(require("react"));
 var import_react4 = require("@headlessui/react");
 var DropdownMenuPrimitive = __toESM(require("@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,
@@ -511,9 +647,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",
@@ -525,7 +661,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",
@@ -535,7 +671,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,
@@ -547,21 +683,21 @@ var DropdownMenuSubContent = React6.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React6.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React6.createElement(import_react4.Portal, null, /* @__PURE__ */ React6.createElement(
+var DropdownMenuContent = React7.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React7.createElement(import_react4.Portal, null, /* @__PURE__ */ React7.createElement(
   DropdownMenuPrimitive.Content,
   {
     ref,
     sideOffset,
     className: cn(
-      "hawa-z-50  hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-p-1 hawa-text-popover-foreground hawa-shadow-md data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
+      "hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-p-1 hawa-text-popover-foreground hawa-shadow-md data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
       className
     ),
     ...props
   }
 )));
 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,
@@ -574,14 +710,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,
@@ -592,7 +728,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",
@@ -603,12 +739,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,
@@ -618,7 +754,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",
@@ -633,12 +769,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,
@@ -651,7 +787,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,
@@ -664,7 +800,7 @@ var DropdownMenuShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     "span",
     {
       className: cn(
@@ -706,10 +842,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,
@@ -717,7 +853,7 @@ var DropdownMenu = ({
       modal: false,
       dir: direction
     },
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(
       DropdownMenuTrigger,
       {
         asChild: true,
@@ -726,7 +862,7 @@ var DropdownMenu = ({
       },
       trigger
     ),
-    /* @__PURE__ */ React6.createElement(import_react4.Portal, null, /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(import_react4.Portal, null, /* @__PURE__ */ React7.createElement(
       DropdownMenuContent,
       {
         side,
@@ -748,7 +884,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,
@@ -756,10 +892,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,
@@ -767,7 +903,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],
@@ -781,12 +917,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,
@@ -794,9 +930,9 @@ var DropdownMenu = ({
             },
             item.icon && item.icon,
             item.label && item.label
-          ), /* @__PURE__ */ React6.createElement(import_react4.Portal, null, /* @__PURE__ */ React6.createElement(DropdownMenuSubContent, null, item.subitems.map((subitem, subIndex) => {
+          ), /* @__PURE__ */ React7.createElement(import_react4.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,
@@ -825,7 +961,7 @@ var DropdownMenu = ({
               subitem.icon && subitem.icon,
               subitem.label && subitem.label
             );
-          })))) : /* @__PURE__ */ React6.createElement(
+          })))) : /* @__PURE__ */ React7.createElement(
             DropdownMenuItem,
             {
               LinkComponent: ItemLinkComponent,
@@ -865,7 +1001,7 @@ var DropdownMenu = ({
               badged: item.badged,
               className: cn(
                 sizeStyles[size],
-                !item.icon && !item.label ? "hawa-px-0 hawa-py-0 focus:hawa-bg-transparent " : "focus:hawa-bg-accent ",
+                !item.icon && !item.label ? "hawa-px-0 hawa-py-0 focus:hawa-bg-transparent" : "focus:hawa-bg-accent",
                 item.presist && "focus:hawa-bg-transparent",
                 classNames == null ? void 0 : classNames.item
               )
@@ -974,7 +1110,7 @@ var Input = (0, import_react6.forwardRef)(
         )
       },
       props.label && /* @__PURE__ */ import_react6.default.createElement(Label, { ...labelProps }, props.label),
-      /* @__PURE__ */ import_react6.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-w-full hawa-items-center " }, props.outsidePrefix && /* @__PURE__ */ import_react6.default.createElement(
+      /* @__PURE__ */ import_react6.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-w-full hawa-items-center" }, props.outsidePrefix && /* @__PURE__ */ import_react6.default.createElement(
         "span",
         {
           className: cn(
@@ -1040,7 +1176,7 @@ var Input = (0, import_react6.forwardRef)(
           ...inputProps,
           className: cn(
             defaultInputStyle,
-            " focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 dark:hawa-text-white",
+            "focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 dark:hawa-text-white",
             {
               "hawa-pe-9": props.endIcon,
               "hawa-ps-9": props.startIcon,
@@ -1054,7 +1190,7 @@ var Input = (0, import_react6.forwardRef)(
         "div",
         {
           className: cn(
-            "hawa-absolute hawa-end-0 hawa-top-[47px] hawa-z-20 hawa-translate-y-1/2 hawa-rounded hawa-bg-background hawa-text-start  hawa-text-xs hawa-text-helper-color hawa-drop-shadow-md hawa-transition-all",
+            "hawa-absolute hawa-end-0 hawa-top-[47px] hawa-z-20 hawa-translate-y-1/2 hawa-rounded hawa-bg-background hawa-text-start hawa-text-xs hawa-text-helper-color hawa-drop-shadow-md hawa-transition-all",
             props.helperText ? "hawa-border hawa-p-1" : "hawa-border-none hawa-p-0"
           )
         },
@@ -1080,8 +1216,8 @@ var Input = (0, import_react6.forwardRef)(
 );
 
 // elements/table/Table.tsx
-var React9 = __toESM(require("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 React10 = __toESM(require("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,
@@ -1089,7 +1225,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,
@@ -1097,18 +1233,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
       ),
@@ -1116,8 +1252,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,
@@ -1128,7 +1264,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,
@@ -1141,14 +1277,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,
@@ -1158,7 +1294,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",
@@ -1169,7 +1305,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,
@@ -1197,27 +1333,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 = (0, import_react_table.useReactTable)({
     data,
-    columns,
+    columns: mainColumns,
     onExpandedChange: setExpanded,
     getExpandedRowModel: (0, import_react_table.getExpandedRowModel)(),
     onGlobalFilterChange: setGlobalFilter,
@@ -1243,10 +1413,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) => {
@@ -1261,7 +1431,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: "" },
@@ -1272,7 +1442,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(""),
@@ -1280,7 +1450,7 @@ var DataTable = ({
           size: "smallIcon",
           "aria-label": "Clear Search"
         },
-        /* @__PURE__ */ React10.createElement(
+        /* @__PURE__ */ React11.createElement(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -1294,43 +1464,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,
@@ -1342,26 +1514,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 : (0, import_react_table.flexRender)(
@@ -1369,7 +1543,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,
@@ -1377,15 +1551,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
           },
           (0, import_react_table.flexRender)(
             cell.column.columnDef.cell,
@@ -1393,7 +1569,7 @@ var DataTable = ({
           )
         );
       })
-    )) : /* @__PURE__ */ React10.createElement(TableRow, null, /* @__PURE__ */ React10.createElement(
+    )) : /* @__PURE__ */ React11.createElement(TableRow, null, /* @__PURE__ */ React11.createElement(
       TableCell,
       {
         colSpan: columns.length,
@@ -1401,169 +1577,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" })
+        )
+      ))))
+    )
   ));
 };
 // Annotate the CommonJS export names for ESM import in node: