@sikka/hawa 0.13.9-next → 0.13.11-next

package/dist/index.css

@@ -557,19 +557,6 @@ video {
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
-.hawa-container {
-  width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: 2rem;
-  padding-left: 2rem;
-}
-@media (min-width: 1400px) {
-
-  .hawa-container {
-    max-width: 1400px;
-  }
-}
 .link::after {
     content: url("data:image/svg+xml,%3Csvg stroke='%234c37eb' fill='none' stroke-width='2' viewBox='0 0 24 24' aria-hidden='true' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'%3E%3C/path%3E%3C/svg%3E");
     display: inline-block;
@@ -817,6 +804,12 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-top-\[60\%\] {
   top: 60%;
 }
+.hawa-top-\[60px\] {
+  top: 60px;
+}
+.hawa-top-\[72px\] {
+  top: 72px;
+}
 .hawa-top-full {
   top: 100%;
 }
@@ -881,10 +874,6 @@ input[type="number"]::-webkit-inner-spin-button,
   margin-left: 1rem;
   margin-right: 1rem;
 }
-.hawa-mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
 .hawa-my-0 {
   margin-top: 0px;
   margin-bottom: 0px;
@@ -1135,6 +1124,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-h-\[calc\(100dvh\)\] {
   height: calc(100dvh);
 }
+.hawa-h-\[calc\(200dvh\)\] {
+  height: calc(200dvh);
+}
 .hawa-h-\[calc\(60vh\)\] {
   height: calc(60vh);
 }
@@ -1379,6 +1371,11 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-border-collapse {
   border-collapse: collapse;
 }
+.hawa-border-spacing-3 {
+  --tw-border-spacing-x: 0.75rem;
+  --tw-border-spacing-y: 0.75rem;
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
 .hawa-origin-bottom {
   transform-origin: bottom;
 }
@@ -1816,6 +1813,10 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
+.hawa-border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
 .hawa-border-input {
   border-color: hsl(var(--input));
 }
@@ -1896,6 +1897,10 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
+.hawa-bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
 .hawa-bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -2749,6 +2754,18 @@ body {
     box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1),
       0 4px 6px -2px rgba(255, 255, 255, 0.05);
   }
+.selection\:hawa-p-0 *::-moz-selection {
+  padding: 0px;
+}
+.selection\:hawa-p-0 *::selection {
+  padding: 0px;
+}
+.selection\:hawa-p-0::-moz-selection {
+  padding: 0px;
+}
+.selection\:hawa-p-0::selection {
+  padding: 0px;
+}
 .placeholder\:hawa-text-muted-foreground::-moz-placeholder {
   color: hsl(var(--muted-foreground));
 }
@@ -2894,6 +2911,10 @@ body {
 .hover\:hawa-text-accent-foreground:hover {
   color: hsl(var(--accent-foreground));
 }
+.hover\:hawa-text-black:hover {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
 .hover\:hawa-text-foreground:hover {
   color: hsl(var(--foreground));
 }
@@ -3246,6 +3267,9 @@ body {
 .data-\[disabled\]\:hawa-opacity-50[data-disabled] {
   opacity: 0.5;
 }
+.data-\[state\=closed\]\:hawa-opacity-0[data-state=closed] {
+  opacity: 0;
+}
 .data-\[state\=active\]\:hawa-shadow-sm[data-state=active] {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -3341,6 +3365,9 @@ body {
 .data-\[state\=open\]\:hawa-fade-in-0[data-state=open] {
   --tw-enter-opacity: 0;
 }
+.data-\[state\=open\]\:hawa-fade-in-90[data-state=open] {
+  --tw-enter-opacity: 0.9;
+}
 .data-\[state\=visible\]\:hawa-fade-in[data-state=visible] {
   --tw-enter-opacity: 0;
 }
@@ -3743,6 +3770,14 @@ body {
     position: absolute;
   }
 
+  .md\:hawa-flex {
+    display: flex;
+  }
+
+  .md\:hawa-hidden {
+    display: none;
+  }
+
   .md\:hawa-w-\[var\(--radix-navigation-menu-viewport-width\)\] {
     width: var(--radix-navigation-menu-viewport-width);
   }

package/dist/index.d.mts

@@ -902,10 +902,17 @@ type CopyRightsTypes = {
 };
 declare const Copyrights: FC<CopyRightsTypes>;
 
+type NavigationMenuItem = {
+    label: string;
+    action: () => void;
+    trigger?: any;
+};
 type NavbarType = {
     logo?: any;
     buttons?: any;
-    menuItems?: any;
+    menuItems?: NavigationMenuItem[];
+    handleLogoClick?: () => void;
+    backgroundColor?: string;
 };
 declare const Navbar: React__default.FC<NavbarType>;
 

package/dist/index.d.ts

@@ -902,10 +902,17 @@ type CopyRightsTypes = {
 };
 declare const Copyrights: FC<CopyRightsTypes>;
 
+type NavigationMenuItem = {
+    label: string;
+    action: () => void;
+    trigger?: any;
+};
 type NavbarType = {
     logo?: any;
     buttons?: any;
-    menuItems?: any;
+    menuItems?: NavigationMenuItem[];
+    handleLogoClick?: () => void;
+    backgroundColor?: string;
 };
 declare const Navbar: React__default.FC<NavbarType>;
 

package/dist/index.js

@@ -6833,55 +6833,100 @@ var Collapsible = CollapsiblePrimitive.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
 var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
 // components/layout/Navbar.tsx
-var Navbar = function(props) {
+var Navbar = function(_param) {
+    var backgroundColor = _param.backgroundColor, logo = _param.logo, handleLogoClick = _param.handleLogoClick, props = _object_without_properties(_param, [
+        "backgroundColor",
+        "logo",
+        "handleLogoClick"
+    ]);
+    var _props_menuItems, _props_menuItems1;
     var _ref = _sliced_to_array((0, import_react35.useState)(false), 2), isOpen = _ref[0], setIsOpen = _ref[1];
     return /* @__PURE__ */ import_react35.default.createElement("nav", {
-        className: "hawa-bg-gray-800 hawa-p-4 hawa-transition-all"
-    }, /* @__PURE__ */ import_react35.default.createElement(Collapsible, null, /* @__PURE__ */ import_react35.default.createElement("div", {
-        className: "hawa-container hawa-mx-auto hawa-flex hawa-justify-between hawa-items-center"
+        className: " hawa-transition-all hawa-sticky hawa-top-2"
+    }, /* @__PURE__ */ import_react35.default.createElement(Collapsible, {
+        className: "hawa-p-2 hawa-relative hawa-m-2  hawa-rounded",
+        style: {
+            backgroundColor: backgroundColor || "#1f2937"
+        }
+    }, /* @__PURE__ */ import_react35.default.createElement("div", {
+        className: "hawa-flex hawa-justify-between hawa-items-center hawa-px-3 "
     }, /* @__PURE__ */ import_react35.default.createElement("div", {
         className: "hawa-flex hawa-items-center"
     }, /* @__PURE__ */ import_react35.default.createElement("div", {
-        className: "hawa-text-white hawa-text-xl hawa-font-bold"
-    }, "YourLogo")), /* @__PURE__ */ import_react35.default.createElement("div", {
-        className: "hawa-hidden hawa-md:hawa-flex hawa-space-x-4"
-    }, /* @__PURE__ */ import_react35.default.createElement("a", {
-        href: "/about",
-        className: "hawa-text-white"
-    }, "About"), /* @__PURE__ */ import_react35.default.createElement("a", {
-        href: "/services",
-        className: "hawa-text-white"
-    }, "Services"), /* @__PURE__ */ import_react35.default.createElement("a", {
-        href: "/contact",
-        className: "hawa-text-white"
-    }, "Contact")), /* @__PURE__ */ import_react35.default.createElement("div", {
-        className: "hawa-md:hawa-hidden"
+        className: "hawa-text-white hawa-text-xl hawa-p-1.5 hawa-font-bold",
+        onClick: function() {
+            if (handleLogoClick) {
+                handleLogoClick();
+            }
+        }
+    }, logo)), /* @__PURE__ */ import_react35.default.createElement("div", {
+        className: "hawa-hidden md:hawa-flex "
+    }, (_props_menuItems = props.menuItems) === null || _props_menuItems === void 0 ? void 0 : _props_menuItems.map(function(item) {
+        return /* @__PURE__ */ import_react35.default.createElement("div", {
+            onClick: item.action,
+            className: "hawa-p-1.5 hawa-px-2 hawa-text-sm hawa-text-center hawa-rounded hawa-text-white hover:hawa-text-black hover:hawa-bg-gray-300 hawa-transition-all hawa-cursor-pointer"
+        }, item.label);
+    })), /* @__PURE__ */ import_react35.default.createElement("div", {
+        className: "md:hawa-hidden hawa-flex hawa-h-fit hawa-p-0 hawa-m-0"
     }, /* @__PURE__ */ import_react35.default.createElement(CollapsibleTrigger2, {
-        className: "hawa-text-white hawa-p-2",
+        onClick: function() {
+            return setIsOpen(!isOpen);
+        },
+        className: "hawa-text-white selection:hawa-p-0 hawa-h-full ",
         "aria-label": "Toggle menu"
     }, /* @__PURE__ */ import_react35.default.createElement("svg", {
-        className: "hawa-w-6 hawa-h-6",
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
         fill: "none",
         stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        className: cn("hawa-w-6 hawa-h-6 hawa-fixed", isOpen ? "hawa-invisible" : "hawa-visible")
+    }, /* @__PURE__ */ import_react35.default.createElement("line", {
+        x1: "4",
+        x2: "20",
+        y1: "12",
+        y2: "12"
+    }), /* @__PURE__ */ import_react35.default.createElement("line", {
+        x1: "4",
+        x2: "20",
+        y1: "6",
+        y2: "6"
+    }), /* @__PURE__ */ import_react35.default.createElement("line", {
+        x1: "4",
+        x2: "20",
+        y1: "18",
+        y2: "18"
+    })), /* @__PURE__ */ import_react35.default.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
         viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg"
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        className: cn("hawa-w-6 hawa-h-6", !isOpen ? "hawa-invisible" : "hawa-visible")
     }, /* @__PURE__ */ import_react35.default.createElement("path", {
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "2",
-        d: "M4 6h16M4 12h16m-7 6h7"
+        d: "M18 6 6 18"
+    }), /* @__PURE__ */ import_react35.default.createElement("path", {
+        d: "m6 6 12 12"
     }))))), /* @__PURE__ */ import_react35.default.createElement(CollapsibleContent2, {
-        className: "hwa-transition-all hawa-fade-in-0   data-[state=open]:hawa-zoom-in-95 data-[state=open]:hawa-animate-in hawa-flex hawa-flex-col hawa-space-y-2 hawa-mt-4"
-    }, /* @__PURE__ */ import_react35.default.createElement("a", {
-        href: "/about",
-        className: "hawa-text-white hawa-px-2"
-    }, "About"), /* @__PURE__ */ import_react35.default.createElement("a", {
-        href: "/services",
-        className: "hawa-text-white hawa-px-2"
-    }, "Services"), /* @__PURE__ */ import_react35.default.createElement("a", {
-        href: "/contact",
-        className: "hawa-text-white hawa-px-2"
-    }, "Contact"))));
+        className: cn("data-[state=closed]:hawa-opacity-0", "data-[state=open]:hawa-animate-in", "data-[state=open]:hawa-fade-in-90", "hawa-transition-all hawa-bg-gray-200 hawa-border hawa-absolute hawa-p-1  hawa-left-0 hawa-top-[60px]  hawa-flex hawa-flex-col hawa-rounded"),
+        style: {
+            width: "calc(100%)",
+            zIndex: -100
+        }
+    }, (_props_menuItems1 = props.menuItems) === null || _props_menuItems1 === void 0 ? void 0 : _props_menuItems1.map(function(item) {
+        return /* @__PURE__ */ import_react35.default.createElement("div", {
+            onClick: item.action,
+            className: "hawa-text-black hawa-p-2 hawa-px-10 hawa-text-center hawa-rounded hover:hawa-bg-gray-300 hawa-transition-all hawa-cursor-pointer"
+        }, item.label);
+    }))));
 };
 // components/layout/AppLayout.tsx
 var import_react36 = __toESM(require("react"));
@@ -7447,6 +7492,32 @@ var EyeIcon = function(props) {
         r: "3"
     })));
 };
