@birhaus/navigation/dist/index.mjs

BIRHAUS Navigation Components - FourThreeOneNav 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';function p(...e){return e.filter(Boolean).join(" ")}function B({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 se({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(B,{variant:"secondary",className:"ml-auto",children:t.badge})]})},t.id))})})}function le({item:e,activeSubmenu:n,onItemClick:t,onSubmenuToggle:o}){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(B,{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(se,{items:e.submenu,onClose:()=>o(null)})]})}function ce({items:e,activeSubmenu:n,onItemClick:t,onSubmenuToggle:o,overflowLabel:i}){return e.length===0?null:jsxs("div",{className:"relative",children:[jsxs("button",{onClick:()=>o(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:i}),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),o(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(B,{variant:"secondary",className:"ml-auto",children:r.badge})]})},r.id))})})]})}function L({visibleNavItems:e,overflowNavItems:n,activeSubmenu:t,onItemClick:o,onSubmenuToggle:i,overflowBehavior:r,overflowLabel:a,bp:c}){let u=n.length>0;return jsxs("div",{className:p("hidden",`${c}:flex`,"items-center space-x-8"),children:[e.map(d=>jsx(le,{item:d,activeSubmenu:t,onItemClick:o,onSubmenuToggle:i},d.id)),u&&r==="collapse"&&jsx(ce,{items:n,activeSubmenu:t,onItemClick:o,onSubmenuToggle:i,overflowLabel:a})]})}function x(...e){return e.filter(Boolean).join(" ")}function j({children:e,variant:n="default",disabled:t=false,loading:o=false,onClick:i,className:r=""}){return jsxs("button",{onClick:i,disabled:t||o,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",(u=>{switch(u){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:[o?jsx("div",{className:"animate-spin rounded-full h-4 w-4 border-b-2 border-current mr-2"}):null,e]})}function ue({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 A({navigationItems:e,contextualActions:n,primaryAction:t,onItemClick:o,onCloseMobileMenu:i,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(a=>jsxs("button",{onClick:()=>o(a),disabled:a.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",a.active?"text-blue-700 bg-blue-50":"text-gray-700 hover:text-gray-900 hover:bg-gray-50",a.disabled&&"opacity-50 cursor-not-allowed"),"aria-current":a.active?"page":void 0,children:[a.icon&&jsx("span",{className:"flex-shrink-0",children:a.icon}),jsx("span",{className:"flex-1",children:a.label}),a.badge&&jsx(ue,{variant:"default",children:a.badge})]},a.id))}),(n.length>0||t)&&jsxs("div",{className:"mt-4 pt-4 border-t border-gray-200 space-y-2",children:[n.map(a=>jsxs(j,{onClick:()=>{a.onClick(),i();},variant:a.variant==="destructive"?"destructive":"secondary",disabled:a.disabled,loading:a.loading,className:"w-full justify-center",children:[a.icon&&jsx("span",{className:"mr-2",children:a.icon}),a.label]},a.id)),t&&jsxs(j,{onClick:()=>{t.onClick(),i();},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 R({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 be(...e){return e.filter(Boolean).join(" ")}function O({isOpen:e,onToggle:n,collapsible:t,menuLabel:o,closeMenuLabel:i,bp:r}){return t?jsx("button",{onClick:n,className:be(`${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?i:o,children:e?jsx(X$1,{className:"h-6 w-6"}):jsx(Menu,{className:"h-6 w-6"})}):null}function ve(...e){return e.filter(Boolean).join(" ")}function U({showSearch:e,onSearchClick:n,searchLabel:t,searchPlaceholder:o,showCommandPalette:i,onCommandPaletteToggle:r,commandPaletteLabel:a,commandPaletteShortcut:c,bp:u}){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:o,children:jsx(Search,{className:"h-5 w-5"})}),i&&jsxs("button",{onClick:r,className:ve("hidden",`${u}: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":a,children:[jsx(Command,{className:"h-4 w-4"}),jsx("span",{className:"text-xs",children:c})]})]})}function D(...e){return e.filter(Boolean).join(" ")}function X({children:e,variant:n="default",size:t="default",disabled:o=false,loading:i=false,onClick:r,className:a=""}){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",u=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"}},d=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:o||i,className:D(c,u(n),d(t),a),children:[i?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}){return jsxs(Fragment,{children:[jsx("div",{className:D("hidden",`${t}:flex`,"items-center space-x-2"),children:e.map(o=>jsxs(X,{onClick:o.onClick,variant:o.variant==="destructive"?"destructive":"ghost",disabled:o.disabled,loading:o.loading,size:"sm",children:[o.icon&&jsx("span",{className:"mr-1",children:o.icon}),o.label]},o.id))}),n&&jsxs(X,{onClick:n.onClick,variant:"primary",disabled:n.disabled,loading:n.loading,className:D("hidden",`${t}:inline-flex`),children:[n.icon&&jsx("span",{className:"mr-2",children:n.icon}),n.label]})]})}function ye(...e){return e.filter(Boolean).join(" ")}function Ne({showSearch:e,onSearchClick:n,searchLabel:t,searchPlaceholder:o,showCommandPalette:i,onCommandPaletteToggle:r,commandPaletteLabel:a,commandPaletteShortcut:c,contextualActions:u,primaryAction:d,bp:g}){return jsxs("div",{className:"flex items-center space-x-3",children:[jsx(U,{showSearch:e,onSearchClick:n,searchLabel:t,searchPlaceholder:o,showCommandPalette:i,onCommandPaletteToggle:r,commandPaletteLabel:a,commandPaletteShortcut:c,bp:g}),jsx(q,{contextualActions:u,primaryAction:d,bp:g})]})}function Ce({navigationItems:e,contextualActions:n=[],primaryAction:t,logo:o,logoHref:i,onLogoClick:r,searchPlaceholder:a="Buscar...",onSearchClick:c,showSearch:u=true,showCommandPalette:d=true,onCommandPaletteToggle:g,commandPaletteShortcut:J="\u2318K",mobileBreakpoint:Q="md",collapsible:V=true,menuLabel:W="Men\xFA",closeMenuLabel:Y="Cerrar men\xFA",searchLabel:Z="Buscar",commandPaletteLabel:_="Abrir paleta de comandos",className:ee="",variant:te="default",overflowBehavior:ne="collapse",overflowLabel:oe="M\xE1s opciones"}){let[M,I]=useState(false),[F,$]=useState(null);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 ae=e.slice(0,4),re=e.slice(4),E=n.slice(0,3),h=(l=>{switch(l){case "sm":return "sm";case "md":return "md";case "lg":return "lg";default:return "md"}})(Q),ie=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";default:return "bg-white border-b border-gray-200"}},z=l=>{l.disabled||(l.submenu&&l.submenu.length>0?$(F===l.id?null:l.id):(l.onClick?.(),I(false)));},S=useCallback(l=>{(l.metaKey||l.ctrlKey)&&l.key==="k"&&d&&(l.preventDefault(),g?.());},[d,g]);return useEffect(()=>(document.addEventListener("keydown",S),()=>document.removeEventListener("keydown",S)),[S]),jsx("nav",{className:ye("relative w-full",ie(te),ee),"data-birhaus-component":"four-three-one-nav","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(R,{logo:o,logoHref:i,onLogoClick:r}),jsx(L,{visibleNavItems:ae,overflowNavItems:re,activeSubmenu:F,onItemClick:z,onSubmenuToggle:$,overflowBehavior:ne,overflowLabel:oe,bp:h}),jsxs("div",{className:"flex items-center space-x-3",children:[jsx(Ne,{showSearch:u,onSearchClick:c,searchLabel:Z,searchPlaceholder:a,showCommandPalette:d,onCommandPaletteToggle:g,commandPaletteLabel:_,commandPaletteShortcut:J,contextualActions:E,primaryAction:t,bp:h}),jsx(O,{isOpen:M,onToggle:()=>I(!M),collapsible:V,menuLabel:W,closeMenuLabel:Y,bp:h})]})]}),V&&M&&jsx(A,{navigationItems:e,contextualActions:E,primaryAction:t,onItemClick:z,onCloseMobileMenu:()=>I(false),bp:h})]})})}function we(){let[e,n]=useState(null),[t,o]=useState(false);return {activeItem:e,isMobileMenuOpen:t,activateItem:c=>{n(c),o(false);},toggleMobileMenu:()=>{o(c=>!c);},closeMobileMenu:()=>{o(false);},setActiveItem:n}}export{Ce as FourThreeOneNav,we as useFourThreeOneNav};//# sourceMappingURL=index.mjs.map
//# sourceMappingURL=index.mjs.map