responsive-system 1.4.7 → 1.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/responsive-system.cjs +3 -3
  2. package/dist/responsive-system.cjs.map +1 -1
  3. package/dist/responsive-system.mjs +136 -135
  4. package/dist/responsive-system.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/src/providers/ResponsiveLayoutProvider.tsx +9 -4
package/dist/responsive-system.cjs CHANGED
@@ -1,5 +1,5 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),P=({children:s,debug:n=!1})=>e.jsx(e.Fragment,{children:s}),d={xs:475,sm:640,md:768,lg:1024,xl:1280,"2xl":1536,"3xl":1920,"4xl":2560,"5xl":3840},R=s=>s>=d["5xl"]?"5xl":s>=d["4xl"]?"4xl":s>=d["3xl"]?"3xl":s>=d["2xl"]?"2xl":s>=d.xl?"xl":s>=d.lg?"lg":s>=d.md?"md":s>=d.sm?"sm":"xs",x=s=>["xs","sm","md","lg","xl","2xl","3xl","4xl","5xl"].indexOf(s),de=s=>d[s];function ue(s,n){let o=null;return(...l)=>{o&&clearTimeout(o),o=setTimeout(()=>s(...l),n)}}function xe(s,n){return s>=n?"landscape":"portrait"}const T=()=>{const[s,n]=i.useState({width:typeof window<"u"?window.innerWidth:1024,height:typeof window<"u"?window.innerHeight:768}),o=i.useCallback(()=>{n({width:window.innerWidth,height:window.innerHeight})},[]),l=i.useMemo(()=>ue(o,100),[o]);i.useEffect(()=>{if(!(typeof window>"u"))return window.addEventListener("resize",l),()=>{window.removeEventListener("resize",l)}},[l]);const{width:a,height:r}=s,t=i.useMemo(()=>R(a),[a]),b=i.useMemo(()=>xe(a,r),[a,r]),u=t==="xs",j=t==="sm",y=t==="md",m=t==="lg",L=t==="xl",w=t==="2xl",N=t==="3xl",f=t==="4xl",h=t==="5xl",Y=u||j,X=y,V=m||L||w||N||f||h,K=u||j||y,q=m||L||w||N||f||h,G=N||f||h,J=f||h,Q=h,Z=b==="portrait",ee=b==="landscape",se=i.useCallback(c=>x(t)>=x(c),[t]),te=i.useCallback(c=>x(t)<=x(c),[t]),ne=i.useCallback((c,v)=>{const A=x(t);return A>=x(c)&&A<=x(v)},[t]),ae=i.useCallback(c=>a>=c,[a]),re=i.useCallback(c=>a<=c,[a]),oe=i.useCallback((c,v)=>a>=c&&a<=v,[a]),ie=i.useCallback(c=>r>=c,[r]),le=i.useCallback(c=>r<=c,[r]),ce=i.useCallback((c,v)=>r>=c&&r<=v,[r]);return{breakpoint:t,width:a,height:r,orientation:b,isXs:u,isSm:j,isMd:y,isLg:m,isXl:L,is2Xl:w,is3Xl:N,is4Xl:f,is5Xl:h,isMobile:Y,isTablet:X,isDesktop:V,isSmall:K,isLarge:q,isUltraWide:G,is4K:J,is5K:Q,isPortrait:Z,isLandscape:ee,isBreakpointUp:se,isBreakpointDown:te,isBreakpointBetween:ne,isWidthUp:ae,isWidthDown:re,isWidthBetween:oe,isHeightUp:ie,isHeightDown:le,isHeightBetween:ce,debug:!1}},U=i.createContext(void 0),B=()=>{const s=i.useContext(U);if(!s)throw new Error("useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider");return s},E=i.createContext(void 0),C=({children:s})=>{const[n,o]=i.useState(!1);return e.jsx(E.Provider,{value:{sidebarOpen:n,setSidebarOpen:o},children:s})},S=()=>{const s=i.useContext(E);if(!s)throw new Error("useSidebar must be used within a SidebarProvider");return s},F=i.createContext({currentPage:"test",setCurrentPage:()=>{}}),I=()=>i.useContext(F),be=({children:s,defaultPage:n="test"})=>{const[o,l]=i.useState(n);return e.jsx(F.Provider,{value:{currentPage:o,setCurrentPage:l},children:s})},g=()=>{const s=B();return{...s.responsive,layout:{current:s.layout.current,config:s.layout.config,setLayout:s.layout.setLayout},layoutUtils:s.layoutUtils,isDefaultLayout:()=>s.layout.current==="default",isSidebarLayout:()=>s.layout.current==="sidebar",isDashboardLayout:()=>s.layout.current==="dashboard",isMinimalLayout:()=>s.layout.current==="minimal",grid:{auto:(n="md")=>`grid-cols-auto-${n}`,responsive:n=>{const o=[];return Object.entries(n).forEach(([l,a])=>{l==="base"?o.push(`grid-cols-${a}`):o.push(`${l}:grid-cols-${a}`)}),o.join(" ")},fixed:n=>`grid-cols-${n}`},spacing:{container:s.layoutUtils.getContainerClass(),section:"mb-6",card:"p-6",gap:"gap-4"}}},H=()=>{const s=g();return{current:s.layout.current,config:s.layout.config,setLayout:s.layout.setLayout,...s.layoutUtils,isDefaultLayout:s.isDefaultLayout(),isSidebarLayout:s.isSidebarLayout(),isDashboardLayout:s.isDashboardLayout(),isMinimalLayout:s.isMinimalLayout(),grid:s.grid,spacing:s.spacing}},p={default:{name:"Default",description:"Navbar arriba, body central, footer abajo",components:["Navigation","Footer"],spacing:"p-4 md:p-6 lg:p-8",responsive:{mobile:"p-4",tablet:"p-6",desktop:"p-8"}},sidebar:{name:"Sidebar",description:"Sidebar izquierda, contenido principal",components:["Sidebar"],spacing:"p-4 md:p-6",responsive:{mobile:"p-4",tablet:"p-6",desktop:"p-6"}},dashboard:{name:"Dashboard",description:"Header + Sidebar + Main + Footer",components:["Header","Sidebar","Footer"],spacing:"p-4 md:p-6 lg:p-8",responsive:{mobile:"p-4",tablet:"p-6",desktop:"p-8"}},minimal:{name:"Minimal",description:"Solo contenido, sin navegación",components:[],spacing:"p-4 md:p-6",responsive:{mobile:"p-4",tablet:"p-6",desktop:"p-6"}}},M="default",me=Object.keys(p),he=({children:s,defaultLayout:n,useResponsiveHook:o})=>{const l=T(),r=o?.()||l,[t,b]=i.useState(()=>n);i.useEffect(()=>{b(n)},[n]);const u=p[t]||p[M],y={responsive:r,layout:{current:t,config:u,setLayout:b},layoutUtils:{getContainerClass:()=>r.isMobile?u.responsive.mobile:r.isTablet?u.responsive.tablet:u.responsive.desktop,getMainClass:()=>{const m="min-h-screen bg-black";return t==="sidebar"||t==="dashboard"?`${m} flex`:m},hasSidebar:()=>t==="sidebar"||t==="dashboard",hasHeader:()=>t==="dashboard",hasFooter:()=>t==="default"||t==="dashboard",hasNavigation:()=>t==="default"}};return e.jsx(U.Provider,{value:y,children:s})},pe=({children:s,defaultLayout:n=M,useResponsiveHook:o})=>e.jsx(P,{children:e.jsx(he,{defaultLayout:n,useResponsiveHook:o,children:s})}),ge=({children:s,layout:n})=>{const{layout:o}=g(),l=n||o.current,r={default:k,sidebar:W,dashboard:_,minimal:z}[l]||k;return e.jsx(r,{children:s})},ye=()=>{const{isMobile:s}=g(),{currentPage:n,setCurrentPage:o}=I(),{sidebarOpen:l,setSidebarOpen:a}=S(),r=[{id:"test",label:"Suite de Test"},{id:"demo",label:"Demo"}];return e.jsxs("div",{className:"sticky top-0 z-50",children:[e.jsx("header",{className:"bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative",children:e.jsx("div",{className:"w-full",children:e.jsx("div",{className:"px-4 py-4",children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{className:"flex items-center space-x-2",children:[s&&e.jsx("button",{onClick:()=>a(!0),className:"p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors",children:e.jsx("svg",{className:"w-6 h-6",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 6h16M4 12h16M4 18h16"})})}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx("div",{className:"w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse"}),e.jsx("h3",{className:"text-base font-black text-white tracking-tight",children:"Sistema Responsivo"})]}),e.jsx("div",{className:"px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest",children:"DASHBOARD"})]}),e.jsx("div",{className:"flex items-center space-x-2",children:!s&&r.map(t=>e.jsx("button",{onClick:()=>o(t.id),className:`px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${n===t.id?"bg-cyan-500/20 text-cyan-400 border-cyan-500/50":"bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600"}`,children:t.label},t.id))})]})})})}),s&&l&&e.jsx("div",{className:"fixed inset-0 z-40 bg-black/50",onClick:()=>a(!1),children:e.jsx("div",{className:"fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20",children:e.jsxs("div",{className:"p-6 flex flex-col h-full pt-20",children:[e.jsxs("div",{className:"flex items-center space-x-3 mb-8",children:[e.jsx("div",{className:"w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center",children:e.jsx("span",{className:"text-white font-bold text-sm",children:"RS"})}),e.jsx("span",{className:"text-white font-bold text-lg",children:"Sistema Responsivo"})]}),e.jsx("nav",{className:"space-y-2",children:r.map(t=>e.jsx("button",{onClick:()=>{o(t.id),a(!1)},className:`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${n===t.id?"bg-cyan-500/20 text-cyan-400 border border-cyan-500/50":"text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10"}`,children:e.jsx("span",{className:"font-medium",children:t.label})},t.id))})]})})})]})},D=()=>{const{isMobile:s,isTablet:n}=g(),{sidebarOpen:o,setSidebarOpen:l}=S(),a=[{id:"home",label:"Inicio"},{id:"about",label:"Acerca"},{id:"contact",label:"Contacto"}];return e.jsxs(e.Fragment,{children:[s&&e.jsx("button",{onClick:()=>l(!0),className:"fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800 bg-gray-900 border border-gray-700",children:e.jsx("svg",{className:"w-6 h-6",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 6h16M4 12h16M4 18h16"})})}),e.jsx("aside",{className:`bg-gray-900 border-r border-gray-800 ${s?"hidden":"w-64 flex-shrink-0"} ${n?"w-56":"w-64"}`,children:e.jsxs("div",{className:"p-6 flex flex-col h-full",children:[e.jsxs("div",{className:"flex items-center space-x-3 mb-8",children:[e.jsx("div",{className:"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center",children:e.jsx("span",{className:"text-white font-bold text-sm",children:"LO"})}),e.jsx("span",{className:"text-white font-bold text-lg",children:"Tu Aplicación"})]}),e.jsx("nav",{className:"space-y-2",children:a.map(r=>e.jsx("button",{className:"w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800",children:e.jsx("span",{className:"font-medium",children:r.label})},r.id))})]})}),s&&o&&e.jsx("div",{className:"fixed inset-0 z-40 bg-black/50",onClick:()=>l(!1),children:e.jsx("div",{className:"fixed top-0 left-0 w-64 h-full bg-gray-900 border-r border-gray-800",children:e.jsxs("div",{className:"p-6 flex flex-col h-full pt-20",children:[e.jsxs("div",{className:"flex items-center space-x-3 mb-8",children:[e.jsx("div",{className:"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center",children:e.jsx("span",{className:"text-white font-bold text-sm",children:"LO"})}),e.jsx("span",{className:"text-white font-bold text-lg",children:"Tu Aplicación"})]}),e.jsx("nav",{className:"space-y-2",children:a.map(r=>e.jsx("button",{onClick:()=>l(!1),className:"w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800",children:e.jsx("span",{className:"font-medium",children:r.label})},r.id))})]})})})]})},O=()=>e.jsx("footer",{className:"bg-gray-900 border-t border-gray-800",children:e.jsx("div",{className:"px-4 py-6",children:e.jsx("div",{className:"max-w-7xl mx-auto text-center",children:e.jsxs("p",{className:"text-gray-400 text-sm",children:["© ",new Date().getFullYear()," Tu Aplicación. Todos los derechos reservados."]})})})}),$=()=>{const{isMobile:s}=g();return e.jsx("nav",{className:"sticky top-0 z-50 bg-gray-900 border-b border-gray-800",children:e.jsx("div",{className:"px-4 py-4",children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{className:"flex items-center space-x-3",children:[e.jsx("div",{className:"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center",children:e.jsx("span",{className:"text-white font-bold text-sm",children:"LO"})}),e.jsx("h1",{className:"text-white font-semibold text-lg",children:"Tu Aplicación"})]}),s&&e.jsx("button",{className:"p-2 text-gray-400 hover:text-white",children:e.jsx("svg",{className:"w-6 h-6",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 6h16M4 12h16M4 18h16"})})})]})})})},k=({children:s})=>e.jsxs("div",{className:"min-h-screen bg-gray-50 flex flex-col",children:[e.jsx($,{}),e.jsx("main",{className:"flex-1",children:s}),e.jsx(O,{})]}),fe=({children:s})=>e.jsxs("div",{className:"min-h-screen bg-gray-50 flex",children:[e.jsx(D,{}),e.jsx("main",{className:"flex-1 overflow-auto",children:s})]}),W=({children:s})=>e.jsx(C,{children:e.jsx(fe,{children:s})}),ve=({children:s})=>e.jsx("div",{className:"min-h-screen bg-gray-50 flex flex-col",children:e.jsxs("div",{className:"flex flex-1",children:[e.jsx(D,{}),e.jsxs("main",{className:"flex-1 overflow-auto flex flex-col",children:[e.jsx("div",{className:"flex-1",children:s}),e.jsx(O,{})]})]})}),_=({children:s})=>e.jsx(C,{children:e.jsx(ve,{children:s})}),z=({children:s})=>e.jsx("div",{className:"min-h-screen bg-gray-50",children:e.jsx("main",{children:s})}),je=({compact:s=!1})=>{const{current:n,setLayout:o,config:l}=H();return s?e.jsxs("div",{className:"bg-black/50 rounded-lg p-3 border border-gray-700",children:[e.jsx("div",{className:"text-xs text-gray-500 mb-2",children:"Layout:"}),e.jsx("select",{value:n,onChange:a=>o(a.target.value),className:"w-full bg-gray-800 text-white text-sm p-2 rounded border border-gray-600 focus:ring-1 focus:ring-cyan-500 focus:border-transparent",children:Object.entries(p).map(([a,r])=>e.jsx("option",{value:a,children:r.name},a))})]}):e.jsxs("div",{className:"bg-black/50 backdrop-blur-sm rounded-lg p-4 border border-cyan-500/30",children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Cambiar Layout"}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3",children:Object.entries(p).map(([a,r])=>e.jsxs("button",{onClick:()=>o(a),className:`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),P=({children:s,debug:t=!1})=>e.jsx(e.Fragment,{children:s}),u={xs:475,sm:640,md:768,lg:1024,xl:1280,"2xl":1536,"3xl":1920,"4xl":2560,"5xl":3840},R=s=>s>=u["5xl"]?"5xl":s>=u["4xl"]?"4xl":s>=u["3xl"]?"3xl":s>=u["2xl"]?"2xl":s>=u.xl?"xl":s>=u.lg?"lg":s>=u.md?"md":s>=u.sm?"sm":"xs",m=s=>["xs","sm","md","lg","xl","2xl","3xl","4xl","5xl"].indexOf(s),de=s=>u[s];function ue(s,t){let a=null;return(...l)=>{a&&clearTimeout(a),a=setTimeout(()=>s(...l),t)}}function xe(s,t){return s>=t?"landscape":"portrait"}const T=()=>{const[s,t]=i.useState({width:typeof window<"u"?window.innerWidth:1024,height:typeof window<"u"?window.innerHeight:768}),a=i.useCallback(()=>{t({width:window.innerWidth,height:window.innerHeight})},[]),l=i.useMemo(()=>ue(a,100),[a]);i.useEffect(()=>{if(!(typeof window>"u"))return window.addEventListener("resize",l),()=>{window.removeEventListener("resize",l)}},[l]);const{width:n,height:r}=s,o=i.useMemo(()=>R(n),[n]),d=i.useMemo(()=>xe(n,r),[n,r]),p=o==="xs",b=o==="sm",w=o==="md",f=o==="lg",x=o==="xl",k=o==="2xl",L=o==="3xl",v=o==="4xl",g=o==="5xl",Y=p||b,V=w,X=f||x||k||L||v||g,K=p||b||w,q=f||x||k||L||v||g,G=L||v||g,J=v||g,Q=g,Z=d==="portrait",ee=d==="landscape",se=i.useCallback(c=>m(o)>=m(c),[o]),te=i.useCallback(c=>m(o)<=m(c),[o]),ne=i.useCallback((c,j)=>{const A=m(o);return A>=m(c)&&A<=m(j)},[o]),re=i.useCallback(c=>n>=c,[n]),ae=i.useCallback(c=>n<=c,[n]),oe=i.useCallback((c,j)=>n>=c&&n<=j,[n]),ie=i.useCallback(c=>r>=c,[r]),le=i.useCallback(c=>r<=c,[r]),ce=i.useCallback((c,j)=>r>=c&&r<=j,[r]);return{breakpoint:o,width:n,height:r,orientation:d,isXs:p,isSm:b,isMd:w,isLg:f,isXl:x,is2Xl:k,is3Xl:L,is4Xl:v,is5Xl:g,isMobile:Y,isTablet:V,isDesktop:X,isSmall:K,isLarge:q,isUltraWide:G,is4K:J,is5K:Q,isPortrait:Z,isLandscape:ee,isBreakpointUp:se,isBreakpointDown:te,isBreakpointBetween:ne,isWidthUp:re,isWidthDown:ae,isWidthBetween:oe,isHeightUp:ie,isHeightDown:le,isHeightBetween:ce,debug:!1}},U=i.createContext(void 0),B=()=>{const s=i.useContext(U);if(!s)throw new Error("useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider");return s},E=i.createContext(void 0),S=({children:s})=>{const[t,a]=i.useState(!1);return e.jsx(E.Provider,{value:{sidebarOpen:t,setSidebarOpen:a},children:s})},M=()=>{const s=i.useContext(E);if(!s)throw new Error("useSidebar must be used within a SidebarProvider");return s},F=i.createContext({currentPage:"test",setCurrentPage:()=>{}}),I=()=>i.useContext(F),be=({children:s,defaultPage:t="test"})=>{const[a,l]=i.useState(t);return e.jsx(F.Provider,{value:{currentPage:a,setCurrentPage:l},children:s})},y=()=>{const s=B();return{...s.responsive,layout:{current:s.layout.current,config:s.layout.config,setLayout:s.layout.setLayout},layoutUtils:s.layoutUtils,isDefaultLayout:()=>s.layout.current==="default",isSidebarLayout:()=>s.layout.current==="sidebar",isDashboardLayout:()=>s.layout.current==="dashboard",isMinimalLayout:()=>s.layout.current==="minimal",grid:{auto:(t="md")=>`grid-cols-auto-${t}`,responsive:t=>{const a=[];return Object.entries(t).forEach(([l,n])=>{l==="base"?a.push(`grid-cols-${n}`):a.push(`${l}:grid-cols-${n}`)}),a.join(" ")},fixed:t=>`grid-cols-${t}`},spacing:{container:s.layoutUtils.getContainerClass(),section:"mb-6",card:"p-6",gap:"gap-4"}}},H=()=>{const s=y();return{current:s.layout.current,config:s.layout.config,setLayout:s.layout.setLayout,...s.layoutUtils,isDefaultLayout:s.isDefaultLayout(),isSidebarLayout:s.isSidebarLayout(),isDashboardLayout:s.isDashboardLayout(),isMinimalLayout:s.isMinimalLayout(),grid:s.grid,spacing:s.spacing}},h={default:{name:"Default",description:"Navbar arriba, body central, footer abajo",components:["Navigation","Footer"],spacing:"p-4 md:p-6 lg:p-8",responsive:{mobile:"p-4",tablet:"p-6",desktop:"p-8"}},sidebar:{name:"Sidebar",description:"Sidebar izquierda, contenido principal",components:["Sidebar"],spacing:"p-4 md:p-6",responsive:{mobile:"p-4",tablet:"p-6",desktop:"p-6"}},dashboard:{name:"Dashboard",description:"Header + Sidebar + Main + Footer",components:["Header","Sidebar","Footer"],spacing:"p-4 md:p-6 lg:p-8",responsive:{mobile:"p-4",tablet:"p-6",desktop:"p-8"}},minimal:{name:"Minimal",description:"Solo contenido, sin navegación",components:[],spacing:"p-4 md:p-6",responsive:{mobile:"p-4",tablet:"p-6",desktop:"p-6"}}},N="default",me=Object.keys(h),he=({children:s,defaultLayout:t,useResponsiveHook:a})=>{const l=T(),r=a?.()||l,o=t&&h[t]?t:N,[d,p]=i.useState(o);i.useEffect(()=>{const x=t&&h[t]?t:N;x!==d&&p(x)},[t,d]);const b=h[d]||h[N],f={responsive:r,layout:{current:d,config:b,setLayout:p},layoutUtils:{getContainerClass:()=>r.isMobile?b.responsive.mobile:r.isTablet?b.responsive.tablet:b.responsive.desktop,getMainClass:()=>{const x="min-h-screen bg-black";return d==="sidebar"||d==="dashboard"?`${x} flex`:x},hasSidebar:()=>d==="sidebar"||d==="dashboard",hasHeader:()=>d==="dashboard",hasFooter:()=>d==="default"||d==="dashboard",hasNavigation:()=>d==="default"}};return e.jsx(U.Provider,{value:f,children:s})},pe=({children:s,defaultLayout:t=N,useResponsiveHook:a})=>e.jsx(P,{children:e.jsx(he,{defaultLayout:t,useResponsiveHook:a,children:s})}),ge=({children:s,layout:t})=>{const{layout:a}=y(),l=t||a.current,r={default:C,sidebar:W,dashboard:_,minimal:z}[l]||C;return e.jsx(r,{children:s})},ye=()=>{const{isMobile:s}=y(),{currentPage:t,setCurrentPage:a}=I(),{sidebarOpen:l,setSidebarOpen:n}=M(),r=[{id:"test",label:"Suite de Test"},{id:"demo",label:"Demo"}];return e.jsxs("div",{className:"sticky top-0 z-50",children:[e.jsx("header",{className:"bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative",children:e.jsx("div",{className:"w-full",children:e.jsx("div",{className:"px-4 py-4",children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{className:"flex items-center space-x-2",children:[s&&e.jsx("button",{onClick:()=>n(!0),className:"p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors",children:e.jsx("svg",{className:"w-6 h-6",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 6h16M4 12h16M4 18h16"})})}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx("div",{className:"w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse"}),e.jsx("h3",{className:"text-base font-black text-white tracking-tight",children:"Sistema Responsivo"})]}),e.jsx("div",{className:"px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest",children:"DASHBOARD"})]}),e.jsx("div",{className:"flex items-center space-x-2",children:!s&&r.map(o=>e.jsx("button",{onClick:()=>a(o.id),className:`px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${t===o.id?"bg-cyan-500/20 text-cyan-400 border-cyan-500/50":"bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600"}`,children:o.label},o.id))})]})})})}),s&&l&&e.jsx("div",{className:"fixed inset-0 z-40 bg-black/50",onClick:()=>n(!1),children:e.jsx("div",{className:"fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20",children:e.jsxs("div",{className:"p-6 flex flex-col h-full pt-20",children:[e.jsxs("div",{className:"flex items-center space-x-3 mb-8",children:[e.jsx("div",{className:"w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center",children:e.jsx("span",{className:"text-white font-bold text-sm",children:"RS"})}),e.jsx("span",{className:"text-white font-bold text-lg",children:"Sistema Responsivo"})]}),e.jsx("nav",{className:"space-y-2",children:r.map(o=>e.jsx("button",{onClick:()=>{a(o.id),n(!1)},className:`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${t===o.id?"bg-cyan-500/20 text-cyan-400 border border-cyan-500/50":"text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10"}`,children:e.jsx("span",{className:"font-medium",children:o.label})},o.id))})]})})})]})},D=()=>{const{isMobile:s,isTablet:t}=y(),{sidebarOpen:a,setSidebarOpen:l}=M(),n=[{id:"home",label:"Inicio"},{id:"about",label:"Acerca"},{id:"contact",label:"Contacto"}];return e.jsxs(e.Fragment,{children:[s&&e.jsx("button",{onClick:()=>l(!0),className:"fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800 bg-gray-900 border border-gray-700",children:e.jsx("svg",{className:"w-6 h-6",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 6h16M4 12h16M4 18h16"})})}),e.jsx("aside",{className:`bg-gray-900 border-r border-gray-800 ${s?"hidden":"w-64 flex-shrink-0"} ${t?"w-56":"w-64"}`,children:e.jsxs("div",{className:"p-6 flex flex-col h-full",children:[e.jsxs("div",{className:"flex items-center space-x-3 mb-8",children:[e.jsx("div",{className:"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center",children:e.jsx("span",{className:"text-white font-bold text-sm",children:"LO"})}),e.jsx("span",{className:"text-white font-bold text-lg",children:"Tu Aplicación"})]}),e.jsx("nav",{className:"space-y-2",children:n.map(r=>e.jsx("button",{className:"w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800",children:e.jsx("span",{className:"font-medium",children:r.label})},r.id))})]})}),s&&a&&e.jsx("div",{className:"fixed inset-0 z-40 bg-black/50",onClick:()=>l(!1),children:e.jsx("div",{className:"fixed top-0 left-0 w-64 h-full bg-gray-900 border-r border-gray-800",children:e.jsxs("div",{className:"p-6 flex flex-col h-full pt-20",children:[e.jsxs("div",{className:"flex items-center space-x-3 mb-8",children:[e.jsx("div",{className:"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center",children:e.jsx("span",{className:"text-white font-bold text-sm",children:"LO"})}),e.jsx("span",{className:"text-white font-bold text-lg",children:"Tu Aplicación"})]}),e.jsx("nav",{className:"space-y-2",children:n.map(r=>e.jsx("button",{onClick:()=>l(!1),className:"w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800",children:e.jsx("span",{className:"font-medium",children:r.label})},r.id))})]})})})]})},O=()=>e.jsx("footer",{className:"bg-gray-900 border-t border-gray-800",children:e.jsx("div",{className:"px-4 py-6",children:e.jsx("div",{className:"max-w-7xl mx-auto text-center",children:e.jsxs("p",{className:"text-gray-400 text-sm",children:["© ",new Date().getFullYear()," Tu Aplicación. Todos los derechos reservados."]})})})}),$=()=>{const{isMobile:s}=y();return e.jsx("nav",{className:"sticky top-0 z-50 bg-gray-900 border-b border-gray-800",children:e.jsx("div",{className:"px-4 py-4",children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{className:"flex items-center space-x-3",children:[e.jsx("div",{className:"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center",children:e.jsx("span",{className:"text-white font-bold text-sm",children:"LO"})}),e.jsx("h1",{className:"text-white font-semibold text-lg",children:"Tu Aplicación"})]}),s&&e.jsx("button",{className:"p-2 text-gray-400 hover:text-white",children:e.jsx("svg",{className:"w-6 h-6",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 6h16M4 12h16M4 18h16"})})})]})})})},C=({children:s})=>e.jsxs("div",{className:"min-h-screen bg-gray-50 flex flex-col",children:[e.jsx($,{}),e.jsx("main",{className:"flex-1",children:s}),e.jsx(O,{})]}),fe=({children:s})=>e.jsxs("div",{className:"min-h-screen bg-gray-50 flex",children:[e.jsx(D,{}),e.jsx("main",{className:"flex-1 overflow-auto",children:s})]}),W=({children:s})=>e.jsx(S,{children:e.jsx(fe,{children:s})}),ve=({children:s})=>e.jsx("div",{className:"min-h-screen bg-gray-50 flex flex-col",children:e.jsxs("div",{className:"flex flex-1",children:[e.jsx(D,{}),e.jsxs("main",{className:"flex-1 overflow-auto flex flex-col",children:[e.jsx("div",{className:"flex-1",children:s}),e.jsx(O,{})]})]})}),_=({children:s})=>e.jsx(S,{children:e.jsx(ve,{children:s})}),z=({children:s})=>e.jsx("div",{className:"min-h-screen bg-gray-50",children:e.jsx("main",{children:s})}),je=({compact:s=!1})=>{const{current:t,setLayout:a,config:l}=H();return s?e.jsxs("div",{className:"bg-black/50 rounded-lg p-3 border border-gray-700",children:[e.jsx("div",{className:"text-xs text-gray-500 mb-2",children:"Layout:"}),e.jsx("select",{value:t,onChange:n=>a(n.target.value),className:"w-full bg-gray-800 text-white text-sm p-2 rounded border border-gray-600 focus:ring-1 focus:ring-cyan-500 focus:border-transparent",children:Object.entries(h).map(([n,r])=>e.jsx("option",{value:n,children:r.name},n))})]}):e.jsxs("div",{className:"bg-black/50 backdrop-blur-sm rounded-lg p-4 border border-cyan-500/30",children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Cambiar Layout"}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3",children:Object.entries(h).map(([n,r])=>e.jsxs("button",{onClick:()=>a(n),className:`
2
2
  p-4 rounded-lg border transition-all text-left
3
- ${n===a?"border-cyan-500 bg-cyan-500/10 text-cyan-400":"border-gray-700 bg-black/30 text-gray-300 hover:border-gray-600"}
4
- `,children:[e.jsx("div",{className:"font-semibold mb-1",children:r.name}),e.jsx("div",{className:"text-xs opacity-75",children:r.description})]},a))}),e.jsxs("div",{className:"mt-4 p-3 bg-gray-900/50 rounded-lg",children:[e.jsx("div",{className:"text-xs text-gray-500 mb-1",children:"Layout Actual:"}),e.jsx("div",{className:"text-sm text-cyan-400 font-medium",children:l.name}),e.jsx("div",{className:"text-xs text-gray-400",children:l.description})]})]})};exports.AVAILABLE_LAYOUTS=me;exports.DEFAULT_BREAKPOINTS=d;exports.DEFAULT_LAYOUT=M;exports.DashboardLayout=_;exports.DefaultLayout=k;exports.Footer=O;exports.Header=ye;exports.LAYOUT_CONFIG=p;exports.LayoutSwitcher=je;exports.MainLayout=ge;exports.MinimalLayout=z;exports.Navigation=$;exports.NavigationProvider=be;exports.ResponsiveLayoutProvider=pe;exports.ResponsiveProvider=P;exports.Sidebar=D;exports.SidebarLayout=W;exports.SidebarProvider=C;exports.getBreakpointIndex=x;exports.getBreakpointValue=de;exports.getCurrentBreakpoint=R;exports.useLayout=H;exports.useNavigation=I;exports.useResponsive=T;exports.useResponsiveLayout=g;exports.useResponsiveLayoutContext=B;exports.useSidebar=S;
3
+ ${t===n?"border-cyan-500 bg-cyan-500/10 text-cyan-400":"border-gray-700 bg-black/30 text-gray-300 hover:border-gray-600"}
4
+ `,children:[e.jsx("div",{className:"font-semibold mb-1",children:r.name}),e.jsx("div",{className:"text-xs opacity-75",children:r.description})]},n))}),e.jsxs("div",{className:"mt-4 p-3 bg-gray-900/50 rounded-lg",children:[e.jsx("div",{className:"text-xs text-gray-500 mb-1",children:"Layout Actual:"}),e.jsx("div",{className:"text-sm text-cyan-400 font-medium",children:l.name}),e.jsx("div",{className:"text-xs text-gray-400",children:l.description})]})]})};exports.AVAILABLE_LAYOUTS=me;exports.DEFAULT_BREAKPOINTS=u;exports.DEFAULT_LAYOUT=N;exports.DashboardLayout=_;exports.DefaultLayout=C;exports.Footer=O;exports.Header=ye;exports.LAYOUT_CONFIG=h;exports.LayoutSwitcher=je;exports.MainLayout=ge;exports.MinimalLayout=z;exports.Navigation=$;exports.NavigationProvider=be;exports.ResponsiveLayoutProvider=pe;exports.ResponsiveProvider=P;exports.Sidebar=D;exports.SidebarLayout=W;exports.SidebarProvider=S;exports.getBreakpointIndex=m;exports.getBreakpointValue=de;exports.getCurrentBreakpoint=R;exports.useLayout=H;exports.useNavigation=I;exports.useResponsive=T;exports.useResponsiveLayout=y;exports.useResponsiveLayoutContext=B;exports.useSidebar=M;
5
5
  //# sourceMappingURL=responsive-system.cjs.map
package/dist/responsive-system.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"responsive-system.cjs","sources":["../src/providers/ResponsiveProvider.tsx","../src/constants/breakpoints.ts","../src/hooks/useResponsive.ts","../src/context/ResponsiveLayoutContext.tsx","../src/context/SidebarContext.tsx","../src/context/NavigationContext.tsx","../src/hooks/useResponsiveLayout.ts","../src/hooks/useLayout.ts","../src/config/layout.ts","../src/providers/ResponsiveLayoutProvider.tsx","../src/layouts/MainLayout.tsx","../src/components/layout/Header.tsx","../src/components/layout/Sidebar.tsx","../src/components/layout/Footer.tsx","../src/components/layout/Navigation.tsx","../src/layouts/DefaultLayout.tsx","../src/layouts/SidebarLayout.tsx","../src/layouts/DashboardLayout.tsx","../src/layouts/MinimalLayout.tsx","../src/components/LayoutSwitcher.tsx"],"sourcesContent":["import React from 'react'\r\nimport type { ResponsiveProviderProps } from '../types/responsive'\r\n\r\n/**\r\n * ResponsiveProvider - Provider simplificado para el sistema responsive\r\n * \r\n * Nota: Con el sistema de auto-scaling mediante plugin de Tailwind,\r\n * este Provider es OPCIONAL y solo se necesita si quieres acceder\r\n * al hook useResponsive() en tus componentes.\r\n */\r\nexport const ResponsiveProvider: React.FC<ResponsiveProviderProps> = ({\r\n children,\r\n debug: _debug = false\r\n}) => {\r\n // El Provider ahora solo envuelve children sin context\r\n // El auto-scaling funciona mediante el plugin de Tailwind\r\n return <>{children}</>\r\n}\r\n","import type { Breakpoint } from '../types/responsive'\r\n\r\n/**\r\n * Default breakpoint values\r\n * Deben coincidir con tailwind.config.js\r\n */\r\nexport const DEFAULT_BREAKPOINTS: Record<Breakpoint, number> = {\r\n xs: 475,\r\n sm: 640,\r\n md: 768,\r\n lg: 1024,\r\n xl: 1280,\r\n '2xl': 1536,\r\n '3xl': 1920,\r\n '4xl': 2560,\r\n '5xl': 3840\r\n}\r\n\r\n/**\r\n * Get current breakpoint based on window width\r\n */\r\nexport const getCurrentBreakpoint = (width: number): Breakpoint => {\r\n if (width >= DEFAULT_BREAKPOINTS['5xl']) return '5xl'\r\n if (width >= DEFAULT_BREAKPOINTS['4xl']) return '4xl'\r\n if (width >= DEFAULT_BREAKPOINTS['3xl']) return '3xl'\r\n if (width >= DEFAULT_BREAKPOINTS['2xl']) return '2xl'\r\n if (width >= DEFAULT_BREAKPOINTS.xl) return 'xl'\r\n if (width >= DEFAULT_BREAKPOINTS.lg) return 'lg'\r\n if (width >= DEFAULT_BREAKPOINTS.md) return 'md'\r\n if (width >= DEFAULT_BREAKPOINTS.sm) return 'sm'\r\n return 'xs'\r\n}\r\n\r\n/**\r\n * Get breakpoint index (for comparisons)\r\n */\r\nexport const getBreakpointIndex = (breakpoint: Breakpoint): number => {\r\n const breakpoints: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl']\r\n return breakpoints.indexOf(breakpoint)\r\n}\r\n\r\n/**\r\n * Get breakpoint value in pixels\r\n */\r\nexport const getBreakpointValue = (breakpoint: Breakpoint): number => {\r\n return DEFAULT_BREAKPOINTS[breakpoint]\r\n}\r\n\r\n","import { useState, useEffect, useCallback, useMemo } from 'react'\r\nimport type { \r\n ResponsiveState, \r\n Breakpoint\r\n} from '../types/responsive'\r\nimport { \r\n getCurrentBreakpoint,\r\n getBreakpointIndex\r\n} from '../constants/breakpoints'\r\n\r\n/**\r\n * Debounce utility\r\n */\r\nfunction debounce<T extends (...args: unknown[]) => void>(\r\n func: T,\r\n wait: number\r\n): (...args: Parameters<T>) => void {\r\n let timeout: ReturnType<typeof setTimeout> | null = null\r\n return (...args: Parameters<T>) => {\r\n if (timeout) clearTimeout(timeout)\r\n timeout = setTimeout(() => func(...args), wait)\r\n }\r\n}\r\n\r\n/**\r\n * Get orientation based on dimensions\r\n */\r\nfunction getOrientation(width: number, height: number): 'landscape' | 'portrait' {\r\n return width >= height ? 'landscape' : 'portrait'\r\n}\r\n\r\n/**\r\n * Hook principal useResponsive\r\n * Provee información sobre el breakpoint actual y helpers para responsive\r\n */\r\nexport const useResponsive = (): ResponsiveState => {\r\n const [dimensions, setDimensions] = useState({\r\n width: typeof window !== 'undefined' ? window.innerWidth : 1024,\r\n height: typeof window !== 'undefined' ? window.innerHeight : 768\r\n })\r\n\r\n // Función para actualizar dimensiones\r\n const updateDimensions = useCallback(() => {\r\n setDimensions({\r\n width: window.innerWidth,\r\n height: window.innerHeight\r\n })\r\n }, [])\r\n\r\n // Debounced update para optimizar performance\r\n const debouncedUpdateDimensions = useMemo(\r\n () => debounce(updateDimensions, 100),\r\n [updateDimensions]\r\n )\r\n\r\n // Effect para escuchar cambios de tamaño\r\n useEffect(() => {\r\n if (typeof window === 'undefined') return\r\n\r\n window.addEventListener('resize', debouncedUpdateDimensions)\r\n \r\n return () => {\r\n window.removeEventListener('resize', debouncedUpdateDimensions)\r\n }\r\n }, [debouncedUpdateDimensions])\r\n\r\n const { width, height } = dimensions\r\n\r\n // Calcular breakpoint actual\r\n const breakpoint = useMemo(() => getCurrentBreakpoint(width), [width])\r\n \r\n // Calcular orientación\r\n const orientation = useMemo(() => getOrientation(width, height), [width, height])\r\n\r\n // Helpers booleanos por breakpoint específico\r\n const isXs = breakpoint === 'xs'\r\n const isSm = breakpoint === 'sm'\r\n const isMd = breakpoint === 'md'\r\n const isLg = breakpoint === 'lg'\r\n const isXl = breakpoint === 'xl'\r\n const is2Xl = breakpoint === '2xl'\r\n const is3Xl = breakpoint === '3xl'\r\n const is4Xl = breakpoint === '4xl'\r\n const is5Xl = breakpoint === '5xl'\r\n\r\n // Helpers booleanos agrupados\r\n const isMobile = isXs || isSm\r\n const isTablet = isMd\r\n const isDesktop = isLg || isXl || is2Xl || is3Xl || is4Xl || is5Xl\r\n const isSmall = isXs || isSm || isMd\r\n const isLarge = isLg || isXl || is2Xl || is3Xl || is4Xl || is5Xl\r\n const isUltraWide = is3Xl || is4Xl || is5Xl\r\n const is4K = is4Xl || is5Xl\r\n const is5K = is5Xl\r\n\r\n // Helpers de orientación\r\n const isPortrait = orientation === 'portrait'\r\n const isLandscape = orientation === 'landscape'\r\n\r\n // Funciones de comparación de breakpoints\r\n const isBreakpointUp = useCallback((bp: Breakpoint): boolean => {\r\n return getBreakpointIndex(breakpoint) >= getBreakpointIndex(bp)\r\n }, [breakpoint])\r\n\r\n const isBreakpointDown = useCallback((bp: Breakpoint): boolean => {\r\n return getBreakpointIndex(breakpoint) <= getBreakpointIndex(bp)\r\n }, [breakpoint])\r\n\r\n const isBreakpointBetween = useCallback((min: Breakpoint, max: Breakpoint): boolean => {\r\n const current = getBreakpointIndex(breakpoint)\r\n return current >= getBreakpointIndex(min) && current <= getBreakpointIndex(max)\r\n }, [breakpoint])\r\n\r\n // Funciones de comparación de ancho\r\n const isWidthUp = useCallback((minWidth: number): boolean => {\r\n return width >= minWidth\r\n }, [width])\r\n\r\n const isWidthDown = useCallback((maxWidth: number): boolean => {\r\n return width <= maxWidth\r\n }, [width])\r\n\r\n const isWidthBetween = useCallback((minWidth: number, maxWidth: number): boolean => {\r\n return width >= minWidth && width <= maxWidth\r\n }, [width])\r\n\r\n // Funciones de comparación de altura\r\n const isHeightUp = useCallback((minHeight: number): boolean => {\r\n return height >= minHeight\r\n }, [height])\r\n\r\n const isHeightDown = useCallback((maxHeight: number): boolean => {\r\n return height <= maxHeight\r\n }, [height])\r\n\r\n const isHeightBetween = useCallback((minHeight: number, maxHeight: number): boolean => {\r\n return height >= minHeight && height <= maxHeight\r\n }, [height])\r\n\r\n // Debug mode\r\n const debug = false\r\n\r\n return {\r\n // Estado básico\r\n breakpoint,\r\n width,\r\n height,\r\n orientation,\r\n \r\n // Helpers booleanos específicos\r\n isXs,\r\n isSm,\r\n isMd,\r\n isLg,\r\n isXl,\r\n is2Xl,\r\n is3Xl,\r\n is4Xl,\r\n is5Xl,\r\n \r\n // Helpers booleanos agrupados\r\n isMobile,\r\n isTablet,\r\n isDesktop,\r\n isSmall,\r\n isLarge,\r\n isUltraWide,\r\n is4K,\r\n is5K,\r\n \r\n // Helpers de orientación\r\n isPortrait,\r\n isLandscape,\r\n \r\n // Funciones de comparación\r\n isBreakpointUp,\r\n isBreakpointDown,\r\n isBreakpointBetween,\r\n isWidthUp,\r\n isWidthDown,\r\n isWidthBetween,\r\n isHeightUp,\r\n isHeightDown,\r\n isHeightBetween,\r\n \r\n // Debug\r\n debug\r\n }\r\n}\r\n","import { createContext, useContext } from 'react'\r\nimport type { ResponsiveState } from '../types/responsive'\r\nimport type { LayoutConfig } from '../config/layout'\r\n\r\nexport interface ResponsiveLayoutState {\r\n // Estado del sistema responsivo\r\n responsive: ResponsiveState\r\n \r\n // Estado del layout\r\n layout: {\r\n current: string\r\n config: LayoutConfig\r\n setLayout: (layout: string) => void\r\n }\r\n \r\n // Utilidades de layout\r\n layoutUtils: {\r\n getContainerClass: () => string\r\n getMainClass: () => string\r\n hasSidebar: () => boolean\r\n hasHeader: () => boolean\r\n hasFooter: () => boolean\r\n hasNavigation: () => boolean\r\n }\r\n}\r\n\r\nconst ResponsiveLayoutContext = createContext<ResponsiveLayoutState | undefined>(undefined)\r\n\r\nexport const useResponsiveLayoutContext = () => {\r\n const context = useContext(ResponsiveLayoutContext)\r\n if (!context) {\r\n throw new Error('useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider')\r\n }\r\n return context\r\n}\r\n\r\nexport { ResponsiveLayoutContext }\r\n","import React, { createContext, useContext, useState } from 'react'\r\n\r\ninterface SidebarContextType {\r\n sidebarOpen: boolean\r\n setSidebarOpen: (open: boolean) => void\r\n}\r\n\r\nconst SidebarContext = createContext<SidebarContextType | undefined>(undefined)\r\n\r\nexport const SidebarProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n const [sidebarOpen, setSidebarOpen] = useState(false)\r\n\r\n return (\r\n <SidebarContext.Provider value={{ sidebarOpen, setSidebarOpen }}>\r\n {children}\r\n </SidebarContext.Provider>\r\n )\r\n}\r\n\r\nexport const useSidebar = () => {\r\n const context = useContext(SidebarContext)\r\n if (!context) {\r\n throw new Error('useSidebar must be used within a SidebarProvider')\r\n }\r\n return context\r\n}\r\n","import React, { createContext, useContext, useState } from 'react'\r\n\r\ninterface NavigationContextType {\r\n currentPage: 'demo' | 'test'\r\n setCurrentPage: (page: 'demo' | 'test') => void\r\n}\r\n\r\nconst NavigationContext = createContext<NavigationContextType>({\r\n currentPage: 'test',\r\n setCurrentPage: () => {}\r\n})\r\n\r\nexport const useNavigation = () => useContext(NavigationContext)\r\n\r\ninterface NavigationProviderProps {\r\n children: React.ReactNode\r\n defaultPage?: 'demo' | 'test'\r\n}\r\n\r\nexport const NavigationProvider: React.FC<NavigationProviderProps> = ({ \r\n children, \r\n defaultPage = 'test' \r\n}) => {\r\n const [currentPage, setCurrentPage] = useState<'demo' | 'test'>(defaultPage)\r\n\r\n return (\r\n <NavigationContext.Provider value={{ currentPage, setCurrentPage }}>\r\n {children}\r\n </NavigationContext.Provider>\r\n )\r\n}\r\n\r\n","import { useResponsiveLayoutContext } from '../context'\r\n\r\nexport const useResponsiveLayout = () => {\r\n const context = useResponsiveLayoutContext()\r\n \r\n return {\r\n // Todo el sistema responsivo original\r\n ...context.responsive,\r\n \r\n // Sistema de layout\r\n layout: {\r\n current: context.layout.current,\r\n config: context.layout.config,\r\n setLayout: context.layout.setLayout,\r\n },\r\n \r\n // Utilidades de layout\r\n layoutUtils: context.layoutUtils,\r\n \r\n // Helpers específicos del layout\r\n isDefaultLayout: () => context.layout.current === 'default',\r\n isSidebarLayout: () => context.layout.current === 'sidebar',\r\n isDashboardLayout: () => context.layout.current === 'dashboard',\r\n isMinimalLayout: () => context.layout.current === 'minimal',\r\n \r\n // Grid helpers que usan el sistema auto-escalable\r\n grid: {\r\n auto: (minWidth = 'md') => `grid-cols-auto-${minWidth}`,\r\n responsive: (breakpoints: Record<string, number>) => {\r\n const classes: string[] = []\r\n Object.entries(breakpoints).forEach(([breakpoint, cols]) => {\r\n if (breakpoint === 'base') {\r\n classes.push(`grid-cols-${cols}`)\r\n } else {\r\n classes.push(`${breakpoint}:grid-cols-${cols}`)\r\n }\r\n })\r\n return classes.join(' ')\r\n },\r\n fixed: (cols: number) => `grid-cols-${cols}`,\r\n },\r\n \r\n // Spacing helpers que escalan automáticamente\r\n spacing: {\r\n container: context.layoutUtils.getContainerClass(),\r\n section: 'mb-6',\r\n card: 'p-6',\r\n gap: 'gap-4',\r\n },\r\n }\r\n}\r\n","import { useResponsiveLayout } from './index'\r\n\r\nexport const useLayout = () => {\r\n const responsiveLayout = useResponsiveLayout()\r\n \r\n return {\r\n // Layout actual\r\n current: responsiveLayout.layout.current,\r\n config: responsiveLayout.layout.config,\r\n setLayout: responsiveLayout.layout.setLayout,\r\n \r\n // Utilidades\r\n ...responsiveLayout.layoutUtils,\r\n \r\n // Helpers específicos\r\n isDefaultLayout: responsiveLayout.isDefaultLayout(),\r\n isSidebarLayout: responsiveLayout.isSidebarLayout(),\r\n isDashboardLayout: responsiveLayout.isDashboardLayout(),\r\n isMinimalLayout: responsiveLayout.isMinimalLayout(),\r\n \r\n // Grid helpers\r\n grid: responsiveLayout.grid,\r\n \r\n // Spacing helpers\r\n spacing: responsiveLayout.spacing,\r\n }\r\n}\r\n","export interface LayoutConfig {\r\n name: string\r\n description: string\r\n components: string[]\r\n spacing: string\r\n responsive: {\r\n mobile: string\r\n tablet: string\r\n desktop: string\r\n }\r\n}\r\n\r\nexport const LAYOUT_CONFIG: Record<string, LayoutConfig> = {\r\n default: {\r\n name: 'Default',\r\n description: 'Navbar arriba, body central, footer abajo',\r\n components: ['Navigation', 'Footer'],\r\n spacing: 'p-4 md:p-6 lg:p-8',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-8'\r\n }\r\n },\r\n sidebar: {\r\n name: 'Sidebar',\r\n description: 'Sidebar izquierda, contenido principal',\r\n components: ['Sidebar'],\r\n spacing: 'p-4 md:p-6',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-6'\r\n }\r\n },\r\n dashboard: {\r\n name: 'Dashboard',\r\n description: 'Header + Sidebar + Main + Footer',\r\n components: ['Header', 'Sidebar', 'Footer'],\r\n spacing: 'p-4 md:p-6 lg:p-8',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-8'\r\n }\r\n },\r\n minimal: {\r\n name: 'Minimal',\r\n description: 'Solo contenido, sin navegación',\r\n components: [],\r\n spacing: 'p-4 md:p-6',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-6'\r\n }\r\n }\r\n}\r\n\r\nexport const DEFAULT_LAYOUT = 'default'\r\nexport const AVAILABLE_LAYOUTS = Object.keys(LAYOUT_CONFIG)\r\n","import React, { useState, useEffect } from 'react'\r\nimport { ResponsiveProvider } from './index'\r\nimport { useResponsive } from '../hooks'\r\nimport { ResponsiveLayoutContext } from '../context'\r\nimport { LAYOUT_CONFIG, DEFAULT_LAYOUT } from '../config/layout'\r\nimport type { ResponsiveState } from '../types/responsive'\r\n\r\ninterface ResponsiveLayoutProviderProps {\r\n children: React.ReactNode\r\n defaultLayout?: string\r\n /**\r\n * Hook responsivo personalizado del proyecto consumidor.\r\n * Si se proporciona, se usará en lugar del hook interno del paquete.\r\n * Debe retornar un objeto compatible con ResponsiveState.\r\n */\r\n useResponsiveHook?: () => ResponsiveState\r\n}\r\n\r\ninterface ResponsiveLayoutProviderInnerProps {\r\n children: React.ReactNode\r\n defaultLayout: string\r\n useResponsiveHook?: () => ResponsiveState\r\n}\r\n\r\nconst ResponsiveLayoutProviderInner: React.FC<ResponsiveLayoutProviderInnerProps> = ({ \r\n children, \r\n defaultLayout,\r\n useResponsiveHook\r\n}) => {\r\n // Usar hook personalizado si se proporciona, sino usar el hook interno\r\n const internalResponsive = useResponsive()\r\n const customResponsive = useResponsiveHook?.()\r\n const responsive = customResponsive || internalResponsive\r\n \r\n const [currentLayout, setCurrentLayout] = useState(() => defaultLayout)\r\n \r\n // Asegurar que el layout se inicialice correctamente con el defaultLayout\r\n useEffect(() => {\r\n setCurrentLayout(defaultLayout)\r\n }, [defaultLayout])\r\n \r\n const layoutConfig = LAYOUT_CONFIG[currentLayout] || LAYOUT_CONFIG[DEFAULT_LAYOUT]\r\n \r\n const layoutUtils = {\r\n getContainerClass: () => {\r\n if (responsive.isMobile) return layoutConfig.responsive.mobile\r\n if (responsive.isTablet) return layoutConfig.responsive.tablet\r\n return layoutConfig.responsive.desktop\r\n },\r\n \r\n getMainClass: () => {\r\n const baseClass = 'min-h-screen bg-black'\r\n if (currentLayout === 'sidebar' || currentLayout === 'dashboard') {\r\n return `${baseClass} flex`\r\n }\r\n return baseClass\r\n },\r\n \r\n hasSidebar: () => currentLayout === 'sidebar' || currentLayout === 'dashboard',\r\n hasHeader: () => currentLayout === 'dashboard',\r\n hasFooter: () => currentLayout === 'default' || currentLayout === 'dashboard',\r\n hasNavigation: () => currentLayout === 'default',\r\n }\r\n \r\n const contextValue = {\r\n responsive,\r\n layout: {\r\n current: currentLayout,\r\n config: layoutConfig,\r\n setLayout: setCurrentLayout,\r\n },\r\n layoutUtils,\r\n }\r\n \r\n return (\r\n <ResponsiveLayoutContext.Provider value={contextValue}>\r\n {children}\r\n </ResponsiveLayoutContext.Provider>\r\n )\r\n}\r\n\r\nexport const ResponsiveLayoutProvider: React.FC<ResponsiveLayoutProviderProps> = ({ \r\n children, \r\n defaultLayout = DEFAULT_LAYOUT,\r\n useResponsiveHook\r\n}) => {\r\n return (\r\n <ResponsiveProvider>\r\n <ResponsiveLayoutProviderInner \r\n defaultLayout={defaultLayout}\r\n useResponsiveHook={useResponsiveHook}\r\n >\r\n {children}\r\n </ResponsiveLayoutProviderInner>\r\n </ResponsiveProvider>\r\n )\r\n}\r\n","import React from 'react'\r\nimport { useResponsiveLayout } from '../hooks'\r\nimport { \r\n DefaultLayout, \r\n SidebarLayout, \r\n DashboardLayout, \r\n MinimalLayout \r\n} from './index'\r\n\r\ninterface MainLayoutProps {\r\n children: React.ReactNode\r\n /**\r\n * Layout específico a usar. Si se proporciona, sobrescribe el layout del contexto.\r\n * Valores posibles: 'default', 'sidebar', 'dashboard', 'minimal'\r\n */\r\n layout?: 'default' | 'sidebar' | 'dashboard' | 'minimal'\r\n}\r\n\r\nconst MainLayout: React.FC<MainLayoutProps> = ({ children, layout: layoutProp }) => {\r\n const { layout } = useResponsiveLayout()\r\n \r\n // Usar el layout del prop si se proporciona, sino usar el del contexto\r\n const currentLayout = layoutProp || layout.current\r\n \r\n // Seleccionar el layout apropiado basado en el estado del contexto o prop\r\n const layouts = {\r\n default: DefaultLayout,\r\n sidebar: SidebarLayout,\r\n dashboard: DashboardLayout,\r\n minimal: MinimalLayout,\r\n }\r\n \r\n const LayoutComponent = layouts[currentLayout as keyof typeof layouts] || DefaultLayout\r\n \r\n return <LayoutComponent>{children}</LayoutComponent>\r\n}\r\n\r\nexport default MainLayout\r\n","import { useResponsiveLayout } from '../../hooks'\r\nimport { useNavigation, useSidebar } from '../../context'\r\n\r\nconst Header = () => {\r\n const { isMobile } = useResponsiveLayout()\r\n const { currentPage, setCurrentPage } = useNavigation()\r\n const { sidebarOpen, setSidebarOpen } = useSidebar()\r\n \r\n const menuItems = [\r\n { id: 'test', label: 'Suite de Test' },\r\n { id: 'demo', label: 'Demo' },\r\n ]\r\n \r\n return (\r\n <div className=\"sticky top-0 z-50\">\r\n <header className=\"bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative\">\r\n <div className=\"w-full\">\r\n <div className=\"px-4 py-4\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center space-x-2\">\r\n {/* Hamburger button para móvil - A LA IZQUIERDA */}\r\n {isMobile && (\r\n <button\r\n onClick={() => setSidebarOpen(true)}\r\n className=\"p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors\"\r\n >\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n )}\r\n \r\n <div className=\"flex items-center space-x-2\">\r\n <div className=\"w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse\"></div>\r\n <h3 className=\"text-base font-black text-white tracking-tight\">\r\n Sistema Responsivo\r\n </h3>\r\n </div>\r\n <div className=\"px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest\">\r\n DASHBOARD\r\n </div>\r\n </div>\r\n \r\n <div className=\"flex items-center space-x-2\">\r\n {/* Botones visibles solo en desktop */}\r\n {!isMobile && menuItems.map((page) => (\r\n <button\r\n key={page.id}\r\n onClick={() => setCurrentPage(page.id as 'demo' | 'test')}\r\n className={`px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${\r\n currentPage === page.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50' \r\n : 'bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600'\r\n }`}\r\n >\r\n {page.label}\r\n </button>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </header>\r\n\r\n {/* Sidebar móvil desplegable */}\r\n {isMobile && sidebarOpen && (\r\n <div className=\"fixed inset-0 z-40 bg-black/50\" onClick={() => setSidebarOpen(false)}>\r\n <div className=\"fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20\">\r\n <div className=\"p-6 flex flex-col h-full pt-20\">\r\n {/* Logo */}\r\n <div className=\"flex items-center space-x-3 mb-8\">\r\n <div className=\"w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">RS</span>\r\n </div>\r\n <span className=\"text-white font-bold text-lg\">Sistema Responsivo</span>\r\n </div>\r\n \r\n {/* Navigation */}\r\n <nav className=\"space-y-2\">\r\n {menuItems.map((item) => (\r\n <button\r\n key={item.id}\r\n onClick={() => {\r\n setCurrentPage(item.id as 'demo' | 'test')\r\n setSidebarOpen(false)\r\n }}\r\n className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${\r\n currentPage === item.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' \r\n : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'\r\n }`}\r\n >\r\n <span className=\"font-medium\">{item.label}</span>\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n )\r\n}\r\n\r\nexport default Header\r\n","import { useResponsiveLayout } from '../../hooks'\r\nimport { useSidebar } from '../../context'\r\n\r\nconst Sidebar = () => {\r\n const { isMobile, isTablet } = useResponsiveLayout()\r\n const { sidebarOpen, setSidebarOpen } = useSidebar()\r\n \r\n const menuItems = [\r\n { id: 'home', label: 'Inicio' },\r\n { id: 'about', label: 'Acerca' },\r\n { id: 'contact', label: 'Contacto' },\r\n ]\r\n \r\n return (\r\n <>\r\n {isMobile && (\r\n <button\r\n onClick={() => setSidebarOpen(true)}\r\n className=\"fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800 bg-gray-900 border border-gray-700\"\r\n >\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n )}\r\n\r\n <aside className={`bg-gray-900 border-r border-gray-800 ${isMobile ? 'hidden' : 'w-64 flex-shrink-0'} ${isTablet ? 'w-56' : 'w-64'}`}>\r\n <div className=\"p-6 flex flex-col h-full\">\r\n <div className=\"flex items-center space-x-3 mb-8\">\r\n <div className=\"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">LO</span>\r\n </div>\r\n <span className=\"text-white font-bold text-lg\">Tu Aplicación</span>\r\n </div>\r\n \r\n <nav className=\"space-y-2\">\r\n {menuItems.map((item) => (\r\n <button\r\n key={item.id}\r\n className=\"w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800\"\r\n >\r\n <span className=\"font-medium\">{item.label}</span>\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </aside>\r\n\r\n {isMobile && sidebarOpen && (\r\n <div className=\"fixed inset-0 z-40 bg-black/50\" onClick={() => setSidebarOpen(false)}>\r\n <div className=\"fixed top-0 left-0 w-64 h-full bg-gray-900 border-r border-gray-800\">\r\n <div className=\"p-6 flex flex-col h-full pt-20\">\r\n <div className=\"flex items-center space-x-3 mb-8\">\r\n <div className=\"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">LO</span>\r\n </div>\r\n <span className=\"text-white font-bold text-lg\">Tu Aplicación</span>\r\n </div>\r\n \r\n <nav className=\"space-y-2\">\r\n {menuItems.map((item) => (\r\n <button\r\n key={item.id}\r\n onClick={() => setSidebarOpen(false)}\r\n className=\"w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800\"\r\n >\r\n <span className=\"font-medium\">{item.label}</span>\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </>\r\n )\r\n}\r\n\r\nexport default Sidebar\r\n","const Footer = () => {\r\n return (\r\n <footer className=\"bg-gray-900 border-t border-gray-800\">\r\n <div className=\"px-4 py-6\">\r\n <div className=\"max-w-7xl mx-auto text-center\">\r\n <p className=\"text-gray-400 text-sm\">\r\n © {new Date().getFullYear()} Tu Aplicación. Todos los derechos reservados.\r\n </p>\r\n </div>\r\n </div>\r\n </footer>\r\n )\r\n}\r\n\r\nexport default Footer\r\n","import { useResponsiveLayout } from '../../hooks'\r\n\r\nconst Navigation = () => {\r\n const { isMobile } = useResponsiveLayout()\r\n \r\n return (\r\n <nav className=\"sticky top-0 z-50 bg-gray-900 border-b border-gray-800\">\r\n <div className=\"px-4 py-4\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center space-x-3\">\r\n <div className=\"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">LO</span>\r\n </div>\r\n <h1 className=\"text-white font-semibold text-lg\">Tu Aplicación</h1>\r\n </div>\r\n \r\n {isMobile && (\r\n <button className=\"p-2 text-gray-400 hover:text-white\">\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n )}\r\n </div>\r\n </div>\r\n </nav>\r\n )\r\n}\r\n\r\nexport default Navigation\r\n","import React from 'react'\r\nimport { Navigation, Footer } from '../components/layout'\r\n\r\ninterface DefaultLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {\r\n return (\r\n <div className=\"min-h-screen bg-gray-50 flex flex-col\">\r\n {/* Navigation fijo arriba */}\r\n <Navigation />\r\n \r\n {/* Main content */}\r\n <main className=\"flex-1\">\r\n {children}\r\n </main>\r\n \r\n {/* Footer fijo abajo */}\r\n <Footer />\r\n </div>\r\n )\r\n}\r\n\r\nexport default DefaultLayout\r\n","import React from 'react'\r\nimport { Sidebar } from '../components/layout'\r\nimport { SidebarProvider } from '../context'\r\n\r\ninterface SidebarLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst SidebarLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n return (\r\n <div className=\"min-h-screen bg-gray-50 flex\">\r\n {/* Sidebar */}\r\n <Sidebar />\r\n \r\n {/* Main content */}\r\n <main className=\"flex-1 overflow-auto\">\r\n {children}\r\n </main>\r\n </div>\r\n )\r\n}\r\n\r\nconst SidebarLayout: React.FC<SidebarLayoutProps> = ({ children }) => {\r\n return (\r\n <SidebarProvider>\r\n <SidebarLayoutContent>{children}</SidebarLayoutContent>\r\n </SidebarProvider>\r\n )\r\n}\r\n\r\nexport default SidebarLayout\r\n","import React from 'react'\r\nimport { Sidebar, Footer } from '../components/layout'\r\nimport { SidebarProvider } from '../context'\r\n\r\ninterface DashboardLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst DashboardLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n return (\r\n <div className=\"min-h-screen bg-gray-50 flex flex-col\">\r\n {/* Content area con sidebar */}\r\n <div className=\"flex flex-1\">\r\n {/* Sidebar */}\r\n <Sidebar />\r\n \r\n {/* Main content */}\r\n <main className=\"flex-1 overflow-auto flex flex-col\">\r\n <div className=\"flex-1\">\r\n {children}\r\n </div>\r\n \r\n {/* Footer */}\r\n <Footer />\r\n </main>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\nconst DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {\r\n return (\r\n <SidebarProvider>\r\n <DashboardLayoutContent>{children}</DashboardLayoutContent>\r\n </SidebarProvider>\r\n )\r\n}\r\n\r\nexport default DashboardLayout\r\n","import React from 'react'\r\n\r\ninterface MinimalLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst MinimalLayout: React.FC<MinimalLayoutProps> = ({ children }) => {\r\n return (\r\n <div className=\"min-h-screen bg-gray-50\">\r\n <main>\r\n {children}\r\n </main>\r\n </div>\r\n )\r\n}\r\n\r\nexport default MinimalLayout\r\n","import { useLayout } from '../hooks'\r\nimport { LAYOUT_CONFIG } from '../config/layout'\r\n\r\ninterface LayoutSwitcherProps {\r\n compact?: boolean\r\n}\r\n\r\nconst LayoutSwitcher = ({ compact = false }: LayoutSwitcherProps) => {\r\n const { current, setLayout, config } = useLayout()\r\n \r\n if (compact) {\r\n return (\r\n <div className=\"bg-black/50 rounded-lg p-3 border border-gray-700\">\r\n <div className=\"text-xs text-gray-500 mb-2\">Layout:</div>\r\n <select\r\n value={current}\r\n onChange={(e) => setLayout(e.target.value)}\r\n className=\"w-full bg-gray-800 text-white text-sm p-2 rounded border border-gray-600 focus:ring-1 focus:ring-cyan-500 focus:border-transparent\"\r\n >\r\n {Object.entries(LAYOUT_CONFIG).map(([key, layoutConfig]) => (\r\n <option key={key} value={key}>\r\n {layoutConfig.name}\r\n </option>\r\n ))}\r\n </select>\r\n </div>\r\n )\r\n }\r\n \r\n return (\r\n <div className=\"bg-black/50 backdrop-blur-sm rounded-lg p-4 border border-cyan-500/30\">\r\n <h3 className=\"text-white font-semibold mb-3\">Cambiar Layout</h3>\r\n \r\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3\">\r\n {Object.entries(LAYOUT_CONFIG).map(([key, layoutConfig]) => (\r\n <button\r\n key={key}\r\n onClick={() => setLayout(key)}\r\n className={`\r\n p-4 rounded-lg border transition-all text-left\r\n ${current === key \r\n ? 'border-cyan-500 bg-cyan-500/10 text-cyan-400' \r\n : 'border-gray-700 bg-black/30 text-gray-300 hover:border-gray-600'\r\n }\r\n `}\r\n >\r\n <div className=\"font-semibold mb-1\">{layoutConfig.name}</div>\r\n <div className=\"text-xs opacity-75\">{layoutConfig.description}</div>\r\n </button>\r\n ))}\r\n </div>\r\n \r\n <div className=\"mt-4 p-3 bg-gray-900/50 rounded-lg\">\r\n <div className=\"text-xs text-gray-500 mb-1\">Layout Actual:</div>\r\n <div className=\"text-sm text-cyan-400 font-medium\">{config.name}</div>\r\n <div className=\"text-xs text-gray-400\">{config.description}</div>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\nexport default LayoutSwitcher\r\n"],"names":["ResponsiveProvider","children","_debug","DEFAULT_BREAKPOINTS","getCurrentBreakpoint","width","getBreakpointIndex","breakpoint","getBreakpointValue","debounce","func","wait","timeout","args","getOrientation","height","useResponsive","dimensions","setDimensions","useState","updateDimensions","useCallback","debouncedUpdateDimensions","useMemo","useEffect","orientation","isXs","isSm","isMd","isLg","isXl","is2Xl","is3Xl","is4Xl","is5Xl","isMobile","isTablet","isDesktop","isSmall","isLarge","isUltraWide","is4K","is5K","isPortrait","isLandscape","isBreakpointUp","bp","isBreakpointDown","isBreakpointBetween","min","max","current","isWidthUp","minWidth","isWidthDown","maxWidth","isWidthBetween","isHeightUp","minHeight","isHeightDown","maxHeight","isHeightBetween","ResponsiveLayoutContext","createContext","useResponsiveLayoutContext","context","useContext","SidebarContext","SidebarProvider","sidebarOpen","setSidebarOpen","jsx","useSidebar","NavigationContext","useNavigation","NavigationProvider","defaultPage","currentPage","setCurrentPage","useResponsiveLayout","breakpoints","classes","cols","useLayout","responsiveLayout","LAYOUT_CONFIG","DEFAULT_LAYOUT","AVAILABLE_LAYOUTS","ResponsiveLayoutProviderInner","defaultLayout","useResponsiveHook","internalResponsive","responsive","currentLayout","setCurrentLayout","layoutConfig","contextValue","baseClass","ResponsiveLayoutProvider","MainLayout","layoutProp","layout","LayoutComponent","DefaultLayout","SidebarLayout","DashboardLayout","MinimalLayout","Header","menuItems","jsxs","page","item","Sidebar","Fragment","Footer","Navigation","SidebarLayoutContent","DashboardLayoutContent","LayoutSwitcher","compact","setLayout","config","e","key"],"mappings":"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"}
1
+ {"version":3,"file":"responsive-system.cjs","sources":["../src/providers/ResponsiveProvider.tsx","../src/constants/breakpoints.ts","../src/hooks/useResponsive.ts","../src/context/ResponsiveLayoutContext.tsx","../src/context/SidebarContext.tsx","../src/context/NavigationContext.tsx","../src/hooks/useResponsiveLayout.ts","../src/hooks/useLayout.ts","../src/config/layout.ts","../src/providers/ResponsiveLayoutProvider.tsx","../src/layouts/MainLayout.tsx","../src/components/layout/Header.tsx","../src/components/layout/Sidebar.tsx","../src/components/layout/Footer.tsx","../src/components/layout/Navigation.tsx","../src/layouts/DefaultLayout.tsx","../src/layouts/SidebarLayout.tsx","../src/layouts/DashboardLayout.tsx","../src/layouts/MinimalLayout.tsx","../src/components/LayoutSwitcher.tsx"],"sourcesContent":["import React from 'react'\r\nimport type { ResponsiveProviderProps } from '../types/responsive'\r\n\r\n/**\r\n * ResponsiveProvider - Provider simplificado para el sistema responsive\r\n * \r\n * Nota: Con el sistema de auto-scaling mediante plugin de Tailwind,\r\n * este Provider es OPCIONAL y solo se necesita si quieres acceder\r\n * al hook useResponsive() en tus componentes.\r\n */\r\nexport const ResponsiveProvider: React.FC<ResponsiveProviderProps> = ({\r\n children,\r\n debug: _debug = false\r\n}) => {\r\n // El Provider ahora solo envuelve children sin context\r\n // El auto-scaling funciona mediante el plugin de Tailwind\r\n return <>{children}</>\r\n}\r\n","import type { Breakpoint } from '../types/responsive'\r\n\r\n/**\r\n * Default breakpoint values\r\n * Deben coincidir con tailwind.config.js\r\n */\r\nexport const DEFAULT_BREAKPOINTS: Record<Breakpoint, number> = {\r\n xs: 475,\r\n sm: 640,\r\n md: 768,\r\n lg: 1024,\r\n xl: 1280,\r\n '2xl': 1536,\r\n '3xl': 1920,\r\n '4xl': 2560,\r\n '5xl': 3840\r\n}\r\n\r\n/**\r\n * Get current breakpoint based on window width\r\n */\r\nexport const getCurrentBreakpoint = (width: number): Breakpoint => {\r\n if (width >= DEFAULT_BREAKPOINTS['5xl']) return '5xl'\r\n if (width >= DEFAULT_BREAKPOINTS['4xl']) return '4xl'\r\n if (width >= DEFAULT_BREAKPOINTS['3xl']) return '3xl'\r\n if (width >= DEFAULT_BREAKPOINTS['2xl']) return '2xl'\r\n if (width >= DEFAULT_BREAKPOINTS.xl) return 'xl'\r\n if (width >= DEFAULT_BREAKPOINTS.lg) return 'lg'\r\n if (width >= DEFAULT_BREAKPOINTS.md) return 'md'\r\n if (width >= DEFAULT_BREAKPOINTS.sm) return 'sm'\r\n return 'xs'\r\n}\r\n\r\n/**\r\n * Get breakpoint index (for comparisons)\r\n */\r\nexport const getBreakpointIndex = (breakpoint: Breakpoint): number => {\r\n const breakpoints: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl']\r\n return breakpoints.indexOf(breakpoint)\r\n}\r\n\r\n/**\r\n * Get breakpoint value in pixels\r\n */\r\nexport const getBreakpointValue = (breakpoint: Breakpoint): number => {\r\n return DEFAULT_BREAKPOINTS[breakpoint]\r\n}\r\n\r\n","import { useState, useEffect, useCallback, useMemo } from 'react'\r\nimport type { \r\n ResponsiveState, \r\n Breakpoint\r\n} from '../types/responsive'\r\nimport { \r\n getCurrentBreakpoint,\r\n getBreakpointIndex\r\n} from '../constants/breakpoints'\r\n\r\n/**\r\n * Debounce utility\r\n */\r\nfunction debounce<T extends (...args: unknown[]) => void>(\r\n func: T,\r\n wait: number\r\n): (...args: Parameters<T>) => void {\r\n let timeout: ReturnType<typeof setTimeout> | null = null\r\n return (...args: Parameters<T>) => {\r\n if (timeout) clearTimeout(timeout)\r\n timeout = setTimeout(() => func(...args), wait)\r\n }\r\n}\r\n\r\n/**\r\n * Get orientation based on dimensions\r\n */\r\nfunction getOrientation(width: number, height: number): 'landscape' | 'portrait' {\r\n return width >= height ? 'landscape' : 'portrait'\r\n}\r\n\r\n/**\r\n * Hook principal useResponsive\r\n * Provee información sobre el breakpoint actual y helpers para responsive\r\n */\r\nexport const useResponsive = (): ResponsiveState => {\r\n const [dimensions, setDimensions] = useState({\r\n width: typeof window !== 'undefined' ? window.innerWidth : 1024,\r\n height: typeof window !== 'undefined' ? window.innerHeight : 768\r\n })\r\n\r\n // Función para actualizar dimensiones\r\n const updateDimensions = useCallback(() => {\r\n setDimensions({\r\n width: window.innerWidth,\r\n height: window.innerHeight\r\n })\r\n }, [])\r\n\r\n // Debounced update para optimizar performance\r\n const debouncedUpdateDimensions = useMemo(\r\n () => debounce(updateDimensions, 100),\r\n [updateDimensions]\r\n )\r\n\r\n // Effect para escuchar cambios de tamaño\r\n useEffect(() => {\r\n if (typeof window === 'undefined') return\r\n\r\n window.addEventListener('resize', debouncedUpdateDimensions)\r\n \r\n return () => {\r\n window.removeEventListener('resize', debouncedUpdateDimensions)\r\n }\r\n }, [debouncedUpdateDimensions])\r\n\r\n const { width, height } = dimensions\r\n\r\n // Calcular breakpoint actual\r\n const breakpoint = useMemo(() => getCurrentBreakpoint(width), [width])\r\n \r\n // Calcular orientación\r\n const orientation = useMemo(() => getOrientation(width, height), [width, height])\r\n\r\n // Helpers booleanos por breakpoint específico\r\n const isXs = breakpoint === 'xs'\r\n const isSm = breakpoint === 'sm'\r\n const isMd = breakpoint === 'md'\r\n const isLg = breakpoint === 'lg'\r\n const isXl = breakpoint === 'xl'\r\n const is2Xl = breakpoint === '2xl'\r\n const is3Xl = breakpoint === '3xl'\r\n const is4Xl = breakpoint === '4xl'\r\n const is5Xl = breakpoint === '5xl'\r\n\r\n // Helpers booleanos agrupados\r\n const isMobile = isXs || isSm\r\n const isTablet = isMd\r\n const isDesktop = isLg || isXl || is2Xl || is3Xl || is4Xl || is5Xl\r\n const isSmall = isXs || isSm || isMd\r\n const isLarge = isLg || isXl || is2Xl || is3Xl || is4Xl || is5Xl\r\n const isUltraWide = is3Xl || is4Xl || is5Xl\r\n const is4K = is4Xl || is5Xl\r\n const is5K = is5Xl\r\n\r\n // Helpers de orientación\r\n const isPortrait = orientation === 'portrait'\r\n const isLandscape = orientation === 'landscape'\r\n\r\n // Funciones de comparación de breakpoints\r\n const isBreakpointUp = useCallback((bp: Breakpoint): boolean => {\r\n return getBreakpointIndex(breakpoint) >= getBreakpointIndex(bp)\r\n }, [breakpoint])\r\n\r\n const isBreakpointDown = useCallback((bp: Breakpoint): boolean => {\r\n return getBreakpointIndex(breakpoint) <= getBreakpointIndex(bp)\r\n }, [breakpoint])\r\n\r\n const isBreakpointBetween = useCallback((min: Breakpoint, max: Breakpoint): boolean => {\r\n const current = getBreakpointIndex(breakpoint)\r\n return current >= getBreakpointIndex(min) && current <= getBreakpointIndex(max)\r\n }, [breakpoint])\r\n\r\n // Funciones de comparación de ancho\r\n const isWidthUp = useCallback((minWidth: number): boolean => {\r\n return width >= minWidth\r\n }, [width])\r\n\r\n const isWidthDown = useCallback((maxWidth: number): boolean => {\r\n return width <= maxWidth\r\n }, [width])\r\n\r\n const isWidthBetween = useCallback((minWidth: number, maxWidth: number): boolean => {\r\n return width >= minWidth && width <= maxWidth\r\n }, [width])\r\n\r\n // Funciones de comparación de altura\r\n const isHeightUp = useCallback((minHeight: number): boolean => {\r\n return height >= minHeight\r\n }, [height])\r\n\r\n const isHeightDown = useCallback((maxHeight: number): boolean => {\r\n return height <= maxHeight\r\n }, [height])\r\n\r\n const isHeightBetween = useCallback((minHeight: number, maxHeight: number): boolean => {\r\n return height >= minHeight && height <= maxHeight\r\n }, [height])\r\n\r\n // Debug mode\r\n const debug = false\r\n\r\n return {\r\n // Estado básico\r\n breakpoint,\r\n width,\r\n height,\r\n orientation,\r\n \r\n // Helpers booleanos específicos\r\n isXs,\r\n isSm,\r\n isMd,\r\n isLg,\r\n isXl,\r\n is2Xl,\r\n is3Xl,\r\n is4Xl,\r\n is5Xl,\r\n \r\n // Helpers booleanos agrupados\r\n isMobile,\r\n isTablet,\r\n isDesktop,\r\n isSmall,\r\n isLarge,\r\n isUltraWide,\r\n is4K,\r\n is5K,\r\n \r\n // Helpers de orientación\r\n isPortrait,\r\n isLandscape,\r\n \r\n // Funciones de comparación\r\n isBreakpointUp,\r\n isBreakpointDown,\r\n isBreakpointBetween,\r\n isWidthUp,\r\n isWidthDown,\r\n isWidthBetween,\r\n isHeightUp,\r\n isHeightDown,\r\n isHeightBetween,\r\n \r\n // Debug\r\n debug\r\n }\r\n}\r\n","import { createContext, useContext } from 'react'\r\nimport type { ResponsiveState } from '../types/responsive'\r\nimport type { LayoutConfig } from '../config/layout'\r\n\r\nexport interface ResponsiveLayoutState {\r\n // Estado del sistema responsivo\r\n responsive: ResponsiveState\r\n \r\n // Estado del layout\r\n layout: {\r\n current: string\r\n config: LayoutConfig\r\n setLayout: (layout: string) => void\r\n }\r\n \r\n // Utilidades de layout\r\n layoutUtils: {\r\n getContainerClass: () => string\r\n getMainClass: () => string\r\n hasSidebar: () => boolean\r\n hasHeader: () => boolean\r\n hasFooter: () => boolean\r\n hasNavigation: () => boolean\r\n }\r\n}\r\n\r\nconst ResponsiveLayoutContext = createContext<ResponsiveLayoutState | undefined>(undefined)\r\n\r\nexport const useResponsiveLayoutContext = () => {\r\n const context = useContext(ResponsiveLayoutContext)\r\n if (!context) {\r\n throw new Error('useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider')\r\n }\r\n return context\r\n}\r\n\r\nexport { ResponsiveLayoutContext }\r\n","import React, { createContext, useContext, useState } from 'react'\r\n\r\ninterface SidebarContextType {\r\n sidebarOpen: boolean\r\n setSidebarOpen: (open: boolean) => void\r\n}\r\n\r\nconst SidebarContext = createContext<SidebarContextType | undefined>(undefined)\r\n\r\nexport const SidebarProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n const [sidebarOpen, setSidebarOpen] = useState(false)\r\n\r\n return (\r\n <SidebarContext.Provider value={{ sidebarOpen, setSidebarOpen }}>\r\n {children}\r\n </SidebarContext.Provider>\r\n )\r\n}\r\n\r\nexport const useSidebar = () => {\r\n const context = useContext(SidebarContext)\r\n if (!context) {\r\n throw new Error('useSidebar must be used within a SidebarProvider')\r\n }\r\n return context\r\n}\r\n","import React, { createContext, useContext, useState } from 'react'\r\n\r\ninterface NavigationContextType {\r\n currentPage: 'demo' | 'test'\r\n setCurrentPage: (page: 'demo' | 'test') => void\r\n}\r\n\r\nconst NavigationContext = createContext<NavigationContextType>({\r\n currentPage: 'test',\r\n setCurrentPage: () => {}\r\n})\r\n\r\nexport const useNavigation = () => useContext(NavigationContext)\r\n\r\ninterface NavigationProviderProps {\r\n children: React.ReactNode\r\n defaultPage?: 'demo' | 'test'\r\n}\r\n\r\nexport const NavigationProvider: React.FC<NavigationProviderProps> = ({ \r\n children, \r\n defaultPage = 'test' \r\n}) => {\r\n const [currentPage, setCurrentPage] = useState<'demo' | 'test'>(defaultPage)\r\n\r\n return (\r\n <NavigationContext.Provider value={{ currentPage, setCurrentPage }}>\r\n {children}\r\n </NavigationContext.Provider>\r\n )\r\n}\r\n\r\n","import { useResponsiveLayoutContext } from '../context'\r\n\r\nexport const useResponsiveLayout = () => {\r\n const context = useResponsiveLayoutContext()\r\n \r\n return {\r\n // Todo el sistema responsivo original\r\n ...context.responsive,\r\n \r\n // Sistema de layout\r\n layout: {\r\n current: context.layout.current,\r\n config: context.layout.config,\r\n setLayout: context.layout.setLayout,\r\n },\r\n \r\n // Utilidades de layout\r\n layoutUtils: context.layoutUtils,\r\n \r\n // Helpers específicos del layout\r\n isDefaultLayout: () => context.layout.current === 'default',\r\n isSidebarLayout: () => context.layout.current === 'sidebar',\r\n isDashboardLayout: () => context.layout.current === 'dashboard',\r\n isMinimalLayout: () => context.layout.current === 'minimal',\r\n \r\n // Grid helpers que usan el sistema auto-escalable\r\n grid: {\r\n auto: (minWidth = 'md') => `grid-cols-auto-${minWidth}`,\r\n responsive: (breakpoints: Record<string, number>) => {\r\n const classes: string[] = []\r\n Object.entries(breakpoints).forEach(([breakpoint, cols]) => {\r\n if (breakpoint === 'base') {\r\n classes.push(`grid-cols-${cols}`)\r\n } else {\r\n classes.push(`${breakpoint}:grid-cols-${cols}`)\r\n }\r\n })\r\n return classes.join(' ')\r\n },\r\n fixed: (cols: number) => `grid-cols-${cols}`,\r\n },\r\n \r\n // Spacing helpers que escalan automáticamente\r\n spacing: {\r\n container: context.layoutUtils.getContainerClass(),\r\n section: 'mb-6',\r\n card: 'p-6',\r\n gap: 'gap-4',\r\n },\r\n }\r\n}\r\n","import { useResponsiveLayout } from './index'\r\n\r\nexport const useLayout = () => {\r\n const responsiveLayout = useResponsiveLayout()\r\n \r\n return {\r\n // Layout actual\r\n current: responsiveLayout.layout.current,\r\n config: responsiveLayout.layout.config,\r\n setLayout: responsiveLayout.layout.setLayout,\r\n \r\n // Utilidades\r\n ...responsiveLayout.layoutUtils,\r\n \r\n // Helpers específicos\r\n isDefaultLayout: responsiveLayout.isDefaultLayout(),\r\n isSidebarLayout: responsiveLayout.isSidebarLayout(),\r\n isDashboardLayout: responsiveLayout.isDashboardLayout(),\r\n isMinimalLayout: responsiveLayout.isMinimalLayout(),\r\n \r\n // Grid helpers\r\n grid: responsiveLayout.grid,\r\n \r\n // Spacing helpers\r\n spacing: responsiveLayout.spacing,\r\n }\r\n}\r\n","export interface LayoutConfig {\r\n name: string\r\n description: string\r\n components: string[]\r\n spacing: string\r\n responsive: {\r\n mobile: string\r\n tablet: string\r\n desktop: string\r\n }\r\n}\r\n\r\nexport const LAYOUT_CONFIG: Record<string, LayoutConfig> = {\r\n default: {\r\n name: 'Default',\r\n description: 'Navbar arriba, body central, footer abajo',\r\n components: ['Navigation', 'Footer'],\r\n spacing: 'p-4 md:p-6 lg:p-8',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-8'\r\n }\r\n },\r\n sidebar: {\r\n name: 'Sidebar',\r\n description: 'Sidebar izquierda, contenido principal',\r\n components: ['Sidebar'],\r\n spacing: 'p-4 md:p-6',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-6'\r\n }\r\n },\r\n dashboard: {\r\n name: 'Dashboard',\r\n description: 'Header + Sidebar + Main + Footer',\r\n components: ['Header', 'Sidebar', 'Footer'],\r\n spacing: 'p-4 md:p-6 lg:p-8',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-8'\r\n }\r\n },\r\n minimal: {\r\n name: 'Minimal',\r\n description: 'Solo contenido, sin navegación',\r\n components: [],\r\n spacing: 'p-4 md:p-6',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-6'\r\n }\r\n }\r\n}\r\n\r\nexport const DEFAULT_LAYOUT = 'default'\r\nexport const AVAILABLE_LAYOUTS = Object.keys(LAYOUT_CONFIG)\r\n","import React, { useState, useEffect } from 'react'\r\nimport { ResponsiveProvider } from './index'\r\nimport { useResponsive } from '../hooks'\r\nimport { ResponsiveLayoutContext } from '../context'\r\nimport { LAYOUT_CONFIG, DEFAULT_LAYOUT } from '../config/layout'\r\nimport type { ResponsiveState } from '../types/responsive'\r\n\r\ninterface ResponsiveLayoutProviderProps {\r\n children: React.ReactNode\r\n defaultLayout?: string\r\n /**\r\n * Hook responsivo personalizado del proyecto consumidor.\r\n * Si se proporciona, se usará en lugar del hook interno del paquete.\r\n * Debe retornar un objeto compatible con ResponsiveState.\r\n */\r\n useResponsiveHook?: () => ResponsiveState\r\n}\r\n\r\ninterface ResponsiveLayoutProviderInnerProps {\r\n children: React.ReactNode\r\n defaultLayout: string\r\n useResponsiveHook?: () => ResponsiveState\r\n}\r\n\r\nconst ResponsiveLayoutProviderInner: React.FC<ResponsiveLayoutProviderInnerProps> = ({ \r\n children, \r\n defaultLayout,\r\n useResponsiveHook\r\n}) => {\r\n // Usar hook personalizado si se proporciona, sino usar el hook interno\r\n const internalResponsive = useResponsive()\r\n const customResponsive = useResponsiveHook?.()\r\n const responsive = customResponsive || internalResponsive\r\n \r\n // Inicializar el estado con el defaultLayout, asegurando que sea válido\r\n const validLayout = (defaultLayout && LAYOUT_CONFIG[defaultLayout]) ? defaultLayout : DEFAULT_LAYOUT\r\n const [currentLayout, setCurrentLayout] = useState(validLayout)\r\n \r\n // Sincronizar si el defaultLayout cambia (aunque no debería en la mayoría de casos)\r\n useEffect(() => {\r\n const newValidLayout = (defaultLayout && LAYOUT_CONFIG[defaultLayout]) ? defaultLayout : DEFAULT_LAYOUT\r\n if (newValidLayout !== currentLayout) {\r\n setCurrentLayout(newValidLayout)\r\n }\r\n }, [defaultLayout, currentLayout])\r\n \r\n const layoutConfig = LAYOUT_CONFIG[currentLayout] || LAYOUT_CONFIG[DEFAULT_LAYOUT]\r\n \r\n const layoutUtils = {\r\n getContainerClass: () => {\r\n if (responsive.isMobile) return layoutConfig.responsive.mobile\r\n if (responsive.isTablet) return layoutConfig.responsive.tablet\r\n return layoutConfig.responsive.desktop\r\n },\r\n \r\n getMainClass: () => {\r\n const baseClass = 'min-h-screen bg-black'\r\n if (currentLayout === 'sidebar' || currentLayout === 'dashboard') {\r\n return `${baseClass} flex`\r\n }\r\n return baseClass\r\n },\r\n \r\n hasSidebar: () => currentLayout === 'sidebar' || currentLayout === 'dashboard',\r\n hasHeader: () => currentLayout === 'dashboard',\r\n hasFooter: () => currentLayout === 'default' || currentLayout === 'dashboard',\r\n hasNavigation: () => currentLayout === 'default',\r\n }\r\n \r\n const contextValue = {\r\n responsive,\r\n layout: {\r\n current: currentLayout,\r\n config: layoutConfig,\r\n setLayout: setCurrentLayout,\r\n },\r\n layoutUtils,\r\n }\r\n \r\n return (\r\n <ResponsiveLayoutContext.Provider value={contextValue}>\r\n {children}\r\n </ResponsiveLayoutContext.Provider>\r\n )\r\n}\r\n\r\nexport const ResponsiveLayoutProvider: React.FC<ResponsiveLayoutProviderProps> = ({ \r\n children, \r\n defaultLayout = DEFAULT_LAYOUT,\r\n useResponsiveHook\r\n}) => {\r\n return (\r\n <ResponsiveProvider>\r\n <ResponsiveLayoutProviderInner \r\n defaultLayout={defaultLayout}\r\n useResponsiveHook={useResponsiveHook}\r\n >\r\n {children}\r\n </ResponsiveLayoutProviderInner>\r\n </ResponsiveProvider>\r\n )\r\n}\r\n","import React from 'react'\r\nimport { useResponsiveLayout } from '../hooks'\r\nimport { \r\n DefaultLayout, \r\n SidebarLayout, \r\n DashboardLayout, \r\n MinimalLayout \r\n} from './index'\r\n\r\ninterface MainLayoutProps {\r\n children: React.ReactNode\r\n /**\r\n * Layout específico a usar. Si se proporciona, sobrescribe el layout del contexto.\r\n * Valores posibles: 'default', 'sidebar', 'dashboard', 'minimal'\r\n */\r\n layout?: 'default' | 'sidebar' | 'dashboard' | 'minimal'\r\n}\r\n\r\nconst MainLayout: React.FC<MainLayoutProps> = ({ children, layout: layoutProp }) => {\r\n const { layout } = useResponsiveLayout()\r\n \r\n // Usar el layout del prop si se proporciona, sino usar el del contexto\r\n const currentLayout = layoutProp || layout.current\r\n \r\n // Seleccionar el layout apropiado basado en el estado del contexto o prop\r\n const layouts = {\r\n default: DefaultLayout,\r\n sidebar: SidebarLayout,\r\n dashboard: DashboardLayout,\r\n minimal: MinimalLayout,\r\n }\r\n \r\n const LayoutComponent = layouts[currentLayout as keyof typeof layouts] || DefaultLayout\r\n \r\n return <LayoutComponent>{children}</LayoutComponent>\r\n}\r\n\r\nexport default MainLayout\r\n","import { useResponsiveLayout } from '../../hooks'\r\nimport { useNavigation, useSidebar } from '../../context'\r\n\r\nconst Header = () => {\r\n const { isMobile } = useResponsiveLayout()\r\n const { currentPage, setCurrentPage } = useNavigation()\r\n const { sidebarOpen, setSidebarOpen } = useSidebar()\r\n \r\n const menuItems = [\r\n { id: 'test', label: 'Suite de Test' },\r\n { id: 'demo', label: 'Demo' },\r\n ]\r\n \r\n return (\r\n <div className=\"sticky top-0 z-50\">\r\n <header className=\"bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative\">\r\n <div className=\"w-full\">\r\n <div className=\"px-4 py-4\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center space-x-2\">\r\n {/* Hamburger button para móvil - A LA IZQUIERDA */}\r\n {isMobile && (\r\n <button\r\n onClick={() => setSidebarOpen(true)}\r\n className=\"p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors\"\r\n >\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n )}\r\n \r\n <div className=\"flex items-center space-x-2\">\r\n <div className=\"w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse\"></div>\r\n <h3 className=\"text-base font-black text-white tracking-tight\">\r\n Sistema Responsivo\r\n </h3>\r\n </div>\r\n <div className=\"px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest\">\r\n DASHBOARD\r\n </div>\r\n </div>\r\n \r\n <div className=\"flex items-center space-x-2\">\r\n {/* Botones visibles solo en desktop */}\r\n {!isMobile && menuItems.map((page) => (\r\n <button\r\n key={page.id}\r\n onClick={() => setCurrentPage(page.id as 'demo' | 'test')}\r\n className={`px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${\r\n currentPage === page.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50' \r\n : 'bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600'\r\n }`}\r\n >\r\n {page.label}\r\n </button>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </header>\r\n\r\n {/* Sidebar móvil desplegable */}\r\n {isMobile && sidebarOpen && (\r\n <div className=\"fixed inset-0 z-40 bg-black/50\" onClick={() => setSidebarOpen(false)}>\r\n <div className=\"fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20\">\r\n <div className=\"p-6 flex flex-col h-full pt-20\">\r\n {/* Logo */}\r\n <div className=\"flex items-center space-x-3 mb-8\">\r\n <div className=\"w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">RS</span>\r\n </div>\r\n <span className=\"text-white font-bold text-lg\">Sistema Responsivo</span>\r\n </div>\r\n \r\n {/* Navigation */}\r\n <nav className=\"space-y-2\">\r\n {menuItems.map((item) => (\r\n <button\r\n key={item.id}\r\n onClick={() => {\r\n setCurrentPage(item.id as 'demo' | 'test')\r\n setSidebarOpen(false)\r\n }}\r\n className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${\r\n currentPage === item.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' \r\n : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'\r\n }`}\r\n >\r\n <span className=\"font-medium\">{item.label}</span>\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n )\r\n}\r\n\r\nexport default Header\r\n","import { useResponsiveLayout } from '../../hooks'\r\nimport { useSidebar } from '../../context'\r\n\r\nconst Sidebar = () => {\r\n const { isMobile, isTablet } = useResponsiveLayout()\r\n const { sidebarOpen, setSidebarOpen } = useSidebar()\r\n \r\n const menuItems = [\r\n { id: 'home', label: 'Inicio' },\r\n { id: 'about', label: 'Acerca' },\r\n { id: 'contact', label: 'Contacto' },\r\n ]\r\n \r\n return (\r\n <>\r\n {isMobile && (\r\n <button\r\n onClick={() => setSidebarOpen(true)}\r\n className=\"fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800 bg-gray-900 border border-gray-700\"\r\n >\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n )}\r\n\r\n <aside className={`bg-gray-900 border-r border-gray-800 ${isMobile ? 'hidden' : 'w-64 flex-shrink-0'} ${isTablet ? 'w-56' : 'w-64'}`}>\r\n <div className=\"p-6 flex flex-col h-full\">\r\n <div className=\"flex items-center space-x-3 mb-8\">\r\n <div className=\"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">LO</span>\r\n </div>\r\n <span className=\"text-white font-bold text-lg\">Tu Aplicación</span>\r\n </div>\r\n \r\n <nav className=\"space-y-2\">\r\n {menuItems.map((item) => (\r\n <button\r\n key={item.id}\r\n className=\"w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800\"\r\n >\r\n <span className=\"font-medium\">{item.label}</span>\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </aside>\r\n\r\n {isMobile && sidebarOpen && (\r\n <div className=\"fixed inset-0 z-40 bg-black/50\" onClick={() => setSidebarOpen(false)}>\r\n <div className=\"fixed top-0 left-0 w-64 h-full bg-gray-900 border-r border-gray-800\">\r\n <div className=\"p-6 flex flex-col h-full pt-20\">\r\n <div className=\"flex items-center space-x-3 mb-8\">\r\n <div className=\"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">LO</span>\r\n </div>\r\n <span className=\"text-white font-bold text-lg\">Tu Aplicación</span>\r\n </div>\r\n \r\n <nav className=\"space-y-2\">\r\n {menuItems.map((item) => (\r\n <button\r\n key={item.id}\r\n onClick={() => setSidebarOpen(false)}\r\n className=\"w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800\"\r\n >\r\n <span className=\"font-medium\">{item.label}</span>\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </>\r\n )\r\n}\r\n\r\nexport default Sidebar\r\n","const Footer = () => {\r\n return (\r\n <footer className=\"bg-gray-900 border-t border-gray-800\">\r\n <div className=\"px-4 py-6\">\r\n <div className=\"max-w-7xl mx-auto text-center\">\r\n <p className=\"text-gray-400 text-sm\">\r\n © {new Date().getFullYear()} Tu Aplicación. Todos los derechos reservados.\r\n </p>\r\n </div>\r\n </div>\r\n </footer>\r\n )\r\n}\r\n\r\nexport default Footer\r\n","import { useResponsiveLayout } from '../../hooks'\r\n\r\nconst Navigation = () => {\r\n const { isMobile } = useResponsiveLayout()\r\n \r\n return (\r\n <nav className=\"sticky top-0 z-50 bg-gray-900 border-b border-gray-800\">\r\n <div className=\"px-4 py-4\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center space-x-3\">\r\n <div className=\"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">LO</span>\r\n </div>\r\n <h1 className=\"text-white font-semibold text-lg\">Tu Aplicación</h1>\r\n </div>\r\n \r\n {isMobile && (\r\n <button className=\"p-2 text-gray-400 hover:text-white\">\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n )}\r\n </div>\r\n </div>\r\n </nav>\r\n )\r\n}\r\n\r\nexport default Navigation\r\n","import React from 'react'\r\nimport { Navigation, Footer } from '../components/layout'\r\n\r\ninterface DefaultLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {\r\n return (\r\n <div className=\"min-h-screen bg-gray-50 flex flex-col\">\r\n {/* Navigation fijo arriba */}\r\n <Navigation />\r\n \r\n {/* Main content */}\r\n <main className=\"flex-1\">\r\n {children}\r\n </main>\r\n \r\n {/* Footer fijo abajo */}\r\n <Footer />\r\n </div>\r\n )\r\n}\r\n\r\nexport default DefaultLayout\r\n","import React from 'react'\r\nimport { Sidebar } from '../components/layout'\r\nimport { SidebarProvider } from '../context'\r\n\r\ninterface SidebarLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst SidebarLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n return (\r\n <div className=\"min-h-screen bg-gray-50 flex\">\r\n {/* Sidebar */}\r\n <Sidebar />\r\n \r\n {/* Main content */}\r\n <main className=\"flex-1 overflow-auto\">\r\n {children}\r\n </main>\r\n </div>\r\n )\r\n}\r\n\r\nconst SidebarLayout: React.FC<SidebarLayoutProps> = ({ children }) => {\r\n return (\r\n <SidebarProvider>\r\n <SidebarLayoutContent>{children}</SidebarLayoutContent>\r\n </SidebarProvider>\r\n )\r\n}\r\n\r\nexport default SidebarLayout\r\n","import React from 'react'\r\nimport { Sidebar, Footer } from '../components/layout'\r\nimport { SidebarProvider } from '../context'\r\n\r\ninterface DashboardLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst DashboardLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n return (\r\n <div className=\"min-h-screen bg-gray-50 flex flex-col\">\r\n {/* Content area con sidebar */}\r\n <div className=\"flex flex-1\">\r\n {/* Sidebar */}\r\n <Sidebar />\r\n \r\n {/* Main content */}\r\n <main className=\"flex-1 overflow-auto flex flex-col\">\r\n <div className=\"flex-1\">\r\n {children}\r\n </div>\r\n \r\n {/* Footer */}\r\n <Footer />\r\n </main>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\nconst DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {\r\n return (\r\n <SidebarProvider>\r\n <DashboardLayoutContent>{children}</DashboardLayoutContent>\r\n </SidebarProvider>\r\n )\r\n}\r\n\r\nexport default DashboardLayout\r\n","import React from 'react'\r\n\r\ninterface MinimalLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst MinimalLayout: React.FC<MinimalLayoutProps> = ({ children }) => {\r\n return (\r\n <div className=\"min-h-screen bg-gray-50\">\r\n <main>\r\n {children}\r\n </main>\r\n </div>\r\n )\r\n}\r\n\r\nexport default MinimalLayout\r\n","import { useLayout } from '../hooks'\r\nimport { LAYOUT_CONFIG } from '../config/layout'\r\n\r\ninterface LayoutSwitcherProps {\r\n compact?: boolean\r\n}\r\n\r\nconst LayoutSwitcher = ({ compact = false }: LayoutSwitcherProps) => {\r\n const { current, setLayout, config } = useLayout()\r\n \r\n if (compact) {\r\n return (\r\n <div className=\"bg-black/50 rounded-lg p-3 border border-gray-700\">\r\n <div className=\"text-xs text-gray-500 mb-2\">Layout:</div>\r\n <select\r\n value={current}\r\n onChange={(e) => setLayout(e.target.value)}\r\n className=\"w-full bg-gray-800 text-white text-sm p-2 rounded border border-gray-600 focus:ring-1 focus:ring-cyan-500 focus:border-transparent\"\r\n >\r\n {Object.entries(LAYOUT_CONFIG).map(([key, layoutConfig]) => (\r\n <option key={key} value={key}>\r\n {layoutConfig.name}\r\n </option>\r\n ))}\r\n </select>\r\n </div>\r\n )\r\n }\r\n \r\n return (\r\n <div className=\"bg-black/50 backdrop-blur-sm rounded-lg p-4 border border-cyan-500/30\">\r\n <h3 className=\"text-white font-semibold mb-3\">Cambiar Layout</h3>\r\n \r\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3\">\r\n {Object.entries(LAYOUT_CONFIG).map(([key, layoutConfig]) => (\r\n <button\r\n key={key}\r\n onClick={() => setLayout(key)}\r\n className={`\r\n p-4 rounded-lg border transition-all text-left\r\n ${current === key \r\n ? 'border-cyan-500 bg-cyan-500/10 text-cyan-400' \r\n : 'border-gray-700 bg-black/30 text-gray-300 hover:border-gray-600'\r\n }\r\n `}\r\n >\r\n <div className=\"font-semibold mb-1\">{layoutConfig.name}</div>\r\n <div className=\"text-xs opacity-75\">{layoutConfig.description}</div>\r\n </button>\r\n ))}\r\n </div>\r\n \r\n <div className=\"mt-4 p-3 bg-gray-900/50 rounded-lg\">\r\n <div className=\"text-xs text-gray-500 mb-1\">Layout Actual:</div>\r\n <div className=\"text-sm text-cyan-400 font-medium\">{config.name}</div>\r\n <div className=\"text-xs text-gray-400\">{config.description}</div>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\nexport default LayoutSwitcher\r\n"],"names":["ResponsiveProvider","children","_debug","DEFAULT_BREAKPOINTS","getCurrentBreakpoint","width","getBreakpointIndex","breakpoint","getBreakpointValue","debounce","func","wait","timeout","args","getOrientation","height","useResponsive","dimensions","setDimensions","useState","updateDimensions","useCallback","debouncedUpdateDimensions","useMemo","useEffect","orientation","isXs","isSm","isMd","isLg","isXl","is2Xl","is3Xl","is4Xl","is5Xl","isMobile","isTablet","isDesktop","isSmall","isLarge","isUltraWide","is4K","is5K","isPortrait","isLandscape","isBreakpointUp","bp","isBreakpointDown","isBreakpointBetween","min","max","current","isWidthUp","minWidth","isWidthDown","maxWidth","isWidthBetween","isHeightUp","minHeight","isHeightDown","maxHeight","isHeightBetween","ResponsiveLayoutContext","createContext","useResponsiveLayoutContext","context","useContext","SidebarContext","SidebarProvider","sidebarOpen","setSidebarOpen","jsx","useSidebar","NavigationContext","useNavigation","NavigationProvider","defaultPage","currentPage","setCurrentPage","useResponsiveLayout","breakpoints","classes","cols","useLayout","responsiveLayout","LAYOUT_CONFIG","DEFAULT_LAYOUT","AVAILABLE_LAYOUTS","ResponsiveLayoutProviderInner","defaultLayout","useResponsiveHook","internalResponsive","responsive","validLayout","currentLayout","setCurrentLayout","newValidLayout","layoutConfig","contextValue","baseClass","ResponsiveLayoutProvider","MainLayout","layoutProp","layout","LayoutComponent","DefaultLayout","SidebarLayout","DashboardLayout","MinimalLayout","Header","menuItems","jsxs","page","item","Sidebar","Fragment","Footer","Navigation","SidebarLayoutContent","DashboardLayoutContent","LayoutSwitcher","compact","setLayout","config","e","key"],"mappings":"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"}
package/dist/responsive-system.mjs CHANGED
@@ -1,9 +1,9 @@
1
- import { jsx as t, Fragment as A, jsxs as l } from "react/jsx-runtime";
2
- import { useState as k, useCallback as d, useMemo as D, useEffect as R, createContext as M, useContext as O } from "react";
1
+ import { jsx as t, Fragment as R, jsxs as l } from "react/jsx-runtime";
2
+ import { useState as S, useCallback as u, useMemo as M, useEffect as T, createContext as O, useContext as P } from "react";
3
3
  const oe = ({
4
4
  children: e,
5
- debug: s = !1
6
- }) => /* @__PURE__ */ t(A, { children: e }), u = {
5
+ debug: n = !1
6
+ }) => /* @__PURE__ */ t(R, { children: e }), b = {
7
7
  xs: 475,
8
8
  sm: 640,
9
9
  md: 768,
@@ -13,63 +13,63 @@ const oe = ({
13
13
  "3xl": 1920,
14
14
  "4xl": 2560,
15
15
  "5xl": 3840
16
- }, le = (e) => e >= u["5xl"] ? "5xl" : e >= u["4xl"] ? "4xl" : e >= u["3xl"] ? "3xl" : e >= u["2xl"] ? "2xl" : e >= u.xl ? "xl" : e >= u.lg ? "lg" : e >= u.md ? "md" : e >= u.sm ? "sm" : "xs", b = (e) => ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl"].indexOf(e), Ce = (e) => u[e];
17
- function ce(e, s) {
18
- let i = null;
16
+ }, le = (e) => e >= b["5xl"] ? "5xl" : e >= b["4xl"] ? "4xl" : e >= b["3xl"] ? "3xl" : e >= b["2xl"] ? "2xl" : e >= b.xl ? "xl" : e >= b.lg ? "lg" : e >= b.md ? "md" : e >= b.sm ? "sm" : "xs", p = (e) => ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl"].indexOf(e), Ce = (e) => b[e];
17
+ function ce(e, n) {
18
+ let a = null;
19
19
  return (...o) => {
20
- i && clearTimeout(i), i = setTimeout(() => e(...o), s);
20
+ a && clearTimeout(a), a = setTimeout(() => e(...o), n);
21
21
  };
22
22
  }
23
- function de(e, s) {
24
- return e >= s ? "landscape" : "portrait";
23
+ function de(e, n) {
24
+ return e >= n ? "landscape" : "portrait";
25
25
  }
26
26
  const ue = () => {
27
- const [e, s] = k({
27
+ const [e, n] = S({
28
28
  width: typeof window < "u" ? window.innerWidth : 1024,
29
29
  height: typeof window < "u" ? window.innerHeight : 768
30
- }), i = d(() => {
31
- s({
30
+ }), a = u(() => {
31
+ n({
32
32
  width: window.innerWidth,
33
33
  height: window.innerHeight
34
34
  });
35
- }, []), o = D(
36
- () => ce(i, 100),
37
- [i]
35
+ }, []), o = M(
36
+ () => ce(a, 100),
37
+ [a]
38
38
  );
39
- R(() => {
39
+ T(() => {
40
40
  if (!(typeof window > "u"))
41
41
  return window.addEventListener("resize", o), () => {
42
42
  window.removeEventListener("resize", o);
43
43
  };
44
44
  }, [o]);
45
- const { width: r, height: a } = e, n = D(() => le(r), [r]), h = D(() => de(r, a), [r, a]), m = n === "xs", w = n === "sm", x = n === "md", p = n === "lg", C = n === "xl", S = n === "2xl", L = n === "3xl", f = n === "4xl", g = n === "5xl", z = m || w, I = x, X = p || C || S || L || f || g, _ = m || w || x, Y = p || C || S || L || f || g, K = L || f || g, V = f || g, q = g, G = h === "portrait", J = h === "landscape", Q = d((c) => b(n) >= b(c), [n]), Z = d((c) => b(n) <= b(c), [n]), ee = d((c, y) => {
46
- const P = b(n);
47
- return P >= b(c) && P <= b(y);
48
- }, [n]), te = d((c) => r >= c, [r]), ne = d((c) => r <= c, [r]), se = d((c, y) => r >= c && r <= y, [r]), re = d((c) => a >= c, [a]), ae = d((c) => a <= c, [a]), ie = d((c, y) => a >= c && a <= y, [a]);
45
+ const { width: s, height: r } = e, i = M(() => le(s), [s]), d = M(() => de(s, r), [s, r]), x = i === "xs", h = i === "sm", L = i === "md", f = i === "lg", m = i === "xl", D = i === "2xl", k = i === "3xl", v = i === "4xl", y = i === "5xl", z = x || h, I = L, X = f || m || D || k || v || y, _ = x || h || L, V = f || m || D || k || v || y, Y = k || v || y, K = v || y, q = y, G = d === "portrait", J = d === "landscape", Q = u((c) => p(i) >= p(c), [i]), Z = u((c) => p(i) <= p(c), [i]), ee = u((c, N) => {
46
+ const j = p(i);
47
+ return j >= p(c) && j <= p(N);
48
+ }, [i]), te = u((c) => s >= c, [s]), ne = u((c) => s <= c, [s]), se = u((c, N) => s >= c && s <= N, [s]), re = u((c) => r >= c, [r]), ae = u((c) => r <= c, [r]), ie = u((c, N) => r >= c && r <= N, [r]);
49
49
  return {
50
50
  // Estado básico
51
- breakpoint: n,
52
- width: r,
53
- height: a,
54
- orientation: h,
51
+ breakpoint: i,
52
+ width: s,
53
+ height: r,
54
+ orientation: d,
55
55
  // Helpers booleanos específicos
56
- isXs: m,
57
- isSm: w,
58
- isMd: x,
59
- isLg: p,
60
- isXl: C,
61
- is2Xl: S,
62
- is3Xl: L,
63
- is4Xl: f,
64
- is5Xl: g,
56
+ isXs: x,
57
+ isSm: h,
58
+ isMd: L,
59
+ isLg: f,
60
+ isXl: m,
61
+ is2Xl: D,
62
+ is3Xl: k,
63
+ is4Xl: v,
64
+ is5Xl: y,
65
65
  // Helpers booleanos agrupados
66
66
  isMobile: z,
67
67
  isTablet: I,
68
68
  isDesktop: X,
69
69
  isSmall: _,
70
- isLarge: Y,
71
- isUltraWide: K,
72
- is4K: V,
70
+ isLarge: V,
71
+ isUltraWide: Y,
72
+ is4K: K,
73
73
  is5K: q,
74
74
  // Helpers de orientación
75
75
  isPortrait: G,
@@ -87,30 +87,30 @@ const ue = () => {
87
87
  // Debug
88
88
  debug: !1
89
89
  };
90
- }, T = M(void 0), me = () => {
91
- const e = O(T);
90
+ }, U = O(void 0), me = () => {
91
+ const e = P(U);
92
92
  if (!e)
93
93
  throw new Error("useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider");
94
94
  return e;
95
- }, U = M(void 0), B = ({ children: e }) => {
96
- const [s, i] = k(!1);
97
- return /* @__PURE__ */ t(U.Provider, { value: { sidebarOpen: s, setSidebarOpen: i }, children: e });
98
- }, $ = () => {
99
- const e = O(U);
95
+ }, B = O(void 0), $ = ({ children: e }) => {
96
+ const [n, a] = S(!1);
97
+ return /* @__PURE__ */ t(B.Provider, { value: { sidebarOpen: n, setSidebarOpen: a }, children: e });
98
+ }, E = () => {
99
+ const e = P(B);
100
100
  if (!e)
101
101
  throw new Error("useSidebar must be used within a SidebarProvider");
102
102
  return e;
103
- }, E = M({
103
+ }, F = O({
104
104
  currentPage: "test",
105
105
  setCurrentPage: () => {
106
106
  }
107
- }), be = () => O(E), Se = ({
107
+ }), be = () => P(F), Se = ({
108
108
  children: e,
109
- defaultPage: s = "test"
109
+ defaultPage: n = "test"
110
110
  }) => {
111
- const [i, o] = k(s);
112
- return /* @__PURE__ */ t(E.Provider, { value: { currentPage: i, setCurrentPage: o }, children: e });
113
- }, N = () => {
111
+ const [a, o] = S(n);
112
+ return /* @__PURE__ */ t(F.Provider, { value: { currentPage: a, setCurrentPage: o }, children: e });
113
+ }, w = () => {
114
114
  const e = me();
115
115
  return {
116
116
  // Todo el sistema responsivo original
@@ -130,14 +130,14 @@ const ue = () => {
130
130
  isMinimalLayout: () => e.layout.current === "minimal",
131
131
  // Grid helpers que usan el sistema auto-escalable
132
132
  grid: {
133
- auto: (s = "md") => `grid-cols-auto-${s}`,
134
- responsive: (s) => {
135
- const i = [];
136
- return Object.entries(s).forEach(([o, r]) => {
137
- o === "base" ? i.push(`grid-cols-${r}`) : i.push(`${o}:grid-cols-${r}`);
138
- }), i.join(" ");
133
+ auto: (n = "md") => `grid-cols-auto-${n}`,
134
+ responsive: (n) => {
135
+ const a = [];
136
+ return Object.entries(n).forEach(([o, s]) => {
137
+ o === "base" ? a.push(`grid-cols-${s}`) : a.push(`${o}:grid-cols-${s}`);
138
+ }), a.join(" ");
139
139
  },
140
- fixed: (s) => `grid-cols-${s}`
140
+ fixed: (n) => `grid-cols-${n}`
141
141
  },
142
142
  // Spacing helpers que escalan automáticamente
143
143
  spacing: {
@@ -148,7 +148,7 @@ const ue = () => {
148
148
  }
149
149
  };
150
150
  }, he = () => {
151
- const e = N();
151
+ const e = w();
152
152
  return {
153
153
  // Layout actual
154
154
  current: e.layout.current,
@@ -166,7 +166,7 @@ const ue = () => {
166
166
  // Spacing helpers
167
167
  spacing: e.spacing
168
168
  };
169
- }, v = {
169
+ }, g = {
170
170
  default: {
171
171
  name: "Default",
172
172
  description: "Navbar arriba, body central, footer abajo",
@@ -211,56 +211,57 @@ const ue = () => {
211
211
  desktop: "p-6"
212
212
  }
213
213
  }
214
- }, F = "default", De = Object.keys(v), pe = ({
214
+ }, C = "default", De = Object.keys(g), pe = ({
215
215
  children: e,
216
- defaultLayout: s,
217
- useResponsiveHook: i
216
+ defaultLayout: n,
217
+ useResponsiveHook: a
218
218
  }) => {
219
- const o = ue(), a = i?.() || o, [n, h] = k(() => s);
220
- R(() => {
221
- h(s);
222
- }, [s]);
223
- const m = v[n] || v[F], x = {
224
- responsive: a,
219
+ const o = ue(), r = a?.() || o, i = n && g[n] ? n : C, [d, x] = S(i);
220
+ T(() => {
221
+ const m = n && g[n] ? n : C;
222
+ m !== d && x(m);
223
+ }, [n, d]);
224
+ const h = g[d] || g[C], f = {
225
+ responsive: r,
225
226
  layout: {
226
- current: n,
227
- config: m,
228
- setLayout: h
227
+ current: d,
228
+ config: h,
229
+ setLayout: x
229
230
  },
230
231
  layoutUtils: {
231
- getContainerClass: () => a.isMobile ? m.responsive.mobile : a.isTablet ? m.responsive.tablet : m.responsive.desktop,
232
+ getContainerClass: () => r.isMobile ? h.responsive.mobile : r.isTablet ? h.responsive.tablet : h.responsive.desktop,
232
233
  getMainClass: () => {
233
- const p = "min-h-screen bg-black";
234
- return n === "sidebar" || n === "dashboard" ? `${p} flex` : p;
234
+ const m = "min-h-screen bg-black";
235
+ return d === "sidebar" || d === "dashboard" ? `${m} flex` : m;
235
236
  },
236
- hasSidebar: () => n === "sidebar" || n === "dashboard",
237
- hasHeader: () => n === "dashboard",
238
- hasFooter: () => n === "default" || n === "dashboard",
239
- hasNavigation: () => n === "default"
237
+ hasSidebar: () => d === "sidebar" || d === "dashboard",
238
+ hasHeader: () => d === "dashboard",
239
+ hasFooter: () => d === "default" || d === "dashboard",
240
+ hasNavigation: () => d === "default"
240
241
  }
241
242
  };
242
- return /* @__PURE__ */ t(T.Provider, { value: x, children: e });
243
+ return /* @__PURE__ */ t(U.Provider, { value: f, children: e });
243
244
  }, Me = ({
244
245
  children: e,
245
- defaultLayout: s = F,
246
- useResponsiveHook: i
246
+ defaultLayout: n = C,
247
+ useResponsiveHook: a
247
248
  }) => /* @__PURE__ */ t(oe, { children: /* @__PURE__ */ t(
248
249
  pe,
249
250
  {
250
- defaultLayout: s,
251
- useResponsiveHook: i,
251
+ defaultLayout: n,
252
+ useResponsiveHook: a,
252
253
  children: e
253
254
  }
254
- ) }), Oe = ({ children: e, layout: s }) => {
255
- const { layout: i } = N(), o = s || i.current, a = {
256
- default: j,
257
- sidebar: fe,
255
+ ) }), Oe = ({ children: e, layout: n }) => {
256
+ const { layout: a } = w(), o = n || a.current, r = {
257
+ default: A,
258
+ sidebar: ye,
258
259
  dashboard: ve,
259
260
  minimal: Ne
260
- }[o] || j;
261
- return /* @__PURE__ */ t(a, { children: e });
261
+ }[o] || A;
262
+ return /* @__PURE__ */ t(r, { children: e });
262
263
  }, Pe = () => {
263
- const { isMobile: e } = N(), { currentPage: s, setCurrentPage: i } = be(), { sidebarOpen: o, setSidebarOpen: r } = $(), a = [
264
+ const { isMobile: e } = w(), { currentPage: n, setCurrentPage: a } = be(), { sidebarOpen: o, setSidebarOpen: s } = E(), r = [
264
265
  { id: "test", label: "Suite de Test" },
265
266
  { id: "demo", label: "Demo" }
266
267
  ];
@@ -270,7 +271,7 @@ const ue = () => {
270
271
  e && /* @__PURE__ */ t(
271
272
  "button",
272
273
  {
273
- onClick: () => r(!0),
274
+ onClick: () => s(!0),
274
275
  className: "p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors",
275
276
  children: /* @__PURE__ */ t("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) })
276
277
  }
@@ -281,41 +282,41 @@ const ue = () => {
281
282
  ] }),
282
283
  /* @__PURE__ */ t("div", { className: "px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest", children: "DASHBOARD" })
283
284
  ] }),
284
- /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: !e && a.map((n) => /* @__PURE__ */ t(
285
+ /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: !e && r.map((i) => /* @__PURE__ */ t(
285
286
  "button",
286
287
  {
287
- onClick: () => i(n.id),
288
- className: `px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${s === n.id ? "bg-cyan-500/20 text-cyan-400 border-cyan-500/50" : "bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600"}`,
289
- children: n.label
288
+ onClick: () => a(i.id),
289
+ className: `px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${n === i.id ? "bg-cyan-500/20 text-cyan-400 border-cyan-500/50" : "bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600"}`,
290
+ children: i.label
290
291
  },
291
- n.id
292
+ i.id
292
293
  )) })
293
294
  ] }) }) }) }),
294
- e && o && /* @__PURE__ */ t("div", { className: "fixed inset-0 z-40 bg-black/50", onClick: () => r(!1), children: /* @__PURE__ */ t("div", { className: "fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20", children: /* @__PURE__ */ l("div", { className: "p-6 flex flex-col h-full pt-20", children: [
295
+ e && o && /* @__PURE__ */ t("div", { className: "fixed inset-0 z-40 bg-black/50", onClick: () => s(!1), children: /* @__PURE__ */ t("div", { className: "fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20", children: /* @__PURE__ */ l("div", { className: "p-6 flex flex-col h-full pt-20", children: [
295
296
  /* @__PURE__ */ l("div", { className: "flex items-center space-x-3 mb-8", children: [
296
297
  /* @__PURE__ */ t("div", { className: "w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ t("span", { className: "text-white font-bold text-sm", children: "RS" }) }),
297
298
  /* @__PURE__ */ t("span", { className: "text-white font-bold text-lg", children: "Sistema Responsivo" })
298
299
  ] }),
299
- /* @__PURE__ */ t("nav", { className: "space-y-2", children: a.map((n) => /* @__PURE__ */ t(
300
+ /* @__PURE__ */ t("nav", { className: "space-y-2", children: r.map((i) => /* @__PURE__ */ t(
300
301
  "button",
301
302
  {
302
303
  onClick: () => {
303
- i(n.id), r(!1);
304
+ a(i.id), s(!1);
304
305
  },
305
- className: `w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${s === n.id ? "bg-cyan-500/20 text-cyan-400 border border-cyan-500/50" : "text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10"}`,
306
- children: /* @__PURE__ */ t("span", { className: "font-medium", children: n.label })
306
+ className: `w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${n === i.id ? "bg-cyan-500/20 text-cyan-400 border border-cyan-500/50" : "text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10"}`,
307
+ children: /* @__PURE__ */ t("span", { className: "font-medium", children: i.label })
307
308
  },
308
- n.id
309
+ i.id
309
310
  )) })
310
311
  ] }) }) })
311
312
  ] });
312
313
  }, H = () => {
313
- const { isMobile: e, isTablet: s } = N(), { sidebarOpen: i, setSidebarOpen: o } = $(), r = [
314
+ const { isMobile: e, isTablet: n } = w(), { sidebarOpen: a, setSidebarOpen: o } = E(), s = [
314
315
  { id: "home", label: "Inicio" },
315
316
  { id: "about", label: "Acerca" },
316
317
  { id: "contact", label: "Contacto" }
317
318
  ];
318
- return /* @__PURE__ */ l(A, { children: [
319
+ return /* @__PURE__ */ l(R, { children: [
319
320
  e && /* @__PURE__ */ t(
320
321
  "button",
321
322
  {
@@ -324,33 +325,33 @@ const ue = () => {
324
325
  children: /* @__PURE__ */ t("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) })
325
326
  }
326
327
  ),
327
- /* @__PURE__ */ t("aside", { className: `bg-gray-900 border-r border-gray-800 ${e ? "hidden" : "w-64 flex-shrink-0"} ${s ? "w-56" : "w-64"}`, children: /* @__PURE__ */ l("div", { className: "p-6 flex flex-col h-full", children: [
328
+ /* @__PURE__ */ t("aside", { className: `bg-gray-900 border-r border-gray-800 ${e ? "hidden" : "w-64 flex-shrink-0"} ${n ? "w-56" : "w-64"}`, children: /* @__PURE__ */ l("div", { className: "p-6 flex flex-col h-full", children: [
328
329
  /* @__PURE__ */ l("div", { className: "flex items-center space-x-3 mb-8", children: [
329
330
  /* @__PURE__ */ t("div", { className: "w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ t("span", { className: "text-white font-bold text-sm", children: "LO" }) }),
330
331
  /* @__PURE__ */ t("span", { className: "text-white font-bold text-lg", children: "Tu Aplicación" })
331
332
  ] }),
332
- /* @__PURE__ */ t("nav", { className: "space-y-2", children: r.map((a) => /* @__PURE__ */ t(
333
+ /* @__PURE__ */ t("nav", { className: "space-y-2", children: s.map((r) => /* @__PURE__ */ t(
333
334
  "button",
334
335
  {
335
336
  className: "w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800",
336
- children: /* @__PURE__ */ t("span", { className: "font-medium", children: a.label })
337
+ children: /* @__PURE__ */ t("span", { className: "font-medium", children: r.label })
337
338
  },
338
- a.id
339
+ r.id
339
340
  )) })
340
341
  ] }) }),
341
- e && i && /* @__PURE__ */ t("div", { className: "fixed inset-0 z-40 bg-black/50", onClick: () => o(!1), children: /* @__PURE__ */ t("div", { className: "fixed top-0 left-0 w-64 h-full bg-gray-900 border-r border-gray-800", children: /* @__PURE__ */ l("div", { className: "p-6 flex flex-col h-full pt-20", children: [
342
+ e && a && /* @__PURE__ */ t("div", { className: "fixed inset-0 z-40 bg-black/50", onClick: () => o(!1), children: /* @__PURE__ */ t("div", { className: "fixed top-0 left-0 w-64 h-full bg-gray-900 border-r border-gray-800", children: /* @__PURE__ */ l("div", { className: "p-6 flex flex-col h-full pt-20", children: [
342
343
  /* @__PURE__ */ l("div", { className: "flex items-center space-x-3 mb-8", children: [
343
344
  /* @__PURE__ */ t("div", { className: "w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ t("span", { className: "text-white font-bold text-sm", children: "LO" }) }),
344
345
  /* @__PURE__ */ t("span", { className: "text-white font-bold text-lg", children: "Tu Aplicación" })
345
346
  ] }),
346
- /* @__PURE__ */ t("nav", { className: "space-y-2", children: r.map((a) => /* @__PURE__ */ t(
347
+ /* @__PURE__ */ t("nav", { className: "space-y-2", children: s.map((r) => /* @__PURE__ */ t(
347
348
  "button",
348
349
  {
349
350
  onClick: () => o(!1),
350
351
  className: "w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800",
351
- children: /* @__PURE__ */ t("span", { className: "font-medium", children: a.label })
352
+ children: /* @__PURE__ */ t("span", { className: "font-medium", children: r.label })
352
353
  },
353
- a.id
354
+ r.id
354
355
  )) })
355
356
  ] }) }) })
356
357
  ] });
@@ -359,7 +360,7 @@ const ue = () => {
359
360
  (/* @__PURE__ */ new Date()).getFullYear(),
360
361
  " Tu Aplicación. Todos los derechos reservados."
361
362
  ] }) }) }) }), ge = () => {
362
- const { isMobile: e } = N();
363
+ const { isMobile: e } = w();
363
364
  return /* @__PURE__ */ t("nav", { className: "sticky top-0 z-50 bg-gray-900 border-b border-gray-800", children: /* @__PURE__ */ t("div", { className: "px-4 py-4", children: /* @__PURE__ */ l("div", { className: "flex items-center justify-between", children: [
364
365
  /* @__PURE__ */ l("div", { className: "flex items-center space-x-3", children: [
365
366
  /* @__PURE__ */ t("div", { className: "w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ t("span", { className: "text-white font-bold text-sm", children: "LO" }) }),
@@ -367,48 +368,48 @@ const ue = () => {
367
368
  ] }),
368
369
  e && /* @__PURE__ */ t("button", { className: "p-2 text-gray-400 hover:text-white", children: /* @__PURE__ */ t("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) }) })
369
370
  ] }) }) });
370
- }, j = ({ children: e }) => /* @__PURE__ */ l("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
371
+ }, A = ({ children: e }) => /* @__PURE__ */ l("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
371
372
  /* @__PURE__ */ t(ge, {}),
372
373
  /* @__PURE__ */ t("main", { className: "flex-1", children: e }),
373
374
  /* @__PURE__ */ t(W, {})
374
375
  ] }), xe = ({ children: e }) => /* @__PURE__ */ l("div", { className: "min-h-screen bg-gray-50 flex", children: [
375
376
  /* @__PURE__ */ t(H, {}),
376
377
  /* @__PURE__ */ t("main", { className: "flex-1 overflow-auto", children: e })
377
- ] }), fe = ({ children: e }) => /* @__PURE__ */ t(B, { children: /* @__PURE__ */ t(xe, { children: e }) }), ye = ({ children: e }) => /* @__PURE__ */ t("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: /* @__PURE__ */ l("div", { className: "flex flex-1", children: [
378
+ ] }), ye = ({ children: e }) => /* @__PURE__ */ t($, { children: /* @__PURE__ */ t(xe, { children: e }) }), fe = ({ children: e }) => /* @__PURE__ */ t("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: /* @__PURE__ */ l("div", { className: "flex flex-1", children: [
378
379
  /* @__PURE__ */ t(H, {}),
379
380
  /* @__PURE__ */ l("main", { className: "flex-1 overflow-auto flex flex-col", children: [
380
381
  /* @__PURE__ */ t("div", { className: "flex-1", children: e }),
381
382
  /* @__PURE__ */ t(W, {})
382
383
  ] })
383
- ] }) }), ve = ({ children: e }) => /* @__PURE__ */ t(B, { children: /* @__PURE__ */ t(ye, { children: e }) }), Ne = ({ children: e }) => /* @__PURE__ */ t("div", { className: "min-h-screen bg-gray-50", children: /* @__PURE__ */ t("main", { children: e }) }), je = ({ compact: e = !1 }) => {
384
- const { current: s, setLayout: i, config: o } = he();
384
+ ] }) }), ve = ({ children: e }) => /* @__PURE__ */ t($, { children: /* @__PURE__ */ t(fe, { children: e }) }), Ne = ({ children: e }) => /* @__PURE__ */ t("div", { className: "min-h-screen bg-gray-50", children: /* @__PURE__ */ t("main", { children: e }) }), je = ({ compact: e = !1 }) => {
385
+ const { current: n, setLayout: a, config: o } = he();
385
386
  return e ? /* @__PURE__ */ l("div", { className: "bg-black/50 rounded-lg p-3 border border-gray-700", children: [
386
387
  /* @__PURE__ */ t("div", { className: "text-xs text-gray-500 mb-2", children: "Layout:" }),
387
388
  /* @__PURE__ */ t(
388
389
  "select",
389
390
  {
390
- value: s,
391
- onChange: (r) => i(r.target.value),
391
+ value: n,
392
+ onChange: (s) => a(s.target.value),
392
393
  className: "w-full bg-gray-800 text-white text-sm p-2 rounded border border-gray-600 focus:ring-1 focus:ring-cyan-500 focus:border-transparent",
393
- children: Object.entries(v).map(([r, a]) => /* @__PURE__ */ t("option", { value: r, children: a.name }, r))
394
+ children: Object.entries(g).map(([s, r]) => /* @__PURE__ */ t("option", { value: s, children: r.name }, s))
394
395
  }
395
396
  )
396
397
  ] }) : /* @__PURE__ */ l("div", { className: "bg-black/50 backdrop-blur-sm rounded-lg p-4 border border-cyan-500/30", children: [
397
398
  /* @__PURE__ */ t("h3", { className: "text-white font-semibold mb-3", children: "Cambiar Layout" }),
398
- /* @__PURE__ */ t("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3", children: Object.entries(v).map(([r, a]) => /* @__PURE__ */ l(
399
+ /* @__PURE__ */ t("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3", children: Object.entries(g).map(([s, r]) => /* @__PURE__ */ l(
399
400
  "button",
400
401
  {
401
- onClick: () => i(r),
402
+ onClick: () => a(s),
402
403
  className: `
403
404
  p-4 rounded-lg border transition-all text-left
404
- ${s === r ? "border-cyan-500 bg-cyan-500/10 text-cyan-400" : "border-gray-700 bg-black/30 text-gray-300 hover:border-gray-600"}
405
+ ${n === s ? "border-cyan-500 bg-cyan-500/10 text-cyan-400" : "border-gray-700 bg-black/30 text-gray-300 hover:border-gray-600"}
405
406
  `,
406
407
  children: [
407
- /* @__PURE__ */ t("div", { className: "font-semibold mb-1", children: a.name }),
408
- /* @__PURE__ */ t("div", { className: "text-xs opacity-75", children: a.description })
408
+ /* @__PURE__ */ t("div", { className: "font-semibold mb-1", children: r.name }),
409
+ /* @__PURE__ */ t("div", { className: "text-xs opacity-75", children: r.description })
409
410
  ]
410
411
  },
411
- r
412
+ s
412
413
  )) }),
413
414
  /* @__PURE__ */ l("div", { className: "mt-4 p-3 bg-gray-900/50 rounded-lg", children: [
414
415
  /* @__PURE__ */ t("div", { className: "text-xs text-gray-500 mb-1", children: "Layout Actual:" }),
@@ -419,13 +420,13 @@ const ue = () => {
419
420
  };
420
421
  export {
421
422
  De as AVAILABLE_LAYOUTS,
422
- u as DEFAULT_BREAKPOINTS,
423
- F as DEFAULT_LAYOUT,
423
+ b as DEFAULT_BREAKPOINTS,
424
+ C as DEFAULT_LAYOUT,
424
425
  ve as DashboardLayout,
425
- j as DefaultLayout,
426
+ A as DefaultLayout,
426
427
  W as Footer,
427
428
  Pe as Header,
428
- v as LAYOUT_CONFIG,
429
+ g as LAYOUT_CONFIG,
429
430
  je as LayoutSwitcher,
430
431
  Oe as MainLayout,
431
432
  Ne as MinimalLayout,
@@ -434,16 +435,16 @@ export {
434
435
  Me as ResponsiveLayoutProvider,
435
436
  oe as ResponsiveProvider,
436
437
  H as Sidebar,
437
- fe as SidebarLayout,
438
- B as SidebarProvider,
439
- b as getBreakpointIndex,
438
+ ye as SidebarLayout,
439
+ $ as SidebarProvider,
440
+ p as getBreakpointIndex,
440
441
  Ce as getBreakpointValue,
441
442
  le as getCurrentBreakpoint,
442
443
  he as useLayout,
443
444
  be as useNavigation,
444
445
  ue as useResponsive,
445
- N as useResponsiveLayout,
446
+ w as useResponsiveLayout,
446
447
  me as useResponsiveLayoutContext,
447
- $ as useSidebar
448
+ E as useSidebar
448
449
  };
449
450
  //# sourceMappingURL=responsive-system.mjs.map
package/dist/responsive-system.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"responsive-system.mjs","sources":["../src/providers/ResponsiveProvider.tsx","../src/constants/breakpoints.ts","../src/hooks/useResponsive.ts","../src/context/ResponsiveLayoutContext.tsx","../src/context/SidebarContext.tsx","../src/context/NavigationContext.tsx","../src/hooks/useResponsiveLayout.ts","../src/hooks/useLayout.ts","../src/config/layout.ts","../src/providers/ResponsiveLayoutProvider.tsx","../src/layouts/MainLayout.tsx","../src/components/layout/Header.tsx","../src/components/layout/Sidebar.tsx","../src/components/layout/Footer.tsx","../src/components/layout/Navigation.tsx","../src/layouts/DefaultLayout.tsx","../src/layouts/SidebarLayout.tsx","../src/layouts/DashboardLayout.tsx","../src/layouts/MinimalLayout.tsx","../src/components/LayoutSwitcher.tsx"],"sourcesContent":["import React from 'react'\r\nimport type { ResponsiveProviderProps } from '../types/responsive'\r\n\r\n/**\r\n * ResponsiveProvider - Provider simplificado para el sistema responsive\r\n * \r\n * Nota: Con el sistema de auto-scaling mediante plugin de Tailwind,\r\n * este Provider es OPCIONAL y solo se necesita si quieres acceder\r\n * al hook useResponsive() en tus componentes.\r\n */\r\nexport const ResponsiveProvider: React.FC<ResponsiveProviderProps> = ({\r\n children,\r\n debug: _debug = false\r\n}) => {\r\n // El Provider ahora solo envuelve children sin context\r\n // El auto-scaling funciona mediante el plugin de Tailwind\r\n return <>{children}</>\r\n}\r\n","import type { Breakpoint } from '../types/responsive'\r\n\r\n/**\r\n * Default breakpoint values\r\n * Deben coincidir con tailwind.config.js\r\n */\r\nexport const DEFAULT_BREAKPOINTS: Record<Breakpoint, number> = {\r\n xs: 475,\r\n sm: 640,\r\n md: 768,\r\n lg: 1024,\r\n xl: 1280,\r\n '2xl': 1536,\r\n '3xl': 1920,\r\n '4xl': 2560,\r\n '5xl': 3840\r\n}\r\n\r\n/**\r\n * Get current breakpoint based on window width\r\n */\r\nexport const getCurrentBreakpoint = (width: number): Breakpoint => {\r\n if (width >= DEFAULT_BREAKPOINTS['5xl']) return '5xl'\r\n if (width >= DEFAULT_BREAKPOINTS['4xl']) return '4xl'\r\n if (width >= DEFAULT_BREAKPOINTS['3xl']) return '3xl'\r\n if (width >= DEFAULT_BREAKPOINTS['2xl']) return '2xl'\r\n if (width >= DEFAULT_BREAKPOINTS.xl) return 'xl'\r\n if (width >= DEFAULT_BREAKPOINTS.lg) return 'lg'\r\n if (width >= DEFAULT_BREAKPOINTS.md) return 'md'\r\n if (width >= DEFAULT_BREAKPOINTS.sm) return 'sm'\r\n return 'xs'\r\n}\r\n\r\n/**\r\n * Get breakpoint index (for comparisons)\r\n */\r\nexport const getBreakpointIndex = (breakpoint: Breakpoint): number => {\r\n const breakpoints: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl']\r\n return breakpoints.indexOf(breakpoint)\r\n}\r\n\r\n/**\r\n * Get breakpoint value in pixels\r\n */\r\nexport const getBreakpointValue = (breakpoint: Breakpoint): number => {\r\n return DEFAULT_BREAKPOINTS[breakpoint]\r\n}\r\n\r\n","import { useState, useEffect, useCallback, useMemo } from 'react'\r\nimport type { \r\n ResponsiveState, \r\n Breakpoint\r\n} from '../types/responsive'\r\nimport { \r\n getCurrentBreakpoint,\r\n getBreakpointIndex\r\n} from '../constants/breakpoints'\r\n\r\n/**\r\n * Debounce utility\r\n */\r\nfunction debounce<T extends (...args: unknown[]) => void>(\r\n func: T,\r\n wait: number\r\n): (...args: Parameters<T>) => void {\r\n let timeout: ReturnType<typeof setTimeout> | null = null\r\n return (...args: Parameters<T>) => {\r\n if (timeout) clearTimeout(timeout)\r\n timeout = setTimeout(() => func(...args), wait)\r\n }\r\n}\r\n\r\n/**\r\n * Get orientation based on dimensions\r\n */\r\nfunction getOrientation(width: number, height: number): 'landscape' | 'portrait' {\r\n return width >= height ? 'landscape' : 'portrait'\r\n}\r\n\r\n/**\r\n * Hook principal useResponsive\r\n * Provee información sobre el breakpoint actual y helpers para responsive\r\n */\r\nexport const useResponsive = (): ResponsiveState => {\r\n const [dimensions, setDimensions] = useState({\r\n width: typeof window !== 'undefined' ? window.innerWidth : 1024,\r\n height: typeof window !== 'undefined' ? window.innerHeight : 768\r\n })\r\n\r\n // Función para actualizar dimensiones\r\n const updateDimensions = useCallback(() => {\r\n setDimensions({\r\n width: window.innerWidth,\r\n height: window.innerHeight\r\n })\r\n }, [])\r\n\r\n // Debounced update para optimizar performance\r\n const debouncedUpdateDimensions = useMemo(\r\n () => debounce(updateDimensions, 100),\r\n [updateDimensions]\r\n )\r\n\r\n // Effect para escuchar cambios de tamaño\r\n useEffect(() => {\r\n if (typeof window === 'undefined') return\r\n\r\n window.addEventListener('resize', debouncedUpdateDimensions)\r\n \r\n return () => {\r\n window.removeEventListener('resize', debouncedUpdateDimensions)\r\n }\r\n }, [debouncedUpdateDimensions])\r\n\r\n const { width, height } = dimensions\r\n\r\n // Calcular breakpoint actual\r\n const breakpoint = useMemo(() => getCurrentBreakpoint(width), [width])\r\n \r\n // Calcular orientación\r\n const orientation = useMemo(() => getOrientation(width, height), [width, height])\r\n\r\n // Helpers booleanos por breakpoint específico\r\n const isXs = breakpoint === 'xs'\r\n const isSm = breakpoint === 'sm'\r\n const isMd = breakpoint === 'md'\r\n const isLg = breakpoint === 'lg'\r\n const isXl = breakpoint === 'xl'\r\n const is2Xl = breakpoint === '2xl'\r\n const is3Xl = breakpoint === '3xl'\r\n const is4Xl = breakpoint === '4xl'\r\n const is5Xl = breakpoint === '5xl'\r\n\r\n // Helpers booleanos agrupados\r\n const isMobile = isXs || isSm\r\n const isTablet = isMd\r\n const isDesktop = isLg || isXl || is2Xl || is3Xl || is4Xl || is5Xl\r\n const isSmall = isXs || isSm || isMd\r\n const isLarge = isLg || isXl || is2Xl || is3Xl || is4Xl || is5Xl\r\n const isUltraWide = is3Xl || is4Xl || is5Xl\r\n const is4K = is4Xl || is5Xl\r\n const is5K = is5Xl\r\n\r\n // Helpers de orientación\r\n const isPortrait = orientation === 'portrait'\r\n const isLandscape = orientation === 'landscape'\r\n\r\n // Funciones de comparación de breakpoints\r\n const isBreakpointUp = useCallback((bp: Breakpoint): boolean => {\r\n return getBreakpointIndex(breakpoint) >= getBreakpointIndex(bp)\r\n }, [breakpoint])\r\n\r\n const isBreakpointDown = useCallback((bp: Breakpoint): boolean => {\r\n return getBreakpointIndex(breakpoint) <= getBreakpointIndex(bp)\r\n }, [breakpoint])\r\n\r\n const isBreakpointBetween = useCallback((min: Breakpoint, max: Breakpoint): boolean => {\r\n const current = getBreakpointIndex(breakpoint)\r\n return current >= getBreakpointIndex(min) && current <= getBreakpointIndex(max)\r\n }, [breakpoint])\r\n\r\n // Funciones de comparación de ancho\r\n const isWidthUp = useCallback((minWidth: number): boolean => {\r\n return width >= minWidth\r\n }, [width])\r\n\r\n const isWidthDown = useCallback((maxWidth: number): boolean => {\r\n return width <= maxWidth\r\n }, [width])\r\n\r\n const isWidthBetween = useCallback((minWidth: number, maxWidth: number): boolean => {\r\n return width >= minWidth && width <= maxWidth\r\n }, [width])\r\n\r\n // Funciones de comparación de altura\r\n const isHeightUp = useCallback((minHeight: number): boolean => {\r\n return height >= minHeight\r\n }, [height])\r\n\r\n const isHeightDown = useCallback((maxHeight: number): boolean => {\r\n return height <= maxHeight\r\n }, [height])\r\n\r\n const isHeightBetween = useCallback((minHeight: number, maxHeight: number): boolean => {\r\n return height >= minHeight && height <= maxHeight\r\n }, [height])\r\n\r\n // Debug mode\r\n const debug = false\r\n\r\n return {\r\n // Estado básico\r\n breakpoint,\r\n width,\r\n height,\r\n orientation,\r\n \r\n // Helpers booleanos específicos\r\n isXs,\r\n isSm,\r\n isMd,\r\n isLg,\r\n isXl,\r\n is2Xl,\r\n is3Xl,\r\n is4Xl,\r\n is5Xl,\r\n \r\n // Helpers booleanos agrupados\r\n isMobile,\r\n isTablet,\r\n isDesktop,\r\n isSmall,\r\n isLarge,\r\n isUltraWide,\r\n is4K,\r\n is5K,\r\n \r\n // Helpers de orientación\r\n isPortrait,\r\n isLandscape,\r\n \r\n // Funciones de comparación\r\n isBreakpointUp,\r\n isBreakpointDown,\r\n isBreakpointBetween,\r\n isWidthUp,\r\n isWidthDown,\r\n isWidthBetween,\r\n isHeightUp,\r\n isHeightDown,\r\n isHeightBetween,\r\n \r\n // Debug\r\n debug\r\n }\r\n}\r\n","import { createContext, useContext } from 'react'\r\nimport type { ResponsiveState } from '../types/responsive'\r\nimport type { LayoutConfig } from '../config/layout'\r\n\r\nexport interface ResponsiveLayoutState {\r\n // Estado del sistema responsivo\r\n responsive: ResponsiveState\r\n \r\n // Estado del layout\r\n layout: {\r\n current: string\r\n config: LayoutConfig\r\n setLayout: (layout: string) => void\r\n }\r\n \r\n // Utilidades de layout\r\n layoutUtils: {\r\n getContainerClass: () => string\r\n getMainClass: () => string\r\n hasSidebar: () => boolean\r\n hasHeader: () => boolean\r\n hasFooter: () => boolean\r\n hasNavigation: () => boolean\r\n }\r\n}\r\n\r\nconst ResponsiveLayoutContext = createContext<ResponsiveLayoutState | undefined>(undefined)\r\n\r\nexport const useResponsiveLayoutContext = () => {\r\n const context = useContext(ResponsiveLayoutContext)\r\n if (!context) {\r\n throw new Error('useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider')\r\n }\r\n return context\r\n}\r\n\r\nexport { ResponsiveLayoutContext }\r\n","import React, { createContext, useContext, useState } from 'react'\r\n\r\ninterface SidebarContextType {\r\n sidebarOpen: boolean\r\n setSidebarOpen: (open: boolean) => void\r\n}\r\n\r\nconst SidebarContext = createContext<SidebarContextType | undefined>(undefined)\r\n\r\nexport const SidebarProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n const [sidebarOpen, setSidebarOpen] = useState(false)\r\n\r\n return (\r\n <SidebarContext.Provider value={{ sidebarOpen, setSidebarOpen }}>\r\n {children}\r\n </SidebarContext.Provider>\r\n )\r\n}\r\n\r\nexport const useSidebar = () => {\r\n const context = useContext(SidebarContext)\r\n if (!context) {\r\n throw new Error('useSidebar must be used within a SidebarProvider')\r\n }\r\n return context\r\n}\r\n","import React, { createContext, useContext, useState } from 'react'\r\n\r\ninterface NavigationContextType {\r\n currentPage: 'demo' | 'test'\r\n setCurrentPage: (page: 'demo' | 'test') => void\r\n}\r\n\r\nconst NavigationContext = createContext<NavigationContextType>({\r\n currentPage: 'test',\r\n setCurrentPage: () => {}\r\n})\r\n\r\nexport const useNavigation = () => useContext(NavigationContext)\r\n\r\ninterface NavigationProviderProps {\r\n children: React.ReactNode\r\n defaultPage?: 'demo' | 'test'\r\n}\r\n\r\nexport const NavigationProvider: React.FC<NavigationProviderProps> = ({ \r\n children, \r\n defaultPage = 'test' \r\n}) => {\r\n const [currentPage, setCurrentPage] = useState<'demo' | 'test'>(defaultPage)\r\n\r\n return (\r\n <NavigationContext.Provider value={{ currentPage, setCurrentPage }}>\r\n {children}\r\n </NavigationContext.Provider>\r\n )\r\n}\r\n\r\n","import { useResponsiveLayoutContext } from '../context'\r\n\r\nexport const useResponsiveLayout = () => {\r\n const context = useResponsiveLayoutContext()\r\n \r\n return {\r\n // Todo el sistema responsivo original\r\n ...context.responsive,\r\n \r\n // Sistema de layout\r\n layout: {\r\n current: context.layout.current,\r\n config: context.layout.config,\r\n setLayout: context.layout.setLayout,\r\n },\r\n \r\n // Utilidades de layout\r\n layoutUtils: context.layoutUtils,\r\n \r\n // Helpers específicos del layout\r\n isDefaultLayout: () => context.layout.current === 'default',\r\n isSidebarLayout: () => context.layout.current === 'sidebar',\r\n isDashboardLayout: () => context.layout.current === 'dashboard',\r\n isMinimalLayout: () => context.layout.current === 'minimal',\r\n \r\n // Grid helpers que usan el sistema auto-escalable\r\n grid: {\r\n auto: (minWidth = 'md') => `grid-cols-auto-${minWidth}`,\r\n responsive: (breakpoints: Record<string, number>) => {\r\n const classes: string[] = []\r\n Object.entries(breakpoints).forEach(([breakpoint, cols]) => {\r\n if (breakpoint === 'base') {\r\n classes.push(`grid-cols-${cols}`)\r\n } else {\r\n classes.push(`${breakpoint}:grid-cols-${cols}`)\r\n }\r\n })\r\n return classes.join(' ')\r\n },\r\n fixed: (cols: number) => `grid-cols-${cols}`,\r\n },\r\n \r\n // Spacing helpers que escalan automáticamente\r\n spacing: {\r\n container: context.layoutUtils.getContainerClass(),\r\n section: 'mb-6',\r\n card: 'p-6',\r\n gap: 'gap-4',\r\n },\r\n }\r\n}\r\n","import { useResponsiveLayout } from './index'\r\n\r\nexport const useLayout = () => {\r\n const responsiveLayout = useResponsiveLayout()\r\n \r\n return {\r\n // Layout actual\r\n current: responsiveLayout.layout.current,\r\n config: responsiveLayout.layout.config,\r\n setLayout: responsiveLayout.layout.setLayout,\r\n \r\n // Utilidades\r\n ...responsiveLayout.layoutUtils,\r\n \r\n // Helpers específicos\r\n isDefaultLayout: responsiveLayout.isDefaultLayout(),\r\n isSidebarLayout: responsiveLayout.isSidebarLayout(),\r\n isDashboardLayout: responsiveLayout.isDashboardLayout(),\r\n isMinimalLayout: responsiveLayout.isMinimalLayout(),\r\n \r\n // Grid helpers\r\n grid: responsiveLayout.grid,\r\n \r\n // Spacing helpers\r\n spacing: responsiveLayout.spacing,\r\n }\r\n}\r\n","export interface LayoutConfig {\r\n name: string\r\n description: string\r\n components: string[]\r\n spacing: string\r\n responsive: {\r\n mobile: string\r\n tablet: string\r\n desktop: string\r\n }\r\n}\r\n\r\nexport const LAYOUT_CONFIG: Record<string, LayoutConfig> = {\r\n default: {\r\n name: 'Default',\r\n description: 'Navbar arriba, body central, footer abajo',\r\n components: ['Navigation', 'Footer'],\r\n spacing: 'p-4 md:p-6 lg:p-8',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-8'\r\n }\r\n },\r\n sidebar: {\r\n name: 'Sidebar',\r\n description: 'Sidebar izquierda, contenido principal',\r\n components: ['Sidebar'],\r\n spacing: 'p-4 md:p-6',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-6'\r\n }\r\n },\r\n dashboard: {\r\n name: 'Dashboard',\r\n description: 'Header + Sidebar + Main + Footer',\r\n components: ['Header', 'Sidebar', 'Footer'],\r\n spacing: 'p-4 md:p-6 lg:p-8',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-8'\r\n }\r\n },\r\n minimal: {\r\n name: 'Minimal',\r\n description: 'Solo contenido, sin navegación',\r\n components: [],\r\n spacing: 'p-4 md:p-6',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-6'\r\n }\r\n }\r\n}\r\n\r\nexport const DEFAULT_LAYOUT = 'default'\r\nexport const AVAILABLE_LAYOUTS = Object.keys(LAYOUT_CONFIG)\r\n","import React, { useState, useEffect } from 'react'\r\nimport { ResponsiveProvider } from './index'\r\nimport { useResponsive } from '../hooks'\r\nimport { ResponsiveLayoutContext } from '../context'\r\nimport { LAYOUT_CONFIG, DEFAULT_LAYOUT } from '../config/layout'\r\nimport type { ResponsiveState } from '../types/responsive'\r\n\r\ninterface ResponsiveLayoutProviderProps {\r\n children: React.ReactNode\r\n defaultLayout?: string\r\n /**\r\n * Hook responsivo personalizado del proyecto consumidor.\r\n * Si se proporciona, se usará en lugar del hook interno del paquete.\r\n * Debe retornar un objeto compatible con ResponsiveState.\r\n */\r\n useResponsiveHook?: () => ResponsiveState\r\n}\r\n\r\ninterface ResponsiveLayoutProviderInnerProps {\r\n children: React.ReactNode\r\n defaultLayout: string\r\n useResponsiveHook?: () => ResponsiveState\r\n}\r\n\r\nconst ResponsiveLayoutProviderInner: React.FC<ResponsiveLayoutProviderInnerProps> = ({ \r\n children, \r\n defaultLayout,\r\n useResponsiveHook\r\n}) => {\r\n // Usar hook personalizado si se proporciona, sino usar el hook interno\r\n const internalResponsive = useResponsive()\r\n const customResponsive = useResponsiveHook?.()\r\n const responsive = customResponsive || internalResponsive\r\n \r\n const [currentLayout, setCurrentLayout] = useState(() => defaultLayout)\r\n \r\n // Asegurar que el layout se inicialice correctamente con el defaultLayout\r\n useEffect(() => {\r\n setCurrentLayout(defaultLayout)\r\n }, [defaultLayout])\r\n \r\n const layoutConfig = LAYOUT_CONFIG[currentLayout] || LAYOUT_CONFIG[DEFAULT_LAYOUT]\r\n \r\n const layoutUtils = {\r\n getContainerClass: () => {\r\n if (responsive.isMobile) return layoutConfig.responsive.mobile\r\n if (responsive.isTablet) return layoutConfig.responsive.tablet\r\n return layoutConfig.responsive.desktop\r\n },\r\n \r\n getMainClass: () => {\r\n const baseClass = 'min-h-screen bg-black'\r\n if (currentLayout === 'sidebar' || currentLayout === 'dashboard') {\r\n return `${baseClass} flex`\r\n }\r\n return baseClass\r\n },\r\n \r\n hasSidebar: () => currentLayout === 'sidebar' || currentLayout === 'dashboard',\r\n hasHeader: () => currentLayout === 'dashboard',\r\n hasFooter: () => currentLayout === 'default' || currentLayout === 'dashboard',\r\n hasNavigation: () => currentLayout === 'default',\r\n }\r\n \r\n const contextValue = {\r\n responsive,\r\n layout: {\r\n current: currentLayout,\r\n config: layoutConfig,\r\n setLayout: setCurrentLayout,\r\n },\r\n layoutUtils,\r\n }\r\n \r\n return (\r\n <ResponsiveLayoutContext.Provider value={contextValue}>\r\n {children}\r\n </ResponsiveLayoutContext.Provider>\r\n )\r\n}\r\n\r\nexport const ResponsiveLayoutProvider: React.FC<ResponsiveLayoutProviderProps> = ({ \r\n children, \r\n defaultLayout = DEFAULT_LAYOUT,\r\n useResponsiveHook\r\n}) => {\r\n return (\r\n <ResponsiveProvider>\r\n <ResponsiveLayoutProviderInner \r\n defaultLayout={defaultLayout}\r\n useResponsiveHook={useResponsiveHook}\r\n >\r\n {children}\r\n </ResponsiveLayoutProviderInner>\r\n </ResponsiveProvider>\r\n )\r\n}\r\n","import React from 'react'\r\nimport { useResponsiveLayout } from '../hooks'\r\nimport { \r\n DefaultLayout, \r\n SidebarLayout, \r\n DashboardLayout, \r\n MinimalLayout \r\n} from './index'\r\n\r\ninterface MainLayoutProps {\r\n children: React.ReactNode\r\n /**\r\n * Layout específico a usar. Si se proporciona, sobrescribe el layout del contexto.\r\n * Valores posibles: 'default', 'sidebar', 'dashboard', 'minimal'\r\n */\r\n layout?: 'default' | 'sidebar' | 'dashboard' | 'minimal'\r\n}\r\n\r\nconst MainLayout: React.FC<MainLayoutProps> = ({ children, layout: layoutProp }) => {\r\n const { layout } = useResponsiveLayout()\r\n \r\n // Usar el layout del prop si se proporciona, sino usar el del contexto\r\n const currentLayout = layoutProp || layout.current\r\n \r\n // Seleccionar el layout apropiado basado en el estado del contexto o prop\r\n const layouts = {\r\n default: DefaultLayout,\r\n sidebar: SidebarLayout,\r\n dashboard: DashboardLayout,\r\n minimal: MinimalLayout,\r\n }\r\n \r\n const LayoutComponent = layouts[currentLayout as keyof typeof layouts] || DefaultLayout\r\n \r\n return <LayoutComponent>{children}</LayoutComponent>\r\n}\r\n\r\nexport default MainLayout\r\n","import { useResponsiveLayout } from '../../hooks'\r\nimport { useNavigation, useSidebar } from '../../context'\r\n\r\nconst Header = () => {\r\n const { isMobile } = useResponsiveLayout()\r\n const { currentPage, setCurrentPage } = useNavigation()\r\n const { sidebarOpen, setSidebarOpen } = useSidebar()\r\n \r\n const menuItems = [\r\n { id: 'test', label: 'Suite de Test' },\r\n { id: 'demo', label: 'Demo' },\r\n ]\r\n \r\n return (\r\n <div className=\"sticky top-0 z-50\">\r\n <header className=\"bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative\">\r\n <div className=\"w-full\">\r\n <div className=\"px-4 py-4\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center space-x-2\">\r\n {/* Hamburger button para móvil - A LA IZQUIERDA */}\r\n {isMobile && (\r\n <button\r\n onClick={() => setSidebarOpen(true)}\r\n className=\"p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors\"\r\n >\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n )}\r\n \r\n <div className=\"flex items-center space-x-2\">\r\n <div className=\"w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse\"></div>\r\n <h3 className=\"text-base font-black text-white tracking-tight\">\r\n Sistema Responsivo\r\n </h3>\r\n </div>\r\n <div className=\"px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest\">\r\n DASHBOARD\r\n </div>\r\n </div>\r\n \r\n <div className=\"flex items-center space-x-2\">\r\n {/* Botones visibles solo en desktop */}\r\n {!isMobile && menuItems.map((page) => (\r\n <button\r\n key={page.id}\r\n onClick={() => setCurrentPage(page.id as 'demo' | 'test')}\r\n className={`px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${\r\n currentPage === page.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50' \r\n : 'bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600'\r\n }`}\r\n >\r\n {page.label}\r\n </button>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </header>\r\n\r\n {/* Sidebar móvil desplegable */}\r\n {isMobile && sidebarOpen && (\r\n <div className=\"fixed inset-0 z-40 bg-black/50\" onClick={() => setSidebarOpen(false)}>\r\n <div className=\"fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20\">\r\n <div className=\"p-6 flex flex-col h-full pt-20\">\r\n {/* Logo */}\r\n <div className=\"flex items-center space-x-3 mb-8\">\r\n <div className=\"w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">RS</span>\r\n </div>\r\n <span className=\"text-white font-bold text-lg\">Sistema Responsivo</span>\r\n </div>\r\n \r\n {/* Navigation */}\r\n <nav className=\"space-y-2\">\r\n {menuItems.map((item) => (\r\n <button\r\n key={item.id}\r\n onClick={() => {\r\n setCurrentPage(item.id as 'demo' | 'test')\r\n setSidebarOpen(false)\r\n }}\r\n className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${\r\n currentPage === item.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' \r\n : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'\r\n }`}\r\n >\r\n <span className=\"font-medium\">{item.label}</span>\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n )\r\n}\r\n\r\nexport default Header\r\n","import { useResponsiveLayout } from '../../hooks'\r\nimport { useSidebar } from '../../context'\r\n\r\nconst Sidebar = () => {\r\n const { isMobile, isTablet } = useResponsiveLayout()\r\n const { sidebarOpen, setSidebarOpen } = useSidebar()\r\n \r\n const menuItems = [\r\n { id: 'home', label: 'Inicio' },\r\n { id: 'about', label: 'Acerca' },\r\n { id: 'contact', label: 'Contacto' },\r\n ]\r\n \r\n return (\r\n <>\r\n {isMobile && (\r\n <button\r\n onClick={() => setSidebarOpen(true)}\r\n className=\"fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800 bg-gray-900 border border-gray-700\"\r\n >\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n )}\r\n\r\n <aside className={`bg-gray-900 border-r border-gray-800 ${isMobile ? 'hidden' : 'w-64 flex-shrink-0'} ${isTablet ? 'w-56' : 'w-64'}`}>\r\n <div className=\"p-6 flex flex-col h-full\">\r\n <div className=\"flex items-center space-x-3 mb-8\">\r\n <div className=\"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">LO</span>\r\n </div>\r\n <span className=\"text-white font-bold text-lg\">Tu Aplicación</span>\r\n </div>\r\n \r\n <nav className=\"space-y-2\">\r\n {menuItems.map((item) => (\r\n <button\r\n key={item.id}\r\n className=\"w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800\"\r\n >\r\n <span className=\"font-medium\">{item.label}</span>\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </aside>\r\n\r\n {isMobile && sidebarOpen && (\r\n <div className=\"fixed inset-0 z-40 bg-black/50\" onClick={() => setSidebarOpen(false)}>\r\n <div className=\"fixed top-0 left-0 w-64 h-full bg-gray-900 border-r border-gray-800\">\r\n <div className=\"p-6 flex flex-col h-full pt-20\">\r\n <div className=\"flex items-center space-x-3 mb-8\">\r\n <div className=\"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">LO</span>\r\n </div>\r\n <span className=\"text-white font-bold text-lg\">Tu Aplicación</span>\r\n </div>\r\n \r\n <nav className=\"space-y-2\">\r\n {menuItems.map((item) => (\r\n <button\r\n key={item.id}\r\n onClick={() => setSidebarOpen(false)}\r\n className=\"w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800\"\r\n >\r\n <span className=\"font-medium\">{item.label}</span>\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </>\r\n )\r\n}\r\n\r\nexport default Sidebar\r\n","const Footer = () => {\r\n return (\r\n <footer className=\"bg-gray-900 border-t border-gray-800\">\r\n <div className=\"px-4 py-6\">\r\n <div className=\"max-w-7xl mx-auto text-center\">\r\n <p className=\"text-gray-400 text-sm\">\r\n © {new Date().getFullYear()} Tu Aplicación. Todos los derechos reservados.\r\n </p>\r\n </div>\r\n </div>\r\n </footer>\r\n )\r\n}\r\n\r\nexport default Footer\r\n","import { useResponsiveLayout } from '../../hooks'\r\n\r\nconst Navigation = () => {\r\n const { isMobile } = useResponsiveLayout()\r\n \r\n return (\r\n <nav className=\"sticky top-0 z-50 bg-gray-900 border-b border-gray-800\">\r\n <div className=\"px-4 py-4\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center space-x-3\">\r\n <div className=\"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">LO</span>\r\n </div>\r\n <h1 className=\"text-white font-semibold text-lg\">Tu Aplicación</h1>\r\n </div>\r\n \r\n {isMobile && (\r\n <button className=\"p-2 text-gray-400 hover:text-white\">\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n )}\r\n </div>\r\n </div>\r\n </nav>\r\n )\r\n}\r\n\r\nexport default Navigation\r\n","import React from 'react'\r\nimport { Navigation, Footer } from '../components/layout'\r\n\r\ninterface DefaultLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {\r\n return (\r\n <div className=\"min-h-screen bg-gray-50 flex flex-col\">\r\n {/* Navigation fijo arriba */}\r\n <Navigation />\r\n \r\n {/* Main content */}\r\n <main className=\"flex-1\">\r\n {children}\r\n </main>\r\n \r\n {/* Footer fijo abajo */}\r\n <Footer />\r\n </div>\r\n )\r\n}\r\n\r\nexport default DefaultLayout\r\n","import React from 'react'\r\nimport { Sidebar } from '../components/layout'\r\nimport { SidebarProvider } from '../context'\r\n\r\ninterface SidebarLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst SidebarLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n return (\r\n <div className=\"min-h-screen bg-gray-50 flex\">\r\n {/* Sidebar */}\r\n <Sidebar />\r\n \r\n {/* Main content */}\r\n <main className=\"flex-1 overflow-auto\">\r\n {children}\r\n </main>\r\n </div>\r\n )\r\n}\r\n\r\nconst SidebarLayout: React.FC<SidebarLayoutProps> = ({ children }) => {\r\n return (\r\n <SidebarProvider>\r\n <SidebarLayoutContent>{children}</SidebarLayoutContent>\r\n </SidebarProvider>\r\n )\r\n}\r\n\r\nexport default SidebarLayout\r\n","import React from 'react'\r\nimport { Sidebar, Footer } from '../components/layout'\r\nimport { SidebarProvider } from '../context'\r\n\r\ninterface DashboardLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst DashboardLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n return (\r\n <div className=\"min-h-screen bg-gray-50 flex flex-col\">\r\n {/* Content area con sidebar */}\r\n <div className=\"flex flex-1\">\r\n {/* Sidebar */}\r\n <Sidebar />\r\n \r\n {/* Main content */}\r\n <main className=\"flex-1 overflow-auto flex flex-col\">\r\n <div className=\"flex-1\">\r\n {children}\r\n </div>\r\n \r\n {/* Footer */}\r\n <Footer />\r\n </main>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\nconst DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {\r\n return (\r\n <SidebarProvider>\r\n <DashboardLayoutContent>{children}</DashboardLayoutContent>\r\n </SidebarProvider>\r\n )\r\n}\r\n\r\nexport default DashboardLayout\r\n","import React from 'react'\r\n\r\ninterface MinimalLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst MinimalLayout: React.FC<MinimalLayoutProps> = ({ children }) => {\r\n return (\r\n <div className=\"min-h-screen bg-gray-50\">\r\n <main>\r\n {children}\r\n </main>\r\n </div>\r\n )\r\n}\r\n\r\nexport default MinimalLayout\r\n","import { useLayout } from '../hooks'\r\nimport { LAYOUT_CONFIG } from '../config/layout'\r\n\r\ninterface LayoutSwitcherProps {\r\n compact?: boolean\r\n}\r\n\r\nconst LayoutSwitcher = ({ compact = false }: LayoutSwitcherProps) => {\r\n const { current, setLayout, config } = useLayout()\r\n \r\n if (compact) {\r\n return (\r\n <div className=\"bg-black/50 rounded-lg p-3 border border-gray-700\">\r\n <div className=\"text-xs text-gray-500 mb-2\">Layout:</div>\r\n <select\r\n value={current}\r\n onChange={(e) => setLayout(e.target.value)}\r\n className=\"w-full bg-gray-800 text-white text-sm p-2 rounded border border-gray-600 focus:ring-1 focus:ring-cyan-500 focus:border-transparent\"\r\n >\r\n {Object.entries(LAYOUT_CONFIG).map(([key, layoutConfig]) => (\r\n <option key={key} value={key}>\r\n {layoutConfig.name}\r\n </option>\r\n ))}\r\n </select>\r\n </div>\r\n )\r\n }\r\n \r\n return (\r\n <div className=\"bg-black/50 backdrop-blur-sm rounded-lg p-4 border border-cyan-500/30\">\r\n <h3 className=\"text-white font-semibold mb-3\">Cambiar Layout</h3>\r\n \r\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3\">\r\n {Object.entries(LAYOUT_CONFIG).map(([key, layoutConfig]) => (\r\n <button\r\n key={key}\r\n onClick={() => setLayout(key)}\r\n className={`\r\n p-4 rounded-lg border transition-all text-left\r\n ${current === key \r\n ? 'border-cyan-500 bg-cyan-500/10 text-cyan-400' \r\n : 'border-gray-700 bg-black/30 text-gray-300 hover:border-gray-600'\r\n }\r\n `}\r\n >\r\n <div className=\"font-semibold mb-1\">{layoutConfig.name}</div>\r\n <div className=\"text-xs opacity-75\">{layoutConfig.description}</div>\r\n </button>\r\n ))}\r\n </div>\r\n \r\n <div className=\"mt-4 p-3 bg-gray-900/50 rounded-lg\">\r\n <div className=\"text-xs text-gray-500 mb-1\">Layout Actual:</div>\r\n <div className=\"text-sm text-cyan-400 font-medium\">{config.name}</div>\r\n <div className=\"text-xs text-gray-400\">{config.description}</div>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\nexport default LayoutSwitcher\r\n"],"names":["ResponsiveProvider","children","_debug","DEFAULT_BREAKPOINTS","getCurrentBreakpoint","width","getBreakpointIndex","breakpoint","getBreakpointValue","debounce","func","wait","timeout","args","getOrientation","height","useResponsive","dimensions","setDimensions","useState","updateDimensions","useCallback","debouncedUpdateDimensions","useMemo","useEffect","orientation","isXs","isSm","isMd","isLg","isXl","is2Xl","is3Xl","is4Xl","is5Xl","isMobile","isTablet","isDesktop","isSmall","isLarge","isUltraWide","is4K","is5K","isPortrait","isLandscape","isBreakpointUp","bp","isBreakpointDown","isBreakpointBetween","min","max","current","isWidthUp","minWidth","isWidthDown","maxWidth","isWidthBetween","isHeightUp","minHeight","isHeightDown","maxHeight","isHeightBetween","ResponsiveLayoutContext","createContext","useResponsiveLayoutContext","context","useContext","SidebarContext","SidebarProvider","sidebarOpen","setSidebarOpen","jsx","useSidebar","NavigationContext","useNavigation","NavigationProvider","defaultPage","currentPage","setCurrentPage","useResponsiveLayout","breakpoints","classes","cols","useLayout","responsiveLayout","LAYOUT_CONFIG","DEFAULT_LAYOUT","AVAILABLE_LAYOUTS","ResponsiveLayoutProviderInner","defaultLayout","useResponsiveHook","internalResponsive","responsive","currentLayout","setCurrentLayout","layoutConfig","contextValue","baseClass","ResponsiveLayoutProvider","MainLayout","layoutProp","layout","LayoutComponent","DefaultLayout","SidebarLayout","DashboardLayout","MinimalLayout","Header","menuItems","jsxs","page","item","Sidebar","Fragment","Footer","Navigation","SidebarLayoutContent","DashboardLayoutContent","LayoutSwitcher","compact","setLayout","config","e","key"],"mappings":"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"}
1
+ {"version":3,"file":"responsive-system.mjs","sources":["../src/providers/ResponsiveProvider.tsx","../src/constants/breakpoints.ts","../src/hooks/useResponsive.ts","../src/context/ResponsiveLayoutContext.tsx","../src/context/SidebarContext.tsx","../src/context/NavigationContext.tsx","../src/hooks/useResponsiveLayout.ts","../src/hooks/useLayout.ts","../src/config/layout.ts","../src/providers/ResponsiveLayoutProvider.tsx","../src/layouts/MainLayout.tsx","../src/components/layout/Header.tsx","../src/components/layout/Sidebar.tsx","../src/components/layout/Footer.tsx","../src/components/layout/Navigation.tsx","../src/layouts/DefaultLayout.tsx","../src/layouts/SidebarLayout.tsx","../src/layouts/DashboardLayout.tsx","../src/layouts/MinimalLayout.tsx","../src/components/LayoutSwitcher.tsx"],"sourcesContent":["import React from 'react'\r\nimport type { ResponsiveProviderProps } from '../types/responsive'\r\n\r\n/**\r\n * ResponsiveProvider - Provider simplificado para el sistema responsive\r\n * \r\n * Nota: Con el sistema de auto-scaling mediante plugin de Tailwind,\r\n * este Provider es OPCIONAL y solo se necesita si quieres acceder\r\n * al hook useResponsive() en tus componentes.\r\n */\r\nexport const ResponsiveProvider: React.FC<ResponsiveProviderProps> = ({\r\n children,\r\n debug: _debug = false\r\n}) => {\r\n // El Provider ahora solo envuelve children sin context\r\n // El auto-scaling funciona mediante el plugin de Tailwind\r\n return <>{children}</>\r\n}\r\n","import type { Breakpoint } from '../types/responsive'\r\n\r\n/**\r\n * Default breakpoint values\r\n * Deben coincidir con tailwind.config.js\r\n */\r\nexport const DEFAULT_BREAKPOINTS: Record<Breakpoint, number> = {\r\n xs: 475,\r\n sm: 640,\r\n md: 768,\r\n lg: 1024,\r\n xl: 1280,\r\n '2xl': 1536,\r\n '3xl': 1920,\r\n '4xl': 2560,\r\n '5xl': 3840\r\n}\r\n\r\n/**\r\n * Get current breakpoint based on window width\r\n */\r\nexport const getCurrentBreakpoint = (width: number): Breakpoint => {\r\n if (width >= DEFAULT_BREAKPOINTS['5xl']) return '5xl'\r\n if (width >= DEFAULT_BREAKPOINTS['4xl']) return '4xl'\r\n if (width >= DEFAULT_BREAKPOINTS['3xl']) return '3xl'\r\n if (width >= DEFAULT_BREAKPOINTS['2xl']) return '2xl'\r\n if (width >= DEFAULT_BREAKPOINTS.xl) return 'xl'\r\n if (width >= DEFAULT_BREAKPOINTS.lg) return 'lg'\r\n if (width >= DEFAULT_BREAKPOINTS.md) return 'md'\r\n if (width >= DEFAULT_BREAKPOINTS.sm) return 'sm'\r\n return 'xs'\r\n}\r\n\r\n/**\r\n * Get breakpoint index (for comparisons)\r\n */\r\nexport const getBreakpointIndex = (breakpoint: Breakpoint): number => {\r\n const breakpoints: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl']\r\n return breakpoints.indexOf(breakpoint)\r\n}\r\n\r\n/**\r\n * Get breakpoint value in pixels\r\n */\r\nexport const getBreakpointValue = (breakpoint: Breakpoint): number => {\r\n return DEFAULT_BREAKPOINTS[breakpoint]\r\n}\r\n\r\n","import { useState, useEffect, useCallback, useMemo } from 'react'\r\nimport type { \r\n ResponsiveState, \r\n Breakpoint\r\n} from '../types/responsive'\r\nimport { \r\n getCurrentBreakpoint,\r\n getBreakpointIndex\r\n} from '../constants/breakpoints'\r\n\r\n/**\r\n * Debounce utility\r\n */\r\nfunction debounce<T extends (...args: unknown[]) => void>(\r\n func: T,\r\n wait: number\r\n): (...args: Parameters<T>) => void {\r\n let timeout: ReturnType<typeof setTimeout> | null = null\r\n return (...args: Parameters<T>) => {\r\n if (timeout) clearTimeout(timeout)\r\n timeout = setTimeout(() => func(...args), wait)\r\n }\r\n}\r\n\r\n/**\r\n * Get orientation based on dimensions\r\n */\r\nfunction getOrientation(width: number, height: number): 'landscape' | 'portrait' {\r\n return width >= height ? 'landscape' : 'portrait'\r\n}\r\n\r\n/**\r\n * Hook principal useResponsive\r\n * Provee información sobre el breakpoint actual y helpers para responsive\r\n */\r\nexport const useResponsive = (): ResponsiveState => {\r\n const [dimensions, setDimensions] = useState({\r\n width: typeof window !== 'undefined' ? window.innerWidth : 1024,\r\n height: typeof window !== 'undefined' ? window.innerHeight : 768\r\n })\r\n\r\n // Función para actualizar dimensiones\r\n const updateDimensions = useCallback(() => {\r\n setDimensions({\r\n width: window.innerWidth,\r\n height: window.innerHeight\r\n })\r\n }, [])\r\n\r\n // Debounced update para optimizar performance\r\n const debouncedUpdateDimensions = useMemo(\r\n () => debounce(updateDimensions, 100),\r\n [updateDimensions]\r\n )\r\n\r\n // Effect para escuchar cambios de tamaño\r\n useEffect(() => {\r\n if (typeof window === 'undefined') return\r\n\r\n window.addEventListener('resize', debouncedUpdateDimensions)\r\n \r\n return () => {\r\n window.removeEventListener('resize', debouncedUpdateDimensions)\r\n }\r\n }, [debouncedUpdateDimensions])\r\n\r\n const { width, height } = dimensions\r\n\r\n // Calcular breakpoint actual\r\n const breakpoint = useMemo(() => getCurrentBreakpoint(width), [width])\r\n \r\n // Calcular orientación\r\n const orientation = useMemo(() => getOrientation(width, height), [width, height])\r\n\r\n // Helpers booleanos por breakpoint específico\r\n const isXs = breakpoint === 'xs'\r\n const isSm = breakpoint === 'sm'\r\n const isMd = breakpoint === 'md'\r\n const isLg = breakpoint === 'lg'\r\n const isXl = breakpoint === 'xl'\r\n const is2Xl = breakpoint === '2xl'\r\n const is3Xl = breakpoint === '3xl'\r\n const is4Xl = breakpoint === '4xl'\r\n const is5Xl = breakpoint === '5xl'\r\n\r\n // Helpers booleanos agrupados\r\n const isMobile = isXs || isSm\r\n const isTablet = isMd\r\n const isDesktop = isLg || isXl || is2Xl || is3Xl || is4Xl || is5Xl\r\n const isSmall = isXs || isSm || isMd\r\n const isLarge = isLg || isXl || is2Xl || is3Xl || is4Xl || is5Xl\r\n const isUltraWide = is3Xl || is4Xl || is5Xl\r\n const is4K = is4Xl || is5Xl\r\n const is5K = is5Xl\r\n\r\n // Helpers de orientación\r\n const isPortrait = orientation === 'portrait'\r\n const isLandscape = orientation === 'landscape'\r\n\r\n // Funciones de comparación de breakpoints\r\n const isBreakpointUp = useCallback((bp: Breakpoint): boolean => {\r\n return getBreakpointIndex(breakpoint) >= getBreakpointIndex(bp)\r\n }, [breakpoint])\r\n\r\n const isBreakpointDown = useCallback((bp: Breakpoint): boolean => {\r\n return getBreakpointIndex(breakpoint) <= getBreakpointIndex(bp)\r\n }, [breakpoint])\r\n\r\n const isBreakpointBetween = useCallback((min: Breakpoint, max: Breakpoint): boolean => {\r\n const current = getBreakpointIndex(breakpoint)\r\n return current >= getBreakpointIndex(min) && current <= getBreakpointIndex(max)\r\n }, [breakpoint])\r\n\r\n // Funciones de comparación de ancho\r\n const isWidthUp = useCallback((minWidth: number): boolean => {\r\n return width >= minWidth\r\n }, [width])\r\n\r\n const isWidthDown = useCallback((maxWidth: number): boolean => {\r\n return width <= maxWidth\r\n }, [width])\r\n\r\n const isWidthBetween = useCallback((minWidth: number, maxWidth: number): boolean => {\r\n return width >= minWidth && width <= maxWidth\r\n }, [width])\r\n\r\n // Funciones de comparación de altura\r\n const isHeightUp = useCallback((minHeight: number): boolean => {\r\n return height >= minHeight\r\n }, [height])\r\n\r\n const isHeightDown = useCallback((maxHeight: number): boolean => {\r\n return height <= maxHeight\r\n }, [height])\r\n\r\n const isHeightBetween = useCallback((minHeight: number, maxHeight: number): boolean => {\r\n return height >= minHeight && height <= maxHeight\r\n }, [height])\r\n\r\n // Debug mode\r\n const debug = false\r\n\r\n return {\r\n // Estado básico\r\n breakpoint,\r\n width,\r\n height,\r\n orientation,\r\n \r\n // Helpers booleanos específicos\r\n isXs,\r\n isSm,\r\n isMd,\r\n isLg,\r\n isXl,\r\n is2Xl,\r\n is3Xl,\r\n is4Xl,\r\n is5Xl,\r\n \r\n // Helpers booleanos agrupados\r\n isMobile,\r\n isTablet,\r\n isDesktop,\r\n isSmall,\r\n isLarge,\r\n isUltraWide,\r\n is4K,\r\n is5K,\r\n \r\n // Helpers de orientación\r\n isPortrait,\r\n isLandscape,\r\n \r\n // Funciones de comparación\r\n isBreakpointUp,\r\n isBreakpointDown,\r\n isBreakpointBetween,\r\n isWidthUp,\r\n isWidthDown,\r\n isWidthBetween,\r\n isHeightUp,\r\n isHeightDown,\r\n isHeightBetween,\r\n \r\n // Debug\r\n debug\r\n }\r\n}\r\n","import { createContext, useContext } from 'react'\r\nimport type { ResponsiveState } from '../types/responsive'\r\nimport type { LayoutConfig } from '../config/layout'\r\n\r\nexport interface ResponsiveLayoutState {\r\n // Estado del sistema responsivo\r\n responsive: ResponsiveState\r\n \r\n // Estado del layout\r\n layout: {\r\n current: string\r\n config: LayoutConfig\r\n setLayout: (layout: string) => void\r\n }\r\n \r\n // Utilidades de layout\r\n layoutUtils: {\r\n getContainerClass: () => string\r\n getMainClass: () => string\r\n hasSidebar: () => boolean\r\n hasHeader: () => boolean\r\n hasFooter: () => boolean\r\n hasNavigation: () => boolean\r\n }\r\n}\r\n\r\nconst ResponsiveLayoutContext = createContext<ResponsiveLayoutState | undefined>(undefined)\r\n\r\nexport const useResponsiveLayoutContext = () => {\r\n const context = useContext(ResponsiveLayoutContext)\r\n if (!context) {\r\n throw new Error('useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider')\r\n }\r\n return context\r\n}\r\n\r\nexport { ResponsiveLayoutContext }\r\n","import React, { createContext, useContext, useState } from 'react'\r\n\r\ninterface SidebarContextType {\r\n sidebarOpen: boolean\r\n setSidebarOpen: (open: boolean) => void\r\n}\r\n\r\nconst SidebarContext = createContext<SidebarContextType | undefined>(undefined)\r\n\r\nexport const SidebarProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n const [sidebarOpen, setSidebarOpen] = useState(false)\r\n\r\n return (\r\n <SidebarContext.Provider value={{ sidebarOpen, setSidebarOpen }}>\r\n {children}\r\n </SidebarContext.Provider>\r\n )\r\n}\r\n\r\nexport const useSidebar = () => {\r\n const context = useContext(SidebarContext)\r\n if (!context) {\r\n throw new Error('useSidebar must be used within a SidebarProvider')\r\n }\r\n return context\r\n}\r\n","import React, { createContext, useContext, useState } from 'react'\r\n\r\ninterface NavigationContextType {\r\n currentPage: 'demo' | 'test'\r\n setCurrentPage: (page: 'demo' | 'test') => void\r\n}\r\n\r\nconst NavigationContext = createContext<NavigationContextType>({\r\n currentPage: 'test',\r\n setCurrentPage: () => {}\r\n})\r\n\r\nexport const useNavigation = () => useContext(NavigationContext)\r\n\r\ninterface NavigationProviderProps {\r\n children: React.ReactNode\r\n defaultPage?: 'demo' | 'test'\r\n}\r\n\r\nexport const NavigationProvider: React.FC<NavigationProviderProps> = ({ \r\n children, \r\n defaultPage = 'test' \r\n}) => {\r\n const [currentPage, setCurrentPage] = useState<'demo' | 'test'>(defaultPage)\r\n\r\n return (\r\n <NavigationContext.Provider value={{ currentPage, setCurrentPage }}>\r\n {children}\r\n </NavigationContext.Provider>\r\n )\r\n}\r\n\r\n","import { useResponsiveLayoutContext } from '../context'\r\n\r\nexport const useResponsiveLayout = () => {\r\n const context = useResponsiveLayoutContext()\r\n \r\n return {\r\n // Todo el sistema responsivo original\r\n ...context.responsive,\r\n \r\n // Sistema de layout\r\n layout: {\r\n current: context.layout.current,\r\n config: context.layout.config,\r\n setLayout: context.layout.setLayout,\r\n },\r\n \r\n // Utilidades de layout\r\n layoutUtils: context.layoutUtils,\r\n \r\n // Helpers específicos del layout\r\n isDefaultLayout: () => context.layout.current === 'default',\r\n isSidebarLayout: () => context.layout.current === 'sidebar',\r\n isDashboardLayout: () => context.layout.current === 'dashboard',\r\n isMinimalLayout: () => context.layout.current === 'minimal',\r\n \r\n // Grid helpers que usan el sistema auto-escalable\r\n grid: {\r\n auto: (minWidth = 'md') => `grid-cols-auto-${minWidth}`,\r\n responsive: (breakpoints: Record<string, number>) => {\r\n const classes: string[] = []\r\n Object.entries(breakpoints).forEach(([breakpoint, cols]) => {\r\n if (breakpoint === 'base') {\r\n classes.push(`grid-cols-${cols}`)\r\n } else {\r\n classes.push(`${breakpoint}:grid-cols-${cols}`)\r\n }\r\n })\r\n return classes.join(' ')\r\n },\r\n fixed: (cols: number) => `grid-cols-${cols}`,\r\n },\r\n \r\n // Spacing helpers que escalan automáticamente\r\n spacing: {\r\n container: context.layoutUtils.getContainerClass(),\r\n section: 'mb-6',\r\n card: 'p-6',\r\n gap: 'gap-4',\r\n },\r\n }\r\n}\r\n","import { useResponsiveLayout } from './index'\r\n\r\nexport const useLayout = () => {\r\n const responsiveLayout = useResponsiveLayout()\r\n \r\n return {\r\n // Layout actual\r\n current: responsiveLayout.layout.current,\r\n config: responsiveLayout.layout.config,\r\n setLayout: responsiveLayout.layout.setLayout,\r\n \r\n // Utilidades\r\n ...responsiveLayout.layoutUtils,\r\n \r\n // Helpers específicos\r\n isDefaultLayout: responsiveLayout.isDefaultLayout(),\r\n isSidebarLayout: responsiveLayout.isSidebarLayout(),\r\n isDashboardLayout: responsiveLayout.isDashboardLayout(),\r\n isMinimalLayout: responsiveLayout.isMinimalLayout(),\r\n \r\n // Grid helpers\r\n grid: responsiveLayout.grid,\r\n \r\n // Spacing helpers\r\n spacing: responsiveLayout.spacing,\r\n }\r\n}\r\n","export interface LayoutConfig {\r\n name: string\r\n description: string\r\n components: string[]\r\n spacing: string\r\n responsive: {\r\n mobile: string\r\n tablet: string\r\n desktop: string\r\n }\r\n}\r\n\r\nexport const LAYOUT_CONFIG: Record<string, LayoutConfig> = {\r\n default: {\r\n name: 'Default',\r\n description: 'Navbar arriba, body central, footer abajo',\r\n components: ['Navigation', 'Footer'],\r\n spacing: 'p-4 md:p-6 lg:p-8',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-8'\r\n }\r\n },\r\n sidebar: {\r\n name: 'Sidebar',\r\n description: 'Sidebar izquierda, contenido principal',\r\n components: ['Sidebar'],\r\n spacing: 'p-4 md:p-6',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-6'\r\n }\r\n },\r\n dashboard: {\r\n name: 'Dashboard',\r\n description: 'Header + Sidebar + Main + Footer',\r\n components: ['Header', 'Sidebar', 'Footer'],\r\n spacing: 'p-4 md:p-6 lg:p-8',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-8'\r\n }\r\n },\r\n minimal: {\r\n name: 'Minimal',\r\n description: 'Solo contenido, sin navegación',\r\n components: [],\r\n spacing: 'p-4 md:p-6',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-6'\r\n }\r\n }\r\n}\r\n\r\nexport const DEFAULT_LAYOUT = 'default'\r\nexport const AVAILABLE_LAYOUTS = Object.keys(LAYOUT_CONFIG)\r\n","import React, { useState, useEffect } from 'react'\r\nimport { ResponsiveProvider } from './index'\r\nimport { useResponsive } from '../hooks'\r\nimport { ResponsiveLayoutContext } from '../context'\r\nimport { LAYOUT_CONFIG, DEFAULT_LAYOUT } from '../config/layout'\r\nimport type { ResponsiveState } from '../types/responsive'\r\n\r\ninterface ResponsiveLayoutProviderProps {\r\n children: React.ReactNode\r\n defaultLayout?: string\r\n /**\r\n * Hook responsivo personalizado del proyecto consumidor.\r\n * Si se proporciona, se usará en lugar del hook interno del paquete.\r\n * Debe retornar un objeto compatible con ResponsiveState.\r\n */\r\n useResponsiveHook?: () => ResponsiveState\r\n}\r\n\r\ninterface ResponsiveLayoutProviderInnerProps {\r\n children: React.ReactNode\r\n defaultLayout: string\r\n useResponsiveHook?: () => ResponsiveState\r\n}\r\n\r\nconst ResponsiveLayoutProviderInner: React.FC<ResponsiveLayoutProviderInnerProps> = ({ \r\n children, \r\n defaultLayout,\r\n useResponsiveHook\r\n}) => {\r\n // Usar hook personalizado si se proporciona, sino usar el hook interno\r\n const internalResponsive = useResponsive()\r\n const customResponsive = useResponsiveHook?.()\r\n const responsive = customResponsive || internalResponsive\r\n \r\n // Inicializar el estado con el defaultLayout, asegurando que sea válido\r\n const validLayout = (defaultLayout && LAYOUT_CONFIG[defaultLayout]) ? defaultLayout : DEFAULT_LAYOUT\r\n const [currentLayout, setCurrentLayout] = useState(validLayout)\r\n \r\n // Sincronizar si el defaultLayout cambia (aunque no debería en la mayoría de casos)\r\n useEffect(() => {\r\n const newValidLayout = (defaultLayout && LAYOUT_CONFIG[defaultLayout]) ? defaultLayout : DEFAULT_LAYOUT\r\n if (newValidLayout !== currentLayout) {\r\n setCurrentLayout(newValidLayout)\r\n }\r\n }, [defaultLayout, currentLayout])\r\n \r\n const layoutConfig = LAYOUT_CONFIG[currentLayout] || LAYOUT_CONFIG[DEFAULT_LAYOUT]\r\n \r\n const layoutUtils = {\r\n getContainerClass: () => {\r\n if (responsive.isMobile) return layoutConfig.responsive.mobile\r\n if (responsive.isTablet) return layoutConfig.responsive.tablet\r\n return layoutConfig.responsive.desktop\r\n },\r\n \r\n getMainClass: () => {\r\n const baseClass = 'min-h-screen bg-black'\r\n if (currentLayout === 'sidebar' || currentLayout === 'dashboard') {\r\n return `${baseClass} flex`\r\n }\r\n return baseClass\r\n },\r\n \r\n hasSidebar: () => currentLayout === 'sidebar' || currentLayout === 'dashboard',\r\n hasHeader: () => currentLayout === 'dashboard',\r\n hasFooter: () => currentLayout === 'default' || currentLayout === 'dashboard',\r\n hasNavigation: () => currentLayout === 'default',\r\n }\r\n \r\n const contextValue = {\r\n responsive,\r\n layout: {\r\n current: currentLayout,\r\n config: layoutConfig,\r\n setLayout: setCurrentLayout,\r\n },\r\n layoutUtils,\r\n }\r\n \r\n return (\r\n <ResponsiveLayoutContext.Provider value={contextValue}>\r\n {children}\r\n </ResponsiveLayoutContext.Provider>\r\n )\r\n}\r\n\r\nexport const ResponsiveLayoutProvider: React.FC<ResponsiveLayoutProviderProps> = ({ \r\n children, \r\n defaultLayout = DEFAULT_LAYOUT,\r\n useResponsiveHook\r\n}) => {\r\n return (\r\n <ResponsiveProvider>\r\n <ResponsiveLayoutProviderInner \r\n defaultLayout={defaultLayout}\r\n useResponsiveHook={useResponsiveHook}\r\n >\r\n {children}\r\n </ResponsiveLayoutProviderInner>\r\n </ResponsiveProvider>\r\n )\r\n}\r\n","import React from 'react'\r\nimport { useResponsiveLayout } from '../hooks'\r\nimport { \r\n DefaultLayout, \r\n SidebarLayout, \r\n DashboardLayout, \r\n MinimalLayout \r\n} from './index'\r\n\r\ninterface MainLayoutProps {\r\n children: React.ReactNode\r\n /**\r\n * Layout específico a usar. Si se proporciona, sobrescribe el layout del contexto.\r\n * Valores posibles: 'default', 'sidebar', 'dashboard', 'minimal'\r\n */\r\n layout?: 'default' | 'sidebar' | 'dashboard' | 'minimal'\r\n}\r\n\r\nconst MainLayout: React.FC<MainLayoutProps> = ({ children, layout: layoutProp }) => {\r\n const { layout } = useResponsiveLayout()\r\n \r\n // Usar el layout del prop si se proporciona, sino usar el del contexto\r\n const currentLayout = layoutProp || layout.current\r\n \r\n // Seleccionar el layout apropiado basado en el estado del contexto o prop\r\n const layouts = {\r\n default: DefaultLayout,\r\n sidebar: SidebarLayout,\r\n dashboard: DashboardLayout,\r\n minimal: MinimalLayout,\r\n }\r\n \r\n const LayoutComponent = layouts[currentLayout as keyof typeof layouts] || DefaultLayout\r\n \r\n return <LayoutComponent>{children}</LayoutComponent>\r\n}\r\n\r\nexport default MainLayout\r\n","import { useResponsiveLayout } from '../../hooks'\r\nimport { useNavigation, useSidebar } from '../../context'\r\n\r\nconst Header = () => {\r\n const { isMobile } = useResponsiveLayout()\r\n const { currentPage, setCurrentPage } = useNavigation()\r\n const { sidebarOpen, setSidebarOpen } = useSidebar()\r\n \r\n const menuItems = [\r\n { id: 'test', label: 'Suite de Test' },\r\n { id: 'demo', label: 'Demo' },\r\n ]\r\n \r\n return (\r\n <div className=\"sticky top-0 z-50\">\r\n <header className=\"bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative\">\r\n <div className=\"w-full\">\r\n <div className=\"px-4 py-4\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center space-x-2\">\r\n {/* Hamburger button para móvil - A LA IZQUIERDA */}\r\n {isMobile && (\r\n <button\r\n onClick={() => setSidebarOpen(true)}\r\n className=\"p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors\"\r\n >\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n )}\r\n \r\n <div className=\"flex items-center space-x-2\">\r\n <div className=\"w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse\"></div>\r\n <h3 className=\"text-base font-black text-white tracking-tight\">\r\n Sistema Responsivo\r\n </h3>\r\n </div>\r\n <div className=\"px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest\">\r\n DASHBOARD\r\n </div>\r\n </div>\r\n \r\n <div className=\"flex items-center space-x-2\">\r\n {/* Botones visibles solo en desktop */}\r\n {!isMobile && menuItems.map((page) => (\r\n <button\r\n key={page.id}\r\n onClick={() => setCurrentPage(page.id as 'demo' | 'test')}\r\n className={`px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${\r\n currentPage === page.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50' \r\n : 'bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600'\r\n }`}\r\n >\r\n {page.label}\r\n </button>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </header>\r\n\r\n {/* Sidebar móvil desplegable */}\r\n {isMobile && sidebarOpen && (\r\n <div className=\"fixed inset-0 z-40 bg-black/50\" onClick={() => setSidebarOpen(false)}>\r\n <div className=\"fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20\">\r\n <div className=\"p-6 flex flex-col h-full pt-20\">\r\n {/* Logo */}\r\n <div className=\"flex items-center space-x-3 mb-8\">\r\n <div className=\"w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">RS</span>\r\n </div>\r\n <span className=\"text-white font-bold text-lg\">Sistema Responsivo</span>\r\n </div>\r\n \r\n {/* Navigation */}\r\n <nav className=\"space-y-2\">\r\n {menuItems.map((item) => (\r\n <button\r\n key={item.id}\r\n onClick={() => {\r\n setCurrentPage(item.id as 'demo' | 'test')\r\n setSidebarOpen(false)\r\n }}\r\n className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${\r\n currentPage === item.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' \r\n : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'\r\n }`}\r\n >\r\n <span className=\"font-medium\">{item.label}</span>\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n )\r\n}\r\n\r\nexport default Header\r\n","import { useResponsiveLayout } from '../../hooks'\r\nimport { useSidebar } from '../../context'\r\n\r\nconst Sidebar = () => {\r\n const { isMobile, isTablet } = useResponsiveLayout()\r\n const { sidebarOpen, setSidebarOpen } = useSidebar()\r\n \r\n const menuItems = [\r\n { id: 'home', label: 'Inicio' },\r\n { id: 'about', label: 'Acerca' },\r\n { id: 'contact', label: 'Contacto' },\r\n ]\r\n \r\n return (\r\n <>\r\n {isMobile && (\r\n <button\r\n onClick={() => setSidebarOpen(true)}\r\n className=\"fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800 bg-gray-900 border border-gray-700\"\r\n >\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n )}\r\n\r\n <aside className={`bg-gray-900 border-r border-gray-800 ${isMobile ? 'hidden' : 'w-64 flex-shrink-0'} ${isTablet ? 'w-56' : 'w-64'}`}>\r\n <div className=\"p-6 flex flex-col h-full\">\r\n <div className=\"flex items-center space-x-3 mb-8\">\r\n <div className=\"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">LO</span>\r\n </div>\r\n <span className=\"text-white font-bold text-lg\">Tu Aplicación</span>\r\n </div>\r\n \r\n <nav className=\"space-y-2\">\r\n {menuItems.map((item) => (\r\n <button\r\n key={item.id}\r\n className=\"w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800\"\r\n >\r\n <span className=\"font-medium\">{item.label}</span>\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </aside>\r\n\r\n {isMobile && sidebarOpen && (\r\n <div className=\"fixed inset-0 z-40 bg-black/50\" onClick={() => setSidebarOpen(false)}>\r\n <div className=\"fixed top-0 left-0 w-64 h-full bg-gray-900 border-r border-gray-800\">\r\n <div className=\"p-6 flex flex-col h-full pt-20\">\r\n <div className=\"flex items-center space-x-3 mb-8\">\r\n <div className=\"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">LO</span>\r\n </div>\r\n <span className=\"text-white font-bold text-lg\">Tu Aplicación</span>\r\n </div>\r\n \r\n <nav className=\"space-y-2\">\r\n {menuItems.map((item) => (\r\n <button\r\n key={item.id}\r\n onClick={() => setSidebarOpen(false)}\r\n className=\"w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800\"\r\n >\r\n <span className=\"font-medium\">{item.label}</span>\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </>\r\n )\r\n}\r\n\r\nexport default Sidebar\r\n","const Footer = () => {\r\n return (\r\n <footer className=\"bg-gray-900 border-t border-gray-800\">\r\n <div className=\"px-4 py-6\">\r\n <div className=\"max-w-7xl mx-auto text-center\">\r\n <p className=\"text-gray-400 text-sm\">\r\n © {new Date().getFullYear()} Tu Aplicación. Todos los derechos reservados.\r\n </p>\r\n </div>\r\n </div>\r\n </footer>\r\n )\r\n}\r\n\r\nexport default Footer\r\n","import { useResponsiveLayout } from '../../hooks'\r\n\r\nconst Navigation = () => {\r\n const { isMobile } = useResponsiveLayout()\r\n \r\n return (\r\n <nav className=\"sticky top-0 z-50 bg-gray-900 border-b border-gray-800\">\r\n <div className=\"px-4 py-4\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center space-x-3\">\r\n <div className=\"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">LO</span>\r\n </div>\r\n <h1 className=\"text-white font-semibold text-lg\">Tu Aplicación</h1>\r\n </div>\r\n \r\n {isMobile && (\r\n <button className=\"p-2 text-gray-400 hover:text-white\">\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n )}\r\n </div>\r\n </div>\r\n </nav>\r\n )\r\n}\r\n\r\nexport default Navigation\r\n","import React from 'react'\r\nimport { Navigation, Footer } from '../components/layout'\r\n\r\ninterface DefaultLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {\r\n return (\r\n <div className=\"min-h-screen bg-gray-50 flex flex-col\">\r\n {/* Navigation fijo arriba */}\r\n <Navigation />\r\n \r\n {/* Main content */}\r\n <main className=\"flex-1\">\r\n {children}\r\n </main>\r\n \r\n {/* Footer fijo abajo */}\r\n <Footer />\r\n </div>\r\n )\r\n}\r\n\r\nexport default DefaultLayout\r\n","import React from 'react'\r\nimport { Sidebar } from '../components/layout'\r\nimport { SidebarProvider } from '../context'\r\n\r\ninterface SidebarLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst SidebarLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n return (\r\n <div className=\"min-h-screen bg-gray-50 flex\">\r\n {/* Sidebar */}\r\n <Sidebar />\r\n \r\n {/* Main content */}\r\n <main className=\"flex-1 overflow-auto\">\r\n {children}\r\n </main>\r\n </div>\r\n )\r\n}\r\n\r\nconst SidebarLayout: React.FC<SidebarLayoutProps> = ({ children }) => {\r\n return (\r\n <SidebarProvider>\r\n <SidebarLayoutContent>{children}</SidebarLayoutContent>\r\n </SidebarProvider>\r\n )\r\n}\r\n\r\nexport default SidebarLayout\r\n","import React from 'react'\r\nimport { Sidebar, Footer } from '../components/layout'\r\nimport { SidebarProvider } from '../context'\r\n\r\ninterface DashboardLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst DashboardLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n return (\r\n <div className=\"min-h-screen bg-gray-50 flex flex-col\">\r\n {/* Content area con sidebar */}\r\n <div className=\"flex flex-1\">\r\n {/* Sidebar */}\r\n <Sidebar />\r\n \r\n {/* Main content */}\r\n <main className=\"flex-1 overflow-auto flex flex-col\">\r\n <div className=\"flex-1\">\r\n {children}\r\n </div>\r\n \r\n {/* Footer */}\r\n <Footer />\r\n </main>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\nconst DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {\r\n return (\r\n <SidebarProvider>\r\n <DashboardLayoutContent>{children}</DashboardLayoutContent>\r\n </SidebarProvider>\r\n )\r\n}\r\n\r\nexport default DashboardLayout\r\n","import React from 'react'\r\n\r\ninterface MinimalLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst MinimalLayout: React.FC<MinimalLayoutProps> = ({ children }) => {\r\n return (\r\n <div className=\"min-h-screen bg-gray-50\">\r\n <main>\r\n {children}\r\n </main>\r\n </div>\r\n )\r\n}\r\n\r\nexport default MinimalLayout\r\n","import { useLayout } from '../hooks'\r\nimport { LAYOUT_CONFIG } from '../config/layout'\r\n\r\ninterface LayoutSwitcherProps {\r\n compact?: boolean\r\n}\r\n\r\nconst LayoutSwitcher = ({ compact = false }: LayoutSwitcherProps) => {\r\n const { current, setLayout, config } = useLayout()\r\n \r\n if (compact) {\r\n return (\r\n <div className=\"bg-black/50 rounded-lg p-3 border border-gray-700\">\r\n <div className=\"text-xs text-gray-500 mb-2\">Layout:</div>\r\n <select\r\n value={current}\r\n onChange={(e) => setLayout(e.target.value)}\r\n className=\"w-full bg-gray-800 text-white text-sm p-2 rounded border border-gray-600 focus:ring-1 focus:ring-cyan-500 focus:border-transparent\"\r\n >\r\n {Object.entries(LAYOUT_CONFIG).map(([key, layoutConfig]) => (\r\n <option key={key} value={key}>\r\n {layoutConfig.name}\r\n </option>\r\n ))}\r\n </select>\r\n </div>\r\n )\r\n }\r\n \r\n return (\r\n <div className=\"bg-black/50 backdrop-blur-sm rounded-lg p-4 border border-cyan-500/30\">\r\n <h3 className=\"text-white font-semibold mb-3\">Cambiar Layout</h3>\r\n \r\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3\">\r\n {Object.entries(LAYOUT_CONFIG).map(([key, layoutConfig]) => (\r\n <button\r\n key={key}\r\n onClick={() => setLayout(key)}\r\n className={`\r\n p-4 rounded-lg border transition-all text-left\r\n ${current === key \r\n ? 'border-cyan-500 bg-cyan-500/10 text-cyan-400' \r\n : 'border-gray-700 bg-black/30 text-gray-300 hover:border-gray-600'\r\n }\r\n `}\r\n >\r\n <div className=\"font-semibold mb-1\">{layoutConfig.name}</div>\r\n <div className=\"text-xs opacity-75\">{layoutConfig.description}</div>\r\n </button>\r\n ))}\r\n </div>\r\n \r\n <div className=\"mt-4 p-3 bg-gray-900/50 rounded-lg\">\r\n <div className=\"text-xs text-gray-500 mb-1\">Layout Actual:</div>\r\n <div className=\"text-sm text-cyan-400 font-medium\">{config.name}</div>\r\n <div className=\"text-xs text-gray-400\">{config.description}</div>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\nexport default LayoutSwitcher\r\n"],"names":["ResponsiveProvider","children","_debug","DEFAULT_BREAKPOINTS","getCurrentBreakpoint","width","getBreakpointIndex","breakpoint","getBreakpointValue","debounce","func","wait","timeout","args","getOrientation","height","useResponsive","dimensions","setDimensions","useState","updateDimensions","useCallback","debouncedUpdateDimensions","useMemo","useEffect","orientation","isXs","isSm","isMd","isLg","isXl","is2Xl","is3Xl","is4Xl","is5Xl","isMobile","isTablet","isDesktop","isSmall","isLarge","isUltraWide","is4K","is5K","isPortrait","isLandscape","isBreakpointUp","bp","isBreakpointDown","isBreakpointBetween","min","max","current","isWidthUp","minWidth","isWidthDown","maxWidth","isWidthBetween","isHeightUp","minHeight","isHeightDown","maxHeight","isHeightBetween","ResponsiveLayoutContext","createContext","useResponsiveLayoutContext","context","useContext","SidebarContext","SidebarProvider","sidebarOpen","setSidebarOpen","jsx","useSidebar","NavigationContext","useNavigation","NavigationProvider","defaultPage","currentPage","setCurrentPage","useResponsiveLayout","breakpoints","classes","cols","useLayout","responsiveLayout","LAYOUT_CONFIG","DEFAULT_LAYOUT","AVAILABLE_LAYOUTS","ResponsiveLayoutProviderInner","defaultLayout","useResponsiveHook","internalResponsive","responsive","validLayout","currentLayout","setCurrentLayout","newValidLayout","layoutConfig","contextValue","baseClass","ResponsiveLayoutProvider","MainLayout","layoutProp","layout","LayoutComponent","DefaultLayout","SidebarLayout","DashboardLayout","MinimalLayout","Header","menuItems","jsxs","page","item","Sidebar","Fragment","Footer","Navigation","SidebarLayoutContent","DashboardLayoutContent","LayoutSwitcher","compact","setLayout","config","e","key"],"mappings":";;AAUO,MAAMA,KAAwD,CAAC;AAAA,EACpE,UAAAC;AAAA,EACA,OAAOC,IAAS;AAClB,6BAGY,UAAAD,GAAS,GCVRE,IAAkD;AAAA,EAC7D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT,GAKaC,KAAuB,CAACC,MAC/BA,KAASF,EAAoB,KAAK,IAAU,QAC5CE,KAASF,EAAoB,KAAK,IAAU,QAC5CE,KAASF,EAAoB,KAAK,IAAU,QAC5CE,KAASF,EAAoB,KAAK,IAAU,QAC5CE,KAASF,EAAoB,KAAW,OACxCE,KAASF,EAAoB,KAAW,OACxCE,KAASF,EAAoB,KAAW,OACxCE,KAASF,EAAoB,KAAW,OACrC,MAMIG,IAAqB,CAACC,MACC,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,OAAO,OAAO,OAAO,KAAK,EACxE,QAAQA,CAAU,GAM1BC,KAAqB,CAACD,MAC1BJ,EAAoBI,CAAU;AChCvC,SAASE,GACPC,GACAC,GACkC;AAClC,MAAIC,IAAgD;AACpD,SAAO,IAAIC,MAAwB;AACjC,IAAID,kBAAsBA,CAAO,GACjCA,IAAU,WAAW,MAAMF,EAAK,GAAGG,CAAI,GAAGF,CAAI;AAAA,EAChD;AACF;AAKA,SAASG,GAAeT,GAAeU,GAA0C;AAC/E,SAAOV,KAASU,IAAS,cAAc;AACzC;AAMO,MAAMC,KAAgB,MAAuB;AAClD,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS;AAAA,IAC3C,OAAO,OAAO,SAAW,MAAc,OAAO,aAAa;AAAA,IAC3D,QAAQ,OAAO,SAAW,MAAc,OAAO,cAAc;AAAA,EAAA,CAC9D,GAGKC,IAAmBC,EAAY,MAAM;AACzC,IAAAH,EAAc;AAAA,MACZ,OAAO,OAAO;AAAA,MACd,QAAQ,OAAO;AAAA,IAAA,CAChB;AAAA,EACH,GAAG,CAAA,CAAE,GAGCI,IAA4BC;AAAA,IAChC,MAAMd,GAASW,GAAkB,GAAG;AAAA,IACpC,CAACA,CAAgB;AAAA,EAAA;AAInB,EAAAI,EAAU,MAAM;AACd,QAAI,SAAO,SAAW;AAEtB,oBAAO,iBAAiB,UAAUF,CAAyB,GAEpD,MAAM;AACX,eAAO,oBAAoB,UAAUA,CAAyB;AAAA,MAChE;AAAA,EACF,GAAG,CAACA,CAAyB,CAAC;AAE9B,QAAM,EAAE,OAAAjB,GAAO,QAAAU,EAAA,IAAWE,GAGpBV,IAAagB,EAAQ,MAAMnB,GAAqBC,CAAK,GAAG,CAACA,CAAK,CAAC,GAG/DoB,IAAcF,EAAQ,MAAMT,GAAeT,GAAOU,CAAM,GAAG,CAACV,GAAOU,CAAM,CAAC,GAG1EW,IAAOnB,MAAe,MACtBoB,IAAOpB,MAAe,MACtBqB,IAAOrB,MAAe,MACtBsB,IAAOtB,MAAe,MACtBuB,IAAOvB,MAAe,MACtBwB,IAAQxB,MAAe,OACvByB,IAAQzB,MAAe,OACvB0B,IAAQ1B,MAAe,OACvB2B,IAAQ3B,MAAe,OAGvB4B,IAAWT,KAAQC,GACnBS,IAAWR,GACXS,IAAYR,KAAQC,KAAQC,KAASC,KAASC,KAASC,GACvDI,IAAUZ,KAAQC,KAAQC,GAC1BW,IAAUV,KAAQC,KAAQC,KAASC,KAASC,KAASC,GACrDM,IAAcR,KAASC,KAASC,GAChCO,IAAOR,KAASC,GAChBQ,IAAOR,GAGPS,IAAalB,MAAgB,YAC7BmB,IAAcnB,MAAgB,aAG9BoB,IAAiBxB,EAAY,CAACyB,MAC3BxC,EAAmBC,CAAU,KAAKD,EAAmBwC,CAAE,GAC7D,CAACvC,CAAU,CAAC,GAETwC,IAAmB1B,EAAY,CAACyB,MAC7BxC,EAAmBC,CAAU,KAAKD,EAAmBwC,CAAE,GAC7D,CAACvC,CAAU,CAAC,GAETyC,KAAsB3B,EAAY,CAAC4B,GAAiBC,MAA6B;AACrF,UAAMC,IAAU7C,EAAmBC,CAAU;AAC7C,WAAO4C,KAAW7C,EAAmB2C,CAAG,KAAKE,KAAW7C,EAAmB4C,CAAG;AAAA,EAChF,GAAG,CAAC3C,CAAU,CAAC,GAGT6C,KAAY/B,EAAY,CAACgC,MACtBhD,KAASgD,GACf,CAAChD,CAAK,CAAC,GAEJiD,KAAcjC,EAAY,CAACkC,MACxBlD,KAASkD,GACf,CAAClD,CAAK,CAAC,GAEJmD,KAAiBnC,EAAY,CAACgC,GAAkBE,MAC7ClD,KAASgD,KAAYhD,KAASkD,GACpC,CAAClD,CAAK,CAAC,GAGJoD,KAAapC,EAAY,CAACqC,MACvB3C,KAAU2C,GAChB,CAAC3C,CAAM,CAAC,GAEL4C,KAAetC,EAAY,CAACuC,MACzB7C,KAAU6C,GAChB,CAAC7C,CAAM,CAAC,GAEL8C,KAAkBxC,EAAY,CAACqC,GAAmBE,MAC/C7C,KAAU2C,KAAa3C,KAAU6C,GACvC,CAAC7C,CAAM,CAAC;AAKX,SAAO;AAAA;AAAA,IAEL,YAAAR;AAAA,IACA,OAAAF;AAAA,IACA,QAAAU;AAAA,IACA,aAAAU;AAAA;AAAA,IAGA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA;AAAA,IAGA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA;AAAA,IAGA,YAAAC;AAAA,IACA,aAAAC;AAAA;AAAA,IAGA,gBAAAC;AAAA,IACA,kBAAAE;AAAA,IACA,qBAAAC;AAAA,IACA,WAAAI;AAAA,IACA,aAAAE;AAAA,IACA,gBAAAE;AAAA,IACA,YAAAC;AAAA,IACA,cAAAE;AAAA,IACA,iBAAAE;AAAA;AAAA,IAGA,OA9CY;AAAA,EA8CZ;AAEJ,GClKMC,IAA0BC,EAAiD,MAAS,GAE7EC,KAA6B,MAAM;AAC9C,QAAMC,IAAUC,EAAWJ,CAAuB;AAClD,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,2EAA2E;AAE7F,SAAOA;AACT,GC3BME,IAAiBJ,EAA8C,MAAS,GAEjEK,IAA2D,CAAC,EAAE,UAAAnE,QAAe;AACxF,QAAM,CAACoE,GAAaC,CAAc,IAAInD,EAAS,EAAK;AAEpD,SACE,gBAAAoD,EAACJ,EAAe,UAAf,EAAwB,OAAO,EAAE,aAAAE,GAAa,gBAAAC,KAC5C,UAAArE,GACH;AAEJ,GAEauE,IAAa,MAAM;AAC9B,QAAMP,IAAUC,EAAWC,CAAc;AACzC,MAAI,CAACF;AACH,UAAM,IAAI,MAAM,kDAAkD;AAEpE,SAAOA;AACT,GClBMQ,IAAoBV,EAAqC;AAAA,EAC7D,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AACzB,CAAC,GAEYW,KAAgB,MAAMR,EAAWO,CAAiB,GAOlDE,KAAwD,CAAC;AAAA,EACpE,UAAA1E;AAAA,EACA,aAAA2E,IAAc;AAChB,MAAM;AACJ,QAAM,CAACC,GAAaC,CAAc,IAAI3D,EAA0ByD,CAAW;AAE3E,SACE,gBAAAL,EAACE,EAAkB,UAAlB,EAA2B,OAAO,EAAE,aAAAI,GAAa,gBAAAC,KAC/C,UAAA7E,GACH;AAEJ,GC5Ba8E,IAAsB,MAAM;AACvC,QAAMd,IAAUD,GAAA;AAEhB,SAAO;AAAA;AAAA,IAEL,GAAGC,EAAQ;AAAA;AAAA,IAGX,QAAQ;AAAA,MACN,SAASA,EAAQ,OAAO;AAAA,MACxB,QAAQA,EAAQ,OAAO;AAAA,MACvB,WAAWA,EAAQ,OAAO;AAAA,IAAA;AAAA;AAAA,IAI5B,aAAaA,EAAQ;AAAA;AAAA,IAGrB,iBAAiB,MAAMA,EAAQ,OAAO,YAAY;AAAA,IAClD,iBAAiB,MAAMA,EAAQ,OAAO,YAAY;AAAA,IAClD,mBAAmB,MAAMA,EAAQ,OAAO,YAAY;AAAA,IACpD,iBAAiB,MAAMA,EAAQ,OAAO,YAAY;AAAA;AAAA,IAGlD,MAAM;AAAA,MACJ,MAAM,CAACZ,IAAW,SAAS,kBAAkBA,CAAQ;AAAA,MACrD,YAAY,CAAC2B,MAAwC;AACnD,cAAMC,IAAoB,CAAA;AAC1B,sBAAO,QAAQD,CAAW,EAAE,QAAQ,CAAC,CAACzE,GAAY2E,CAAI,MAAM;AAC1D,UAAI3E,MAAe,SACjB0E,EAAQ,KAAK,aAAaC,CAAI,EAAE,IAEhCD,EAAQ,KAAK,GAAG1E,CAAU,cAAc2E,CAAI,EAAE;AAAA,QAElD,CAAC,GACMD,EAAQ,KAAK,GAAG;AAAA,MACzB;AAAA,MACA,OAAO,CAACC,MAAiB,aAAaA,CAAI;AAAA,IAAA;AAAA;AAAA,IAI5C,SAAS;AAAA,MACP,WAAWjB,EAAQ,YAAY,kBAAA;AAAA,MAC/B,SAAS;AAAA,MACT,MAAM;AAAA,MACN,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ,GChDakB,KAAY,MAAM;AAC7B,QAAMC,IAAmBL,EAAA;AAEzB,SAAO;AAAA;AAAA,IAEL,SAASK,EAAiB,OAAO;AAAA,IACjC,QAAQA,EAAiB,OAAO;AAAA,IAChC,WAAWA,EAAiB,OAAO;AAAA;AAAA,IAGnC,GAAGA,EAAiB;AAAA;AAAA,IAGpB,iBAAiBA,EAAiB,gBAAA;AAAA,IAClC,iBAAiBA,EAAiB,gBAAA;AAAA,IAClC,mBAAmBA,EAAiB,kBAAA;AAAA,IACpC,iBAAiBA,EAAiB,gBAAA;AAAA;AAAA,IAGlC,MAAMA,EAAiB;AAAA;AAAA,IAGvB,SAASA,EAAiB;AAAA,EAAA;AAE9B,GCdaC,IAA8C;AAAA,EACzD,SAAS;AAAA,IACP,MAAM;AAAA,IACN,aAAa;AAAA,IACb,YAAY,CAAC,cAAc,QAAQ;AAAA,IACnC,SAAS;AAAA,IACT,YAAY;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,SAAS;AAAA,IACP,MAAM;AAAA,IACN,aAAa;AAAA,IACb,YAAY,CAAC,SAAS;AAAA,IACtB,SAAS;AAAA,IACT,YAAY;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,WAAW;AAAA,IACT,MAAM;AAAA,IACN,aAAa;AAAA,IACb,YAAY,CAAC,UAAU,WAAW,QAAQ;AAAA,IAC1C,SAAS;AAAA,IACT,YAAY;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,SAAS;AAAA,IACP,MAAM;AAAA,IACN,aAAa;AAAA,IACb,YAAY,CAAA;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAEaC,IAAiB,WACjBC,KAAoB,OAAO,KAAKF,CAAa,GCpCpDG,KAA8E,CAAC;AAAA,EACnF,UAAAvF;AAAA,EACA,eAAAwF;AAAA,EACA,mBAAAC;AACF,MAAM;AAEJ,QAAMC,IAAqB3E,GAAA,GAErB4E,IADmBF,IAAA,KACcC,GAGjCE,IAAeJ,KAAiBJ,EAAcI,CAAa,IAAKA,IAAgBH,GAChF,CAACQ,GAAeC,CAAgB,IAAI5E,EAAS0E,CAAW;AAG9D,EAAArE,EAAU,MAAM;AACd,UAAMwE,IAAkBP,KAAiBJ,EAAcI,CAAa,IAAKA,IAAgBH;AACzF,IAAIU,MAAmBF,KACrBC,EAAiBC,CAAc;AAAA,EAEnC,GAAG,CAACP,GAAeK,CAAa,CAAC;AAEjC,QAAMG,IAAeZ,EAAcS,CAAa,KAAKT,EAAcC,CAAc,GAuB3EY,IAAe;AAAA,IACnB,YAAAN;AAAA,IACA,QAAQ;AAAA,MACN,SAASE;AAAA,MACT,QAAQG;AAAA,MACR,WAAWF;AAAA,IAAA;AAAA,IAEb,aA5BkB;AAAA,MAClB,mBAAmB,MACbH,EAAW,WAAiBK,EAAa,WAAW,SACpDL,EAAW,WAAiBK,EAAa,WAAW,SACjDA,EAAa,WAAW;AAAA,MAGjC,cAAc,MAAM;AAClB,cAAME,IAAY;AAClB,eAAIL,MAAkB,aAAaA,MAAkB,cAC5C,GAAGK,CAAS,UAEdA;AAAA,MACT;AAAA,MAEA,YAAY,MAAML,MAAkB,aAAaA,MAAkB;AAAA,MACnE,WAAW,MAAMA,MAAkB;AAAA,MACnC,WAAW,MAAMA,MAAkB,aAAaA,MAAkB;AAAA,MAClE,eAAe,MAAMA,MAAkB;AAAA,IAAA;AAAA,EAUvC;AAGF,2BACGhC,EAAwB,UAAxB,EAAiC,OAAOoC,GACtC,UAAAjG,GACH;AAEJ,GAEamG,KAAoE,CAAC;AAAA,EAChF,UAAAnG;AAAA,EACA,eAAAwF,IAAgBH;AAAA,EAChB,mBAAAI;AACF,wBAEK1F,IAAA,EACC,UAAA,gBAAAuE;AAAA,EAACiB;AAAA,EAAA;AAAA,IACC,eAAAC;AAAA,IACA,mBAAAC;AAAA,IAEC,UAAAzF;AAAA,EAAA;AAAA,GAEL,GCjFEoG,KAAwC,CAAC,EAAE,UAAApG,GAAU,QAAQqG,QAAiB;AAClF,QAAM,EAAE,QAAAC,EAAA,IAAWxB,EAAA,GAGbe,IAAgBQ,KAAcC,EAAO,SAUrCC,IAPU;AAAA,IACd,SAASC;AAAA,IACT,SAASC;AAAA,IACT,WAAWC;AAAA,IACX,SAASC;AAAA,EAAA,EAGqBd,CAAqC,KAAKW;AAE1E,SAAO,gBAAAlC,EAACiC,KAAiB,UAAAvG,GAAS;AACpC,GChCM4G,KAAS,MAAM;AACnB,QAAM,EAAE,UAAA1E,EAAA,IAAa4C,EAAA,GACf,EAAE,aAAAF,GAAa,gBAAAC,EAAA,IAAmBJ,GAAA,GAClC,EAAE,aAAAL,GAAa,gBAAAC,EAAA,IAAmBE,EAAA,GAElCsC,IAAY;AAAA,IAChB,EAAE,IAAI,QAAQ,OAAO,gBAAA;AAAA,IACrB,EAAE,IAAI,QAAQ,OAAO,OAAA;AAAA,EAAO;AAG9B,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,IAAA,gBAAAxC,EAAC,UAAA,EAAO,WAAU,wGAChB,UAAA,gBAAAA,EAAC,SAAI,WAAU,UACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,aACb,UAAA,gBAAAwC,EAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,+BAEZ,UAAA;AAAA,QAAA5E,KACC,gBAAAoC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS,MAAMD,EAAe,EAAI;AAAA,YAClC,WAAU;AAAA,YAEV,UAAA,gBAAAC,EAAC,SAAI,WAAU,WAAU,MAAK,QAAO,QAAO,gBAAe,SAAQ,aACjE,4BAAC,QAAA,EAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAa,GAAG,GAAE,2BAA0B,EAAA,CACjG;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJ,gBAAAwC,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,UAAA,gBAAAxC,EAAC,OAAA,EAAI,WAAU,kFAAA,CAAkF;AAAA,UACjG,gBAAAA,EAAC,MAAA,EAAG,WAAU,kDAAiD,UAAA,qBAAA,CAE/D;AAAA,QAAA,GACF;AAAA,QACA,gBAAAA,EAAC,OAAA,EAAI,WAAU,uHAAsH,UAAA,YAAA,CAErI;AAAA,MAAA,GACF;AAAA,MAEA,gBAAAA,EAAC,SAAI,WAAU,+BAEZ,WAACpC,KAAY2E,EAAU,IAAI,CAACE,MAC3B,gBAAAzC;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,SAAS,MAAMO,EAAekC,EAAK,EAAqB;AAAA,UACxD,WAAW,gFACTnC,MAAgBmC,EAAK,KACjB,oDACA,qFACN;AAAA,UAEC,UAAAA,EAAK;AAAA,QAAA;AAAA,QARDA,EAAK;AAAA,MAAA,CAUb,EAAA,CACH;AAAA,IAAA,GACF,EAAA,CACF,GACF,GACF;AAAA,IAGC7E,KAAYkC,KACX,gBAAAE,EAAC,SAAI,WAAU,kCAAiC,SAAS,MAAMD,EAAe,EAAK,GACjF,4BAAC,OAAA,EAAI,WAAU,sGACb,UAAA,gBAAAyC,EAAC,OAAA,EAAI,WAAU,kCAEb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,QAAA,gBAAAxC,EAAC,OAAA,EAAI,WAAU,mEACb,UAAA,gBAAAA,EAAC,UAAK,WAAU,gCAA+B,gBAAE,EAAA,CACnD;AAAA,QACA,gBAAAA,EAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,qBAAA,CAAkB;AAAA,MAAA,GACnE;AAAA,wBAGC,OAAA,EAAI,WAAU,aACZ,UAAAuC,EAAU,IAAI,CAACG,MACd,gBAAA1C;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,SAAS,MAAM;AACb,YAAAO,EAAemC,EAAK,EAAqB,GACzC3C,EAAe,EAAK;AAAA,UACtB;AAAA,UACA,WAAW,gFACTO,MAAgBoC,EAAK,KACjB,2DACA,wDACN;AAAA,UAEA,UAAA,gBAAA1C,EAAC,QAAA,EAAK,WAAU,eAAe,YAAK,MAAA,CAAM;AAAA,QAAA;AAAA,QAXrC0C,EAAK;AAAA,MAAA,CAab,EAAA,CACH;AAAA,IAAA,EAAA,CACF,GACF,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ,GCnGMC,IAAU,MAAM;AACpB,QAAM,EAAE,UAAA/E,GAAU,UAAAC,EAAA,IAAa2C,EAAA,GACzB,EAAE,aAAAV,GAAa,gBAAAC,EAAA,IAAmBE,EAAA,GAElCsC,IAAY;AAAA,IAChB,EAAE,IAAI,QAAQ,OAAO,SAAA;AAAA,IACrB,EAAE,IAAI,SAAS,OAAO,SAAA;AAAA,IACtB,EAAE,IAAI,WAAW,OAAO,WAAA;AAAA,EAAW;AAGrC,SACE,gBAAAC,EAAAI,GAAA,EACG,UAAA;AAAA,IAAAhF,KACC,gBAAAoC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,MAAMD,EAAe,EAAI;AAAA,QAClC,WAAU;AAAA,QAEV,UAAA,gBAAAC,EAAC,SAAI,WAAU,WAAU,MAAK,QAAO,QAAO,gBAAe,SAAQ,aACjE,4BAAC,QAAA,EAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAa,GAAG,GAAE,2BAA0B,EAAA,CACjG;AAAA,MAAA;AAAA,IAAA;AAAA,IAIJ,gBAAAA,EAAC,SAAA,EAAM,WAAW,wCAAwCpC,IAAW,WAAW,oBAAoB,IAAIC,IAAW,SAAS,MAAM,IAChI,UAAA,gBAAA2E,EAAC,OAAA,EAAI,WAAU,4BACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,QAAA,gBAAAxC,EAAC,OAAA,EAAI,WAAU,mEACb,UAAA,gBAAAA,EAAC,UAAK,WAAU,gCAA+B,gBAAE,EAAA,CACnD;AAAA,QACA,gBAAAA,EAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,gBAAA,CAAa;AAAA,MAAA,GAC9D;AAAA,wBAEC,OAAA,EAAI,WAAU,aACZ,UAAAuC,EAAU,IAAI,CAACG,MACd,gBAAA1C;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAEV,UAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,eAAe,YAAK,MAAA,CAAM;AAAA,QAAA;AAAA,QAHrC0C,EAAK;AAAA,MAAA,CAKb,EAAA,CACH;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,IAEC9E,KAAYkC,KACX,gBAAAE,EAAC,SAAI,WAAU,kCAAiC,SAAS,MAAMD,EAAe,EAAK,GACjF,4BAAC,OAAA,EAAI,WAAU,uEACb,UAAA,gBAAAyC,EAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,QAAA,gBAAAxC,EAAC,OAAA,EAAI,WAAU,mEACb,UAAA,gBAAAA,EAAC,UAAK,WAAU,gCAA+B,gBAAE,EAAA,CACnD;AAAA,QACA,gBAAAA,EAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,gBAAA,CAAa;AAAA,MAAA,GAC9D;AAAA,wBAEC,OAAA,EAAI,WAAU,aACZ,UAAAuC,EAAU,IAAI,CAACG,MACd,gBAAA1C;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,SAAS,MAAMD,EAAe,EAAK;AAAA,UACnC,WAAU;AAAA,UAEV,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,eAAe,YAAK,MAAA,CAAM;AAAA,QAAA;AAAA,QAJrC0C,EAAK;AAAA,MAAA,CAMb,EAAA,CACH;AAAA,IAAA,EAAA,CACF,GACF,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ,GC5EMG,IAAS,MAEX,gBAAA7C,EAAC,UAAA,EAAO,WAAU,wCAChB,4BAAC,OAAA,EAAI,WAAU,aACb,UAAA,gBAAAA,EAAC,SAAI,WAAU,iCACb,UAAA,gBAAAwC,EAAC,KAAA,EAAE,WAAU,yBAAwB,UAAA;AAAA,EAAA;AAAA,GAChC,oBAAI,KAAA,GAAO,YAAA;AAAA,EAAc;AAAA,GAC9B,EAAA,CACF,GACF,GACF,GCREM,KAAa,MAAM;AACvB,QAAM,EAAE,UAAAlF,EAAA,IAAa4C,EAAA;AAErB,SACE,gBAAAR,EAAC,OAAA,EAAI,WAAU,0DACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,aACb,UAAA,gBAAAwC,EAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,MAAA,gBAAAxC,EAAC,OAAA,EAAI,WAAU,mEACb,UAAA,gBAAAA,EAAC,UAAK,WAAU,gCAA+B,gBAAE,EAAA,CACnD;AAAA,MACA,gBAAAA,EAAC,MAAA,EAAG,WAAU,oCAAmC,UAAA,gBAAA,CAAa;AAAA,IAAA,GAChE;AAAA,IAECpC,KACC,gBAAAoC,EAAC,UAAA,EAAO,WAAU,sCAChB,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,WAAU,MAAK,QAAO,QAAO,gBAAe,SAAQ,aACjE,UAAA,gBAAAA,EAAC,QAAA,EAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAa,GAAG,GAAE,0BAAA,CAA0B,EAAA,CACjG,EAAA,CACF;AAAA,EAAA,EAAA,CAEJ,GACF,GACF;AAEJ,GCpBMkC,IAA8C,CAAC,EAAE,UAAAxG,QAEnD,gBAAA8G,EAAC,OAAA,EAAI,WAAU,yCAEb,UAAA;AAAA,EAAA,gBAAAxC,EAAC8C,IAAA,EAAW;AAAA,EAGZ,gBAAA9C,EAAC,QAAA,EAAK,WAAU,UACb,UAAAtE,EAAA,CACH;AAAA,oBAGCmH,GAAA,CAAA,CAAO;AAAA,GACV,GCZEE,KAAgE,CAAC,EAAE,UAAArH,QAErE,gBAAA8G,EAAC,OAAA,EAAI,WAAU,gCAEb,UAAA;AAAA,EAAA,gBAAAxC,EAAC2C,GAAA,EAAQ;AAAA,EAGT,gBAAA3C,EAAC,QAAA,EAAK,WAAU,wBACb,UAAAtE,EAAA,CACH;AAAA,GACF,GAIEyG,KAA8C,CAAC,EAAE,UAAAzG,QAEnD,gBAAAsE,EAACH,GAAA,EACC,UAAA,gBAAAG,EAAC+C,IAAA,EAAsB,UAAArH,GAAS,GAClC,GClBEsH,KAAkE,CAAC,EAAE,UAAAtH,0BAEtE,OAAA,EAAI,WAAU,yCAEb,UAAA,gBAAA8G,EAAC,OAAA,EAAI,WAAU,eAEb,UAAA;AAAA,EAAA,gBAAAxC,EAAC2C,GAAA,EAAQ;AAAA,EAGT,gBAAAH,EAAC,QAAA,EAAK,WAAU,sCACd,UAAA;AAAA,IAAA,gBAAAxC,EAAC,OAAA,EAAI,WAAU,UACZ,UAAAtE,EAAA,CACH;AAAA,sBAGCmH,GAAA,CAAA,CAAO;AAAA,EAAA,EAAA,CACV;AAAA,EAAA,CACF,EAAA,CACF,GAIET,KAAkD,CAAC,EAAE,UAAA1G,QAEvD,gBAAAsE,EAACH,GAAA,EACC,UAAA,gBAAAG,EAACgD,IAAA,EAAwB,UAAAtH,GAAS,GACpC,GC5BE2G,KAA8C,CAAC,EAAE,UAAA3G,0BAElD,OAAA,EAAI,WAAU,2BACb,UAAA,gBAAAsE,EAAC,QAAA,EACE,UAAAtE,GACH,EAAA,CACF,GCLEuH,KAAiB,CAAC,EAAE,SAAAC,IAAU,SAAiC;AACnE,QAAM,EAAE,SAAAtE,GAAS,WAAAuE,GAAW,QAAAC,EAAA,IAAWxC,GAAA;AAEvC,SAAIsC,IAEA,gBAAAV,EAAC,OAAA,EAAI,WAAU,qDACb,UAAA;AAAA,IAAA,gBAAAxC,EAAC,OAAA,EAAI,WAAU,8BAA6B,UAAA,WAAO;AAAA,IACnD,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAOpB;AAAA,QACP,UAAU,CAACyE,MAAMF,EAAUE,EAAE,OAAO,KAAK;AAAA,QACzC,WAAU;AAAA,QAET,iBAAO,QAAQvC,CAAa,EAAE,IAAI,CAAC,CAACwC,GAAK5B,CAAY,wBACnD,UAAA,EAAiB,OAAO4B,GACtB,UAAA5B,EAAa,KAAA,GADH4B,CAEb,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF,IAKF,gBAAAd,EAAC,OAAA,EAAI,WAAU,yEACb,UAAA;AAAA,IAAA,gBAAAxC,EAAC,MAAA,EAAG,WAAU,iCAAgC,UAAA,kBAAc;AAAA,IAE5D,gBAAAA,EAAC,OAAA,EAAI,WAAU,wDACZ,UAAA,OAAO,QAAQc,CAAa,EAAE,IAAI,CAAC,CAACwC,GAAK5B,CAAY,MACpD,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,SAAS,MAAMW,EAAUG,CAAG;AAAA,QAC5B,WAAW;AAAA;AAAA,gBAEP1E,MAAY0E,IACV,iDACA,iEACJ;AAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAtD,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAA0B,EAAa,MAAK;AAAA,UACvD,gBAAA1B,EAAC,OAAA,EAAI,WAAU,sBAAsB,YAAa,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,MAXzDsD;AAAA,IAAA,CAaR,GACH;AAAA,IAEA,gBAAAd,EAAC,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,MAAA,gBAAAxC,EAAC,OAAA,EAAI,WAAU,8BAA6B,UAAA,kBAAc;AAAA,MAC1D,gBAAAA,EAAC,OAAA,EAAI,WAAU,qCAAqC,YAAO,MAAK;AAAA,MAChE,gBAAAA,EAAC,OAAA,EAAI,WAAU,yBAAyB,YAAO,YAAA,CAAY;AAAA,IAAA,EAAA,CAC7D;AAAA,EAAA,GACF;AAEJ;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "responsive-system",
3
- "version": "1.4.7",
3
+ "version": "1.4.8",
4
4
  "description": "Sistema de layout responsivo con auto-scaling para Tailwind CSS",
5
5
  "type": "module",
6
6
  "main": "./dist/responsive-system.cjs",
package/src/providers/ResponsiveLayoutProvider.tsx CHANGED
@@ -32,12 +32,17 @@ const ResponsiveLayoutProviderInner: React.FC<ResponsiveLayoutProviderInnerProps
32
32
  const customResponsive = useResponsiveHook?.()
33
33
  const responsive = customResponsive || internalResponsive
34
34
 
35
- const [currentLayout, setCurrentLayout] = useState(() => defaultLayout)
35
+ // Inicializar el estado con el defaultLayout, asegurando que sea válido
36
+ const validLayout = (defaultLayout && LAYOUT_CONFIG[defaultLayout]) ? defaultLayout : DEFAULT_LAYOUT
37
+ const [currentLayout, setCurrentLayout] = useState(validLayout)
36
38
 
37
- // Asegurar que el layout se inicialice correctamente con el defaultLayout
39
+ // Sincronizar si el defaultLayout cambia (aunque no debería en la mayoría de casos)
38
40
  useEffect(() => {
39
- setCurrentLayout(defaultLayout)
40
- }, [defaultLayout])
41
+ const newValidLayout = (defaultLayout && LAYOUT_CONFIG[defaultLayout]) ? defaultLayout : DEFAULT_LAYOUT
42
+ if (newValidLayout !== currentLayout) {
43
+ setCurrentLayout(newValidLayout)
44
+ }
45
+ }, [defaultLayout, currentLayout])
41
46
 
42
47
  const layoutConfig = LAYOUT_CONFIG[currentLayout] || LAYOUT_CONFIG[DEFAULT_LAYOUT]
43
48