+var HiddenEyeIcon = function(props) {
+    return /* @__PURE__ */ React.createElement("div", {
+        className: props.classNames
+    }, /* @__PURE__ */ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }, /* @__PURE__ */ React.createElement("path", {
+        d: "M9.88 9.88a3 3 0 1 0 4.24 4.24"
+    }), /* @__PURE__ */ React.createElement("path", {
+        d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"
+    }), /* @__PURE__ */ React.createElement("path", {
+        d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"
+    }), /* @__PURE__ */ React.createElement("line", {
+        x1: "2",
+        x2: "22",
+        y1: "2",
+        y2: "22"
+    })));
+};
 // components/blocks/auth/LoginForm.tsx
 var LoginForm = function(_param) {
     var loginType = _param.loginType, texts = _param.texts, _param_passwordLength = _param.passwordLength, passwordLength = _param_passwordLength === void 0 ? 8 : _param_passwordLength, props = _object_without_properties(_param, [
@@ -7566,7 +7637,9 @@ var LoginForm = function(_param) {
                                 onClick: function() {
                                     return setPasswordVisible(!passwordVisible);
                                 }
-                            }, /* @__PURE__ */ import_react42.default.createElement(EyeIcon, {
+                            }, passwordVisible ? /* @__PURE__ */ import_react42.default.createElement(EyeIcon, {
+                                classNames: "hawa-text-gray-500"
+                            }) : /* @__PURE__ */ import_react42.default.createElement(HiddenEyeIcon, {
                                 classNames: "hawa-text-gray-500"
                             })),
                             placeholder: (texts === null || texts === void 0 ? void 0 : (_texts_password1 = texts.password) === null || _texts_password1 === void 0 ? void 0 : _texts_password1.placeholder) || "Enter your password",
@@ -7608,9 +7681,11 @@ var LoginForm = function(_param) {
                                 onClick: function() {
                                     return setPasswordVisible(!passwordVisible);
                                 }
-                            }, /* @__PURE__ */ import_react42.default.createElement(EyeIcon, {
+                            }, passwordVisible ? /* @__PURE__ */ import_react42.default.createElement(EyeIcon, {
                                 classNames: "hawa-text-gray-500"
-                            })),
+                            }) : /* @__PURE__ */ import_react42.default.createElement(HiddenEyeIcon, {
+                                classNames: "hawa-text-gray-500"
+                            }), "                      "),
                             placeholder: (texts === null || texts === void 0 ? void 0 : (_texts_password1 = texts.password) === null || _texts_password1 === void 0 ? void 0 : _texts_password1.placeholder) || "Enter your password",
                             helperText: (_formState_errors_password = formState.errors.password) === null || _formState_errors_password === void 0 ? void 0 : _formState_errors_password.message
                         }, field));
