@instincthub/react-ui 0.1.0 → 0.1.1

package/dist/src/assets/css/navbar/responsive-navbar.css

@@ -52,6 +52,7 @@
   justify-content: space-between;
   flex: 1;
   margin-left: 40px;
+  background-color: var(--White);
 }
 
 /* Navigation links */

package/dist/src/components/navbar/ResponsiveNavbar.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n,jsxs as i,Fragment as r}from"react/jsx-runtime";import{useState as a,useEffect as t}from"react";import o from"next/link";import l from"next/image";import u from"@mui/icons-material/LightMode";import c from"@mui/icons-material/DarkMode";var s=function(s){var h,d,m=s.session,b=s.logoSrc,v=s.logoAlt,f=void 0===v?"Company Logo":v,p=s.navLinks,g=s.userAreaLinks,N=void 0===g?[]:g,w=s.theme,k=void 0===w?"LightMode":w,L=s.containerClass,E=void 0===L?"ihub-container":L,M=a(!1),x=e(M,2),_=x[0],D=x[1],C=a(!1),S=e(C,2),A=S[0],y=S[1],j=a(!1),z=e(j,2),B=z[0],I=z[1],P=a(null),U=e(P,2),H=U[0],T=U[1],W=a(null),Y=e(W,2),q=Y[0],F=Y[1],G=a(k),J=e(G,2),K=J[0],O=J[1],Q=null==m||null===(h=m.user)||void 0===h?void 0:h.name;t((function(){var e=function(){window.scrollY>50?y(!0):y(!1)};return window.addEventListener("scroll",e),function(){return window.removeEventListener("scroll",e)}}),[]),t((function(){var e=localStorage.getItem("theme");e&&(O(e),document.documentElement.classList.remove("LightMode","DarkMode"),document.documentElement.classList.add(e))}),[]),t((function(){var e=function(e){var n=e.target;!_||n.closest(".ihub-navbar-elements")||n.closest(".ihub-hamburger")||D(!1),B&&!n.closest(".ihub-user-dropdown")&&(I(!1),F(null)),null===H||n.closest(".ihub-nav-submenu-".concat(H))||T(null)};return document.addEventListener("mousedown",e),function(){return document.removeEventListener("mousedown",e)}}),[_,B,H,q]),t((function(){var e=function(){window.innerWidth>768&&_&&D(!1)};return window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}),[_]);return n("header",{className:"ihub-navbar ".concat(A?"ihub-navbar-scrolled":""," ").concat("DarkMode"===K?"ihub-navbar-dark":""),children:n("div",{className:E,children:i("nav",{className:"ihub-navbar-container",children:[n("div",{className:"ihub-navbar-logo",children:n(o,{href:"/",children:n(l,{src:b,alt:f,width:120,height:40,className:"ihub-logo-image"})})}),i("div",{className:"ihub-hamburger",onClick:function(){D(!_),T(null)},children:[n("div",{className:"ihub-hamburger-line ".concat(_?"ihub-active":"")}),n("div",{className:"ihub-hamburger-line ".concat(_?"ihub-active":"")}),n("div",{className:"ihub-hamburger-line ".concat(_?"ihub-active":"")})]}),i("div",{className:"ihub-navbar-elements ".concat(_?"ihub-active":""),children:[i("ul",{className:"ihub-nav-links",children:[p.map((function(e,a){return n("li",{className:"ihub-nav-item ihub-nav-submenu-".concat(a," ").concat(e.submenu?"ihub-has-submenu":""," ").concat(H===a?"ihub-submenu-active":""),children:e.submenu?i(r,{children:[i("a",{href:"#",onClick:function(e){return function(e,n){n.preventDefault(),T(H===e?null:e)}(a,e)},className:"ihub-submenu-toggle ".concat(e.highlight?"ihub-nav-highlight":""),children:[e.title,n("span",{className:"ihub-dropdown-arrow"})]}),H===a&&n("ul",{className:"ihub-submenu",children:e.submenu.map((function(e,r){return n("li",{className:"ihub-submenu-item",children:e.isExternal?i("a",{href:e.href,target:"_blank",rel:"noopener noreferrer",children:[e.icon&&n("span",{className:"ihub-submenu-icon",children:e.icon}),e.title]}):i(o,{href:e.href,children:[e.icon&&n("span",{className:"ihub-submenu-icon",children:e.icon}),e.title]})},r)}))})]}):n(r,{children:e.isExternal?n("a",{href:e.href,target:"_blank",rel:"noopener noreferrer",className:e.highlight?"ihub-nav-highlight":"",children:e.title}):n(o,{href:e.href,className:e.highlight?"ihub-nav-highlight":"",children:e.title})})},a)})),n("li",{className:"ihub-nav-item",children:n("button",{onClick:function(){var e="LightMode"===K?"DarkMode":"LightMode";document.documentElement.classList.remove("LightMode","DarkMode"),document.documentElement.classList.add(e),O(e),localStorage.setItem("theme",e)},className:"ihub-theme-toggle","aria-label":"Switch to ".concat("LightMode"===K?"DarkMode":"LightMode"," mode"),children:n("LightMode"===K?c:u,{})})})]}),n("div",{className:"ihub-navbar-user-area",children:m?i("div",{className:"ihub-user-dropdown",children:[i("div",{className:"ihub-user-profile",onClick:function(){I(!B),F(null)},children:[null!=Q&&Q.picture?n(l,{src:Q.picture,alt:"User",width:40,height:40,className:"ihub-user-avatar"}):n("div",{className:"ihub-user-initials",children:(null==Q||null===(d=Q.full_name)||void 0===d?void 0:d.charAt(0))||"U"}),i("span",{className:"ihub-user-name ihub-hide-sm",children:[null==Q?void 0:Q.full_name,n("span",{className:"ihub-dropdown-arrow"})]})]}),B&&i("div",{className:"ihub-dropdown ihub-user-menu-dropdown",children:[N.map((function(e,r){return n("div",{className:"ihub-dropdown-item-wrapper",children:e.submenu?i("div",{className:"ihub-dropdown-with-submenu",children:[i("a",{href:"#",className:"ihub-dropdown-item ihub-dropdown-parent",onClick:function(e){return function(e,n){n.preventDefault(),n.stopPropagation(),F(q===e?null:e)}(r,e)},target:e.isExternal?"_blank":void 0,rel:e.isExternal?"noopener noreferrer":void 0,children:[e.icon&&n("span",{className:"ihub-dropdown-icon",children:e.icon}),e.title,n("span",{className:"ihub-submenu-caret ".concat(q===r?"ihub-active":"")})]}),q===r&&n("div",{className:"ihub-user-submenu",children:e.submenu.map((function(e,r){return i(o,{href:e.href,className:"ihub-dropdown-subitem",target:e.isExternal?"_blank":void 0,rel:e.isExternal?"noopener noreferrer":void 0,children:[e.icon&&n("span",{className:"ihub-dropdown-icon",children:e.icon}),e.title]},r)}))})]}):i(o,{href:e.href,className:"ihub-dropdown-item",children:[e.icon&&n("span",{className:"ihub-dropdown-icon",children:e.icon}),e.title]})},r)})),i(o,{href:"/api/auth/signout",className:"ihub-dropdown-item ihub-signout",children:[n("span",{className:"ihub-dropdown-icon",children:"⤴"}),"Sign out"]})]})]}):n("div",{className:"ihub-auth-buttons",children:N.map((function(e,i){return e.isButton?n(o,{href:e.href,className:"".concat("outline"===e.buttonStyle?"ihub-outlined-btn":"ihub-important-btn"),target:e.isExternal?"_blank":void 0,rel:e.isExternal?"noopener noreferrer":void 0,children:e.title},i):n(o,{href:e.href,className:"ihub-auth-link",children:e.title},i)}))})})]})]})})})};export{s as default};
+import{slicedToArray as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as n,jsx as i,Fragment as r}from"react/jsx-runtime";import{useState as a,useEffect as t}from"react";import o from"next/link";import l from"next/image";import u from"@mui/icons-material/LightMode";import c from"@mui/icons-material/DarkMode";var s=function(s){var h,d,m=s.session,b=s.logoSrc,v=s.logoAlt,p=void 0===v?"Company Logo":v,f=s.navLinks,g=s.userAreaLinks,N=void 0===g?[]:g,w=s.theme,k=void 0===w?"LightMode":w,L=s.containerClass,E=void 0===L?"ihub-container":L,M=s.topBanner,x=s.bottomBanner,_=s.hideTopBanner,D=void 0!==_&&_,B=s.hideBottomBanner,C=void 0!==B&&B,S=a(!1),A=e(S,2),y=A[0],j=A[1],z=a(!1),I=e(z,2),P=I[0],T=I[1],U=a(!1),H=e(U,2),W=H[0],Y=H[1],q=a(null),F=e(q,2),G=F[0],J=F[1],K=a(null),O=e(K,2),Q=O[0],R=O[1],V=a(k),X=e(V,2),Z=X[0],$=X[1],ee=null==m||null===(h=m.user)||void 0===h?void 0:h.name;t((function(){var e=function(){window.scrollY>50?T(!0):T(!1)};return window.addEventListener("scroll",e),function(){return window.removeEventListener("scroll",e)}}),[]),t((function(){var e=localStorage.getItem("theme");e&&($(e),document.documentElement.classList.remove("LightMode","DarkMode"),document.documentElement.classList.add(e))}),[]),t((function(){var e=function(e){var n=e.target;!y||n.closest(".ihub-navbar-elements")||n.closest(".ihub-hamburger")||j(!1),W&&!n.closest(".ihub-user-dropdown")&&(Y(!1),R(null)),null===G||n.closest(".ihub-nav-submenu-".concat(G))||J(null)};return document.addEventListener("mousedown",e),function(){return document.removeEventListener("mousedown",e)}}),[y,W,G,Q]),t((function(){var e=function(){window.innerWidth>768&&y&&j(!1)};return window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}),[y]);return n("header",{className:"ihub-navbar ".concat(P?"ihub-navbar-scrolled":""," ").concat("DarkMode"===Z?"ihub-navbar-dark":""),children:[M&&!D&&i("div",{className:"ihub-navbar-top-banner",children:M}),i("div",{className:E,children:n("nav",{className:"ihub-navbar-container",children:[i("div",{className:"ihub-navbar-logo",children:i(o,{href:"/",children:i(l,{src:b,alt:p,width:120,height:40,className:"ihub-logo-image"})})}),n("div",{className:"ihub-hamburger",onClick:function(){j(!y),J(null)},children:[i("div",{className:"ihub-hamburger-line ".concat(y?"ihub-active":"")}),i("div",{className:"ihub-hamburger-line ".concat(y?"ihub-active":"")}),i("div",{className:"ihub-hamburger-line ".concat(y?"ihub-active":"")})]}),n("div",{className:"ihub-navbar-elements ".concat(y?"ihub-active":""),children:[n("ul",{className:"ihub-nav-links",children:[f.map((function(e,a){return i("li",{className:"ihub-nav-item ihub-nav-submenu-".concat(a," ").concat(e.submenu?"ihub-has-submenu":""," ").concat(G===a?"ihub-submenu-active":""),children:e.submenu?n(r,{children:[n("a",{href:"#",onClick:function(e){return function(e,n){n.preventDefault(),J(G===e?null:e)}(a,e)},className:"ihub-submenu-toggle ".concat(e.highlight?"ihub-nav-highlight":""),children:[e.title,i("span",{className:"ihub-dropdown-arrow"})]}),G===a&&i("ul",{className:"ihub-submenu",children:e.submenu.map((function(e,r){return i("li",{className:"ihub-submenu-item",children:e.isExternal?n("a",{href:e.href,target:"_blank",rel:"noopener noreferrer",children:[e.icon&&i("span",{className:"ihub-submenu-icon",children:e.icon}),e.title]}):n(o,{href:e.href,children:[e.icon&&i("span",{className:"ihub-submenu-icon",children:e.icon}),e.title]})},r)}))})]}):i(r,{children:e.isExternal?i("a",{href:e.href,target:"_blank",rel:"noopener noreferrer",className:e.highlight?"ihub-nav-highlight":"",children:e.title}):i(o,{href:e.href,className:e.highlight?"ihub-nav-highlight":"",children:e.title})})},a)})),i("li",{className:"ihub-nav-item",children:i("button",{onClick:function(){var e="LightMode"===Z?"DarkMode":"LightMode";document.documentElement.classList.remove("LightMode","DarkMode"),document.documentElement.classList.add(e),$(e),localStorage.setItem("theme",e)},className:"ihub-theme-toggle","aria-label":"Switch to ".concat("LightMode"===Z?"DarkMode":"LightMode"," mode"),children:i("LightMode"===Z?c:u,{})})})]}),i("div",{className:"ihub-navbar-user-area",children:m?n("div",{className:"ihub-user-dropdown",children:[n("div",{className:"ihub-user-profile",onClick:function(){Y(!W),R(null)},children:[null!=ee&&ee.picture?i(l,{src:ee.picture,alt:"User",width:40,height:40,className:"ihub-user-avatar"}):i("div",{className:"ihub-user-initials",children:(null==ee||null===(d=ee.full_name)||void 0===d?void 0:d.charAt(0))||"U"}),n("span",{className:"ihub-user-name ihub-hide-sm",children:[null==ee?void 0:ee.full_name,i("span",{className:"ihub-dropdown-arrow"})]})]}),W&&n("div",{className:"ihub-dropdown ihub-user-menu-dropdown",children:[N.map((function(e,r){return i("div",{className:"ihub-dropdown-item-wrapper",children:e.submenu?n("div",{className:"ihub-dropdown-with-submenu",children:[n("a",{href:"#",className:"ihub-dropdown-item ihub-dropdown-parent",onClick:function(e){return function(e,n){n.preventDefault(),n.stopPropagation(),R(Q===e?null:e)}(r,e)},target:e.isExternal?"_blank":void 0,rel:e.isExternal?"noopener noreferrer":void 0,children:[e.icon&&i("span",{className:"ihub-dropdown-icon",children:e.icon}),e.title,i("span",{className:"ihub-submenu-caret ".concat(Q===r?"ihub-active":"")})]}),Q===r&&i("div",{className:"ihub-user-submenu",children:e.submenu.map((function(e,r){return n(o,{href:e.href,className:"ihub-dropdown-subitem",target:e.isExternal?"_blank":void 0,rel:e.isExternal?"noopener noreferrer":void 0,children:[e.icon&&i("span",{className:"ihub-dropdown-icon",children:e.icon}),e.title]},r)}))})]}):n(o,{href:e.href,className:"ihub-dropdown-item",children:[e.icon&&i("span",{className:"ihub-dropdown-icon",children:e.icon}),e.title]})},r)})),n(o,{href:"/api/auth/signout",className:"ihub-dropdown-item ihub-signout",children:[i("span",{className:"ihub-dropdown-icon",children:"⤴"}),"Sign out"]})]})]}):i("div",{className:"ihub-auth-buttons",children:N.map((function(e,n){return e.isButton?i(o,{href:e.href,className:"".concat("outline"===e.buttonStyle?"ihub-outlined-btn":"ihub-important-btn"),target:e.isExternal?"_blank":void 0,rel:e.isExternal?"noopener noreferrer":void 0,children:e.title},n):i(o,{href:e.href,className:"ihub-auth-link",children:e.title},n)}))})})]})]})}),x&&!C&&i("div",{className:"ihub-navbar-bottom-banner",children:x})]})};export{s as default};
 //# sourceMappingURL=ResponsiveNavbar.js.map

