@birhaus/navigation/dist/index.mjs

BIRHAUS v3.0 Radical Minimalist Navigation Components - FourThreeOneNav with glass morphism implementing 4-3-1 cognitive rule

import {useState,useEffect,useCallback}from'react';import {X as X$1,Menu,ChevronDown,Search,Command}from'lucide-react';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useBirhausThemeV3}from'@birhaus/themes';function p(...e){return e.filter(Boolean).join(" ")}function R({children:e,variant:n="default",className:t=""}){return jsx("span",{className:p("inline-flex items-center rounded-full px-2 py-1 text-xs font-medium",(r=>{switch(r){case "default":return "bg-blue-100 text-blue-800";case "secondary":return "bg-gray-100 text-gray-800";case "destructive":return "bg-red-100 text-red-800";default:return "bg-blue-100 text-blue-800"}})(n),t),children:e})}function ge({items:e,onClose:n}){return jsx("div",{className:"absolute top-full left-0 mt-1 w-64 bg-white border border-gray-200 rounded-md shadow-lg z-50",children:jsx("div",{className:"py-1",children:e.map(t=>jsx("button",{onClick:()=>{t.onClick?.(),n();},disabled:t.disabled,className:p("w-full text-left px-4 py-2 text-sm transition-colors","hover:bg-gray-50 focus:outline-none focus:bg-gray-50",t.active&&"text-blue-700 bg-blue-50",t.disabled&&"opacity-50 cursor-not-allowed"),children:jsxs("div",{className:"flex items-center space-x-2",children:[t.icon&&jsx("span",{className:"flex-shrink-0",children:t.icon}),jsx("span",{children:t.label}),t.badge&&jsx(R,{variant:"secondary",className:"ml-auto",children:t.badge})]})},t.id))})})}function be({item:e,activeSubmenu:n,onItemClick:t,onSubmenuToggle:i}){return jsxs("div",{className:"relative",children:[jsxs("button",{onClick:()=>t(e),disabled:e.disabled,className:p("flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium transition-colors","focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",e.active?"text-blue-700 bg-blue-50":"text-gray-700 hover:text-gray-900 hover:bg-gray-50",e.disabled&&"opacity-50 cursor-not-allowed"),"aria-current":e.active?"page":void 0,"aria-expanded":e.submenu?n===e.id:void 0,children:[e.icon&&jsx("span",{className:"flex-shrink-0",children:e.icon}),jsx("span",{children:e.label}),e.badge&&jsx(R,{variant:"default",className:"ml-1",children:e.badge}),e.submenu&&jsx(ChevronDown,{className:"ml-1 h-4 w-4 flex-shrink-0"})]}),e.submenu&&n===e.id&&jsx(ge,{items:e.submenu,onClose:()=>i(null)})]})}function fe({items:e,activeSubmenu:n,onItemClick:t,onSubmenuToggle:i,overflowLabel:a}){return e.length===0?null:jsxs("div",{className:"relative",children:[jsxs("button",{onClick:()=>i(n==="overflow"?null:"overflow"),className:"flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",children:[jsx("span",{children:a}),jsx(ChevronDown,{className:"ml-1 h-4 w-4"})]}),n==="overflow"&&jsx("div",{className:"absolute top-full right-0 mt-1 w-64 bg-white border border-gray-200 rounded-md shadow-lg z-50",children:jsx("div",{className:"py-1",children:e.map(r=>jsx("button",{onClick:()=>{t(r),i(null);},disabled:r.disabled,className:p("w-full text-left px-4 py-2 text-sm transition-colors","hover:bg-gray-50 focus:outline-none focus:bg-gray-50",r.active&&"text-blue-700 bg-blue-50",r.disabled&&"opacity-50 cursor-not-allowed"),children:jsxs("div",{className:"flex items-center space-x-2",children:[r.icon&&jsx("span",{className:"flex-shrink-0",children:r.icon}),jsx("span",{children:r.label}),r.badge&&jsx(R,{variant:"secondary",className:"ml-auto",children:r.badge})]})},r.id))})})]})}function H({visibleNavItems:e,overflowNavItems:n,activeSubmenu:t,onItemClick:i,onSubmenuToggle:a,overflowBehavior:r,overflowLabel:o,bp:c}){let d=n.length>0;return jsxs("div",{className:p("hidden",`${c}:flex`,"items-center space-x-8"),children:[e.map(u=>jsx(be,{item:u,activeSubmenu:t,onItemClick:i,onSubmenuToggle:a},u.id)),d&&r==="collapse"&&jsx(fe,{items:n,activeSubmenu:t,onItemClick:i,onSubmenuToggle:a,overflowLabel:o})]})}function x(...e){return e.filter(Boolean).join(" ")}function K({children:e,variant:n="default",disabled:t=false,loading:i=false,onClick:a,className:r=""}){return jsxs("button",{onClick:a,disabled:t||i,className:x("inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",(d=>{switch(d){case "default":return "bg-white border border-gray-300 text-gray-900 hover:bg-gray-50 focus-visible:ring-blue-500";case "secondary":return "bg-gray-100 text-gray-900 hover:bg-gray-200 focus-visible:ring-gray-500";case "destructive":return "bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500";case "primary":return "bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-500";default:return "bg-white border border-gray-300 text-gray-900 hover:bg-gray-50 focus-visible:ring-blue-500"}})(n),"h-10 px-4 py-2 text-sm rounded-md",r),children:[i?jsx("div",{className:"animate-spin rounded-full h-4 w-4 border-b-2 border-current mr-2"}):null,e]})}function me({children:e,variant:n="default",className:t=""}){return jsx("span",{className:x("inline-flex items-center rounded-full px-2 py-1 text-xs font-medium",(r=>{switch(r){case "default":return "bg-blue-100 text-blue-800";case "secondary":return "bg-gray-100 text-gray-800";case "destructive":return "bg-red-100 text-red-800";default:return "bg-blue-100 text-blue-800"}})(n),t),children:e})}function j({navigationItems:e,contextualActions:n,primaryAction:t,onItemClick:i,onCloseMobileMenu:a,bp:r}){return jsxs("div",{className:x(`${r}:hidden`,"border-t border-gray-200 pt-4 pb-4"),children:[jsx("div",{className:"space-y-1",children:e.map(o=>jsxs("button",{onClick:()=>i(o),disabled:o.disabled,className:x("w-full text-left flex items-center space-x-3 px-3 py-2 rounded-md text-base font-medium transition-colors","focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",o.active?"text-blue-700 bg-blue-50":"text-gray-700 hover:text-gray-900 hover:bg-gray-50",o.disabled&&"opacity-50 cursor-not-allowed"),"aria-current":o.active?"page":void 0,children:[o.icon&&jsx("span",{className:"flex-shrink-0",children:o.icon}),jsx("span",{className:"flex-1",children:o.label}),o.badge&&jsx(me,{variant:"default",children:o.badge})]},o.id))}),(n.length>0||t)&&jsxs("div",{className:"mt-4 pt-4 border-t border-gray-200 space-y-2",children:[n.map(o=>jsxs(K,{onClick:()=>{o.onClick(),a();},variant:o.variant==="destructive"?"destructive":"secondary",disabled:o.disabled,loading:o.loading,className:"w-full justify-center",children:[o.icon&&jsx("span",{className:"mr-2",children:o.icon}),o.label]},o.id)),t&&jsxs(K,{onClick:()=>{t.onClick(),a();},variant:"primary",disabled:t.disabled,loading:t.loading,className:"w-full justify-center",children:[t.icon&&jsx("span",{className:"mr-2",children:t.icon}),t.label]})]})]})}function U({logo:e,logoHref:n,onLogoClick:t}){return e?jsx("div",{className:"flex-shrink-0",children:jsx("div",{className:"flex items-center",children:n?jsx("a",{href:n,className:"flex items-center",children:e}):jsx("button",{onClick:t,className:"flex items-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded",children:e})})}):null}function he(...e){return e.filter(Boolean).join(" ")}function X({isOpen:e,onToggle:n,collapsible:t,menuLabel:i,closeMenuLabel:a,bp:r}){return t?jsx("button",{onClick:n,className:he(`${r}:hidden`,"p-2 text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded"),"aria-expanded":e,"aria-label":e?a:i,children:e?jsx(X$1,{className:"h-6 w-6"}):jsx(Menu,{className:"h-6 w-6"})}):null}function Ne(...e){return e.filter(Boolean).join(" ")}function G({showSearch:e,onSearchClick:n,searchLabel:t,searchPlaceholder:i,showCommandPalette:a,onCommandPaletteToggle:r,commandPaletteLabel:o,commandPaletteShortcut:c,bp:d,floating:u=false}){return jsxs(Fragment,{children:[e&&jsx("button",{onClick:n,className:"p-2 text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded","aria-label":t,title:i,children:jsx(Search,{className:"h-5 w-5"})}),a&&jsxs("button",{onClick:r,className:Ne("hidden",`${d}:flex`,"items-center space-x-2 px-3 py-1 text-sm text-gray-600 bg-gray-50 hover:bg-gray-100 rounded-md transition-colors","focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"),"aria-label":o,children:[jsx(Command,{className:"h-4 w-4"}),jsx("span",{className:"text-xs",children:c})]})]})}function O(...e){return e.filter(Boolean).join(" ")}function J({children:e,variant:n="default",size:t="default",disabled:i=false,loading:a=false,onClick:r,className:o=""}){let c="inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",d=g=>{switch(g){case "default":return "bg-white border border-gray-300 text-gray-900 hover:bg-gray-50 focus-visible:ring-blue-500";case "secondary":return "bg-gray-100 text-gray-900 hover:bg-gray-200 focus-visible:ring-gray-500";case "destructive":return "bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500";case "ghost":return "text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-500";case "primary":return "bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-500";default:return "bg-white border border-gray-300 text-gray-900 hover:bg-gray-50 focus-visible:ring-blue-500"}},u=g=>{switch(g){case "sm":return "h-8 px-3 text-sm rounded-md";case "default":return "h-10 px-4 py-2 text-sm rounded-md";case "lg":return "h-12 px-6 text-base rounded-lg";default:return "h-10 px-4 py-2 text-sm rounded-md"}};return jsxs("button",{onClick:r,disabled:i||a,className:O(c,d(n),u(t),o),children:[a?jsx("div",{className:"animate-spin rounded-full h-4 w-4 border-b-2 border-current mr-2"}):null,e]})}function Q({contextualActions:e,primaryAction:n,bp:t,magnetic:i=false}){return jsxs(Fragment,{children:[jsx("div",{className:O("hidden",`${t}:flex`,"items-center space-x-2"),children:e.map(a=>jsxs(J,{onClick:a.onClick,variant:a.variant==="destructive"?"destructive":"ghost",disabled:a.disabled,loading:a.loading,size:"sm",children:[a.icon&&jsx("span",{className:"mr-1",children:a.icon}),a.label]},a.id))}),n&&jsxs(J,{onClick:n.onClick,variant:"primary",disabled:n.disabled,loading:n.loading,className:O("hidden",`${t}:inline-flex`),children:[n.icon&&jsx("span",{className:"mr-2",children:n.icon}),n.label]})]})}function Be(...e){return e.filter(Boolean).join(" ")}function Me({showSearch:e,onSearchClick:n,searchLabel:t,searchPlaceholder:i,showCommandPalette:a,onCommandPaletteToggle:r,commandPaletteLabel:o,commandPaletteShortcut:c,contextualActions:d,primaryAction:u,bp:g,floatingSearchBar:B=false,magneticButtons:M=false}){return jsxs("div",{className:"flex items-center space-x-3",children:[jsx(G,{showSearch:e,onSearchClick:n,searchLabel:t,searchPlaceholder:i,showCommandPalette:a,onCommandPaletteToggle:r,commandPaletteLabel:o,commandPaletteShortcut:c,bp:g,floating:B}),jsx(Q,{contextualActions:d,primaryAction:u,bp:g,magnetic:M})]})}function Se({navigationItems:e,contextualActions:n=[],primaryAction:t,logo:i,logoHref:a,onLogoClick:r,searchPlaceholder:o="Buscar...",onSearchClick:c,showSearch:d=true,showCommandPalette:u=true,onCommandPaletteToggle:g,commandPaletteShortcut:B="\u2318K",mobileBreakpoint:M="md",collapsible:V=true,menuLabel:Y="Men\xFA",closeMenuLabel:Z="Cerrar men\xFA",searchLabel:_="Buscar",commandPaletteLabel:ee="Abrir paleta de comandos",className:te="",variant:ne="default",overflowBehavior:ae="collapse",overflowLabel:oe="M\xE1s opciones",themeName:re="financial",stickyHeader:ie=false,glassNavigation:S=false,floatingSearchBar:se=false,magneticButtons:le=false}){let [I,L]=useState(false),[D,F]=useState(null);useBirhausThemeV3(re);useEffect(()=>{e.length>4&&console.warn(`BIRHAUS 4-3-1 Rule Violation: Navigation has ${e.length} items (max 4). Consider using overflowBehavior to handle excess items.`),n.length>3&&console.warn(`BIRHAUS 4-3-1 Rule Violation: ${n.length} contextual actions (max 3). Reduce cognitive load by consolidating actions.`);},[e.length,n.length]);let ce=e.slice(0,4),de=e.slice(4),$=n.slice(0,3),h=(l=>{switch(l){case "sm":return "sm";case "md":return "md";case "lg":return "lg";default:return "md"}})(M),ue=l=>{switch(l){case "default":return "bg-white border-b border-gray-200";case "minimal":return "bg-transparent";case "elevated":return "bg-white shadow-sm border-b border-gray-200";case "glass":return S?"backdrop-blur-md bg-white/80 border-b border-white/30 shadow-lg saturate-150":"bg-white border-b border-gray-200";case "frosted":return S?"backdrop-blur-xl bg-white/60 border-b border-white/20 shadow-xl saturate-200":"bg-white border-b border-gray-200";case "floating":return S?"backdrop-blur-lg bg-white/70 border border-white/40 shadow-2xl rounded-3xl mx-4 mt-4 saturate-180":"bg-white border border-gray-200 shadow-lg rounded-3xl mx-4 mt-4";default:return "bg-white border-b border-gray-200"}},z=l=>{l.disabled||(l.submenu&&l.submenu.length>0?F(D===l.id?null:l.id):(l.onClick?.(),L(false)));},A=useCallback(l=>{(l.metaKey||l.ctrlKey)&&l.key==="k"&&u&&(l.preventDefault(),g?.());},[u,g]);return useEffect(()=>{if(typeof window<"u")return document.addEventListener("keydown",A),()=>document.removeEventListener("keydown",A)},[A]),jsx("nav",{className:Be("relative w-full transition-all duration-300",ie?"sticky top-0 z-50":"",ue(ne),te),"data-birhaus-component":"four-three-one-nav","data-birhaus-version":"3.0","aria-label":"Navegaci\xF3n principal",children:jsxs("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:[jsxs("div",{className:"flex items-center justify-between h-16",children:[jsx(U,{logo:i,logoHref:a,onLogoClick:r}),jsx(H,{visibleNavItems:ce,overflowNavItems:de,activeSubmenu:D,onItemClick:z,onSubmenuToggle:F,overflowBehavior:ae,overflowLabel:oe,bp:h}),jsxs("div",{className:"flex items-center space-x-3",children:[jsx(Me,{showSearch:d,onSearchClick:c,searchLabel:_,searchPlaceholder:o,showCommandPalette:u,onCommandPaletteToggle:g,commandPaletteLabel:ee,commandPaletteShortcut:B,contextualActions:$,primaryAction:t,bp:h,floatingSearchBar:se,magneticButtons:le}),jsx(X,{isOpen:I,onToggle:()=>L(!I),collapsible:V,menuLabel:Y,closeMenuLabel:Z,bp:h})]})]}),V&&I&&jsx(j,{navigationItems:e,contextualActions:$,primaryAction:t,onItemClick:z,onCloseMobileMenu:()=>L(false),bp:h})]})})}function Ie(){let[e,n]=useState(null),[t,i]=useState(false);return {activeItem:e,isMobileMenuOpen:t,activateItem:c=>{n(c),i(false);},toggleMobileMenu:()=>{i(c=>!c);},closeMobileMenu:()=>{i(false);},setActiveItem:n}}export{Se as FourThreeOneNav,Ie as useFourThreeOneNav};//# sourceMappingURL=index.mjs.map
//# sourceMappingURL=index.mjs.map