@sikka/hawa 0.24.3-next → 0.24.5-next

package/dist/layout/index.js

@@ -59,7 +59,7 @@ __export(layout_exports, {
 });
 module.exports = __toCommonJS(layout_exports);
 
-// components/layout/Stats.tsx
+// components/layout/stats/Stats.tsx
 var import_react2 = __toESM(require("react"));
 
 // components/elements/card/Card.tsx
@@ -179,7 +179,7 @@ function Skeleton({
   );
 }
 
-// components/layout/Stats.tsx
+// components/layout/stats/Stats.tsx
 var Stats = ({
   label,
   icon,
@@ -211,7 +211,7 @@ var Stats = ({
   ), chart && (isLoading ? /* @__PURE__ */ import_react2.default.createElement(Skeleton, { className: "hawa-mt-2 hawa-h-4 hawa-w-1/2" }) : chart)));
 };
 
-// components/layout/Sidebar.tsx
+// components/layout/sidebar/Sidebar.tsx
 var React5 = __toESM(require("react"));
 var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"));
 
@@ -296,7 +296,7 @@ var Chip = import_react3.default.forwardRef(
   }
 );
 
-// components/layout/Sidebar.tsx
+// components/layout/sidebar/Sidebar.tsx
 var Accordion = AccordionPrimitive.Root;
 var triggerStyles = "hawa-flex hawa-flex-1 hawa-items-center hawa-duration-75 hawa-select-none hawa-cursor-pointer  hawa-rounded hawa-justify-between hawa-p-2 hawa-px-3 hawa-font-medium hawa-transition-all  [&[data-state=open]>svg]:hawa--rotate-90";
 var AccordionItem = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React5.createElement(AccordionPrimitive.Item, { ref, className: cn(className), ...props }));
@@ -502,13 +502,13 @@ var SidebarItem = ({
   }
 };
 
-// components/layout/Copyrights.tsx
+// components/layout/copyrights/Copyrights.tsx
 var import_react4 = __toESM(require("react"));
 var Copyrights = (props) => {
   return /* @__PURE__ */ import_react4.default.createElement("div", { className: "hawa-my-2 hawa-flex hawa-flex-col hawa-items-center hawa-justify-center hawa-gap-1 hawa-text-xs hawa-text-gray-400" }, props.withLogo ? /* @__PURE__ */ import_react4.default.createElement("a", { href: props.onLogoClicked }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "hawa-cursor-pointer" }, /* @__PURE__ */ import_react4.default.createElement("image", { href: props.logoURL, width: 100, height: 50 }))) : null, /* @__PURE__ */ import_react4.default.createElement("div", null, props.version), props.credits ? props.credits : null);
 };
 
-// components/layout/Navbar.tsx
+// components/layout/navbar/Navbar.tsx
 var import_react5 = __toESM(require("react"));
 
 // components/elements/collapsible/Collapsible.tsx
@@ -517,7 +517,7 @@ var Collapsible = CollapsiblePrimitive.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
 var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
 