package/dist/src/types/components/navbar/ResponsiveNavbar.d.ts

@@ -1,3 +1,29 @@
 import { NavbarPropsType } from "../../types";
-declare const ResponsiveNavbar: ({ session, logoSrc, logoAlt, navLinks, userAreaLinks, theme: initialTheme, containerClass, }: NavbarPropsType) => import("react/jsx-runtime").JSX.Element;
+/**
+* @example
+* ```tsx
+* <ResponsiveNavbar
+*  session={session}
+*  logoSrc="https://example.com/logo.png"
+*  logoAlt="Company Logo"
+*  navLinks={navLinks}
+*  userAreaLinks={userAreaLinks}
+*  theme="LightMode"
+*  containerClass="ihub-container"
+*  topBanner={<div>Top Banner</div>}
+* />
+* ```
+* @param {SessionType} session - The session object
+* @param {string} logoSrc - The source of the logo
+* @param {string} logoAlt - The alt text of the logo
+* @param {NavLinkType[]} navLinks - The navigation links
+* @param {UserAreaLinkType[]} userAreaLinks - The user area links
+* @param {string} theme - The theme of the navbar
+* @param {string} containerClass - The class of the container
+* @param {React.ReactNode | JSX.Element | null} topBanner - The top banner
+* @param {React.ReactNode | JSX.Element | null} bottomBanner - The bottom banner
+* @param {boolean} hideTopBanner - Whether to hide the top banner
+* @param {boolean} hideBottomBanner - Whether to hide the bottom banner
+* */
+declare const ResponsiveNavbar: ({ session, logoSrc, logoAlt, navLinks, userAreaLinks, theme: initialTheme, containerClass, topBanner, bottomBanner, hideTopBanner, hideBottomBanner, }: NavbarPropsType) => import("react/jsx-runtime").JSX.Element;
 export default ResponsiveNavbar;

package/dist/src/types/types/index.d.ts

@@ -240,6 +240,10 @@ export interface NavbarPropsType {
     userAreaLinks?: UserAreaLinkType[];
     theme?: "LightMode" | "DarkMode";
     containerClass?: string;
+    topBanner?: React.ReactNode | JSX.Element | null;
+    hideTopBanner?: boolean;
+    bottomBanner?: React.ReactNode | JSX.Element | null;
+    hideBottomBanner?: boolean;
 }
 export interface LoginFormPropsType {
     params?: SearchParamsType;