@anthonybir/birhaus-navigation/dist/index.js

BIRHAUS Navigation Components - FourThreeOneNav implementing 4-3-1 cognitive rule

'use strict';var react=require('react'),lucideReact=require('lucide-react'),jsxRuntime=require('react/jsx-runtime');function o(...l){return l.filter(Boolean).join(" ")}function h({children:l,variant:t="default",size:s="default",disabled:r=false,loading:d=false,onClick:v,className:y=""}){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",k={default:"bg-white border border-gray-300 text-gray-900 hover:bg-gray-50 focus-visible:ring-blue-500",secondary:"bg-gray-100 text-gray-900 hover:bg-gray-200 focus-visible:ring-gray-500",destructive:"bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500",ghost:"text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-500",primary:"bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-500"},b={sm:"h-8 px-3 text-sm rounded-md",default:"h-10 px-4 py-2 text-sm rounded-md",lg:"h-12 px-6 text-base rounded-lg"};return jsxRuntime.jsxs("button",{onClick:v,disabled:r||d,className:o(c,k[t],b[s],y),children:[d?jsxRuntime.jsx("div",{className:"animate-spin rounded-full h-4 w-4 border-b-2 border-current mr-2"}):null,l]})}function x({children:l,variant:t="default",className:s=""}){return jsxRuntime.jsx("span",{className:o("inline-flex items-center rounded-full px-2 py-1 text-xs font-medium",{default:"bg-blue-100 text-blue-800",secondary:"bg-gray-100 text-gray-800",destructive:"bg-red-100 text-red-800"}[t],s),children:l})}function Q({navigationItems:l,contextualActions:t=[],primaryAction:s,logo:r,logoHref:d,onLogoClick:v,searchPlaceholder:y="Buscar...",onSearchClick:c,showSearch:k=true,showCommandPalette:b=true,onCommandPaletteToggle:w,commandPaletteShortcut:F="\u2318K",mobileBreakpoint:L="md",collapsible:M=true,menuLabel:P="Men\xFA",closeMenuLabel:$="Cerrar men\xFA",searchLabel:E="Buscar",commandPaletteLabel:T="Abrir paleta de comandos",className:z="",variant:K="default",overflowBehavior:j="collapse",overflowLabel:D="M\xE1s opciones"}){let[g,m]=react.useState(false),[f,p]=react.useState(null);react.useEffect(()=>{l.length>4&&console.warn(`BIRHAUS 4-3-1 Rule Violation: Navigation has ${l.length} items (max 4). Consider using overflowBehavior to handle excess items.`),t.length>3&&console.warn(`BIRHAUS 4-3-1 Rule Violation: ${t.length} contextual actions (max 3). Reduce cognitive load by consolidating actions.`);},[l.length,t.length]);let H=l.slice(0,4),O=l.slice(4),U=O.length>0,C=t.slice(0,3),u={sm:"sm",md:"md",lg:"lg"}[L],V={default:"bg-white border-b border-gray-200",minimal:"bg-transparent",elevated:"bg-white shadow-sm border-b border-gray-200"},B=e=>{e.disabled||(e.submenu&&e.submenu.length>0?p(f===e.id?null:e.id):(e.onClick?.(),m(false)));},I=e=>{(e.metaKey||e.ctrlKey)&&e.key==="k"&&b&&(e.preventDefault(),w?.());};return react.useEffect(()=>(document.addEventListener("keydown",I),()=>document.removeEventListener("keydown",I)),[b,w]),jsxRuntime.jsx("nav",{className:o("relative w-full",V[K],z),"data-birhaus-component":"four-three-one-nav","aria-label":"Navegaci\xF3n principal",children:jsxRuntime.jsxs("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:[jsxRuntime.jsxs("div",{className:"flex items-center justify-between h-16",children:[jsxRuntime.jsx("div",{className:"flex-shrink-0",children:r&&jsxRuntime.jsx("div",{className:"flex items-center",children:d?jsxRuntime.jsx("a",{href:d,className:"flex items-center",children:r}):jsxRuntime.jsx("button",{onClick:v,className:"flex items-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded",children:r})})}),jsxRuntime.jsxs("div",{className:o("hidden",`${u}:flex`,"items-center space-x-8"),children:[H.map(e=>jsxRuntime.jsxs("div",{className:"relative",children:[jsxRuntime.jsxs("button",{onClick:()=>B(e),disabled:e.disabled,className:o("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?f===e.id:void 0,children:[e.icon&&jsxRuntime.jsx("span",{className:"flex-shrink-0",children:e.icon}),jsxRuntime.jsx("span",{children:e.label}),e.badge&&jsxRuntime.jsx(x,{variant:"default",className:"ml-1",children:e.badge}),e.submenu&&jsxRuntime.jsx(lucideReact.ChevronDown,{className:"ml-1 h-4 w-4 flex-shrink-0"})]}),e.submenu&&f===e.id&&jsxRuntime.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:jsxRuntime.jsx("div",{className:"py-1",children:e.submenu.map(i=>jsxRuntime.jsx("button",{onClick:()=>{i.onClick?.(),p(null);},disabled:i.disabled,className:o("w-full text-left px-4 py-2 text-sm transition-colors","hover:bg-gray-50 focus:outline-none focus:bg-gray-50",i.active&&"text-blue-700 bg-blue-50",i.disabled&&"opacity-50 cursor-not-allowed"),children:jsxRuntime.jsxs("div",{className:"flex items-center space-x-2",children:[i.icon&&jsxRuntime.jsx("span",{className:"flex-shrink-0",children:i.icon}),jsxRuntime.jsx("span",{children:i.label}),i.badge&&jsxRuntime.jsx(x,{variant:"secondary",className:"ml-auto",children:i.badge})]})},i.id))})})]},e.id)),U&&j==="collapse"&&jsxRuntime.jsxs("div",{className:"relative",children:[jsxRuntime.jsxs("button",{onClick:()=>p(f==="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:[jsxRuntime.jsx("span",{children:D}),jsxRuntime.jsx(lucideReact.ChevronDown,{className:"ml-1 h-4 w-4"})]}),f==="overflow"&&jsxRuntime.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:jsxRuntime.jsx("div",{className:"py-1",children:O.map(e=>jsxRuntime.jsx("button",{onClick:()=>{B(e),p(null);},disabled:e.disabled,className:o("w-full text-left px-4 py-2 text-sm transition-colors","hover:bg-gray-50 focus:outline-none focus:bg-gray-50",e.active&&"text-blue-700 bg-blue-50",e.disabled&&"opacity-50 cursor-not-allowed"),children:jsxRuntime.jsxs("div",{className:"flex items-center space-x-2",children:[e.icon&&jsxRuntime.jsx("span",{className:"flex-shrink-0",children:e.icon}),jsxRuntime.jsx("span",{children:e.label}),e.badge&&jsxRuntime.jsx(x,{variant:"secondary",className:"ml-auto",children:e.badge})]})},e.id))})})]})]}),jsxRuntime.jsxs("div",{className:"flex items-center space-x-3",children:[k&&jsxRuntime.jsx("button",{onClick:c,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":E,children:jsxRuntime.jsx(lucideReact.Search,{className:"h-5 w-5"})}),b&&jsxRuntime.jsxs("button",{onClick:w,className:o("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":T,children:[jsxRuntime.jsx(lucideReact.Command,{className:"h-4 w-4"}),jsxRuntime.jsx("span",{className:"text-xs",children:F})]}),jsxRuntime.jsx("div",{className:o("hidden",`${u}:flex`,"items-center space-x-2"),children:C.map(e=>jsxRuntime.jsxs(h,{onClick:e.onClick,variant:e.variant==="destructive"?"destructive":"ghost",disabled:e.disabled,loading:e.loading,size:"sm",children:[e.icon&&jsxRuntime.jsx("span",{className:"mr-1",children:e.icon}),e.label]},e.id))}),s&&jsxRuntime.jsxs(h,{onClick:s.onClick,variant:"primary",disabled:s.disabled,loading:s.loading,className:o("hidden",`${u}:inline-flex`),children:[s.icon&&jsxRuntime.jsx("span",{className:"mr-2",children:s.icon}),s.label]}),M&&jsxRuntime.jsx("button",{onClick:()=>m(!g),className:o(`${u}: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":g,"aria-label":g?$:P,children:g?jsxRuntime.jsx(lucideReact.X,{className:"h-6 w-6"}):jsxRuntime.jsx(lucideReact.Menu,{className:"h-6 w-6"})})]})]}),M&&g&&jsxRuntime.jsxs("div",{className:o(`${u}:hidden`,"border-t border-gray-200 pt-4 pb-4"),children:[jsxRuntime.jsx("div",{className:"space-y-1",children:l.map(e=>jsxRuntime.jsxs("button",{onClick:()=>B(e),disabled:e.disabled,className:o("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",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,children:[e.icon&&jsxRuntime.jsx("span",{className:"flex-shrink-0",children:e.icon}),jsxRuntime.jsx("span",{className:"flex-1",children:e.label}),e.badge&&jsxRuntime.jsx(x,{variant:"default",children:e.badge})]},e.id))}),(C.length>0||s)&&jsxRuntime.jsxs("div",{className:"mt-4 pt-4 border-t border-gray-200 space-y-2",children:[C.map(e=>jsxRuntime.jsxs(h,{onClick:()=>{e.onClick(),m(false);},variant:e.variant==="destructive"?"destructive":"secondary",disabled:e.disabled,loading:e.loading,className:"w-full justify-center",children:[e.icon&&jsxRuntime.jsx("span",{className:"mr-2",children:e.icon}),e.label]},e.id)),s&&jsxRuntime.jsxs(h,{onClick:()=>{s.onClick(),m(false);},variant:"primary",disabled:s.disabled,loading:s.loading,className:"w-full justify-center",children:[s.icon&&jsxRuntime.jsx("span",{className:"mr-2",children:s.icon}),s.label]})]})]})]})})}function W(){let[l,t]=react.useState(null),[s,r]=react.useState(false);return {activeItem:l,isMobileMenuOpen:s,activateItem:c=>{t(c),r(false);},toggleMobileMenu:()=>{r(c=>!c);},closeMobileMenu:()=>{r(false);},setActiveItem:t}}exports.FourThreeOneNav=Q;exports.useFourThreeOneNav=W;//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map