-// components/layout/Navbar.tsx
+// components/layout/navbar/Navbar.tsx
 var Navbar = ({
   backgroundColor,
   logo,
@@ -628,7 +628,7 @@ var Navbar = ({
   ));
 };
 
-// components/layout/AppLayout.tsx
+// components/layout/appLayout/AppLayout.tsx
 var import_react8 = __toESM(require("react"));
 
 // components/elements/button/Button.tsx
@@ -1262,7 +1262,7 @@ var Tooltip = ({
   );
 };
 
-// components/layout/AppLayout.tsx
+// components/layout/appLayout/AppLayout.tsx
 var AppLayout = ({
   profileMenuWidth = "default",
   DrawerFooterActions,
@@ -1616,7 +1616,7 @@ var MenuIcon = () => /* @__PURE__ */ import_react8.default.createElement(
   )
 );
 
-// components/layout/AppTopbar.tsx
+// components/layout/appTopbar/AppTopbar.tsx
 var import_react9 = __toESM(require("react"));
 var AppTopbar = ({ ...props }) => {
   const isRTL = props.direction === "ltr";
@@ -1721,7 +1721,7 @@ var AppTopbar = ({ ...props }) => {
   );
 };
 
-// components/layout/AppMenubar.tsx
+// components/layout/appMenubar/AppMenubar.tsx
 var React14 = __toESM(require("react"));
 var MenubarPrimitive = __toESM(require("@radix-ui/react-menubar"));
 var MenubarMenu = MenubarPrimitive.Menu;
@@ -1924,42 +1924,51 @@ var MenubarShortcut = ({
 };
 MenubarShortcut.displayname = "MenubarShortcut";
 
-// components/layout/AppTabs.tsx
+// components/layout/appTabs/AppTabs.tsx
 var import_react10 = __toESM(require("react"));
-var AppTabs = ({ tabs, ...props }) => {
+var AppTabs = ({ tabs, className }) => {
   const [selectedIndex, setSelectedIndex] = (0, import_react10.useState)(0);
-  return /* @__PURE__ */ import_react10.default.createElement("div", { className: "hawa-w-full hawa-border-b hawa-bg-gray-100 hawa-p-6 hawa-pb-0 dark:hawa-bg-gray-900 " }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-center " }, tabs.map((tab, index) => {
-    const selected = index === selectedIndex;
-    return /* @__PURE__ */ import_react10.default.createElement(
-      AppSingleTab,
-      {
-        key: index,
-        tab,
-        onClick: () => setSelectedIndex(index),
-        isSelected: selected
-      }
-    );
-  })));
-};
-var AppSingleTab = ({ tab, ...props }) => {
   return /* @__PURE__ */ import_react10.default.createElement(
     "div",
     {
-      key: props.key,
-      onClick: props.onClick,
       className: cn(
-        "hawa-z-10 hawa-flex hawa-translate-y-[1.1px] hawa-select-none hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-p-4 hawa-py-2 hawa-text-sm hawa-transition-all ",
-        "hawa-border",
-        // Always have a border but make it transparent
-        props.isSelected ? "hawa-border hawa-border-b-transparent hawa-bg-background" : "hawa-cursor-pointer hawa-border-transparent hover:hawa-bg-gray-200  dark:hover:hawa-bg-gray-700"
+        "hawa-w-full hawa-border-b hawa-bg-card hawa-p-6 hawa-pb-0",
+        className
       )
     },
-    tab.icon && tab.icon,
-    tab.label
+    /* @__PURE__ */ import_react10.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-center " }, tabs.map((tab, index) => {
+      const selected = index === selectedIndex;
+      return /* @__PURE__ */ import_react10.default.createElement(
+        "a",
+        {
+          href: tab.path,
+          key: index,
+          onMouseDown: (e) => {
+            if (tab.onMouseDown) {
+              tab.onMouseDown(e);
+            }
+          },
+          onClick: (e) => {
+            if (tab.onClick) {
+              tab.onClick(e);
+            }
+            setSelectedIndex(index);
+          },
+          className: cn(
+            "hawa-z-10 hawa-flex hawa-translate-y-[1.1px] hawa-select-none hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-p-4 hawa-py-2 hawa-text-sm hawa-transition-all ",
+            "hawa-border",
+            // Always have a border but make it transparent
+            selected ? "hawa-border hawa-border-b-transparent hawa-bg-background" : "hawa-cursor-pointer hawa-border-transparent hover:hawa-bg-gray-200  dark:hover:hawa-bg-gray-700"
+          )
+        },
+        tab.icon && tab.icon,
+        tab.label
+      );
+    }))
   );
 };
 
-// components/layout/DocsLayout.tsx
+// components/layout/docsLayout/DocsLayout.tsx
 var import_react14 = __toESM(require("react"));
 
 // components/elements/logos/Logos.tsx
@@ -2320,7 +2329,7 @@ var useBreakpoint = () => {
   return breakpoint;
 };
 
