@sikka/hawa 0.13.10-next → 0.13.11-next

package/dist/index.css

@@ -804,12 +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-\[88px\] {
-  top: 88px;
-}
 .hawa-top-full {
   top: 100%;
 }
@@ -2754,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));
 }
@@ -2857,10 +2869,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
-.hover\:hawa-bg-gray-950:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(3 7 18 / var(--tw-bg-opacity));
-}
 .hover\:hawa-bg-green-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(134 239 172 / var(--tw-bg-opacity));
@@ -2903,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));
 }
@@ -3255,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);
@@ -3755,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

@@ -911,6 +911,8 @@ type NavbarType = {
     logo?: any;
     buttons?: any;
     menuItems?: NavigationMenuItem[];
+    handleLogoClick?: () => void;
+    backgroundColor?: string;
 };
 declare const Navbar: React__default.FC<NavbarType>;
 

package/dist/index.d.ts

@@ -911,6 +911,8 @@ type NavbarType = {
     logo?: any;
     buttons?: any;
     menuItems?: NavigationMenuItem[];
+    handleLogoClick?: () => void;
+    backgroundColor?: string;
 };
 declare const Navbar: React__default.FC<NavbarType>;
 

package/dist/index.js

@@ -6833,51 +6833,98 @@ var Collapsible = CollapsiblePrimitive.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
 var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
 // components/layout/Navbar.tsx
-var Navbar = function(props) {
-    var _props_menuItems;
+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-transition-all hawa-sticky hawa-top-2"
     }, /* @__PURE__ */ import_react35.default.createElement(Collapsible, {
-        className: "hawa-bg-gray-800  hawa-p-4 hawa-relative hawa-m-2  hawa-rounded"
+        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"
+        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"
-    }, /* @__PURE__ */ import_react35.default.createElement(Logos.sikka, {
-        color: "#ffffff",
-        className: "hawa-h-6 hawa-w-6"
-    }))), /* @__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, {
         onClick: function() {
             return setIsOpen(!isOpen);
         },
-        className: "hawa-text-white hawa-p-2",
+        className: "hawa-text-white selection:hawa-p-0 hawa-h-full ",
         "aria-label": "Toggle menu"
     }, /* @__PURE__ */ import_react35.default.createElement("svg", {
-        className: cn("hawa-w-6 hawa-h-6", isOpen ? "hawa-invisible" : "hawa-visible"),
+        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: cn("data-[state=open]:hawa-animate-in", "data-[state=open]:hawa-fade-in-90", "hawa-transition-all hawa-bg-gray-400 hawa-absolute  hawa-top-[88px]  hawa-flex hawa-flex-col hawa-rounded"),
+        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% - 32px)",
+            width: "calc(100%)",
             zIndex: -100
         }
-    }, (_props_menuItems = props.menuItems) === null || _props_menuItems === void 0 ? void 0 : _props_menuItems.map(function(item) {
+    }, (_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-white hawa-p-4 hawa-px-10 hover:hawa-bg-gray-950 hawa-transition-all hawa-cursor-pointer"
+            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);
     }))));
 };

package/dist/index.mjs

@@ -6667,60 +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-transition-all hawa-sticky hawa-top-2" }, /* @__PURE__ */ React61.createElement(Collapsible, { className: "hawa-bg-gray-800  hawa-p-4 hawa-relative hawa-m-2  hawa-rounded" }, /* @__PURE__ */ React61.createElement("div", { className: "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" }, /* @__PURE__ */ React61.createElement(Logos.sikka, { color: "#ffffff", className: "hawa-h-6 hawa-w-6" }))), /* @__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,
     {
-      onClick: () => setIsOpen(!isOpen),
-      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: cn(
-          "hawa-w-6 hawa-h-6",
-          isOpen ? "hawa-invisible" : "hawa-visible"
-        ),
-        fill: "none",
-        stroke: "currentColor",
-        viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg"
-      },
-      /* @__PURE__ */ React61.createElement(
-        "path",
-        {
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: "2",
-          d: "M4 6h16M4 12h16m-7 6h7"
+        className: "hawa-text-white hawa-text-xl hawa-p-1.5 hawa-font-bold",
+        onClick: () => {
+          if (handleLogoClick) {
+            handleLogoClick();
+          }
         }
-      )
-    )
-  ))), /* @__PURE__ */ React61.createElement(
-    CollapsibleContent2,
-    {
-      className: cn(
-        "data-[state=open]:hawa-animate-in",
-        "data-[state=open]:hawa-fade-in-90",
-        "hawa-transition-all hawa-bg-gray-400 hawa-absolute  hawa-top-[88px]  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% - 32px)",
-        zIndex: -100
-      }
-    },
-    props.menuItems?.map((item) => /* @__PURE__ */ React61.createElement(
+      },
+      logo
+    )), /* @__PURE__ */ React61.createElement("div", { className: "hawa-hidden md:hawa-flex " }, props.menuItems?.map((item) => /* @__PURE__ */ React61.createElement(
       "div",
       {
         onClick: item.action,
-        className: "hawa-text-white hawa-p-4 hawa-px-10 hover:hawa-bg-gray-950 hawa-transition-all hawa-cursor-pointer"
+        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(
+        "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 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
+      ))
+    )
+  ));
 };
 
 // components/layout/AppLayout.tsx

package/package.json

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