@intlayer/design-system 3.0.3 → 3.1.0

package/dist/components/Navbar/DesktopNavbar.cjs

@@ -2,42 +2,26 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../jsx-runtime-DvCoRj5u.cjs");
-const components_Button_Button = require("../Button/Button.cjs");
-const components_Navbar_useNavigation = require("./useNavigation.cjs");
+const components_TabSelector_TabSelector = require("../TabSelector/TabSelector.cjs");
 const DesktopNavbar = ({
   logo,
   sections,
-  rightItems
+  rightItems,
+  selectedChoice
 }) => {
-  const { activeSection, onClickSection } = components_Navbar_useNavigation.useNavActions();
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("nav", { className: "bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-screen items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur", children: [
     logo,
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-      "div",
+      components_TabSelector_TabSelector.TabSelector,
       {
-        className: "text-neutral dark:text-neutral-dark ml-[10vw] flex flex-row gap-6 tracking-wide",
-        role: "tablist",
-        "aria-orientation": "horizontal",
-        "aria-multiselectable": "false",
-        children: sections?.map(({ id, url, label, title, onClick }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-          components_Button_Button.Button,
-          {
-            role: "tab",
-            variant: "invisible-link",
-            color: "text",
-            "aria-selected": activeSection === id,
-            label,
-            onClick: (e) => {
-              onClickSection(id, url);
-              onClick(e);
-            },
-            children: title
-          },
-          id
-        ))
+        selectedChoice,
+        className: "text-neutral dark:text-neutral-dark ml-[2vw] gap-3 overflow-x-auto tracking-wide lg:ml-[10vw] lg:gap-6",
+        tabs: sections,
+        hoverable: true,
+        color: "text"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "mr-4 flex w-full items-center justify-end gap-2 md:gap-4", children: rightItems })
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "mr-4 flex items-center justify-end gap-2 md:gap-4", children: rightItems })
   ] });
 };
 exports.DesktopNavbar = DesktopNavbar;

package/dist/components/Navbar/DesktopNavbar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopNavbar.cjs","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, ReactNode } from 'react';\n\nimport { Button } from '../Button';\nimport { useNavActions } from './useNavigation';\nimport type { NavSection } from '.';\n\ntype DesktopNavbarProps = {\n  logo: ReactNode;\n  sections: NavSection[];\n  rightItems?: ReactNode;\n};\n\nexport const DesktopNavbar: FC<DesktopNavbarProps> = ({\n  logo,\n  sections,\n  rightItems,\n}) => {\n  const { activeSection, onClickSection } = useNavActions();\n\n  return (\n    <nav className=\"bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-screen items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n      {logo}\n      <div\n        className=\"text-neutral dark:text-neutral-dark ml-[10vw] flex flex-row gap-6 tracking-wide\"\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        aria-multiselectable=\"false\"\n      >\n        {sections?.map(({ id, url, label, title, onClick }) => (\n          <Button\n            key={id}\n            role=\"tab\"\n            variant=\"invisible-link\"\n            color=\"text\"\n            aria-selected={activeSection === id}\n            label={label}\n            onClick={(e) => {\n              onClickSection(id, url);\n              onClick(e);\n            }}\n          >\n            {title}\n          </Button>\n        ))}\n      </div>\n      <div className=\"mr-4 flex w-full items-center justify-end gap-2 md:gap-4\">\n        {rightItems}\n      </div>\n    </nav>\n  );\n};\n"],"names":["useNavActions","jsxs","jsx","Button"],"mappings":";;;;;;AAcO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,eAAe,eAAe,IAAIA,gCAAc,cAAA;AAGtD,SAAAC,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,gJACZ,UAAA;AAAA,IAAA;AAAA,IACDC,2BAAA,kBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,oBAAiB;AAAA,QACjB,wBAAqB;AAAA,QAEpB,UAAA,UAAU,IAAI,CAAC,EAAE,IAAI,KAAK,OAAO,OAAO,QAAA,MACvCA,2BAAA,kBAAA;AAAA,UAACC,yBAAA;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,iBAAe,kBAAkB;AAAA,YACjC;AAAA,YACA,SAAS,CAAC,MAAM;AACd,6BAAe,IAAI,GAAG;AACtB,sBAAQ,CAAC;AAAA,YACX;AAAA,YAEC,UAAA;AAAA,UAAA;AAAA,UAXI;AAAA,QAAA,CAaR;AAAA,MAAA;AAAA,IACH;AAAA,IACCD,2BAAA,kBAAA,IAAA,OAAA,EAAI,WAAU,4DACZ,UACH,YAAA;AAAA,EACF,EAAA,CAAA;AAEJ;;"}
+{"version":3,"file":"DesktopNavbar.cjs","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { TabSelector, TabProps } from '../TabSelector';\n\ntype DesktopNavbarProps<T extends TabProps> = {\n  logo: ReactNode;\n  sections: ReactElement<T>[];\n  rightItems?: ReactNode;\n  selectedChoice: T['key'];\n};\n\nexport const DesktopNavbar = <T extends TabProps>({\n  logo,\n  sections,\n  rightItems,\n  selectedChoice,\n}: DesktopNavbarProps<T>) => {\n  return (\n    <nav className=\"bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-screen items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n      {logo}\n\n      <TabSelector\n        selectedChoice={selectedChoice}\n        className=\"text-neutral dark:text-neutral-dark ml-[2vw] gap-3 overflow-x-auto tracking-wide lg:ml-[10vw] lg:gap-6\"\n        tabs={sections}\n        hoverable\n        color=\"text\"\n      />\n\n      <div className=\"mr-4 flex items-center justify-end gap-2 md:gap-4\">\n        {rightItems}\n      </div>\n    </nav>\n  );\n};\n"],"names":["jsxs","jsx","TabSelector"],"mappings":";;;;;AAaO,MAAM,gBAAgB,CAAqB;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAEzB,SAAAA,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,gJACZ,UAAA;AAAA,IAAA;AAAA,IAEDC,2BAAA,kBAAA;AAAA,MAACC,mCAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,MAAM;AAAA,QACN,WAAS;AAAA,QACT,OAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAECD,2BAAA,kBAAA,IAAA,OAAA,EAAI,WAAU,qDACZ,UACH,YAAA;AAAA,EACF,EAAA,CAAA;AAEJ;;"}

package/dist/components/Navbar/DesktopNavbar.d.ts