-// components/layout/DocsSidebar.tsx
+// components/layout/docsSidebar/DocsSidebar.tsx
 var import_react13 = __toESM(require("react"));
 var DocsSidebar = ({
   currentPage: propCurrentPage,
@@ -2383,7 +2392,7 @@ var DocsSidebar = ({
   );
 };
 
-// components/layout/DocsLayout.tsx
+// components/layout/docsLayout/DocsLayout.tsx
 var DocsLayout = ({
   direction = "ltr",
   drawerSize = "md",

package/dist/layout/index.mjs

@@ -19,7 +19,7 @@ import {
   cn
 } from "../chunk-3KMBSNM3.mjs";
 
-// components/layout/Stats.tsx
+// components/layout/stats/Stats.tsx
 import React from "react";
 var Stats = ({
   label,
@@ -52,7 +52,7 @@ var Stats = ({
   ), chart && (isLoading ? /* @__PURE__ */ React.createElement(Skeleton, { className: "hawa-mt-2 hawa-h-4 hawa-w-1/2" }) : chart)));
 };
 
-// components/layout/Sidebar.tsx
+// components/layout/sidebar/Sidebar.tsx
 import * as React2 from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 var Accordion = AccordionPrimitive.Root;
@@ -260,13 +260,13 @@ var SidebarItem = ({
   }
 };
 
-// components/layout/Copyrights.tsx
+// components/layout/copyrights/Copyrights.tsx
 import React3 from "react";
 var Copyrights = (props) => {
   return /* @__PURE__ */ React3.createElement("div", { className: "hawa-my-2 hawa-flex hawa-flex-col hawa-items-center hawa-justify-center hawa-gap-1 hawa-text-xs hawa-text-gray-400" }, props.withLogo ? /* @__PURE__ */ React3.createElement("a", { href: props.onLogoClicked }, /* @__PURE__ */ React3.createElement("div", { className: "hawa-cursor-pointer" }, /* @__PURE__ */ React3.createElement("image", { href: props.logoURL, width: 100, height: 50 }))) : null, /* @__PURE__ */ React3.createElement("div", null, props.version), props.credits ? props.credits : null);
 };
 
-// components/layout/Navbar.tsx
+// components/layout/navbar/Navbar.tsx
 import React4, { useState } from "react";
 
 // components/elements/collapsible/Collapsible.tsx
@@ -275,7 +275,7 @@ var Collapsible = CollapsiblePrimitive.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
 var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
 
-// components/layout/Navbar.tsx
+// components/layout/navbar/Navbar.tsx
 var Navbar = ({
   backgroundColor,
   logo,
@@ -386,7 +386,7 @@ var Navbar = ({
   ));
 };
 
-// components/layout/AppLayout.tsx
+// components/layout/appLayout/AppLayout.tsx
 import React5, { useEffect, useRef, useState as useState2 } from "react";
 var AppLayout = ({
   profileMenuWidth = "default",
@@ -741,7 +741,7 @@ var MenuIcon = () => /* @__PURE__ */ React5.createElement(
   )
 );
 
-// components/layout/AppTopbar.tsx
+// components/layout/appTopbar/AppTopbar.tsx
 import React6 from "react";
 var AppTopbar = ({ ...props }) => {
   const isRTL = props.direction === "ltr";
@@ -846,7 +846,7 @@ var AppTopbar = ({ ...props }) => {
   );
 };
 
-// components/layout/AppMenubar.tsx
+// components/layout/appMenubar/AppMenubar.tsx
 import * as React7 from "react";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 var MenubarMenu = MenubarPrimitive.Menu;
@@ -1049,45 +1049,54 @@ var MenubarShortcut = ({
 };
 MenubarShortcut.displayname = "MenubarShortcut";
 
-// components/layout/AppTabs.tsx
+// components/layout/appTabs/AppTabs.tsx
 import React8, { useState as useState3 } from "react";
-var AppTabs = ({ tabs, ...props }) => {
+var AppTabs = ({ tabs, className }) => {
   const [selectedIndex, setSelectedIndex] = useState3(0);
-  return /* @__PURE__ */ React8.createElement("div", { className: "hawa-w-full hawa-border-b hawa-bg-gray-100 hawa-p-6 hawa-pb-0 dark:hawa-bg-gray-900 " }, /* @__PURE__ */ React8.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-center " }, tabs.map((tab, index) => {
-    const selected = index === selectedIndex;
-    return /* @__PURE__ */ React8.createElement(
-      AppSingleTab,
-      {
-        key: index,
-        tab,
-        onClick: () => setSelectedIndex(index),
-        isSelected: selected
-      }
-    );
-  })));
-};
-var AppSingleTab = ({ tab, ...props }) => {
   return /* @__PURE__ */ React8.createElement(
     "div",
     {
-      key: props.key,
-      onClick: props.onClick,
       className: cn(
-        "hawa-z-10 hawa-flex hawa-translate-y-[1.1px] hawa-select-none hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-p-4 hawa-py-2 hawa-text-sm hawa-transition-all ",
-        "hawa-border",
-        // Always have a border but make it transparent
-        props.isSelected ? "hawa-border hawa-border-b-transparent hawa-bg-background" : "hawa-cursor-pointer hawa-border-transparent hover:hawa-bg-gray-200  dark:hover:hawa-bg-gray-700"
+        "hawa-w-full hawa-border-b hawa-bg-card hawa-p-6 hawa-pb-0",
+        className
       )
     },
-    tab.icon && tab.icon,
-    tab.label
+    /* @__PURE__ */ React8.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-center " }, tabs.map((tab, index) => {
+      const selected = index === selectedIndex;
+      return /* @__PURE__ */ React8.createElement(
+        "a",
+        {
+          href: tab.path,
+          key: index,
+          onMouseDown: (e) => {
+            if (tab.onMouseDown) {
+              tab.onMouseDown(e);
+            }
+          },
+          onClick: (e) => {
+            if (tab.onClick) {
+              tab.onClick(e);
+            }
+            setSelectedIndex(index);
+          },
+          className: cn(
+            "hawa-z-10 hawa-flex hawa-translate-y-[1.1px] hawa-select-none hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-p-4 hawa-py-2 hawa-text-sm hawa-transition-all ",
+            "hawa-border",
+            // Always have a border but make it transparent
+            selected ? "hawa-border hawa-border-b-transparent hawa-bg-background" : "hawa-cursor-pointer hawa-border-transparent hover:hawa-bg-gray-200  dark:hover:hawa-bg-gray-700"
+          )
+        },
+        tab.icon && tab.icon,
+        tab.label
+      );
+    }))
   );
 };
 
-// components/layout/DocsLayout.tsx
+// components/layout/docsLayout/DocsLayout.tsx
 import React10, { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
 
-// components/layout/DocsSidebar.tsx
+// components/layout/docsSidebar/DocsSidebar.tsx
 import React9 from "react";
 var DocsSidebar = ({
   currentPage: propCurrentPage,
@@ -1150,7 +1159,7 @@ var DocsSidebar = ({
   );
 };
 
-// components/layout/DocsLayout.tsx
+// components/layout/docsLayout/DocsLayout.tsx
 var DocsLayout = ({
   direction = "ltr",
   drawerSize = "md",

package/dist/navbar/index.d.mts

@@ -0,0 +1,17 @@
+import React__default from 'react';
+
+type NavigationMenuItem = {
+    label: string;
+    action: () => void;
+    trigger?: any;
+};
+type NavbarType = {
+    logo?: any;
+    buttons?: any;
+    menuItems?: NavigationMenuItem[];
+    handleLogoClick?: () => void;
+    backgroundColor?: string;
+};
+declare const Navbar: React__default.FC<NavbarType>;
+
+export { Navbar };

package/dist/navbar/index.d.ts

@@ -0,0 +1,17 @@
+import React__default from 'react';
+
+type NavigationMenuItem = {
+    label: string;
+    action: () => void;
+    trigger?: any;
+};
+type NavbarType = {
+    logo?: any;
+    buttons?: any;
+    menuItems?: NavigationMenuItem[];
+    handleLogoClick?: () => void;
+    backgroundColor?: string;
+};
+declare const Navbar: React__default.FC<NavbarType>;
+
+export { Navbar };

package/dist/navbar/index.js

@@ -0,0 +1,166 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// components/layout/navbar/index.ts
+var navbar_exports = {};
+__export(navbar_exports, {
+  Navbar: () => Navbar
+});
+module.exports = __toCommonJS(navbar_exports);
+
+// components/layout/navbar/Navbar.tsx
+var import_react = __toESM(require("react"));
+
+// components/elements/collapsible/Collapsible.tsx
+var CollapsiblePrimitive = __toESM(require("@radix-ui/react-collapsible"));
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
+var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
+
+// components/util.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// components/layout/navbar/Navbar.tsx
+var Navbar = ({
+  backgroundColor,
+  logo,
+  handleLogoClick,
+  ...props
+}) => {
+  var _a, _b;
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ import_react.default.createElement("nav", { className: " hawa-sticky hawa-top-2 hawa-transition-all" }, /* @__PURE__ */ import_react.default.createElement(
+    Collapsible,
+    {
+      className: "hawa-relative hawa-m-2 hawa-rounded  hawa-p-2",
+      style: { backgroundColor: backgroundColor || "#1f2937" }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-flex hawa-items-center hawa-justify-between hawa-px-3 " }, /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-flex hawa-items-center" }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "hawa-p-1.5 hawa-text-xl hawa-font-bold hawa-text-white",
+        onClick: () => {
+          if (handleLogoClick) {
+            handleLogoClick();
+          }
+        }
+      },
+      logo
+    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-hidden md:hawa-flex " }, (_a = props.menuItems) == null ? void 0 : _a.map((item, i) => /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: i,
+        onClick: item.action,
+        className: "hawa-cursor-pointer hawa-rounded hawa-p-1.5 hawa-px-2 hawa-text-center hawa-text-sm hawa-text-white hawa-transition-all hover:hawa-bg-gray-300 hover:hawa-text-black"
+      },
+      item.label
+    ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "hawa-m-0 hawa-flex hawa-h-fit hawa-p-0 md:hawa-hidden" }, /* @__PURE__ */ import_react.default.createElement(
+      CollapsibleTrigger2,
+      {
+        onClick: () => setIsOpen(!isOpen),
+        className: "hawa-h-full hawa-text-white selection:hawa-p-0 ",
+        "aria-label": "Toggle menu"
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: cn(
+            "hawa-fixed hawa-h-6 hawa-w-6",
+            isOpen ? "hawa-invisible" : "hawa-visible"
+          )
+        },
+        /* @__PURE__ */ import_react.default.createElement("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
+        /* @__PURE__ */ import_react.default.createElement("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
+        /* @__PURE__ */ import_react.default.createElement("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: cn(
+            "hawa-h-6 hawa-w-6",
+            !isOpen ? "hawa-invisible" : "hawa-visible"
+          )
+        },
+        /* @__PURE__ */ import_react.default.createElement("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ import_react.default.createElement("path", { d: "m6 6 12 12" })
+      )
+    ))),
+    /* @__PURE__ */ import_react.default.createElement(
+      CollapsibleContent2,
+      {
+        className: cn(
+          "data-[state=closed]:hawa-opacity-0",
+          "data-[state=open]:hawa-animate-in",
+          "data-[state=open]:hawa-fade-in-90",
+          "hawa-absolute hawa-left-0 hawa-top-[60px] hawa-flex hawa-flex-col  hawa-rounded hawa-border  hawa-bg-gray-200 hawa-p-1 hawa-transition-all"
+          // "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
+        }
+      },
+      (_b = props.menuItems) == null ? void 0 : _b.map((item, i) => /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          key: i,
+          onClick: item.action,
+          className: "hawa-cursor-pointer hawa-rounded hawa-p-2 hawa-px-10 hawa-text-center hawa-text-black hawa-transition-all hover:hawa-bg-gray-300"
+        },
+        item.label
+      ))
+    )
+  ));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Navbar
+});

