@sikka/hawa 0.1.103 → 0.1.105

package/dist/index.d.mts

@@ -214,6 +214,7 @@ type ColTypes = {
 };
 type TableTypes = {
     pagination?: boolean;
+    isLoading?: boolean;
     columns: ColTypes[];
     actions?: MenuItemType[];
     actionsWidth?: "default" | "sm" | "lg" | "parent";
@@ -598,6 +599,7 @@ type StepTypes = {
 declare const Timeline: FC<TimelineTypes>;
 
 type TextFieldTypes = {
+    isLoading?: boolean;
     margin?: "none" | "normal" | "large";
     width?: "small" | "normal" | "full";
     /** The label of the input field   */
@@ -1301,6 +1303,7 @@ declare const SignUpForm: FC<SignUpFormTypes>;
 type NewPasswordTypes = {
     handleNewPassword: () => void;
     direction?: "rtl" | "ltr";
+    headless?: boolean;
     passwordChanged: any;
     texts: {
         passwordPlaceholder: string;

package/dist/index.d.ts

@@ -214,6 +214,7 @@ type ColTypes = {
 };
 type TableTypes = {
     pagination?: boolean;
+    isLoading?: boolean;
     columns: ColTypes[];
     actions?: MenuItemType[];
     actionsWidth?: "default" | "sm" | "lg" | "parent";
@@ -598,6 +599,7 @@ type StepTypes = {
 declare const Timeline: FC<TimelineTypes>;
 
 type TextFieldTypes = {
+    isLoading?: boolean;
     margin?: "none" | "normal" | "large";
     width?: "small" | "normal" | "full";
     /** The label of the input field   */
@@ -1301,6 +1303,7 @@ declare const SignUpForm: FC<SignUpFormTypes>;
 type NewPasswordTypes = {
     handleNewPassword: () => void;
     direction?: "rtl" | "ltr";
+    headless?: boolean;
     passwordChanged: any;
     texts: {
         passwordPlaceholder: string;

package/dist/index.js

@@ -216,10 +216,10 @@ function _optionalChain(ops) {
 } // src/elements/HawaCheckbox.tsx
 var _react = require("react");
 var React6 = _interopRequireWildcard(_react);
-var React12 = _interopRequireWildcard(_react);
-var React16 = _interopRequireWildcard(_react);
-var React19 = _interopRequireWildcard(_react);
-var React29 = _interopRequireWildcard(_react);
+var React13 = _interopRequireWildcard(_react);
+var React17 = _interopRequireWildcard(_react);
+var React20 = _interopRequireWildcard(_react);
+var React30 = _interopRequireWildcard(_react);
 var React58 = _interopRequireWildcard(_react);
 var React61 = _interopRequireWildcard(_react);
 var React63 = _interopRequireWildcard(_react);
@@ -354,6 +354,15 @@ var Label = React6.forwardRef(function(_param, ref) /* @__PURE__ */ {
     }, props));
 });
 Label.displayName = LabelPrimitive.Root.displayName;
+// src/elements/Skeleton.tsx
+function Skeleton(_param) {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    return /* @__PURE__ */ React6.default.createElement("div", _object_spread({
+        className: cn("animate-pulse rounded-md bg-muted", className)
+    }, props));
+}
 // src/elements/HawaTextField.tsx
 var HawaTextField = function(_param) {
     var _param_margin = _param.margin, margin = _param_margin === void 0 ? "normal" : _param_margin, _param_width = _param.width, width = _param_width === void 0 ? "full" : _param_width, _param_preview = _param.preview, preview = _param_preview === void 0 ? false : _param_preview, props = _object_without_properties(_param, [
@@ -376,7 +385,9 @@ var HawaTextField = function(_param) {
     var previewInputStyle = "block w-full rounded bg-gray-50 p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500";
     return /* @__PURE__ */ React6.default.createElement("div", {
         className: cn(defaultStyle, marginStyles[margin], widthStyles2[width])
-    }, props.label && /* @__PURE__ */ React6.default.createElement(Label, null, props.label), /* @__PURE__ */ React6.default.createElement("div", {
+    }, props.label && /* @__PURE__ */ React6.default.createElement(Label, null, props.label), props.isLoading ? /* @__PURE__ */ React6.default.createElement(Skeleton, {
+        className: "h-[38px] w-full"
+    }) : /* @__PURE__ */ React6.default.createElement(React6.default.Fragment, null, /* @__PURE__ */ React6.default.createElement("div", {
         className: cn("absolute top-[22px] h-[0.8px] w-full bg-gray-200 transition-all dark:bg-gray-800", preview ? "opacity-100" : "opacity-0")
     }), /* @__PURE__ */ React6.default.createElement(React6.default.Fragment, null, /* @__PURE__ */ React6.default.createElement("div", {
         className: cn("relative")
@@ -389,7 +400,7 @@ var HawaTextField = function(_param) {
         className: "absolute right-1 top-[41px]  -translate-y-1/2"
     }, props.iconInside), props.helpertext ? /* @__PURE__ */ React6.default.createElement("p", {
         className: "mb-0 mt-0 text-xs text-red-600 dark:text-red-500"
-    }, props.helpertext) : null));
+    }, props.helpertext) : null)));
 };
 // src/elements/HawaColorPicker.tsx
 var HawaColorPicker = function(props) {
@@ -749,30 +760,30 @@ var thumbSize = {
     default: "h-[21px] w-[21px]",
     sm: "h-[16px] w-[16px]"
 };
-var Switch = React12.forwardRef(function(_param, ref) {
+var Switch = React13.forwardRef(function(_param, ref) {
     var className = _param.className, _param_size = _param.size, size = _param_size === void 0 ? "default" : _param_size, label = _param.label, props = _object_without_properties(_param, [
         "className",
         "size",
         "label"
     ]);
-    var _React12_useState = _sliced_to_array(React12.useState(null), 2), parentDirection = _React12_useState[0], setParentDirection = _React12_useState[1];
-    var parentRef = React12.useRef(null);
-    React12.useEffect(function() {
+    var _React13_useState = _sliced_to_array(React13.useState(null), 2), parentDirection = _React13_useState[0], setParentDirection = _React13_useState[1];
+    var parentRef = React13.useRef(null);
+    React13.useEffect(function() {
         if (parentRef.current && parentRef.current.parentNode) {
             var dir = window.getComputedStyle(parentRef.current.parentNode).direction;
             setParentDirection(dir);
         }
     });
-    return /* @__PURE__ */ React12.createElement("div", {
+    return /* @__PURE__ */ React13.createElement("div", {
         className: "flex flex-row items-center",
         ref: parentRef
-    }, /* @__PURE__ */ React12.createElement(SwitchPrimitives.Root, _object_spread_props(_object_spread({
+    }, /* @__PURE__ */ React13.createElement(SwitchPrimitives.Root, _object_spread_props(_object_spread({
         className: cn("relative  cursor-pointer rounded-full bg-primary/20 outline-none data-[state=checked]:bg-primary", className, rootSize[size])
     }, props), {
         ref: ref
-    }), /* @__PURE__ */ React12.createElement(SwitchPrimitives.Thumb, {
+    }), /* @__PURE__ */ React13.createElement(SwitchPrimitives.Thumb, {
         className: cn(thumbSize[size], "block   rounded-full bg-white transition-transform  duration-100 will-change-transform data-[state=checked]:bg-primary-foreground  dark:bg-background", parentDirection === "rtl" ? "-translate-x-0.5 data-[state=checked]:-translate-x-[19px]" : "translate-x-0.5 data-[state=checked]:translate-x-[19px]")
-    })), label && /* @__PURE__ */ React12.createElement("span", {
+    })), label && /* @__PURE__ */ React13.createElement("span", {
         className: "mx-2 text-sm font-medium text-gray-900 dark:text-gray-300"
     }, label));
 });
@@ -873,7 +884,7 @@ var buttonVariants = _classvarianceauthority.cva.call(void 0, "inline-flex items
         size: "default"
     }
 });
-var Button = React16.forwardRef(function(_param, ref) {
+var Button = React17.forwardRef(function(_param, ref) {
     var className = _param.className, variant = _param.variant, size = _param.size, _param_asChild = _param.asChild, asChild = _param_asChild === void 0 ? false : _param_asChild, isLoading = _param.isLoading, children = _param.children, props = _object_without_properties(_param, [
         "className",
         "variant",
@@ -884,14 +895,14 @@ var Button = React16.forwardRef(function(_param, ref) {
     ]);
     var Comp = "button";
     var loadingColor = variant === "outline" || variant === "ghost" || variant === "neoBrutalism" ? "bg-primary" : "bg-primary-foreground";
-    return /* @__PURE__ */ React16.createElement(Comp, _object_spread({
+    return /* @__PURE__ */ React17.createElement(Comp, _object_spread({
         className: cn(buttonVariants({
             variant: variant,
             size: size,
             className: className
         })),
         ref: ref
-    }, props), isLoading ? /* @__PURE__ */ React16.createElement(HawaLoading, {
+    }, props), isLoading ? /* @__PURE__ */ React17.createElement(HawaLoading, {
         design: "dots-pulse",
         color: loadingColor,
         size: "button"
@@ -1112,18 +1123,18 @@ var DropdownMenuRoot = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
-var DropdownMenuSubTrigger = React19.forwardRef(function(_param, ref) /* @__PURE__ */ {
+var DropdownMenuSubTrigger = React20.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, inset = _param.inset, children = _param.children, props = _object_without_properties(_param, [
         "className",
         "inset",
         "children"
     ]);
-    return React19.createElement(DropdownMenuPrimitive.SubTrigger, _object_spread({
+    return React20.createElement(DropdownMenuPrimitive.SubTrigger, _object_spread({
         ref: ref,
         className: cn("flex cursor-default select-none items-center justify-between rounded-sm px-2 py-3 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent", inset && "pl-8", className)
-    }, props), /* @__PURE__ */ React19.createElement("div", {
+    }, props), /* @__PURE__ */ React20.createElement("div", {
         className: "flex flex-row items-center gap-2"
-    }, children), " ", /* @__PURE__ */ React19.createElement("svg", {
+    }, children), " ", /* @__PURE__ */ React20.createElement("svg", {
         "aria-label": "Chevron Right Icon",
         stroke: "currentColor",
         fill: "currentColor",
@@ -1132,61 +1143,61 @@ var DropdownMenuSubTrigger = React19.forwardRef(function(_param, ref) /* @__PURE
         height: "1em",
         width: "1em",
         className: cn(props.dir === "rtl" ? "rotate-180" : "")
-    }, /* @__PURE__ */ React19.createElement("path", {
+    }, /* @__PURE__ */ React20.createElement("path", {
         fillRule: "evenodd",
         d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
     })));
 });
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React19.forwardRef(function(_param, ref) /* @__PURE__ */ {
+var DropdownMenuSubContent = React20.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, props = _object_without_properties(_param, [
         "className"
     ]);
-    return React19.createElement(DropdownMenuPrimitive.SubContent, _object_spread({
+    return React20.createElement(DropdownMenuPrimitive.SubContent, _object_spread({
         ref: ref,
         className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className)
     }, props));
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React19.forwardRef(function(_param, ref) /* @__PURE__ */ {
+var DropdownMenuContent = React20.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, _param_sideOffset = _param.sideOffset, sideOffset = _param_sideOffset === void 0 ? 4 : _param_sideOffset, props = _object_without_properties(_param, [
         "className",
         "sideOffset"
     ]);
-    return React19.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React19.createElement(DropdownMenuPrimitive.Content, _object_spread({
+    return React20.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React20.createElement(DropdownMenuPrimitive.Content, _object_spread({
         ref: ref,
         sideOffset: sideOffset,
         className: cn("z-50  overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className)
     }, props)));
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React19.forwardRef(function(_param, ref) /* @__PURE__ */ {
+var DropdownMenuItem = React20.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, inset = _param.inset, props = _object_without_properties(_param, [
         "className",
         "inset"
     ]);
-    return React19.createElement(DropdownMenuPrimitive.Item, _object_spread({
+    return React20.createElement(DropdownMenuPrimitive.Item, _object_spread({
         disabled: props.disabled,
         ref: ref,
         className: cn("relative flex cursor-pointer select-none items-center justify-between rounded-sm text-sm outline-none transition-colors focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className)
-    }, props), /* @__PURE__ */ React19.createElement("div", {
+    }, props), /* @__PURE__ */ React20.createElement("div", {
         className: "flex flex-row items-center gap-2 "
     }, props.children), props.end && props.end);
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React19.forwardRef(function(_param, ref) /* @__PURE__ */ {
+var DropdownMenuCheckboxItem = React20.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, children = _param.children, checked = _param.checked, props = _object_without_properties(_param, [
         "className",
         "children",
         "checked"
     ]);
-    return React19.createElement(DropdownMenuPrimitive.CheckboxItem, _object_spread({
+    return React20.createElement(DropdownMenuPrimitive.CheckboxItem, _object_spread({
         ref: ref,
         className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
         checked: checked
-    }, props), /* @__PURE__ */ React19.createElement("span", {
+    }, props), /* @__PURE__ */ React20.createElement("span", {
         className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
-    }, /* @__PURE__ */ React19.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React19.createElement("svg", {
+    }, /* @__PURE__ */ React20.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React20.createElement("svg", {
         "aria-label": "Check Mark",
         stroke: "currentColor",
         fill: "currentColor",
@@ -1194,22 +1205,22 @@ var DropdownMenuCheckboxItem = React19.forwardRef(function(_param, ref) /* @__PU
         viewBox: "0 0 512 512",
         height: "0.60em",
         width: "0.60em"
-    }, /* @__PURE__ */ React19.createElement("path", {
+    }, /* @__PURE__ */ React20.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 = React19.forwardRef(function(_param, ref) /* @__PURE__ */ {
+var DropdownMenuRadioItem = React20.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, children = _param.children, props = _object_without_properties(_param, [
         "className",
         "children"
     ]);
-    return React19.createElement(DropdownMenuPrimitive.RadioItem, _object_spread({
+    return React20.createElement(DropdownMenuPrimitive.RadioItem, _object_spread({
         ref: ref,
         className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)
-    }, props), /* @__PURE__ */ React19.createElement("span", {
+    }, props), /* @__PURE__ */ React20.createElement("span", {
         className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
-    }, /* @__PURE__ */ React19.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React19.createElement("svg", {
+    }, /* @__PURE__ */ React20.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React20.createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         width: "24",
         "aria-label": "Circle",
@@ -1221,29 +1232,29 @@ var DropdownMenuRadioItem = React19.forwardRef(function(_param, ref) /* @__PURE_
         strokeLinecap: "round",
         strokeLinejoin: "round",
         className: "h-2 w-2 fill-current"
-    }, /* @__PURE__ */ React19.createElement("circle", {
+    }, /* @__PURE__ */ React20.createElement("circle", {
         cx: "12",
         cy: "12",
         r: "10"
     })))), children);
 });
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React19.forwardRef(function(_param, ref) /* @__PURE__ */ {
+var DropdownMenuLabel = React20.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, inset = _param.inset, props = _object_without_properties(_param, [
         "className",
         "inset"
     ]);
-    return React19.createElement(DropdownMenuPrimitive.Label, _object_spread({
+    return React20.createElement(DropdownMenuPrimitive.Label, _object_spread({
         ref: ref,
         className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)
     }, props));
 });
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React19.forwardRef(function(_param, ref) /* @__PURE__ */ {
+var DropdownMenuSeparator = React20.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, props = _object_without_properties(_param, [
         "className"
     ]);
-    return React19.createElement(DropdownMenuPrimitive.Separator, _object_spread({
+    return React20.createElement(DropdownMenuPrimitive.Separator, _object_spread({
         ref: ref,
         className: cn("-mx-1 my-1 h-px bg-muted", className)
     }, props));
@@ -1253,7 +1264,7 @@ var DropdownMenuShortcut = function(_param) {
     var className = _param.className, props = _object_without_properties(_param, [
         "className"
     ]);
-    return /* @__PURE__ */ React19.createElement("span", _object_spread({
+    return /* @__PURE__ */ React20.createElement("span", _object_spread({
         className: cn("ml-auto text-xs tracking-widest opacity-60", className)
     }, props));
 };
@@ -1270,11 +1281,11 @@ var DropdownMenu = function(param) {
         default: "px-2 py-3 ",
         sm: "text-xs px-1.5 py-1.5"
     };
-    return /* @__PURE__ */ React19.createElement(DropdownMenuRoot, {
+    return /* @__PURE__ */ React20.createElement(DropdownMenuRoot, {
         dir: direction
-    }, /* @__PURE__ */ React19.createElement(DropdownMenuTrigger, {
+    }, /* @__PURE__ */ React20.createElement(DropdownMenuTrigger, {
         className: triggerClassname
-    }, trigger), /* @__PURE__ */ React19.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React19.createElement(DropdownMenuContent, {
+    }, trigger), /* @__PURE__ */ React20.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React20.createElement(DropdownMenuContent, {
         side: side,
         sideOffset: sideOffset,
         className: cn(className, widthStyles2[width], "flex flex-col gap-2"),
@@ -1282,17 +1293,17 @@ var DropdownMenu = function(param) {
         alignOffset: alignOffset
     }, items.map(function(item, index) {
         if (item.type === "separator") {
-            return /* @__PURE__ */ React19.createElement(DropdownMenuSeparator, null);
+            return /* @__PURE__ */ React20.createElement(DropdownMenuSeparator, null);
         } else if (item.type === "label") {
-            return /* @__PURE__ */ React19.createElement(DropdownMenuLabel, null, item.label);
+            return /* @__PURE__ */ React20.createElement(DropdownMenuLabel, null, item.label);
         } else {
-            return item.subitems ? /* @__PURE__ */ React19.createElement(DropdownMenuSub, {
+            return item.subitems ? /* @__PURE__ */ React20.createElement(DropdownMenuSub, {
                 key: index
-            }, /* @__PURE__ */ React19.createElement(DropdownMenuSubTrigger, {
+            }, /* @__PURE__ */ React20.createElement(DropdownMenuSubTrigger, {
                 className: cn(sizeStyles2[size]),
                 dir: direction
-            }, item.icon && item.icon, item.label && item.label), /* @__PURE__ */ React19.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React19.createElement(DropdownMenuSubContent, null, item.subitems.map(function(subitem, subIndex) {
-                return /* @__PURE__ */ React19.createElement(DropdownMenuItem, {
+            }, item.icon && item.icon, item.label && item.label), /* @__PURE__ */ React20.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React20.createElement(DropdownMenuSubContent, null, item.subitems.map(function(subitem, subIndex) {
+                return /* @__PURE__ */ React20.createElement(DropdownMenuItem, {
                     className: cn(sizeStyles2[size], !item.icon && !item.label ? "px-0 py-0 focus:bg-transparent" : "focus:bg-accent"),
                     disabled: subitem.disabled,
                     onSelect: function() {
@@ -1303,7 +1314,7 @@ var DropdownMenu = function(param) {
                     },
                     key: subIndex
                 }, subitem.icon && subitem.icon, subitem.label && subitem.label);
-            })))) : /* @__PURE__ */ React19.createElement(DropdownMenuItem, {
+            })))) : /* @__PURE__ */ React20.createElement(DropdownMenuItem, {
                 disabled: item.disabled,
                 key: index,
                 onSelect: function(e) {
@@ -1396,7 +1407,10 @@ var HawaTable = function(_param) {
     ]);
     return /* @__PURE__ */ React6.default.createElement("div", {
         className: "relative flex flex-col gap-2  "
-    }, /* @__PURE__ */ React6.default.createElement("div", {
+    }, props.isLoading ? // <div>dd</div>
+    /* @__PURE__ */ React6.default.createElement(Skeleton, {
+        className: "h-[105px] w-full"
+    }) : /* @__PURE__ */ React6.default.createElement(React6.default.Fragment, null, /* @__PURE__ */ React6.default.createElement("div", {
         className: "overflow-x-auto rounded  bg-".concat(headerColor)
     }, props.headerTools && /* @__PURE__ */ React6.default.createElement("div", {
         className: "flex flex-row items-center justify-between gap-2 border bg-background px-2  py-2"
@@ -1540,7 +1554,7 @@ var HawaTable = function(_param) {
         }
     ]), function() {
         return "No Data";
-    }))))))), pagination && /* @__PURE__ */ React6.default.createElement("div", {
+    })))))))), pagination && /* @__PURE__ */ React6.default.createElement("div", {
         className: "flex flex-row items-center justify-between "
     }, range.length > 1 ? /* @__PURE__ */ React6.default.createElement("div", {
         className: "flex w-fit  flex-row items-stretch justify-center gap-2 overflow-clip rounded "
@@ -4010,77 +4024,68 @@ var HawaStepper = function(_param) {
 };
 // src/elements/HawaStats.tsx
 // src/elements/Card.tsx
-var Card = React29.forwardRef(function(_param, ref) /* @__PURE__ */ {
+var Card = React30.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, _param_clickable = _param.clickable, clickable = _param_clickable === void 0 ? false : _param_clickable, props = _object_without_properties(_param, [
         "className",
         "clickable"
     ]);
-    return React29.createElement("div", _object_spread({
+    return React30.createElement("div", _object_spread({
         ref: ref,
         className: cn("rounded-lg border bg-card text-card-foreground shadow-sm", clickable && "cursor-pointer transition-all hover:drop-shadow-md dark:hover:shadow-dark", className)
     }, props));
 });
 Card.displayName = "Card";
-var CardHeader = React29.forwardRef(function(_param, ref) /* @__PURE__ */ {
+var CardHeader = React30.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, props = _object_without_properties(_param, [
         "className"
     ]);
-    return React29.createElement("div", _object_spread({
+    return React30.createElement("div", _object_spread({
         ref: ref,
         className: cn("flex flex-col space-y-1.5 p-6", className)
     }, props));
 });
 CardHeader.displayName = "CardHeader";
-var CardTitle = React29.forwardRef(function(_param, ref) /* @__PURE__ */ {
+var CardTitle = React30.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, props = _object_without_properties(_param, [
         "className"
     ]);
-    return React29.createElement("h3", _object_spread({
+    return React30.createElement("h3", _object_spread({
         ref: ref,
         className: cn("text-2xl font-semibold leading-none tracking-tight", className)
     }, props));
 });
 CardTitle.displayName = "CardTitle";
-var CardDescription = React29.forwardRef(function(_param, ref) /* @__PURE__ */ {
+var CardDescription = React30.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, props = _object_without_properties(_param, [
         "className"
     ]);
-    return React29.createElement("p", _object_spread({
+    return React30.createElement("p", _object_spread({
         ref: ref,
         className: cn("text-sm text-muted-foreground", className)
     }, props));
 });
 CardDescription.displayName = "CardDescription";
-var CardContent = React29.forwardRef(function(_param, ref) /* @__PURE__ */ {
+var CardContent = React30.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var headless = _param.headless, className = _param.className, props = _object_without_properties(_param, [
         "headless",
         "className"
     ]);
-    return React29.createElement("div", _object_spread({
+    return React30.createElement("div", _object_spread({
         ref: ref,
         className: cn("p-6", headless ? "pt-6" : "pt-0", className)
     }, props));
 });
 CardContent.displayName = "CardContent";
-var CardFooter = React29.forwardRef(function(_param, ref) /* @__PURE__ */ {
+var CardFooter = React30.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, props = _object_without_properties(_param, [
         "className"
     ]);
-    return React29.createElement("div", _object_spread({
+    return React30.createElement("div", _object_spread({
         ref: ref,
         className: cn("flex items-center p-6 pt-0", className)
     }, props));
 });
 CardFooter.displayName = "CardFooter";
-// src/elements/Skeleton.tsx
-function Skeleton(_param) {
-    var className = _param.className, props = _object_without_properties(_param, [
-        "className"
-    ]);
-    return /* @__PURE__ */ React6.default.createElement("div", _object_spread({
-        className: cn("animate-pulse rounded-md bg-muted", className)
-    }, props));
-}
 // src/elements/HawaStats.tsx
 var HawaStats = function(_param) {
     var _param_variant = _param.variant, variant = _param_variant === void 0 ? "default" : _param_variant, props = _object_without_properties(_param, [
@@ -4154,32 +4159,60 @@ var Tooltip = function(_param) {
         align: "center"
     }, props), content)));
 };
+// src/hooks/useClipboard.ts
+function useClipboard() {
+    var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, _ref_timeout = _ref.timeout, timeout = _ref_timeout === void 0 ? 2e3 : _ref_timeout;
+    var _react_useState_call = _sliced_to_array(_react.useState.call(void 0, null), 2), error = _react_useState_call[0], setError = _react_useState_call[1];
+    var _react_useState_call1 = _sliced_to_array(_react.useState.call(void 0, false), 2), copied = _react_useState_call1[0], setCopied = _react_useState_call1[1];
+    var _react_useState_call2 = _sliced_to_array(_react.useState.call(void 0, null), 2), copyTimeout = _react_useState_call2[0], setCopyTimeout = _react_useState_call2[1];
+    var handleCopyResult = function(value) {
+        clearTimeout(copyTimeout);
+        setCopyTimeout(setTimeout(function() {
+            return setCopied(false);
+        }, timeout));
+        setCopied(value);
+    };
+    var copy = function(valueToCopy) {
+        if ("clipboard" in navigator) {
+            navigator.clipboard.writeText(valueToCopy).then(function() {
+                return handleCopyResult(true);
+            }).catch(function(err) {
+                return setError(err);
+            });
+        } else {
+            setError(new Error("useClipboard: navigator.clipboard is not supported"));
+        }
+    };
+    var reset = function() {
+        setCopied(false);
+        setError(null);
+        clearTimeout(copyTimeout);
+    };
+    return {
+        copy: copy,
+        reset: reset,
+        error: error,
+        copied: copied
+    };
+}
 // src/elements/HawaCodeBlock.tsx
 var HawaCodeBlock = function(param) {
     var tabs = param.tabs, code = param.code, fileName = param.fileName, _param_width = param.width, width = _param_width === void 0 ? "full" : _param_width;
+    var clipboard = useClipboard();
     var _react_useState_call = _sliced_to_array(_react.useState.call(void 0, 0), 2), selectedTab = _react_useState_call[0], setSelectedTab = _react_useState_call[1];
-    var _react_useState_call1 = _sliced_to_array(_react.useState.call(void 0, false), 2), copyClicked = _react_useState_call1[0], setCopyClicked = _react_useState_call1[1];
     var widthStyles2 = {
         full: "w-full",
         md: "w-full max-w-md",
         sm: "w-full max-w-sm",
         xs: "w-full max-w-xs"
     };
-    var handleCopyClick = function() {
-        if (!copyClicked) {
-            setCopyClicked(true);
-            setTimeout(function() {
-                setCopyClicked(false);
-            }, 2e3);
-        }
-    };
     return /* @__PURE__ */ React6.default.createElement("div", {
         className: cn(widthStyles2[width], "w-full flex-col items-center rounded bg-gray-200 text-left text-sm text-white dark:bg-gray-800 sm:text-base")
-    }, " ", tabs && /* @__PURE__ */ React6.default.createElement("div", {
-        className: "flex flex-row gap-2 rounded-t bg-gray-100 p-2 pb-0 text-black   dark:bg-gray-700 dark:text-white"
+    }, tabs && /* @__PURE__ */ React6.default.createElement("div", {
+        className: "flex flex-row gap-2 rounded-t bg-gray-100 p-2 pb-0 text-black dark:bg-gray-700 dark:text-white"
     }, tabs.map(function(tab, i) {
         return /* @__PURE__ */ React6.default.createElement("div", {
-            className: cn(selectedTab === i ? " border-b-2   border-primary" : "bg-transparent")
+            className: cn(selectedTab === i ? " border-b-2 border-primary" : "bg-transparent")
         }, /* @__PURE__ */ React6.default.createElement("div", {
             onClick: function() {
                 return setSelectedTab(i);
@@ -4197,14 +4230,13 @@ var HawaCodeBlock = function(param) {
     }, tabs ? tabs[selectedTab].code : code), /* @__PURE__ */ React6.default.createElement("div", {
         className: "flex w-fit flex-row items-center gap-2 p-2"
     }, /* @__PURE__ */ React6.default.createElement(Tooltip, {
-        open: copyClicked,
+        open: clipboard.copied,
         side: "left",
         content: /* @__PURE__ */ React6.default.createElement("div", null, "Copied!")
     }, /* @__PURE__ */ React6.default.createElement(Button, {
         size: "icon",
         onClick: function() {
-            handleCopyClick();
-            navigator.clipboard.writeText(tabs ? tabs[selectedTab].code : code);
+            return clipboard.copy(tabs ? tabs[selectedTab].code : code);
         }
     }, /* @__PURE__ */ React6.default.createElement("svg", {
         "aria-label": "Copy Icon",
@@ -9811,7 +9843,9 @@ var NewPasswordForm = function(props) {
         className: "text-center"
     }, props.texts.passwordChanged)) : /* @__PURE__ */ React6.default.createElement(_reacthookform.FormProvider, _object_spread({}, methods), /* @__PURE__ */ React6.default.createElement("form", {
         onSubmit: handleSubmit(handleSubmission)
-    }, /* @__PURE__ */ React6.default.createElement(CardHeader, null, /* @__PURE__ */ React6.default.createElement(CardTitle, null, "Create Password"), /* @__PURE__ */ React6.default.createElement(CardDescription, null, "Set a new password for your account")), /* @__PURE__ */ React6.default.createElement(CardContent, null, /* @__PURE__ */ React6.default.createElement(_reacthookform.Controller, {
+    }, !props.headless && /* @__PURE__ */ React6.default.createElement(CardHeader, null, /* @__PURE__ */ React6.default.createElement(CardTitle, null, "Create Password"), /* @__PURE__ */ React6.default.createElement(CardDescription, null, "Set a new password for your account")), /* @__PURE__ */ React6.default.createElement(CardContent, {
+        headless: props.headless
+    }, /* @__PURE__ */ React6.default.createElement(_reacthookform.Controller, {
         control: control,
         name: "password",
         render: function(param) {