@@ -1,11 +1,11 @@
-import { FC, ReactNode } from 'react';
-import { NavSection } from '.';
-
-type DesktopNavbarProps = {
+import { ReactElement, ReactNode } from 'react';
+import { TabProps } from '../TabSelector';
+type DesktopNavbarProps<T extends TabProps> = {
     logo: ReactNode;
-    sections: NavSection[];
+    sections: ReactElement<T>[];
     rightItems?: ReactNode;
+    selectedChoice: T['key'];
 };
-export declare const DesktopNavbar: FC<DesktopNavbarProps>;
+export declare const DesktopNavbar: <T extends TabProps>({ logo, sections, rightItems, selectedChoice, }: DesktopNavbarProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DesktopNavbar.d.ts.map

package/dist/components/Navbar/DesktopNavbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopNavbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC;AAEpC,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAsChD,CAAC"}
+{"version":3,"file":"DesktopNavbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAe,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEvD,KAAK,kBAAkB,CAAC,CAAC,SAAS,QAAQ,IAAI;IAC5C,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,cAAc,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,QAAQ,mDAK7C,kBAAkB,CAAC,CAAC,CAAC,4CAkBvB,CAAC"}

package/dist/components/Navbar/DesktopNavbar.mjs

@@ -1,41 +1,25 @@
 "use client";
 import { j as jsxRuntimeExports } from "../../jsx-runtime-BgSF1HG2.js";
-import { Button } from "../Button/Button.mjs";
-import { useNavActions } from "./useNavigation.mjs";
+import { TabSelector } from "../TabSelector/TabSelector.mjs";
 const DesktopNavbar = ({
   logo,
   sections,
-  rightItems
+  rightItems,
+  selectedChoice
 }) => {
-  const { activeSection, onClickSection } = useNavActions();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("nav", { className: "bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-screen items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur", children: [
     logo,
     /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
+      TabSelector,
       {
-        className: "text-neutral dark:text-neutral-dark ml-[10vw] flex flex-row gap-6 tracking-wide",
-        role: "tablist",
-        "aria-orientation": "horizontal",
-        "aria-multiselectable": "false",
-        children: sections?.map(({ id, url, label, title, onClick }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button,
-          {
-            role: "tab",
-            variant: "invisible-link",
-            color: "text",
-            "aria-selected": activeSection === id,
-            label,
-            onClick: (e) => {
-              onClickSection(id, url);
-              onClick(e);
-            },
-            children: title
-          },
-          id
-        ))
+        selectedChoice,
+        className: "text-neutral dark:text-neutral-dark ml-[2vw] gap-3 overflow-x-auto tracking-wide lg:ml-[10vw] lg:gap-6",
+        tabs: sections,
+        hoverable: true,
+        color: "text"
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mr-4 flex w-full items-center justify-end gap-2 md:gap-4", children: rightItems })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mr-4 flex items-center justify-end gap-2 md:gap-4", children: rightItems })
   ] });
 };
 export {

package/dist/components/Navbar/DesktopNavbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopNavbar.mjs","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, ReactNode } from 'react';\n\nimport { Button } from '../Button';\nimport { useNavActions } from './useNavigation';\nimport type { NavSection } from '.';\n\ntype DesktopNavbarProps = {\n  logo: ReactNode;\n  sections: NavSection[];\n  rightItems?: ReactNode;\n};\n\nexport const DesktopNavbar: FC<DesktopNavbarProps> = ({\n  logo,\n  sections,\n  rightItems,\n}) => {\n  const { activeSection, onClickSection } = useNavActions();\n\n  return (\n    <nav className=\"bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-screen items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n      {logo}\n      <div\n        className=\"text-neutral dark:text-neutral-dark ml-[10vw] flex flex-row gap-6 tracking-wide\"\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        aria-multiselectable=\"false\"\n      >\n        {sections?.map(({ id, url, label, title, onClick }) => (\n          <Button\n            key={id}\n            role=\"tab\"\n            variant=\"invisible-link\"\n            color=\"text\"\n            aria-selected={activeSection === id}\n            label={label}\n            onClick={(e) => {\n              onClickSection(id, url);\n              onClick(e);\n            }}\n          >\n            {title}\n          </Button>\n        ))}\n      </div>\n      <div className=\"mr-4 flex w-full items-center justify-end gap-2 md:gap-4\">\n        {rightItems}\n      </div>\n    </nav>\n  );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;;AAcO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,eAAe,eAAe,IAAI,cAAc;AAGtD,SAAAA,kCAAA,KAAC,OAAI,EAAA,WAAU,gJACZ,UAAA;AAAA,IAAA;AAAA,IACDC,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,oBAAiB;AAAA,QACjB,wBAAqB;AAAA,QAEpB,UAAA,UAAU,IAAI,CAAC,EAAE,IAAI,KAAK,OAAO,OAAO,QAAA,MACvCA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,iBAAe,kBAAkB;AAAA,YACjC;AAAA,YACA,SAAS,CAAC,MAAM;AACd,6BAAe,IAAI,GAAG;AACtB,sBAAQ,CAAC;AAAA,YACX;AAAA,YAEC,UAAA;AAAA,UAAA;AAAA,UAXI;AAAA,QAAA,CAaR;AAAA,MAAA;AAAA,IACH;AAAA,IACCA,kCAAA,IAAA,OAAA,EAAI,WAAU,4DACZ,UACH,YAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"DesktopNavbar.mjs","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { TabSelector, TabProps } from '../TabSelector';\n\ntype DesktopNavbarProps<T extends TabProps> = {\n  logo: ReactNode;\n  sections: ReactElement<T>[];\n  rightItems?: ReactNode;\n  selectedChoice: T['key'];\n};\n\nexport const DesktopNavbar = <T extends TabProps>({\n  logo,\n  sections,\n  rightItems,\n  selectedChoice,\n}: DesktopNavbarProps<T>) => {\n  return (\n    <nav className=\"bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-screen items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n      {logo}\n\n      <TabSelector\n        selectedChoice={selectedChoice}\n        className=\"text-neutral dark:text-neutral-dark ml-[2vw] gap-3 overflow-x-auto tracking-wide lg:ml-[10vw] lg:gap-6\"\n        tabs={sections}\n        hoverable\n        color=\"text\"\n      />\n\n      <div className=\"mr-4 flex items-center justify-end gap-2 md:gap-4\">\n        {rightItems}\n      </div>\n    </nav>\n  );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;AAaO,MAAM,gBAAgB,CAAqB;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAEzB,SAAAA,kCAAA,KAAC,OAAI,EAAA,WAAU,gJACZ,UAAA;AAAA,IAAA;AAAA,IAEDC,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,MAAM;AAAA,QACN,WAAS;AAAA,QACT,OAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAECA,kCAAA,IAAA,OAAA,EAAI,WAAU,qDACZ,UACH,YAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/components/Navbar/MobileNavbar.cjs

@@ -18,23 +18,6 @@ require("deepmerge");
 const utils_cn = require("../../utils/cn.cjs");
 const components_MaxHeightSmoother_index = require("../MaxHeightSmoother/index.cjs");
 const components_Navbar_Burger = require("./Burger.cjs");
-const components_Navbar_useNavigation = require("./useNavigation.cjs");
-const sectionListItemVariants = {
-  open: {
-    y: 0,
-    opacity: 1,
-    transition: {
-      y: { stiffness: 1e3, velocity: -100 }
-    }
-  },
-  closed: {
-    y: 50,
-    opacity: 0,
-    transition: {
-      y: { stiffness: 1e3 }
-    }
-  }
-};
 const navVariants = {
   open: {
     transition: { staggerChildren: 0.07, delayChildren: 0.2 }
@@ -43,28 +26,6 @@ const navVariants = {
     transition: { staggerChildren: 0.05, staggerDirection: -1 }
   }
 };
-const MotionSection = framerMotion.m.div;
-const SectionList = ({
-  sections,
-  activeSection,
-  onClickSection
-}) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { role: "tablist", "aria-orientation": "vertical", "aria-multiselectable": "false", children: sections?.map(({ id, label, url, title, onClick }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-  MotionSection,
-  {
-    className: "hover:text-primary aria-selected:text-primary w-full cursor-pointer p-3 text-center transition",
-    role: "tab",
-    id,
-    "aria-label": label,
-    onClick: (e) => {
-      onClickSection(id, url);
-      onClick?.(e);
-    },
-    variants: sectionListItemVariants,
-    "aria-selected": activeSection === id,
-    children: title
-  },
-  id
-)) });
 const bgStyle = "bg-card/95 dark:bg-card-dark/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur";
 const MobileNavbar = ({
   logo,
@@ -77,7 +38,6 @@ const MobileNavbar = ({
   const [isHidden, setIsHidden] = require$$0.useState(false);
   const [isUnrolled, setIsUnrolled] = require$$0.useState(false);
   const navRef = require$$0.useRef(null);
-  const { activeSection, onClickSection } = components_Navbar_useNavigation.useNavActions();
   hooks_useScrollBlockage_index.useScrollBlockage({
     disableScroll: isUnrolled,
     key: "mobile_nav"
@@ -138,23 +98,9 @@ const MobileNavbar = ({
                 },
                 children: [
                   topChildren,
-                  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col justify-between", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-                      SectionList,
-                      {
-                        sections: topSections,
-                        activeSection,
-                        onClickSection
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-                      SectionList,
-                      {
-                        sections: bottomSections,
-                        activeSection,
-                        onClickSection
-                      }
-                    )
+                  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col justify-center", children: [
+                    topSections,
+                    bottomSections
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3", children: bottomChildren })
                 ]

package/dist/components/Navbar/MobileNavbar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MobileNavbar.cjs","sources":["../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { m, type Variants } from 'framer-motion';\nimport { useRef, useState, type FC, type ReactNode } from 'react';\nimport { useScrollBlockage, useScrollDetection } from '../../hooks';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { Burger } from './Burger';\nimport { useNavActions } from './useNavigation';\nimport type { NavSection } from '.';\n\ntype MobileNavbarProps = {\n  logo: ReactNode;\n  topChildren?: ReactNode;\n  topSections?: NavSection[];\n  bottomChildren?: ReactNode;\n  bottomSections?: NavSection[];\n  rightItems?: ReactNode;\n};\n\ntype SectionListProps = {\n  sections: NavSection[];\n  activeSection: string | null;\n  onClickSection: (id: string, url?: string) => void;\n};\n\nconst sectionListItemVariants: Variants = {\n  open: {\n    y: 0,\n    opacity: 1,\n    transition: {\n      y: { stiffness: 1000, velocity: -100 },\n    },\n  },\n  closed: {\n    y: 50,\n    opacity: 0,\n    transition: {\n      y: { stiffness: 1000 },\n    },\n  },\n};\n\nconst navVariants: Variants = {\n  open: {\n    transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n  },\n  closed: {\n    transition: { staggerChildren: 0.05, staggerDirection: -1 },\n  },\n};\n\nconst MotionSection = m.div;\n\nconst SectionList: FC<SectionListProps> = ({\n  sections,\n  activeSection,\n  onClickSection,\n}) => (\n  <div role=\"tablist\" aria-orientation=\"vertical\" aria-multiselectable=\"false\">\n    {sections?.map(({ id, label, url, title, onClick }) => (\n      <MotionSection\n        className=\"hover:text-primary aria-selected:text-primary w-full cursor-pointer p-3 text-center transition\"\n        role=\"tab\"\n        key={id}\n        id={id}\n        aria-label={label}\n        onClick={(e) => {\n          onClickSection(id, url);\n          onClick?.(e);\n        }}\n        variants={sectionListItemVariants}\n        aria-selected={activeSection === id}\n      >\n        {title}\n      </MotionSection>\n    ))}\n  </div>\n);\n\nconst bgStyle =\n  'bg-card/95 dark:bg-card-dark/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n// css`\n//   -webkit-backdrop-filter: var(--tw-backdrop-blur)\n//     var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)\n//     var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)\n//     var(--tw-backdrop-invert) var(--tw-backdrop-opacity)\n//     var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n// `,\n\nexport const MobileNavbar: FC<MobileNavbarProps> = ({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n}) => {\n  const [isHidden, setIsHidden] = useState<boolean>(false);\n  const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n\n  const navRef = useRef<HTMLDivElement>(null);\n\n  const { activeSection, onClickSection } = useNavActions();\n  useScrollBlockage({\n    disableScroll: isUnrolled,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: !isUnrolled,\n  });\n\n  const backDivHeight = !isHidden ? (navRef.current?.clientHeight ?? 0) : 0;\n\n  const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n  return (\n    <nav\n      className={cn(\n        bgStyle,\n        'sticky top-0 z-50 flex w-screen flex-col  transition',\n        isHidden ? '-translate-y-full' : 'translate-y-0'\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className=\"flex w-full items-center justify-between gap-[10vw] px-4 py-3\"\n        ref={navRef}\n      >\n        {logo}\n\n        <div className=\"flex w-full items-center justify-end gap-6\">\n          <div className=\"flex w-full items-center justify-end gap-1\">\n            {rightItems}\n          </div>\n\n          {isBurgerShowed && (\n            <Burger\n              isActive={isUnrolled}\n              onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          bgStyle,\n          'absolute bottom-0 left-0 w-full translate-y-full'\n        )}\n      >\n        <MaxHeightSmoother isHidden={!isUnrolled}>\n          <m.div\n            className=\"text-text dark:text-text-dark flex w-full flex-col pb-[20%] pt-10 text-lg tracking-wide\"\n            onClick={() => setIsUnrolled(false)}\n            animate={isUnrolled ? 'open' : 'closed'}\n            variants={navVariants}\n            style={{\n              height: `calc(100vh - ${backDivHeight}px)`,\n            }}\n          >\n            {topChildren}\n            <div className=\"flex h-full flex-col justify-between\">\n              <SectionList\n                sections={topSections}\n                activeSection={activeSection}\n                onClickSection={onClickSection}\n              />\n              <SectionList\n                sections={bottomSections}\n                activeSection={activeSection}\n                onClickSection={onClickSection}\n              />\n            </div>\n\n            <div className=\"m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3\">\n              {bottomChildren}\n            </div>\n          </m.div>\n        </MaxHeightSmoother>\n      </div>\n    </nav>\n  );\n};\n"],"names":["m","jsx","useState","useRef","useNavActions","useScrollBlockage","useScrollDetection","jsxs","cn","Burger","isUnrolled","MaxHeightSmoother"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0BA,MAAM,0BAAoC;AAAA,EACxC,MAAM;AAAA,IACJ,GAAG;AAAA,IACH,SAAS;AAAA,IACT,YAAY;AAAA,MACV,GAAG,EAAE,WAAW,KAAM,UAAU,KAAK;AAAA,IACvC;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,SAAS;AAAA,IACT,YAAY;AAAA,MACV,GAAG,EAAE,WAAW,IAAK;AAAA,IACvB;AAAA,EACF;AACF;AAEA,MAAM,cAAwB;AAAA,EAC5B,MAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,MAAM,eAAe,IAAI;AAAA,EAC1D;AAAA,EACA,QAAQ;AAAA,IACN,YAAY,EAAE,iBAAiB,MAAM,kBAAkB,GAAG;AAAA,EAC5D;AACF;AAEA,MAAM,gBAAgBA,aAAE,EAAA;AAExB,MAAM,cAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AACF,uDACG,OAAI,EAAA,MAAK,WAAU,oBAAiB,YAAW,wBAAqB,SAClE,UAAU,UAAA,IAAI,CAAC,EAAE,IAAI,OAAO,KAAK,OAAO,cACvCC,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,MAAK;AAAA,IAEL;AAAA,IACA,cAAY;AAAA,IACZ,SAAS,CAAC,MAAM;AACd,qBAAe,IAAI,GAAG;AACtB,gBAAU,CAAC;AAAA,IACb;AAAA,IACA,UAAU;AAAA,IACV,iBAAe,kBAAkB;AAAA,IAEhC,UAAA;AAAA,EAAA;AAAA,EAVI;AAWP,CACD,EACH,CAAA;AAGF,MAAM,UACJ;AASK,MAAM,eAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA,cAAc,CAAC;AAAA,EACf;AAAA,EACA,iBAAiB,CAAC;AAAA,EAClB;AACF,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIC,oBAAkB,KAAK;AACvD,QAAM,CAAC,YAAY,aAAa,IAAIA,oBAAkB,KAAK;AAErD,QAAA,SAASC,kBAAuB,IAAI;AAE1C,QAAM,EAAE,eAAe,eAAe,IAAIC,gCAAc,cAAA;AACtCC,kDAAA;AAAA,IAChB,eAAe;AAAA,IACf,KAAK;AAAA,EAAA,CACN;AAEkBC,8CAAA;AAAA,IACjB,YAAY,MAAM,YAAY,KAAK;AAAA,IACnC,cAAc,MAAM,YAAY,IAAI;AAAA,IACpC,WAAW,CAAC;AAAA,EAAA,CACb;AAED,QAAM,gBAAgB,CAAC,WAAY,OAAO,SAAS,gBAAgB,IAAK;AAExE,QAAM,iBAAiB,YAAY,SAAS,eAAe,SAAS;AAGlE,SAAAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACA;AAAA,QACA,WAAW,sBAAsB;AAAA,MACnC;AAAA,MACA,IAAG;AAAA,MAEH,UAAA;AAAA,QAAAD,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,KAAK;AAAA,YAEJ,UAAA;AAAA,cAAA;AAAA,cAEDA,2BAAAA,kBAAAA,KAAC,OAAI,EAAA,WAAU,8CACb,UAAA;AAAA,gBAACN,2BAAA,kBAAA,IAAA,OAAA,EAAI,WAAU,8CACZ,UACH,YAAA;AAAA,gBAEC,kBACCA,2BAAA,kBAAA;AAAA,kBAACQ,yBAAA;AAAA,kBAAA;AAAA,oBACC,UAAU;AAAA,oBACV,SAAS,MAAM,cAAc,CAACC,gBAAe,CAACA,WAAU;AAAA,kBAAA;AAAA,gBAC1D;AAAA,cAAA,GAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,QAEAT,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWO,SAAA;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YAEA,UAACP,2BAAA,kBAAA,IAAAU,sDAAA,EAAkB,UAAU,CAAC,YAC5B,UAAAJ,2BAAA,kBAAA;AAAA,cAACP,aAAAA,EAAE;AAAA,cAAF;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,MAAM,cAAc,KAAK;AAAA,gBAClC,SAAS,aAAa,SAAS;AAAA,gBAC/B,UAAU;AAAA,gBACV,OAAO;AAAA,kBACL,QAAQ,gBAAgB,aAAa;AAAA,gBACvC;AAAA,gBAEC,UAAA;AAAA,kBAAA;AAAA,kBACDO,2BAAAA,kBAAAA,KAAC,OAAI,EAAA,WAAU,wCACb,UAAA;AAAA,oBAAAN,2BAAA,kBAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,UAAU;AAAA,wBACV;AAAA,wBACA;AAAA,sBAAA;AAAA,oBACF;AAAA,oBACAA,2BAAA,kBAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,UAAU;AAAA,wBACV;AAAA,wBACA;AAAA,sBAAA;AAAA,oBACF;AAAA,kBAAA,GACF;AAAA,kBAECA,2BAAA,kBAAA,IAAA,OAAA,EAAI,WAAU,gFACZ,UACH,gBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,GAEJ;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"MobileNavbar.cjs","sources":["../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { m, type Variants } from 'framer-motion';\nimport { useRef, useState, type ReactElement, type ReactNode } from 'react';\nimport { useScrollBlockage, useScrollDetection } from '../../hooks';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { TabProps } from '../TabSelector';\nimport { Burger } from './Burger';\n\ntype MobileNavbarProps<T extends TabProps> = {\n  logo: ReactNode;\n  topChildren?: ReactNode;\n  topSections?: ReactElement<T>[];\n  bottomChildren?: ReactNode;\n  bottomSections?: ReactElement<T>[];\n  rightItems?: ReactNode;\n};\n\nconst navVariants: Variants = {\n  open: {\n    transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n  },\n  closed: {\n    transition: { staggerChildren: 0.05, staggerDirection: -1 },\n  },\n};\n\nconst bgStyle =\n  'bg-card/95 dark:bg-card-dark/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n\nexport const MobileNavbar = <T extends TabProps>({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n}: MobileNavbarProps<T>) => {\n  const [isHidden, setIsHidden] = useState<boolean>(false);\n  const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n\n  const navRef = useRef<HTMLDivElement>(null);\n\n  useScrollBlockage({\n    disableScroll: isUnrolled,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: !isUnrolled,\n  });\n\n  const backDivHeight = !isHidden ? (navRef.current?.clientHeight ?? 0) : 0;\n\n  const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n  return (\n    <nav\n      className={cn(\n        bgStyle,\n        'sticky top-0 z-50 flex w-screen flex-col  transition',\n        isHidden ? '-translate-y-full' : 'translate-y-0'\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className=\"flex w-full items-center justify-between gap-[10vw] px-4 py-3\"\n        ref={navRef}\n      >\n        {logo}\n\n        <div className=\"flex w-full items-center justify-end gap-6\">\n          <div className=\"flex w-full items-center justify-end gap-1\">\n            {rightItems}\n          </div>\n\n          {isBurgerShowed && (\n            <Burger\n              isActive={isUnrolled}\n              onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          bgStyle,\n          'absolute bottom-0 left-0 w-full translate-y-full'\n        )}\n      >\n        <MaxHeightSmoother isHidden={!isUnrolled}>\n          <m.div\n            className=\"text-text dark:text-text-dark flex w-full flex-col pb-[20%] pt-10 text-lg tracking-wide\"\n            onClick={() => setIsUnrolled(false)}\n            animate={isUnrolled ? 'open' : 'closed'}\n            variants={navVariants}\n            style={{\n              height: `calc(100vh - ${backDivHeight}px)`,\n            }}\n          >\n            {topChildren}\n            <div className=\"flex h-full flex-col justify-center\">\n              {topSections}\n              {bottomSections}\n            </div>\n\n            <div className=\"m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3\">\n              {bottomChildren}\n            </div>\n          </m.div>\n        </MaxHeightSmoother>\n      </div>\n    </nav>\n  );\n};\n"],"names":["useState","useRef","useScrollBlockage","useScrollDetection","jsxs","cn","jsx","Burger","isUnrolled","MaxHeightSmoother","m"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,cAAwB;AAAA,EAC5B,MAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,MAAM,eAAe,IAAI;AAAA,EAC1D;AAAA,EACA,QAAQ;AAAA,IACN,YAAY,EAAE,iBAAiB,MAAM,kBAAkB,GAAG;AAAA,EAC5D;AACF;AAEA,MAAM,UACJ;AAEK,MAAM,eAAe,CAAqB;AAAA,EAC/C;AAAA,EACA;AAAA,EACA,cAAc,CAAC;AAAA,EACf;AAAA,EACA,iBAAiB,CAAC;AAAA,EAClB;AACF,MAA4B;AAC1B,QAAM,CAAC,UAAU,WAAW,IAAIA,oBAAkB,KAAK;AACvD,QAAM,CAAC,YAAY,aAAa,IAAIA,oBAAkB,KAAK;AAErD,QAAA,SAASC,kBAAuB,IAAI;AAExBC,kDAAA;AAAA,IAChB,eAAe;AAAA,IACf,KAAK;AAAA,EAAA,CACN;AAEkBC,8CAAA;AAAA,IACjB,YAAY,MAAM,YAAY,KAAK;AAAA,IACnC,cAAc,MAAM,YAAY,IAAI;AAAA,IACpC,WAAW,CAAC;AAAA,EAAA,CACb;AAED,QAAM,gBAAgB,CAAC,WAAY,OAAO,SAAS,gBAAgB,IAAK;AAExE,QAAM,iBAAiB,YAAY,SAAS,eAAe,SAAS;AAGlE,SAAAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACA;AAAA,QACA,WAAW,sBAAsB;AAAA,MACnC;AAAA,MACA,IAAG;AAAA,MAEH,UAAA;AAAA,QAAAD,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,KAAK;AAAA,YAEJ,UAAA;AAAA,cAAA;AAAA,cAEDA,2BAAAA,kBAAAA,KAAC,OAAI,EAAA,WAAU,8CACb,UAAA;AAAA,gBAACE,2BAAA,kBAAA,IAAA,OAAA,EAAI,WAAU,8CACZ,UACH,YAAA;AAAA,gBAEC,kBACCA,2BAAA,kBAAA;AAAA,kBAACC,yBAAA;AAAA,kBAAA;AAAA,oBACC,UAAU;AAAA,oBACV,SAAS,MAAM,cAAc,CAACC,gBAAe,CAACA,WAAU;AAAA,kBAAA;AAAA,gBAC1D;AAAA,cAAA,GAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,QAEAF,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAA;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YAEA,UAACC,2BAAA,kBAAA,IAAAG,sDAAA,EAAkB,UAAU,CAAC,YAC5B,UAAAL,2BAAA,kBAAA;AAAA,cAACM,aAAAA,EAAE;AAAA,cAAF;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,MAAM,cAAc,KAAK;AAAA,gBAClC,SAAS,aAAa,SAAS;AAAA,gBAC/B,UAAU;AAAA,gBACV,OAAO;AAAA,kBACL,QAAQ,gBAAgB,aAAa;AAAA,gBACvC;AAAA,gBAEC,UAAA;AAAA,kBAAA;AAAA,kBACDN,2BAAAA,kBAAAA,KAAC,OAAI,EAAA,WAAU,uCACZ,UAAA;AAAA,oBAAA;AAAA,oBACA;AAAA,kBAAA,GACH;AAAA,kBAECE,2BAAA,kBAAA,IAAA,OAAA,EAAI,WAAU,gFACZ,UACH,gBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,GAEJ;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/components/Navbar/MobileNavbar.d.ts

@@ -1,14 +1,13 @@
-import { FC, ReactNode } from 'react';
-import { NavSection } from '.';
-
-type MobileNavbarProps = {
+import { ReactElement, ReactNode } from 'react';
+import { TabProps } from '../TabSelector';
+type MobileNavbarProps<T extends TabProps> = {
     logo: ReactNode;
     topChildren?: ReactNode;
-    topSections?: NavSection[];
+    topSections?: ReactElement<T>[];
     bottomChildren?: ReactNode;
-    bottomSections?: NavSection[];
+    bottomSections?: ReactElement<T>[];
     rightItems?: ReactNode;
 };
-export declare const MobileNavbar: FC<MobileNavbarProps>;
+export declare const MobileNavbar: <T extends TabProps>({ logo, topChildren, topSections, bottomChildren, bottomSections, rightItems, }: MobileNavbarProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=MobileNavbar.d.ts.map

package/dist/components/Navbar/MobileNavbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MobileNavbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/MobileNavbar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC;AAEpC,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,UAAU,EAAE,CAAC;IAC9B,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAwEF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAgG9C,CAAC"}
+{"version":3,"file":"MobileNavbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/MobileNavbar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5E,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,KAAK,iBAAiB,CAAC,CAAC,SAAS,QAAQ,IAAI;IAC3C,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAcF,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,QAAQ,mFAO5C,iBAAiB,CAAC,CAAC,CAAC,4CAgFtB,CAAC"}

package/dist/components/Navbar/MobileNavbar.mjs

@@ -16,23 +16,6 @@ import "deepmerge";
 import { cn } from "../../utils/cn.mjs";
 import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { Burger } from "./Burger.mjs";
-import { useNavActions } from "./useNavigation.mjs";
-const sectionListItemVariants = {
-  open: {
-    y: 0,
-    opacity: 1,
-    transition: {
-      y: { stiffness: 1e3, velocity: -100 }
-    }
-  },
-  closed: {
-    y: 50,
-    opacity: 0,
-    transition: {
-      y: { stiffness: 1e3 }
-    }
-  }
-};
 const navVariants = {
   open: {
     transition: { staggerChildren: 0.07, delayChildren: 0.2 }
@@ -41,28 +24,6 @@ const navVariants = {
     transition: { staggerChildren: 0.05, staggerDirection: -1 }
   }
 };
-const MotionSection = m.div;
-const SectionList = ({
-  sections,
-  activeSection,
-  onClickSection
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { role: "tablist", "aria-orientation": "vertical", "aria-multiselectable": "false", children: sections?.map(({ id, label, url, title, onClick }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  MotionSection,
-  {
-    className: "hover:text-primary aria-selected:text-primary w-full cursor-pointer p-3 text-center transition",
-    role: "tab",
-    id,
-    "aria-label": label,
-    onClick: (e) => {
-      onClickSection(id, url);
-      onClick?.(e);
-    },
-    variants: sectionListItemVariants,
-    "aria-selected": activeSection === id,
-    children: title
-  },
-  id
-)) });
 const bgStyle = "bg-card/95 dark:bg-card-dark/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur";
 const MobileNavbar = ({
   logo,
@@ -75,7 +36,6 @@ const MobileNavbar = ({
   const [isHidden, setIsHidden] = useState(false);
   const [isUnrolled, setIsUnrolled] = useState(false);
   const navRef = useRef(null);
-  const { activeSection, onClickSection } = useNavActions();
   useScrollBlockage({
     disableScroll: isUnrolled,
     key: "mobile_nav"
@@ -136,23 +96,9 @@ const MobileNavbar = ({
                 },
                 children: [
                   topChildren,
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col justify-between", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      SectionList,
-                      {
-                        sections: topSections,
-                        activeSection,
-                        onClickSection
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      SectionList,
-                      {
-                        sections: bottomSections,
-                        activeSection,
-                        onClickSection
-                      }
-                    )
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col justify-center", children: [
+                    topSections,
+                    bottomSections
                   ] }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3", children: bottomChildren })
                 ]

package/dist/components/Navbar/MobileNavbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MobileNavbar.mjs","sources":["../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { m, type Variants } from 'framer-motion';\nimport { useRef, useState, type FC, type ReactNode } from 'react';\nimport { useScrollBlockage, useScrollDetection } from '../../hooks';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { Burger } from './Burger';\nimport { useNavActions } from './useNavigation';\nimport type { NavSection } from '.';\n\ntype MobileNavbarProps = {\n  logo: ReactNode;\n  topChildren?: ReactNode;\n  topSections?: NavSection[];\n  bottomChildren?: ReactNode;\n  bottomSections?: NavSection[];\n  rightItems?: ReactNode;\n};\n\ntype SectionListProps = {\n  sections: NavSection[];\n  activeSection: string | null;\n  onClickSection: (id: string, url?: string) => void;\n};\n\nconst sectionListItemVariants: Variants = {\n  open: {\n    y: 0,\n    opacity: 1,\n    transition: {\n      y: { stiffness: 1000, velocity: -100 },\n    },\n  },\n  closed: {\n    y: 50,\n    opacity: 0,\n    transition: {\n      y: { stiffness: 1000 },\n    },\n  },\n};\n\nconst navVariants: Variants = {\n  open: {\n    transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n  },\n  closed: {\n    transition: { staggerChildren: 0.05, staggerDirection: -1 },\n  },\n};\n\nconst MotionSection = m.div;\n\nconst SectionList: FC<SectionListProps> = ({\n  sections,\n  activeSection,\n  onClickSection,\n}) => (\n  <div role=\"tablist\" aria-orientation=\"vertical\" aria-multiselectable=\"false\">\n    {sections?.map(({ id, label, url, title, onClick }) => (\n      <MotionSection\n        className=\"hover:text-primary aria-selected:text-primary w-full cursor-pointer p-3 text-center transition\"\n        role=\"tab\"\n        key={id}\n        id={id}\n        aria-label={label}\n        onClick={(e) => {\n          onClickSection(id, url);\n          onClick?.(e);\n        }}\n        variants={sectionListItemVariants}\n        aria-selected={activeSection === id}\n      >\n        {title}\n      </MotionSection>\n    ))}\n  </div>\n);\n\nconst bgStyle =\n  'bg-card/95 dark:bg-card-dark/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n// css`\n//   -webkit-backdrop-filter: var(--tw-backdrop-blur)\n//     var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)\n//     var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)\n//     var(--tw-backdrop-invert) var(--tw-backdrop-opacity)\n//     var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n// `,\n\nexport const MobileNavbar: FC<MobileNavbarProps> = ({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n}) => {\n  const [isHidden, setIsHidden] = useState<boolean>(false);\n  const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n\n  const navRef = useRef<HTMLDivElement>(null);\n\n  const { activeSection, onClickSection } = useNavActions();\n  useScrollBlockage({\n    disableScroll: isUnrolled,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: !isUnrolled,\n  });\n\n  const backDivHeight = !isHidden ? (navRef.current?.clientHeight ?? 0) : 0;\n\n  const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n  return (\n    <nav\n      className={cn(\n        bgStyle,\n        'sticky top-0 z-50 flex w-screen flex-col  transition',\n        isHidden ? '-translate-y-full' : 'translate-y-0'\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className=\"flex w-full items-center justify-between gap-[10vw] px-4 py-3\"\n        ref={navRef}\n      >\n        {logo}\n\n        <div className=\"flex w-full items-center justify-end gap-6\">\n          <div className=\"flex w-full items-center justify-end gap-1\">\n            {rightItems}\n          </div>\n\n          {isBurgerShowed && (\n            <Burger\n              isActive={isUnrolled}\n              onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          bgStyle,\n          'absolute bottom-0 left-0 w-full translate-y-full'\n        )}\n      >\n        <MaxHeightSmoother isHidden={!isUnrolled}>\n          <m.div\n            className=\"text-text dark:text-text-dark flex w-full flex-col pb-[20%] pt-10 text-lg tracking-wide\"\n            onClick={() => setIsUnrolled(false)}\n            animate={isUnrolled ? 'open' : 'closed'}\n            variants={navVariants}\n            style={{\n              height: `calc(100vh - ${backDivHeight}px)`,\n            }}\n          >\n            {topChildren}\n            <div className=\"flex h-full flex-col justify-between\">\n              <SectionList\n                sections={topSections}\n                activeSection={activeSection}\n                onClickSection={onClickSection}\n              />\n              <SectionList\n                sections={bottomSections}\n                activeSection={activeSection}\n                onClickSection={onClickSection}\n              />\n            </div>\n\n            <div className=\"m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3\">\n              {bottomChildren}\n            </div>\n          </m.div>\n        </MaxHeightSmoother>\n      </div>\n    </nav>\n  );\n};\n"],"names":["jsx","jsxs","isUnrolled"],"mappings":"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"}
+{"version":3,"file":"MobileNavbar.mjs","sources":["../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { m, type Variants } from 'framer-motion';\nimport { useRef, useState, type ReactElement, type ReactNode } from 'react';\nimport { useScrollBlockage, useScrollDetection } from '../../hooks';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { TabProps } from '../TabSelector';\nimport { Burger } from './Burger';\n\ntype MobileNavbarProps<T extends TabProps> = {\n  logo: ReactNode;\n  topChildren?: ReactNode;\n  topSections?: ReactElement<T>[];\n  bottomChildren?: ReactNode;\n  bottomSections?: ReactElement<T>[];\n  rightItems?: ReactNode;\n};\n\nconst navVariants: Variants = {\n  open: {\n    transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n  },\n  closed: {\n    transition: { staggerChildren: 0.05, staggerDirection: -1 },\n  },\n};\n\nconst bgStyle =\n  'bg-card/95 dark:bg-card-dark/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n\nexport const MobileNavbar = <T extends TabProps>({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n}: MobileNavbarProps<T>) => {\n  const [isHidden, setIsHidden] = useState<boolean>(false);\n  const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n\n  const navRef = useRef<HTMLDivElement>(null);\n\n  useScrollBlockage({\n    disableScroll: isUnrolled,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: !isUnrolled,\n  });\n\n  const backDivHeight = !isHidden ? (navRef.current?.clientHeight ?? 0) : 0;\n\n  const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n  return (\n    <nav\n      className={cn(\n        bgStyle,\n        'sticky top-0 z-50 flex w-screen flex-col  transition',\n        isHidden ? '-translate-y-full' : 'translate-y-0'\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className=\"flex w-full items-center justify-between gap-[10vw] px-4 py-3\"\n        ref={navRef}\n      >\n        {logo}\n\n        <div className=\"flex w-full items-center justify-end gap-6\">\n          <div className=\"flex w-full items-center justify-end gap-1\">\n            {rightItems}\n          </div>\n\n          {isBurgerShowed && (\n            <Burger\n              isActive={isUnrolled}\n              onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          bgStyle,\n          'absolute bottom-0 left-0 w-full translate-y-full'\n        )}\n      >\n        <MaxHeightSmoother isHidden={!isUnrolled}>\n          <m.div\n            className=\"text-text dark:text-text-dark flex w-full flex-col pb-[20%] pt-10 text-lg tracking-wide\"\n            onClick={() => setIsUnrolled(false)}\n            animate={isUnrolled ? 'open' : 'closed'}\n            variants={navVariants}\n            style={{\n              height: `calc(100vh - ${backDivHeight}px)`,\n            }}\n          >\n            {topChildren}\n            <div className=\"flex h-full flex-col justify-center\">\n              {topSections}\n              {bottomSections}\n            </div>\n\n            <div className=\"m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3\">\n              {bottomChildren}\n            </div>\n          </m.div>\n        </MaxHeightSmoother>\n      </div>\n    </nav>\n  );\n};\n"],"names":["jsxs","jsx","isUnrolled"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,MAAM,cAAwB;AAAA,EAC5B,MAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,MAAM,eAAe,IAAI;AAAA,EAC1D;AAAA,EACA,QAAQ;AAAA,IACN,YAAY,EAAE,iBAAiB,MAAM,kBAAkB,GAAG;AAAA,EAC5D;AACF;AAEA,MAAM,UACJ;AAEK,MAAM,eAAe,CAAqB;AAAA,EAC/C;AAAA,EACA;AAAA,EACA,cAAc,CAAC;AAAA,EACf;AAAA,EACA,iBAAiB,CAAC;AAAA,EAClB;AACF,MAA4B;AAC1B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAkB,KAAK;AACvD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAkB,KAAK;AAErD,QAAA,SAAS,OAAuB,IAAI;AAExB,oBAAA;AAAA,IAChB,eAAe;AAAA,IACf,KAAK;AAAA,EAAA,CACN;AAEkB,qBAAA;AAAA,IACjB,YAAY,MAAM,YAAY,KAAK;AAAA,IACnC,cAAc,MAAM,YAAY,IAAI;AAAA,IACpC,WAAW,CAAC;AAAA,EAAA,CACb;AAED,QAAM,gBAAgB,CAAC,WAAY,OAAO,SAAS,gBAAgB,IAAK;AAExE,QAAM,iBAAiB,YAAY,SAAS,eAAe,SAAS;AAGlE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,WAAW,sBAAsB;AAAA,MACnC;AAAA,MACA,IAAG;AAAA,MAEH,UAAA;AAAA,QAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,KAAK;AAAA,YAEJ,UAAA;AAAA,cAAA;AAAA,cAEDA,kCAAAA,KAAC,OAAI,EAAA,WAAU,8CACb,UAAA;AAAA,gBAACC,kCAAA,IAAA,OAAA,EAAI,WAAU,8CACZ,UACH,YAAA;AAAA,gBAEC,kBACCA,kCAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,UAAU;AAAA,oBACV,SAAS,MAAM,cAAc,CAACC,gBAAe,CAACA,WAAU;AAAA,kBAAA;AAAA,gBAC1D;AAAA,cAAA,GAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,QAEAD,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YAEA,UAACA,kCAAA,IAAA,mBAAA,EAAkB,UAAU,CAAC,YAC5B,UAAAD,kCAAA;AAAA,cAAC,EAAE;AAAA,cAAF;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,MAAM,cAAc,KAAK;AAAA,gBAClC,SAAS,aAAa,SAAS;AAAA,gBAC/B,UAAU;AAAA,gBACV,OAAO;AAAA,kBACL,QAAQ,gBAAgB,aAAa;AAAA,gBACvC;AAAA,gBAEC,UAAA;AAAA,kBAAA;AAAA,kBACDA,kCAAAA,KAAC,OAAI,EAAA,WAAU,uCACZ,UAAA;AAAA,oBAAA;AAAA,oBACA;AAAA,kBAAA,GACH;AAAA,kBAECC,kCAAA,IAAA,OAAA,EAAI,WAAU,gFACZ,UACH,gBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,GAEJ;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Navbar/index.cjs

@@ -25,7 +25,8 @@ const Navbar = ({
   mobileBottomChildren,
   mobileBottomSections = [],
   rightItemsDesktop,
-  rightItemsMobile
+  rightItemsMobile,
+  selectedChoice
 }) => {
   const { isMobile } = hooks_useDevice.useDevice();
   const isMoUnted = hooks_useIsMounted.useIsMounted();
@@ -45,7 +46,8 @@ const Navbar = ({
     {
       sections: desktopSections,
       rightItems: rightItemsDesktop,
-      logo
+      logo,
+      selectedChoice
     }
   );
 };

package/dist/components/Navbar/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, MouseEventHandler, ReactNode } from 'react';\nimport { useDevice, useIsMounted } from '../../hooks';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\nexport interface NavSection {\n  title: ReactNode;\n  id: string;\n  onClick: MouseEventHandler;\n  url?: string;\n  label: string;\n}\n\ninterface NavbarProps {\n  logo: ReactNode;\n  desktopSections?: NavSection[];\n  mobileTopChildren?: ReactNode;\n  mobileTopSections?: NavSection[];\n  mobileBottomChildren?: ReactNode;\n  mobileBottomSections?: NavSection[];\n  rightItemsDesktop?: ReactNode;\n  rightItemsMobile?: ReactNode;\n}\n\nexport const Navbar: FC<NavbarProps> = ({\n  logo,\n  mobileTopChildren,\n  desktopSections = [],\n  mobileTopSections = [],\n  mobileBottomChildren,\n  mobileBottomSections = [],\n  rightItemsDesktop,\n  rightItemsMobile,\n}) => {\n  const { isMobile } = useDevice();\n  const isMoUnted = useIsMounted();\n\n  if (!isMoUnted) return <></>;\n\n  return isMobile ? (\n    <MobileNavbar\n      topChildren={mobileTopChildren}\n      topSections={mobileTopSections}\n      bottomChildren={mobileBottomChildren}\n      bottomSections={mobileBottomSections}\n      logo={logo}\n      rightItems={rightItemsMobile}\n    />\n  ) : (\n    <DesktopNavbar\n      sections={desktopSections}\n      rightItems={rightItemsDesktop}\n      logo={logo}\n    />\n  );\n};\n"],"names":["useDevice","useIsMounted","jsx","Fragment","MobileNavbar","DesktopNavbar"],"mappings":";;;;;;;;;;;;;;;;;;;AA0BO,MAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,oBAAoB,CAAC;AAAA,EACrB;AAAA,EACA,uBAAuB,CAAC;AAAA,EACxB;AAAA,EACA;AACF,MAAM;AACE,QAAA,EAAE,aAAaA,gBAAAA;AACrB,QAAM,YAAYC,mBAAAA;AAEd,MAAA,CAAC,UAAW,QAASC,2BAAA,kBAAA,IAAAC,WAAA,kBAAA,UAAA,CAAA,CAAA;AAEzB,SAAO,WACLD,2BAAA,kBAAA;AAAA,IAACE,+BAAA;AAAA,IAAA;AAAA,MACC,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,EAAA,IAGdF,2BAAA,kBAAA;AAAA,IAACG,gCAAA;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAY;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport { useDevice, useIsMounted } from '../../hooks';\nimport { TabProps } from '../TabSelector';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\ntype NavbarProps<T extends TabProps> = {\n  logo: ReactNode;\n  selectedChoice: T['key'];\n  desktopSections?: ReactElement<T>[];\n  mobileTopChildren?: ReactNode;\n  mobileTopSections?: ReactElement<T>[];\n  mobileBottomChildren?: ReactNode;\n  mobileBottomSections?: ReactElement<T>[];\n  rightItemsDesktop?: ReactNode;\n  rightItemsMobile?: ReactNode;\n};\n\nexport const Navbar = <T extends TabProps>({\n  logo,\n  mobileTopChildren,\n  desktopSections = [],\n  mobileTopSections = [],\n  mobileBottomChildren,\n  mobileBottomSections = [],\n  rightItemsDesktop,\n  rightItemsMobile,\n  selectedChoice,\n}: NavbarProps<T>) => {\n  const { isMobile } = useDevice();\n  const isMoUnted = useIsMounted();\n\n  if (!isMoUnted) return <></>;\n\n  return isMobile ? (\n    <MobileNavbar\n      topChildren={mobileTopChildren}\n      topSections={mobileTopSections}\n      bottomChildren={mobileBottomChildren}\n      bottomSections={mobileBottomSections}\n      logo={logo}\n      rightItems={rightItemsMobile}\n    />\n  ) : (\n    <DesktopNavbar\n      sections={desktopSections}\n      rightItems={rightItemsDesktop}\n      logo={logo}\n      selectedChoice={selectedChoice}\n    />\n  );\n};\n"],"names":["useDevice","useIsMounted","jsx","Fragment","MobileNavbar","DesktopNavbar"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBO,MAAM,SAAS,CAAqB;AAAA,EACzC;AAAA,EACA;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,oBAAoB,CAAC;AAAA,EACrB;AAAA,EACA,uBAAuB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACd,QAAA,EAAE,aAAaA,gBAAAA;AACrB,QAAM,YAAYC,mBAAAA;AAEd,MAAA,CAAC,UAAW,QAASC,2BAAA,kBAAA,IAAAC,WAAA,kBAAA,UAAA,CAAA,CAAA;AAEzB,SAAO,WACLD,2BAAA,kBAAA;AAAA,IAACE,+BAAA;AAAA,IAAA;AAAA,MACC,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,EAAA,IAGdF,2BAAA,kBAAA;AAAA,IAACG,gCAAA;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/components/Navbar/index.d.ts

@@ -1,22 +1,16 @@
-import { FC, MouseEventHandler, ReactNode } from 'react';
-
-export interface NavSection {
-    title: ReactNode;
-    id: string;
-    onClick: MouseEventHandler;
-    url?: string;
-    label: string;
-}
-interface NavbarProps {
+import { ReactElement, ReactNode } from 'react';
+import { TabProps } from '../TabSelector';
+type NavbarProps<T extends TabProps> = {
     logo: ReactNode;
-    desktopSections?: NavSection[];
+    selectedChoice: T['key'];
+    desktopSections?: ReactElement<T>[];
     mobileTopChildren?: ReactNode;
-    mobileTopSections?: NavSection[];
+    mobileTopSections?: ReactElement<T>[];
     mobileBottomChildren?: ReactNode;
-    mobileBottomSections?: NavSection[];
+    mobileBottomSections?: ReactElement<T>[];
     rightItemsDesktop?: ReactNode;
     rightItemsMobile?: ReactNode;
-}
-export declare const Navbar: FC<NavbarProps>;
+};
+export declare const Navbar: <T extends TabProps>({ logo, mobileTopChildren, desktopSections, mobileTopSections, mobileBottomChildren, mobileBottomSections, rightItemsDesktop, rightItemsMobile, selectedChoice, }: NavbarProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Navbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9D,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,iBAAiB,CAAC;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,WAAW;IACnB,IAAI,EAAE,SAAS,CAAC;IAChB,eAAe,CAAC,EAAE,UAAU,EAAE,CAAC;IAC/B,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,iBAAiB,CAAC,EAAE,UAAU,EAAE,CAAC;IACjC,oBAAoB,CAAC,EAAE,SAAS,CAAC;IACjC,oBAAoB,CAAC,EAAE,UAAU,EAAE,CAAC;IACpC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA+BlC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI1C,KAAK,WAAW,CAAC,CAAC,SAAS,QAAQ,IAAI;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB,cAAc,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IACzB,eAAe,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,iBAAiB,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACtC,oBAAoB,CAAC,EAAE,SAAS,CAAC;IACjC,oBAAoB,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACzC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,QAAQ,qKAUtC,WAAW,CAAC,CAAC,CAAC,4CAuBhB,CAAC"}

package/dist/components/Navbar/index.mjs

@@ -23,7 +23,8 @@ const Navbar = ({
   mobileBottomChildren,
   mobileBottomSections = [],
   rightItemsDesktop,
-  rightItemsMobile
+  rightItemsMobile,
+  selectedChoice
 }) => {
   const { isMobile } = useDevice();
   const isMoUnted = useIsMounted();
@@ -43,7 +44,8 @@ const Navbar = ({
     {
       sections: desktopSections,
       rightItems: rightItemsDesktop,
-      logo
+      logo,
+      selectedChoice
     }
   );
 };

package/dist/components/Navbar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, MouseEventHandler, ReactNode } from 'react';\nimport { useDevice, useIsMounted } from '../../hooks';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\nexport interface NavSection {\n  title: ReactNode;\n  id: string;\n  onClick: MouseEventHandler;\n  url?: string;\n  label: string;\n}\n\ninterface NavbarProps {\n  logo: ReactNode;\n  desktopSections?: NavSection[];\n  mobileTopChildren?: ReactNode;\n  mobileTopSections?: NavSection[];\n  mobileBottomChildren?: ReactNode;\n  mobileBottomSections?: NavSection[];\n  rightItemsDesktop?: ReactNode;\n  rightItemsMobile?: ReactNode;\n}\n\nexport const Navbar: FC<NavbarProps> = ({\n  logo,\n  mobileTopChildren,\n  desktopSections = [],\n  mobileTopSections = [],\n  mobileBottomChildren,\n  mobileBottomSections = [],\n  rightItemsDesktop,\n  rightItemsMobile,\n}) => {\n  const { isMobile } = useDevice();\n  const isMoUnted = useIsMounted();\n\n  if (!isMoUnted) return <></>;\n\n  return isMobile ? (\n    <MobileNavbar\n      topChildren={mobileTopChildren}\n      topSections={mobileTopSections}\n      bottomChildren={mobileBottomChildren}\n      bottomSections={mobileBottomSections}\n      logo={logo}\n      rightItems={rightItemsMobile}\n    />\n  ) : (\n    <DesktopNavbar\n      sections={desktopSections}\n      rightItems={rightItemsDesktop}\n      logo={logo}\n    />\n  );\n};\n"],"names":["jsx","Fragment"],"mappings":";;;;;;;;;;;;;;;;;AA0BO,MAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,oBAAoB,CAAC;AAAA,EACrB;AAAA,EACA,uBAAuB,CAAC;AAAA,EACxB;AAAA,EACA;AACF,MAAM;AACE,QAAA,EAAE,aAAa;AACrB,QAAM,YAAY;AAEd,MAAA,CAAC,UAAW,QAASA,kCAAA,IAAAC,kBAAA,UAAA,CAAA,CAAA;AAEzB,SAAO,WACLD,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,EAAA,IAGdA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAY;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport { useDevice, useIsMounted } from '../../hooks';\nimport { TabProps } from '../TabSelector';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\ntype NavbarProps<T extends TabProps> = {\n  logo: ReactNode;\n  selectedChoice: T['key'];\n  desktopSections?: ReactElement<T>[];\n  mobileTopChildren?: ReactNode;\n  mobileTopSections?: ReactElement<T>[];\n  mobileBottomChildren?: ReactNode;\n  mobileBottomSections?: ReactElement<T>[];\n  rightItemsDesktop?: ReactNode;\n  rightItemsMobile?: ReactNode;\n};\n\nexport const Navbar = <T extends TabProps>({\n  logo,\n  mobileTopChildren,\n  desktopSections = [],\n  mobileTopSections = [],\n  mobileBottomChildren,\n  mobileBottomSections = [],\n  rightItemsDesktop,\n  rightItemsMobile,\n  selectedChoice,\n}: NavbarProps<T>) => {\n  const { isMobile } = useDevice();\n  const isMoUnted = useIsMounted();\n\n  if (!isMoUnted) return <></>;\n\n  return isMobile ? (\n    <MobileNavbar\n      topChildren={mobileTopChildren}\n      topSections={mobileTopSections}\n      bottomChildren={mobileBottomChildren}\n      bottomSections={mobileBottomSections}\n      logo={logo}\n      rightItems={rightItemsMobile}\n    />\n  ) : (\n    <DesktopNavbar\n      sections={desktopSections}\n      rightItems={rightItemsDesktop}\n      logo={logo}\n      selectedChoice={selectedChoice}\n    />\n  );\n};\n"],"names":["jsx","Fragment"],"mappings":";;;;;;;;;;;;;;;;;AAoBO,MAAM,SAAS,CAAqB;AAAA,EACzC;AAAA,EACA;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,oBAAoB,CAAC;AAAA,EACrB;AAAA,EACA,uBAAuB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACd,QAAA,EAAE,aAAa;AACrB,QAAM,YAAY;AAEd,MAAA,CAAC,UAAW,QAASA,kCAAA,IAAAC,kBAAA,UAAA,CAAA,CAAA;AAEzB,SAAO,WACLD,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,EAAA,IAGdA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Pattern/DotPattern.d.ts

@@ -1,5 +1,4 @@
 import { FC, SVGProps } from 'react';
-
 type DotPatternProps = {
     width?: number;
     height?: number;

package/dist/components/Pattern/GridPattern.d.ts

@@ -1,5 +1,4 @@
 import { FC, SVGProps } from 'react';
-
 type GridPatternProps = {
     width?: number;
     height?: number;

package/dist/components/Pattern/SpotLight.d.ts

@@ -1,5 +1,4 @@
 import { FC, SVGProps } from 'react';
-
 type SpotlightProps = {
     fill?: string;
     cx?: number;

package/dist/components/Popover/index.d.ts

@@ -1,5 +1,4 @@
 import { FC, ReactNode } from 'react';
-
 type PopoverProps = {
     content: ReactNode | string;
     children: ReactNode;

package/dist/components/PressableSpan/PressableSpan.d.ts

@@ -1,5 +1,4 @@
 import { FC, HTMLAttributes } from 'react';
-
 type PressableDivProps = {
     onPress: () => void;
     onClickOutside?: () => void;

package/dist/components/ProfileDropDown/index.d.ts

@@ -1,6 +1,5 @@
 import { FC, PropsWithChildren } from 'react';
 import { AvatarProps } from '../Avatar';
-
 type ProfileDropDownProps = PropsWithChildren<AvatarProps>;
 export declare const ProfileDropDown: FC<ProfileDropDownProps>;
 export {};

package/dist/components/RightDrawer/RightDrawer.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode, FC } from 'react';
-
 type BackButtonProps = {
     onBack: () => void;
     text?: string;