package/dist/navbar/index.mjs

@@ -0,0 +1,126 @@
+import {
+  cn
+} from "../chunk-TE3BKEXL.mjs";
+
+// components/layout/navbar/Navbar.tsx
+import React, { useState } from "react";
+
+// components/elements/collapsible/Collapsible.tsx
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
+var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
+
+// components/layout/navbar/Navbar.tsx
+var Navbar = ({
+  backgroundColor,
+  logo,
+  handleLogoClick,
+  ...props
+}) => {
+  var _a, _b;
+  const [isOpen, setIsOpen] = useState(false);
+  return /* @__PURE__ */ React.createElement("nav", { className: " hawa-sticky hawa-top-2 hawa-transition-all" }, /* @__PURE__ */ React.createElement(
+    Collapsible,
+    {
+      className: "hawa-relative hawa-m-2 hawa-rounded  hawa-p-2",
+      style: { backgroundColor: backgroundColor || "#1f2937" }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-items-center hawa-justify-between hawa-px-3 " }, /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-items-center" }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "hawa-p-1.5 hawa-text-xl hawa-font-bold hawa-text-white",
+        onClick: () => {
+          if (handleLogoClick) {
+            handleLogoClick();
+          }
+        }
+      },
+      logo
+    )), /* @__PURE__ */ React.createElement("div", { className: "hawa-hidden md:hawa-flex " }, (_a = props.menuItems) == null ? void 0 : _a.map((item, i) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: i,
+        onClick: item.action,
+        className: "hawa-cursor-pointer hawa-rounded hawa-p-1.5 hawa-px-2 hawa-text-center hawa-text-sm hawa-text-white hawa-transition-all hover:hawa-bg-gray-300 hover:hawa-text-black"
+      },
+      item.label
+    ))), /* @__PURE__ */ React.createElement("div", { className: "hawa-m-0 hawa-flex hawa-h-fit hawa-p-0 md:hawa-hidden" }, /* @__PURE__ */ React.createElement(
+      CollapsibleTrigger2,
+      {
+        onClick: () => setIsOpen(!isOpen),
+        className: "hawa-h-full hawa-text-white selection:hawa-p-0 ",
+        "aria-label": "Toggle menu"
+      },
+      /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: cn(
+            "hawa-fixed hawa-h-6 hawa-w-6",
+            isOpen ? "hawa-invisible" : "hawa-visible"
+          )
+        },
+        /* @__PURE__ */ React.createElement("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
+        /* @__PURE__ */ React.createElement("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
+        /* @__PURE__ */ React.createElement("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
+      ),
+      /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: cn(
+            "hawa-h-6 hawa-w-6",
+            !isOpen ? "hawa-invisible" : "hawa-visible"
+          )
+        },
+        /* @__PURE__ */ React.createElement("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ React.createElement("path", { d: "m6 6 12 12" })
+      )
+    ))),
+    /* @__PURE__ */ React.createElement(
+      CollapsibleContent2,
+      {
+        className: cn(
+          "data-[state=closed]:hawa-opacity-0",
+          "data-[state=open]:hawa-animate-in",
+          "data-[state=open]:hawa-fade-in-90",
+          "hawa-absolute hawa-left-0 hawa-top-[60px] hawa-flex hawa-flex-col  hawa-rounded hawa-border  hawa-bg-gray-200 hawa-p-1 hawa-transition-all"
+          // "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
+        }
+      },
+      (_b = props.menuItems) == null ? void 0 : _b.map((item, i) => /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: i,
+          onClick: item.action,
+          className: "hawa-cursor-pointer hawa-rounded hawa-p-2 hawa-px-10 hawa-text-center hawa-text-black hawa-transition-all hover:hawa-bg-gray-300"
+        },
+        item.label
+      ))
+    )
+  ));
+};
+export {
+  Navbar
+};