@@ -7884,9 +7959,11 @@ var RegisterForm = function(_param) {
                     onClick: function() {
                         return setPasswordVisible(!passwordVisible);
                     }
-                }, /* @__PURE__ */ import_react43.default.createElement(EyeIcon, {
+                }, passwordVisible ? /* @__PURE__ */ import_react43.default.createElement(EyeIcon, {
+                    classNames: "hawa-text-gray-500"
+                }) : /* @__PURE__ */ import_react43.default.createElement(HiddenEyeIcon, {
                     classNames: "hawa-text-gray-500"
-                })),
+                }), " "),
                 autoComplete: "new-password",
                 label: texts === null || texts === void 0 ? void 0 : (_texts_password = texts.password) === null || _texts_password === void 0 ? void 0 : _texts_password.label,
                 placeholder: texts === null || texts === void 0 ? void 0 : (_texts_password1 = texts.password) === null || _texts_password1 === void 0 ? void 0 : _texts_password1.placeholder,

package/dist/index.mjs

@@ -6667,34 +6667,111 @@ var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
 var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
 
 // components/layout/Navbar.tsx
-var Navbar = (props) => {
+var Navbar = ({
+  backgroundColor,
+  logo,
+  handleLogoClick,
+  ...props
+}) => {
   const [isOpen, setIsOpen] = useState22(false);
-  return /* @__PURE__ */ React61.createElement("nav", { className: "hawa-bg-gray-800 hawa-p-4 hawa-transition-all" }, /* @__PURE__ */ React61.createElement(Collapsible, null, /* @__PURE__ */ React61.createElement("div", { className: "hawa-container hawa-mx-auto hawa-flex hawa-justify-between hawa-items-center" }, /* @__PURE__ */ React61.createElement("div", { className: "hawa-flex hawa-items-center" }, /* @__PURE__ */ React61.createElement("div", { className: "hawa-text-white hawa-text-xl hawa-font-bold" }, "YourLogo")), /* @__PURE__ */ React61.createElement("div", { className: "hawa-hidden hawa-md:hawa-flex hawa-space-x-4" }, /* @__PURE__ */ React61.createElement("a", { href: "/about", className: "hawa-text-white" }, "About"), /* @__PURE__ */ React61.createElement("a", { href: "/services", className: "hawa-text-white" }, "Services"), /* @__PURE__ */ React61.createElement("a", { href: "/contact", className: "hawa-text-white" }, "Contact")), /* @__PURE__ */ React61.createElement("div", { className: "hawa-md:hawa-hidden" }, /* @__PURE__ */ React61.createElement(
-    CollapsibleTrigger2,
+  return /* @__PURE__ */ React61.createElement("nav", { className: " hawa-transition-all hawa-sticky hawa-top-2" }, /* @__PURE__ */ React61.createElement(
+    Collapsible,
     {
-      className: "hawa-text-white hawa-p-2",
-      "aria-label": "Toggle menu"
+      className: "hawa-p-2 hawa-relative hawa-m-2  hawa-rounded",
+      style: { backgroundColor: backgroundColor || "#1f2937" }
     },
-    /* @__PURE__ */ React61.createElement(
-      "svg",
+    /* @__PURE__ */ React61.createElement("div", { className: "hawa-flex hawa-justify-between hawa-items-center hawa-px-3 " }, /* @__PURE__ */ React61.createElement("div", { className: "hawa-flex hawa-items-center" }, /* @__PURE__ */ React61.createElement(
+      "div",
       {
-        className: "hawa-w-6 hawa-h-6",
-        fill: "none",
-        stroke: "currentColor",
-        viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg"
+        className: "hawa-text-white hawa-text-xl hawa-p-1.5 hawa-font-bold",
+        onClick: () => {
+          if (handleLogoClick) {
+            handleLogoClick();
+          }
+        }
+      },
+      logo
+    )), /* @__PURE__ */ React61.createElement("div", { className: "hawa-hidden md:hawa-flex " }, props.menuItems?.map((item) => /* @__PURE__ */ React61.createElement(
+      "div",
+      {
+        onClick: item.action,
+        className: "hawa-p-1.5 hawa-px-2 hawa-text-sm hawa-text-center hawa-rounded hawa-text-white hover:hawa-text-black hover:hawa-bg-gray-300 hawa-transition-all hawa-cursor-pointer"
+      },
+      item.label
+    ))), /* @__PURE__ */ React61.createElement("div", { className: "md:hawa-hidden hawa-flex hawa-h-fit hawa-p-0 hawa-m-0" }, /* @__PURE__ */ React61.createElement(
+      CollapsibleTrigger2,
+      {
+        onClick: () => setIsOpen(!isOpen),
+        className: "hawa-text-white selection:hawa-p-0 hawa-h-full ",
+        "aria-label": "Toggle menu"
       },
       /* @__PURE__ */ React61.createElement(
-        "path",
+        "svg",
         {
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: "2",
-          d: "M4 6h16M4 12h16m-7 6h7"
-        }
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          className: cn(
+            "hawa-w-6 hawa-h-6 hawa-fixed",
+            isOpen ? "hawa-invisible" : "hawa-visible"
+          )
+        },
+        /* @__PURE__ */ React61.createElement("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
+        /* @__PURE__ */ React61.createElement("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
+        /* @__PURE__ */ React61.createElement("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
+      ),
+      /* @__PURE__ */ React61.createElement(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          className: cn(
+            "hawa-w-6 hawa-h-6",
+            !isOpen ? "hawa-invisible" : "hawa-visible"
+          )
+        },
+        /* @__PURE__ */ React61.createElement("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ React61.createElement("path", { d: "m6 6 12 12" })
       )
+    ))),
+    /* @__PURE__ */ React61.createElement(
+      CollapsibleContent2,
+      {
+        className: cn(
+          "data-[state=closed]:hawa-opacity-0",
+          "data-[state=open]:hawa-animate-in",
+          "data-[state=open]:hawa-fade-in-90",
+          "hawa-transition-all hawa-bg-gray-200 hawa-border hawa-absolute hawa-p-1  hawa-left-0 hawa-top-[60px]  hawa-flex hawa-flex-col hawa-rounded"
+          // "hawa-transition-all hawa-bg-gray-400 hawa-fixed hawa-left-0 hawa-top-[72px] hawa-w-full hawa-flex hawa-flex-col"
+        ),
+        style: {
+          width: "calc(100%)",
+          zIndex: -100
+        }
+      },
+      props.menuItems?.map((item) => /* @__PURE__ */ React61.createElement(
+        "div",
+        {
+          onClick: item.action,
+          className: "hawa-text-black hawa-p-2 hawa-px-10 hawa-text-center hawa-rounded hover:hawa-bg-gray-300 hawa-transition-all hawa-cursor-pointer"
+        },
+        item.label
+      ))
     )
-  ))), /* @__PURE__ */ React61.createElement(CollapsibleContent2, { className: "hwa-transition-all hawa-fade-in-0   data-[state=open]:hawa-zoom-in-95 data-[state=open]:hawa-animate-in hawa-flex hawa-flex-col hawa-space-y-2 hawa-mt-4" }, /* @__PURE__ */ React61.createElement("a", { href: "/about", className: "hawa-text-white hawa-px-2" }, "About"), /* @__PURE__ */ React61.createElement("a", { href: "/services", className: "hawa-text-white hawa-px-2" }, "Services"), /* @__PURE__ */ React61.createElement("a", { href: "/contact", className: "hawa-text-white hawa-px-2" }, "Contact"))));
+  ));
 };
 
 // components/layout/AppLayout.tsx
@@ -7471,6 +7548,24 @@ var EyeIcon = (props) => /* @__PURE__ */ React.createElement("div", { className:
   /* @__PURE__ */ React.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
   /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "3" })
 ));
+var HiddenEyeIcon = (props) => /* @__PURE__ */ React.createElement("div", { className: props.classNames }, /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  },
+  /* @__PURE__ */ React.createElement("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
+  /* @__PURE__ */ React.createElement("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
+  /* @__PURE__ */ React.createElement("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
+  /* @__PURE__ */ React.createElement("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
+));
 
 // components/blocks/auth/LoginForm.tsx
 var LoginForm = ({
@@ -7564,7 +7659,7 @@ var LoginForm = ({
                     className: "hawa-cursor-pointer",
                     onClick: () => setPasswordVisible(!passwordVisible)
                   },
-                  /* @__PURE__ */ React68.createElement(EyeIcon, { classNames: "hawa-text-gray-500" })
+                  passwordVisible ? /* @__PURE__ */ React68.createElement(EyeIcon, { classNames: "hawa-text-gray-500" }) : /* @__PURE__ */ React68.createElement(HiddenEyeIcon, { classNames: "hawa-text-gray-500" })
                 ),
                 placeholder: texts?.password?.placeholder || "Enter your password",
                 helperText: formState.errors.password?.message,
@@ -7618,7 +7713,8 @@ var LoginForm = ({
                     className: "hawa-cursor-pointer",
                     onClick: () => setPasswordVisible(!passwordVisible)
                   },
-                  /* @__PURE__ */ React68.createElement(EyeIcon, { classNames: "hawa-text-gray-500" })
+                  passwordVisible ? /* @__PURE__ */ React68.createElement(EyeIcon, { classNames: "hawa-text-gray-500" }) : /* @__PURE__ */ React68.createElement(HiddenEyeIcon, { classNames: "hawa-text-gray-500" }),
+                  "                      "
                 ),
                 placeholder: texts?.password?.placeholder || "Enter your password",
                 helperText: formState.errors.password?.message,
@@ -7901,7 +7997,8 @@ var RegisterForm = ({ texts, ...props }) => {
                 className: "hawa-cursor-pointer",
                 onClick: () => setPasswordVisible(!passwordVisible)
               },
-              /* @__PURE__ */ React69.createElement(EyeIcon, { classNames: "hawa-text-gray-500" })
+              passwordVisible ? /* @__PURE__ */ React69.createElement(EyeIcon, { classNames: "hawa-text-gray-500" }) : /* @__PURE__ */ React69.createElement(HiddenEyeIcon, { classNames: "hawa-text-gray-500" }),
+              " "
             ),
             autoComplete: "new-password",
             label: texts?.password?.label,
@@ -8367,7 +8464,7 @@ var CodeConfirmation = (props) => {
 };
 
 // components/blocks/feedback/UserReferralSource.tsx
-import React75, { useRef as useRef11, useState as useState30 } from "react";
+import React75, { useRef as useRef11, useState as useState29 } from "react";
 import { Controller as Controller6, useForm as useForm6 } from "react-hook-form";
 import { zodResolver as zodResolver6 } from "@hookform/resolvers/zod";
 import * as z6 from "zod";
@@ -8376,7 +8473,7 @@ var UserReferralSource = ({
   options = [],
   ...props
 }) => {
-  const [closed, setClosed] = useState30(false);
+  const [closed, setClosed] = useState29(false);
   const popUpRef = useRef11(null);
   const formSchema = z6.object({
     source: z6.string({ required_error: props.texts?.pleaseSelectOption }),
@@ -8504,16 +8601,16 @@ var UserReferralSource = ({
 };
 
 // components/blocks/feedback/FeedbackRating.tsx
-import React76, { useEffect as useEffect20, useRef as useRef12, useState as useState31 } from "react";
+import React76, { useEffect as useEffect20, useRef as useRef12, useState as useState30 } from "react";
 import clsx11 from "clsx";
 var FeedbackRating = ({
   position = "bottom-right",
   ...props
 }) => {
-  const [closed, setClosed] = useState31(false);
-  const [answered, setAnswered] = useState31(false);
-  const [clickedOption, setClickedOption] = useState31(null);
-  const [closingTimer, setClosingTimer] = useState31(5);
+  const [closed, setClosed] = useState30(false);
+  const [answered, setAnswered] = useState30(false);
+  const [clickedOption, setClickedOption] = useState30(null);
+  const [closingTimer, setClosingTimer] = useState30(5);
   const popUpRef = useRef12(null);
   const boxPosition = {
     "bottom-right": "hawa-right-4",
@@ -8618,12 +8715,12 @@ var FeedbackRating = ({
 };
 
 // components/blocks/feedback/FeedbackEmoji.tsx
-import React77, { useState as useState32 } from "react";
+import React77, { useState as useState31 } from "react";
 var FeedbackEmoji = (props) => {
-  const [selectedEmoji, setSelectedEmoji] = useState32(null);
-  const [loadingSubmit, setLoadingSubmit] = useState32(false);
-  const [feedbackText, setFeedbackText] = useState32("");
-  const [helperText, setHelperText] = useState32(false);
+  const [selectedEmoji, setSelectedEmoji] = useState31(null);
+  const [loadingSubmit, setLoadingSubmit] = useState31(false);
+  const [feedbackText, setFeedbackText] = useState31("");
+  const [helperText, setHelperText] = useState31(false);
   let emojis = [
     { icon: /* @__PURE__ */ React77.createElement(VeryGoodEmoji, null), value: "very-good" },
     { icon: /* @__PURE__ */ React77.createElement(GoodEmoji, null), value: "good" },
@@ -9086,7 +9183,7 @@ var PricingPlans = (props) => {
 };
 
 // components/blocks/pricing/ComparingPlans.tsx
-import React87, { useState as useState33 } from "react";
+import React87, { useState as useState32 } from "react";
 var CheckMark = () => /* @__PURE__ */ React87.createElement(
   "svg",
   {
@@ -9122,8 +9219,8 @@ var UncheckMark = () => /* @__PURE__ */ React87.createElement(
   )
 );
 var ComparingPlans = (props) => {
-  const [currentCurrency, setCurrentCurrency] = useState33("sar");
-  const [currentCycle, setCurrentCycle] = useState33("month");
+  const [currentCurrency, setCurrentCurrency] = useState32("sar");
+  const [currentCycle, setCurrentCycle] = useState32("month");
   return /* @__PURE__ */ React87.createElement("div", { id: "detailed-pricing", className: "hawa-w-full hawa-overflow-x-auto" }, /* @__PURE__ */ React87.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ React87.createElement(
     Radio,
     {
@@ -9181,10 +9278,10 @@ var ComparingPlans = (props) => {
 };
 
 // components/blocks/pricing/HorizontalPricing.tsx
-import React88, { useState as useState34 } from "react";
+import React88, { useState as useState33 } from "react";
 import clsx12 from "clsx";
 var HorizontalPricing = (props) => {
-  const [selectedCard, setSelectedCard] = useState34("");
+  const [selectedCard, setSelectedCard] = useState33("");
   let data = [
     { title: "basic", price: "$49", cycle: "/mo" },
     { title: "business", price: "$99", cycle: "/mo" },
@@ -9295,18 +9392,18 @@ var Usage = (props) => {
 };
 
 // components/hooks/useDiscloser.ts
-import { useState as useState35 } from "react";
+import { useState as useState34 } from "react";
 
 // components/hooks/useHover.ts
-import { useEffect as useEffect21, useRef as useRef13, useState as useState36 } from "react";
+import { useEffect as useEffect21, useRef as useRef13, useState as useState35 } from "react";
 
 // components/hooks/useCarousel.ts
-import { useState as useState37, useRef as useRef14 } from "react";
+import { useState as useState36, useRef as useRef14 } from "react";
 
 // components/hooks/useWindowSize.ts
-import { useEffect as useEffect22, useState as useState38 } from "react";
+import { useEffect as useEffect22, useState as useState37 } from "react";
 var useWindowSize = () => {
-  const [windowSize, setWindowSize] = useState38({
+  const [windowSize, setWindowSize] = useState37({
     width: void 0,
     height: void 0
   });
@@ -9325,7 +9422,7 @@ var useWindowSize = () => {
 };
 
 // components/hooks/useFocusWithin.ts
-import { useRef as useRef15, useState as useState39, useEffect as useEffect23 } from "react";
+import { useRef as useRef15, useState as useState38, useEffect as useEffect23 } from "react";
 function containsRelatedTarget(event) {
   if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {
     return event.currentTarget.contains(event.relatedTarget);
@@ -9337,7 +9434,7 @@ function useFocusWithin({
   onFocus
 } = {}) {
   const ref = useRef15(null);
-  const [focused, _setFocused] = useState39(false);
+  const [focused, _setFocused] = useState38(false);
   const focusedRef = useRef15(false);
   const setFocused = (value) => {
     _setFocused(value);
@@ -9370,7 +9467,7 @@ function useFocusWithin({
 }
 
 // components/hooks/useMediaQuery.ts
-import { useState as useState40, useEffect as useEffect24, useRef as useRef16 } from "react";
+import { useState as useState39, useEffect as useEffect24, useRef as useRef16 } from "react";
 function attachMediaListener(query, callback) {
   try {
     query.addEventListener("change", callback);
@@ -9392,7 +9489,7 @@ function getInitialValue(query, initialValue) {
 function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
   getInitialValueInEffect: true
 }) {
-  const [matches, setMatches] = useState40(
+  const [matches, setMatches] = useState39(
     getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)
   );
   const queryRef = useRef16();
@@ -9411,15 +9508,15 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
 }
 
 // components/hooks/useScrollPosition.ts
-import { useState as useState41, useEffect as useEffect25 } from "react";
+import { useState as useState40, useEffect as useEffect25 } from "react";
 
 // components/hooks/useTable.ts
-import { useState as useState42, useEffect as useEffect26 } from "react";
+import { useState as useState41, useEffect as useEffect26 } from "react";
 
 // components/hooks/useTabs.ts
-import { useEffect as useEffect27, useState as useState43 } from "react";
+import { useEffect as useEffect27, useState as useState42 } from "react";
 function useTabs(initialTab = "") {
-  const [activeTab, setActiveTab] = useState43(initialTab);
+  const [activeTab, setActiveTab] = useState42(initialTab);
   useEffect27(() => {
     const handleHashChange = () => {
       const hash = window.location.hash.substring(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.13.9-next",
+  "version": "0.13.11-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {