npm - responsive-system - Versions diffs - 1.2.6 → 1.2.7 - Mend

responsive-system 1.2.6 → 1.2.7

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

package/dist/responsive-system.cjs +3 -3
package/dist/responsive-system.cjs.map +1 -1
package/dist/responsive-system.mjs +45 -69
package/dist/responsive-system.mjs.map +1 -1
package/package.json +1 -1
package/src/components/layout/Footer.tsx +11 -37

package/dist/responsive-system.cjs CHANGED Viewed

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),U=({children:s,debug:a=!1})=>e.jsx(e.Fragment,{children:s}),m={xs:475,sm:640,md:768,lg:1024,xl:1280,"2xl":1536,"3xl":1920,"4xl":2560,"5xl":3840},B=s=>s>=m["5xl"]?"5xl":s>=m["4xl"]?"4xl":s>=m["3xl"]?"3xl":s>=m["2xl"]?"2xl":s>=m.xl?"xl":s>=m.lg?"lg":s>=m.md?"md":s>=m.sm?"sm":"xs",b=s=>["xs","sm","md","lg","xl","2xl","3xl","4xl","5xl"].indexOf(s),de=s=>m[s];function xe(s,a){let r=null;return(...o)=>{r&&clearTimeout(r),r=setTimeout(()=>s(...o),a)}}function ue(s,a){return s>=a?"landscape":"portrait"}const A=()=>{const[s,a]=l.useState({width:typeof window<"u"?window.innerWidth:1024,height:typeof window<"u"?window.innerHeight:768}),r=l.useCallback(()=>{a({width:window.innerWidth,height:window.innerHeight})},[]),o=l.useMemo(()=>xe(r,100),[r]);l.useEffect(()=>{if(!(typeof window>"u"))return window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o)}},[o]);const{width:n,height:i}=s,t=l.useMemo(()=>B(n),[n]),c=l.useMemo(()=>ue(n,i),[n,i]),d=t==="xs",j=t==="sm",y=t==="md",h=t==="lg",L=t==="xl",C=t==="2xl",N=t==="3xl",f=t==="4xl",p=t==="5xl",V=d||j,X=y,Y=h||L||C||N||f||p,K=d||j||y,q=h||L||C||N||f||p,G=N||f||p,J=f||p,Q=p,Z=c==="portrait",ee=c==="landscape",se=l.useCallback(x=>b(t)>=b(x),[t]),te=l.useCallback(x=>b(t)<=b(x),[t]),ae=l.useCallback((x,v)=>{const P=b(t);return P>=b(x)&&P<=b(v)},[t]),ne=l.useCallback(x=>n>=x,[n]),re=l.useCallback(x=>n<=x,[n]),ie=l.useCallback((x,v)=>n>=x&&n<=v,[n]),oe=l.useCallback(x=>i>=x,[i]),le=l.useCallback(x=>i<=x,[i]),ce=l.useCallback((x,v)=>i>=x&&i<=v,[i]);return{breakpoint:t,width:n,height:i,orientation:c,isXs:d,isSm:j,isMd:y,isLg:h,isXl:L,is2Xl:C,is3Xl:N,is4Xl:f,is5Xl:p,isMobile:V,isTablet:X,isDesktop:Y,isSmall:K,isLarge:q,isUltraWide:G,is4K:J,is5K:Q,isPortrait:Z,isLandscape:ee,isBreakpointUp:se,isBreakpointDown:te,isBreakpointBetween:ae,isWidthUp:ne,isWidthDown:re,isWidthBetween:ie,isHeightUp:oe,isHeightDown:le,isHeightBetween:ce,debug:!1}},T=l.createContext(void 0),F=()=>{const s=l.useContext(T);if(!s)throw new Error("useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider");return s},$=l.createContext(void 0),R=({children:s})=>{const[a,r]=l.useState(!1);return e.jsx($.Provider,{value:{sidebarOpen:a,setSidebarOpen:r},children:s})},w=()=>{const s=l.useContext($);if(!s)throw new Error("useSidebar must be used within a SidebarProvider");return s},E=l.createContext({currentPage:"test",setCurrentPage:()=>{}}),k=()=>l.useContext(E),me=({children:s,defaultPage:a="test"})=>{const[r,o]=l.useState(a);return e.jsx(E.Provider,{value:{currentPage:r,setCurrentPage:o},children:s})},u=()=>{const s=F();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:(a="md")=>`grid-cols-auto-${a}`,responsive:a=>{const r=[];return Object.entries(a).forEach(([o,n])=>{o==="base"?r.push(`grid-cols-${n}`):r.push(`${o}:grid-cols-${n}`)}),r.join(" ")},fixed:a=>`grid-cols-${a}`},spacing:{container:s.layoutUtils.getContainerClass(),section:"mb-6",card:"p-6",gap:"gap-4"}}},H=()=>{const s=u();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}},g={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",be=Object.keys(g),he=({children:s,defaultLayout:a,useResponsiveHook:r})=>{const o=A(),i=r?.()||o,[t,c]=l.useState(a),d=g[t]||g[M],y={responsive:i,layout:{current:t,config:d,setLayout:c},layoutUtils:{getContainerClass:()=>i.isMobile?d.responsive.mobile:i.isTablet?d.responsive.tablet:d.responsive.desktop,getMainClass:()=>{const h="min-h-screen bg-black";return t==="sidebar"||t==="dashboard"?`${h} flex`:h},hasSidebar:()=>t==="sidebar"||t==="dashboard",hasHeader:()=>t==="dashboard",hasFooter:()=>t==="default"||t==="dashboard",hasNavigation:()=>t==="default"}};return e.jsx(T.Provider,{value:y,children:s})},pe=({children:s,defaultLayout:a=M,useResponsiveHook:r})=>e.jsx(U,{children:e.jsx(he,{defaultLayout:a,useResponsiveHook:r,children:s})}),ge=({children:s,layout:a})=>{const{layout:r}=u(),o=a||r.current,i={default:S,sidebar:I,dashboard:W,minimal:_}[o]||S;return e.jsx(i,{children:s})},ye=()=>{const{isMobile:s}=u(),{currentPage:a,setCurrentPage:r}=k(),{sidebarOpen:o,setSidebarOpen:n}=w(),i=[{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&&i.map(t=>e.jsx("button",{onClick:()=>r(t.id),className:`px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${a===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&&o&&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:i.map(t=>e.jsx("button",{onClick:()=>{r(t.id),n(!1)},className:`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${a===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:a,breakpoint:r}=u(),{currentPage:o,setCurrentPage:n}=k(),{sidebarOpen:i,setSidebarOpen:t}=w(),c=[{id:"test",label:"Suite de Test"},{id:"demo",label:"Demo"}];return e.jsxs(e.Fragment,{children:[s&&e.jsx("button",{onClick:()=>t(!0),className:"fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors bg-black/50 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:`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),U=({children:s,debug:a=!1})=>e.jsx(e.Fragment,{children:s}),m={xs:475,sm:640,md:768,lg:1024,xl:1280,"2xl":1536,"3xl":1920,"4xl":2560,"5xl":3840},A=s=>s>=m["5xl"]?"5xl":s>=m["4xl"]?"4xl":s>=m["3xl"]?"3xl":s>=m["2xl"]?"2xl":s>=m.xl?"xl":s>=m.lg?"lg":s>=m.md?"md":s>=m.sm?"sm":"xs",b=s=>["xs","sm","md","lg","xl","2xl","3xl","4xl","5xl"].indexOf(s),de=s=>m[s];function xe(s,a){let r=null;return(...o)=>{r&&clearTimeout(r),r=setTimeout(()=>s(...o),a)}}function ue(s,a){return s>=a?"landscape":"portrait"}const B=()=>{const[s,a]=l.useState({width:typeof window<"u"?window.innerWidth:1024,height:typeof window<"u"?window.innerHeight:768}),r=l.useCallback(()=>{a({width:window.innerWidth,height:window.innerHeight})},[]),o=l.useMemo(()=>xe(r,100),[r]);l.useEffect(()=>{if(!(typeof window>"u"))return window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o)}},[o]);const{width:n,height:i}=s,t=l.useMemo(()=>A(n),[n]),c=l.useMemo(()=>ue(n,i),[n,i]),d=t==="xs",j=t==="sm",y=t==="md",h=t==="lg",L=t==="xl",C=t==="2xl",N=t==="3xl",f=t==="4xl",p=t==="5xl",X=d||j,Y=y,V=h||L||C||N||f||p,K=d||j||y,q=h||L||C||N||f||p,G=N||f||p,J=f||p,Q=p,Z=c==="portrait",ee=c==="landscape",se=l.useCallback(x=>b(t)>=b(x),[t]),te=l.useCallback(x=>b(t)<=b(x),[t]),ae=l.useCallback((x,v)=>{const P=b(t);return P>=b(x)&&P<=b(v)},[t]),ne=l.useCallback(x=>n>=x,[n]),re=l.useCallback(x=>n<=x,[n]),ie=l.useCallback((x,v)=>n>=x&&n<=v,[n]),oe=l.useCallback(x=>i>=x,[i]),le=l.useCallback(x=>i<=x,[i]),ce=l.useCallback((x,v)=>i>=x&&i<=v,[i]);return{breakpoint:t,width:n,height:i,orientation:c,isXs:d,isSm:j,isMd:y,isLg:h,isXl:L,is2Xl:C,is3Xl:N,is4Xl:f,is5Xl:p,isMobile:X,isTablet:Y,isDesktop:V,isSmall:K,isLarge:q,isUltraWide:G,is4K:J,is5K:Q,isPortrait:Z,isLandscape:ee,isBreakpointUp:se,isBreakpointDown:te,isBreakpointBetween:ae,isWidthUp:ne,isWidthDown:re,isWidthBetween:ie,isHeightUp:oe,isHeightDown:le,isHeightBetween:ce,debug:!1}},T=l.createContext(void 0),F=()=>{const s=l.useContext(T);if(!s)throw new Error("useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider");return s},$=l.createContext(void 0),R=({children:s})=>{const[a,r]=l.useState(!1);return e.jsx($.Provider,{value:{sidebarOpen:a,setSidebarOpen:r},children:s})},k=()=>{const s=l.useContext($);if(!s)throw new Error("useSidebar must be used within a SidebarProvider");return s},E=l.createContext({currentPage:"test",setCurrentPage:()=>{}}),w=()=>l.useContext(E),me=({children:s,defaultPage:a="test"})=>{const[r,o]=l.useState(a);return e.jsx(E.Provider,{value:{currentPage:r,setCurrentPage:o},children:s})},u=()=>{const s=F();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:(a="md")=>`grid-cols-auto-${a}`,responsive:a=>{const r=[];return Object.entries(a).forEach(([o,n])=>{o==="base"?r.push(`grid-cols-${n}`):r.push(`${o}:grid-cols-${n}`)}),r.join(" ")},fixed:a=>`grid-cols-${a}`},spacing:{container:s.layoutUtils.getContainerClass(),section:"mb-6",card:"p-6",gap:"gap-4"}}},H=()=>{const s=u();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}},g={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"}}},D="default",be=Object.keys(g),he=({children:s,defaultLayout:a,useResponsiveHook:r})=>{const o=B(),i=r?.()||o,[t,c]=l.useState(a),d=g[t]||g[D],y={responsive:i,layout:{current:t,config:d,setLayout:c},layoutUtils:{getContainerClass:()=>i.isMobile?d.responsive.mobile:i.isTablet?d.responsive.tablet:d.responsive.desktop,getMainClass:()=>{const h="min-h-screen bg-black";return t==="sidebar"||t==="dashboard"?`${h} flex`:h},hasSidebar:()=>t==="sidebar"||t==="dashboard",hasHeader:()=>t==="dashboard",hasFooter:()=>t==="default"||t==="dashboard",hasNavigation:()=>t==="default"}};return e.jsx(T.Provider,{value:y,children:s})},pe=({children:s,defaultLayout:a=D,useResponsiveHook:r})=>e.jsx(U,{children:e.jsx(he,{defaultLayout:a,useResponsiveHook:r,children:s})}),ge=({children:s,layout:a})=>{const{layout:r}=u(),o=a||r.current,i={default:S,sidebar:z,dashboard:W,minimal:_}[o]||S;return e.jsx(i,{children:s})},ye=()=>{const{isMobile:s}=u(),{currentPage:a,setCurrentPage:r}=w(),{sidebarOpen:o,setSidebarOpen:n}=k(),i=[{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&&i.map(t=>e.jsx("button",{onClick:()=>r(t.id),className:`px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${a===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&&o&&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:i.map(t=>e.jsx("button",{onClick:()=>{r(t.id),n(!1)},className:`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${a===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))})]})})})]})},M=()=>{const{isMobile:s,isTablet:a,breakpoint:r}=u(),{currentPage:o,setCurrentPage:n}=w(),{sidebarOpen:i,setSidebarOpen:t}=k(),c=[{id:"test",label:"Suite de Test"},{id:"demo",label:"Demo"}];return e.jsxs(e.Fragment,{children:[s&&e.jsx("button",{onClick:()=>t(!0),className:"fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors bg-black/50 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-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20
         ${s?"hidden":"w-64 flex-shrink-0"}
         ${a?"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-cyan-500 rounded-lg flex items-center justify-center",children:e.jsx("span",{className:"text-white font-bold text-sm",children:"RS"})}),e.jsxs("div",{children:[e.jsx("span",{className:"text-white font-bold text-lg",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 mt-1",children:r.toUpperCase()})]})]}),e.jsx("nav",{className:"space-y-2",children:c.map(d=>e.jsx("button",{onClick:()=>n(d.id),className:`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${o===d.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:d.label})},d.id))})]})}),s&&i&&e.jsx("div",{className:"fixed inset-0 z-40 bg-black/50",onClick:()=>t(!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:c.map(d=>e.jsx("button",{onClick:()=>{n(d.id),t(!1)},className:`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${o===d.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:d.label})},d.id))})]})})})]})},O=()=>{const{layout:s,breakpoint:a,width:r,height:o}=u();return e.jsx("footer",{className:"bg-gradient-to-r from-gray-900 to-black border-t border-cyan-500/20",children:e.jsxs("div",{className:`${s.config.spacing} py-6`,children:[e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",children:[e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center space-x-2 mb-3",children:[e.jsx("div",{className:"w-6 h-6 bg-cyan-500 rounded flex items-center justify-center",children:e.jsx("span",{className:"text-white font-bold text-xs",children:"RS"})}),e.jsx("span",{className:"text-white font-semibold text-sm",children:"Responsive System"})]}),e.jsx("p",{className:"text-gray-400 text-xs leading-relaxed",children:"Sistema completo de auto-escalado para aplicaciones React + Tailwind CSS"})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold text-sm mb-3",children:"Estado del Sistema"}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsxs("div",{className:"flex items-center justify-between text-xs",children:[e.jsx("span",{className:"text-gray-400",children:"Breakpoint:"}),e.jsx("span",{className:"text-cyan-400 font-medium",children:a.toUpperCase()})]}),e.jsxs("div",{className:"flex items-center justify-between text-xs",children:[e.jsx("span",{className:"text-gray-400",children:"Layout:"}),e.jsx("span",{className:"text-cyan-400 font-medium",children:s.config.name})]}),e.jsxs("div",{className:"flex items-center justify-between text-xs",children:[e.jsx("span",{className:"text-gray-400",children:"Resolución:"}),e.jsxs("span",{className:"text-cyan-400 font-medium",children:[r," × ",o]})]})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold text-sm mb-3",children:"Desarrollador"}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx("div",{className:"w-6 h-6 bg-gray-700 rounded-full flex items-center justify-center flex-shrink-0",children:e.jsx("svg",{className:"w-3 h-3 text-gray-300",fill:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{d:"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"})})}),e.jsxs("div",{children:[e.jsx("p",{className:"text-white font-medium text-xs",children:"Felipe Caroca"}),e.jsx("p",{className:"text-gray-400 text-xs",children:"Frontend Developer"})]})]}),e.jsxs("a",{href:"https://github.com/FelipeCaroca1",target:"_blank",rel:"noopener noreferrer",className:"flex items-center space-x-1.5 text-gray-400 hover:text-cyan-400 transition-colors text-xs group",children:[e.jsx("svg",{className:"w-3 h-3 group-hover:text-cyan-400",fill:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{d:"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"})}),e.jsx("span",{children:"Ver en GitHub"})]})]})]})]}),e.jsxs("div",{className:"border-t border-gray-800 mt-6 pt-4 flex flex-col items-center text-center",children:[e.jsx("p",{className:"text-gray-500 text-xs mb-2",children:"© 2025 Responsive System. Todos los derechos reservados."}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx("span",{className:"text-gray-500 text-xs",children:"Auto-escalado activo"}),e.jsx("div",{className:"w-1.5 h-1.5 bg-cyan-400 rounded-full animate-pulse"})]})]})]})})},z=()=>{const{isMobile:s,breakpoint:a}=u(),{currentPage:r,setCurrentPage:o}=k(),[n,i]=l.useState(!1),t=[{id:"demo",name:"Demo"},{id:"test",name:"Suite de Test"}];return e.jsx("div",{className:"sticky top-0 z-50",children:e.jsxs("nav",{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:[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:a.toUpperCase()})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[!s&&t.map(c=>e.jsx("button",{onClick:()=>o(c.id),className:`px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${r===c.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:c.name},c.id)),s&&e.jsx("button",{onClick:()=>i(!n),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"})})})]})]})})}),s&&n&&e.jsx("div",{className:"absolute top-full left-0 right-0 bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl z-50",children:e.jsx("div",{className:"p-4",children:e.jsx("nav",{className:"space-y-2",children:t.map(c=>e.jsx("button",{onClick:()=>{o(c.id),i(!1)},className:`w-full text-left px-4 py-3 rounded-lg transition-all font-bold text-sm tracking-wide border ${r===c.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:c.name},c.id))})})})]})})},S=({children:s})=>{const{layoutUtils:a}=u();return e.jsxs("div",{className:"min-h-screen bg-black flex flex-col",children:[e.jsx(z,{}),e.jsx("main",{className:"flex-1",children:e.jsx("div",{className:a.getContainerClass(),children:s})}),e.jsx(O,{})]})},fe=({children:s})=>{const{layoutUtils:a}=u();return e.jsxs("div",{className:"min-h-screen bg-black flex",children:[e.jsx(D,{}),e.jsx("main",{className:"flex-1 overflow-auto",children:e.jsx("div",{className:a.getContainerClass(),children:s})})]})},I=({children:s})=>e.jsx(R,{children:e.jsx(fe,{children:s})}),ve=({children:s})=>{const{layoutUtils:a}=u(),{setSidebarOpen:r}=w();return e.jsxs("div",{className:"min-h-screen bg-black flex flex-col",children:[e.jsx("div",{className:"sticky top-0 z-50",children:e.jsx("nav",{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.jsx("div",{className:"flex items-center justify-between",children:e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx("button",{onClick:()=>r(!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.jsxs("div",{className:"flex flex-1",children:[e.jsx(D,{}),e.jsx("main",{className:"flex-1 overflow-auto",children:e.jsx("div",{className:a.getContainerClass(),children:s})})]}),e.jsx(O,{})]})},W=({children:s})=>e.jsx(R,{children:e.jsx(ve,{children:s})}),_=({children:s})=>{const{layoutUtils:a}=u();return e.jsx("div",{className:"min-h-screen bg-black",children:e.jsx("main",{className:a.getContainerClass(),children:s})})},je=({compact:s=!1})=>{const{current:a,setLayout:r,config:o}=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:a,onChange:n=>r(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(g).map(([n,i])=>e.jsx("option",{value:n,children:i.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(g).map(([n,i])=>e.jsxs("button",{onClick:()=>r(n),className:`
+      `,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-cyan-500 rounded-lg flex items-center justify-center",children:e.jsx("span",{className:"text-white font-bold text-sm",children:"RS"})}),e.jsxs("div",{children:[e.jsx("span",{className:"text-white font-bold text-lg",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 mt-1",children:r.toUpperCase()})]})]}),e.jsx("nav",{className:"space-y-2",children:c.map(d=>e.jsx("button",{onClick:()=>n(d.id),className:`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${o===d.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:d.label})},d.id))})]})}),s&&i&&e.jsx("div",{className:"fixed inset-0 z-40 bg-black/50",onClick:()=>t(!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:c.map(d=>e.jsx("button",{onClick:()=>{n(d.id),t(!1)},className:`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${o===d.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:d.label})},d.id))})]})})})]})},O=()=>{const{layout:s,breakpoint:a,width:r,height:o}=u();return e.jsx("footer",{className:"bg-gradient-to-r from-gray-900 to-black border-t border-cyan-500/20",children:e.jsxs("div",{className:`${s.config.spacing} py-6`,children:[e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6",children:[e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center space-x-2 mb-2",children:[e.jsx("div",{className:"w-5 h-5 bg-cyan-500 rounded flex items-center justify-center",children:e.jsx("span",{className:"text-white font-bold text-xs",children:"RS"})}),e.jsx("span",{className:"text-white font-semibold text-sm",children:"Responsive System"})]}),e.jsx("p",{className:"text-gray-400 text-xs leading-relaxed",children:"Sistema completo de auto-escalado para aplicaciones React + Tailwind CSS"})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold text-sm mb-2",children:"Estado del Sistema"}),e.jsxs("div",{className:"space-y-1",children:[e.jsxs("div",{className:"flex items-center justify-between text-xs",children:[e.jsx("span",{className:"text-gray-400",children:"Breakpoint:"}),e.jsx("span",{className:"text-cyan-400 font-medium",children:a.toUpperCase()})]}),e.jsxs("div",{className:"flex items-center justify-between text-xs",children:[e.jsx("span",{className:"text-gray-400",children:"Layout:"}),e.jsx("span",{className:"text-cyan-400 font-medium",children:s.config.name})]}),e.jsxs("div",{className:"flex items-center justify-between text-xs",children:[e.jsx("span",{className:"text-gray-400",children:"Resolución:"}),e.jsxs("span",{className:"text-cyan-400 font-medium",children:[r," × ",o]})]})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold text-sm mb-2",children:"Desarrollador"}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("p",{className:"text-white font-medium text-xs",children:"Felipe Caroca"}),e.jsx("p",{className:"text-gray-400 text-xs",children:"Frontend Developer"})]})]})]}),e.jsx("div",{className:"border-t border-gray-800 mt-4 pt-4 flex flex-col items-center text-center",children:e.jsx("p",{className:"text-gray-500 text-xs",children:"© 2025 Responsive System. Todos los derechos reservados."})})]})})},I=()=>{const{isMobile:s,breakpoint:a}=u(),{currentPage:r,setCurrentPage:o}=w(),[n,i]=l.useState(!1),t=[{id:"demo",name:"Demo"},{id:"test",name:"Suite de Test"}];return e.jsx("div",{className:"sticky top-0 z-50",children:e.jsxs("nav",{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:[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:a.toUpperCase()})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[!s&&t.map(c=>e.jsx("button",{onClick:()=>o(c.id),className:`px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${r===c.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:c.name},c.id)),s&&e.jsx("button",{onClick:()=>i(!n),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"})})})]})]})})}),s&&n&&e.jsx("div",{className:"absolute top-full left-0 right-0 bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl z-50",children:e.jsx("div",{className:"p-4",children:e.jsx("nav",{className:"space-y-2",children:t.map(c=>e.jsx("button",{onClick:()=>{o(c.id),i(!1)},className:`w-full text-left px-4 py-3 rounded-lg transition-all font-bold text-sm tracking-wide border ${r===c.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:c.name},c.id))})})})]})})},S=({children:s})=>{const{layoutUtils:a}=u();return e.jsxs("div",{className:"min-h-screen bg-black flex flex-col",children:[e.jsx(I,{}),e.jsx("main",{className:"flex-1",children:e.jsx("div",{className:a.getContainerClass(),children:s})}),e.jsx(O,{})]})},fe=({children:s})=>{const{layoutUtils:a}=u();return e.jsxs("div",{className:"min-h-screen bg-black flex",children:[e.jsx(M,{}),e.jsx("main",{className:"flex-1 overflow-auto",children:e.jsx("div",{className:a.getContainerClass(),children:s})})]})},z=({children:s})=>e.jsx(R,{children:e.jsx(fe,{children:s})}),ve=({children:s})=>{const{layoutUtils:a}=u(),{setSidebarOpen:r}=k();return e.jsxs("div",{className:"min-h-screen bg-black flex flex-col",children:[e.jsx("div",{className:"sticky top-0 z-50",children:e.jsx("nav",{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.jsx("div",{className:"flex items-center justify-between",children:e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx("button",{onClick:()=>r(!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.jsxs("div",{className:"flex flex-1",children:[e.jsx(M,{}),e.jsx("main",{className:"flex-1 overflow-auto",children:e.jsx("div",{className:a.getContainerClass(),children:s})})]}),e.jsx(O,{})]})},W=({children:s})=>e.jsx(R,{children:e.jsx(ve,{children:s})}),_=({children:s})=>{const{layoutUtils:a}=u();return e.jsx("div",{className:"min-h-screen bg-black",children:e.jsx("main",{className:a.getContainerClass(),children:s})})},je=({compact:s=!1})=>{const{current:a,setLayout:r,config:o}=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:a,onChange:n=>r(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(g).map(([n,i])=>e.jsx("option",{value:n,children:i.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(g).map(([n,i])=>e.jsxs("button",{onClick:()=>r(n),className:`
               p-4 rounded-lg border transition-all text-left
               ${a===n?"border-cyan-500 bg-cyan-500/10 text-cyan-400":"border-gray-700 bg-black/30 text-gray-300 hover:border-gray-600"}
-            `,children:[e.jsx("div",{className:"font-semibold mb-1",children:i.name}),e.jsx("div",{className:"text-xs opacity-75",children:i.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:o.name}),e.jsx("div",{className:"text-xs text-gray-400",children:o.description})]})]})};exports.AVAILABLE_LAYOUTS=be;exports.DEFAULT_BREAKPOINTS=m;exports.DEFAULT_LAYOUT=M;exports.DashboardLayout=W;exports.DefaultLayout=S;exports.Footer=O;exports.Header=ye;exports.LAYOUT_CONFIG=g;exports.LayoutSwitcher=je;exports.MainLayout=ge;exports.MinimalLayout=_;exports.Navigation=z;exports.NavigationProvider=me;exports.ResponsiveLayoutProvider=pe;exports.ResponsiveProvider=U;exports.Sidebar=D;exports.SidebarLayout=I;exports.SidebarProvider=R;exports.getBreakpointIndex=b;exports.getBreakpointValue=de;exports.getCurrentBreakpoint=B;exports.useLayout=H;exports.useNavigation=k;exports.useResponsive=A;exports.useResponsiveLayout=u;exports.useResponsiveLayoutContext=F;exports.useSidebar=w;
+            `,children:[e.jsx("div",{className:"font-semibold mb-1",children:i.name}),e.jsx("div",{className:"text-xs opacity-75",children:i.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:o.name}),e.jsx("div",{className:"text-xs text-gray-400",children:o.description})]})]})};exports.AVAILABLE_LAYOUTS=be;exports.DEFAULT_BREAKPOINTS=m;exports.DEFAULT_LAYOUT=D;exports.DashboardLayout=W;exports.DefaultLayout=S;exports.Footer=O;exports.Header=ye;exports.LAYOUT_CONFIG=g;exports.LayoutSwitcher=je;exports.MainLayout=ge;exports.MinimalLayout=_;exports.Navigation=I;exports.NavigationProvider=me;exports.ResponsiveLayoutProvider=pe;exports.ResponsiveProvider=U;exports.Sidebar=M;exports.SidebarLayout=z;exports.SidebarProvider=R;exports.getBreakpointIndex=b;exports.getBreakpointValue=de;exports.getCurrentBreakpoint=A;exports.useLayout=H;exports.useNavigation=w;exports.useResponsive=B;exports.useResponsiveLayout=u;exports.useResponsiveLayoutContext=F;exports.useSidebar=k;
 //# sourceMappingURL=responsive-system.cjs.map

package/dist/responsive-system.cjs.map CHANGED Viewed

	@@ -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 } 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 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 { useNavigation, useSidebar } from '../../context'\r\n\r\nconst Sidebar = () => {\r\n const { isMobile, isTablet, breakpoint } = 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 <>\r\n {/ Hamburger button para móvil /}\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-cyan-400 hover:bg-cyan-500/10 transition-colors bg-black/50 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 {/ Sidebar desktop /}\r\n <aside className={`\r\n bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20\r\n ${isMobile ? 'hidden' : 'w-64 flex-shrink-0'}\r\n ${isTablet ? 'w-56' : 'w-64'}\r\n `}>\r\n <div className=\"p-6 flex flex-col h-full\">\r\n {/ Logo y Breakpoint /}\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 <div>\r\n <span className=\"text-white font-bold text-lg\">Sistema Responsivo</span>\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 mt-1\">\r\n {breakpoint.toUpperCase()}\r\n </div>\r\n </div>\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={() => setCurrentPage(item.id as 'demo' \| 'test')}\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 \r\n </div>\r\n </aside>\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 </>\r\n )\r\n}\r\n\r\nexport default Sidebar\r\n","import { useResponsiveLayout } from '../../hooks'\r\n\r\nconst Footer = () => {\r\n const { layout, breakpoint, width, height } = useResponsiveLayout()\r\n \r\n return (\r\n <footer className=\"bg-gradient-to-r from-gray-900 to-black border-t border-cyan-500/20\">\r\n <div className={`${layout.config.spacing} py-6`}>\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\r\n \r\n {/ Brand /}\r\n <div>\r\n <div className=\"flex items-center space-x-2 mb-3\">\r\n <div className=\"w-6 h-6 bg-cyan-500 rounded flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-xs\">RS</span>\r\n </div>\r\n <span className=\"text-white font-semibold text-sm\">Responsive System</span>\r\n </div>\r\n <p className=\"text-gray-400 text-xs leading-relaxed\">\r\n Sistema completo de auto-escalado para aplicaciones React + Tailwind CSS\r\n </p>\r\n </div>\r\n \r\n {/ Status /}\r\n <div>\r\n <h3 className=\"text-white font-semibold text-sm mb-3\">Estado del Sistema</h3>\r\n <div className=\"space-y-1.5\">\r\n <div className=\"flex items-center justify-between text-xs\">\r\n <span className=\"text-gray-400\">Breakpoint:</span>\r\n <span className=\"text-cyan-400 font-medium\">{breakpoint.toUpperCase()}</span>\r\n </div>\r\n <div className=\"flex items-center justify-between text-xs\">\r\n <span className=\"text-gray-400\">Layout:</span>\r\n <span className=\"text-cyan-400 font-medium\">{layout.config.name}</span>\r\n </div>\r\n <div className=\"flex items-center justify-between text-xs\">\r\n <span className=\"text-gray-400\">Resolución:</span>\r\n <span className=\"text-cyan-400 font-medium\">{width} × {height}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/ Developer /}\r\n <div>\r\n <h3 className=\"text-white font-semibold text-sm mb-3\">Desarrollador</h3>\r\n <div className=\"space-y-2\">\r\n <div className=\"flex items-center space-x-2\">\r\n <div className=\"w-6 h-6 bg-gray-700 rounded-full flex items-center justify-center flex-shrink-0\">\r\n <svg className=\"w-3 h-3 text-gray-300\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\"/>\r\n </svg>\r\n </div>\r\n <div>\r\n <p className=\"text-white font-medium text-xs\">Felipe Caroca</p>\r\n <p className=\"text-gray-400 text-xs\">Frontend Developer</p>\r\n </div>\r\n </div>\r\n <a \r\n href=\"https://github.com/FelipeCaroca1\" \r\n target=\"_blank\" \r\n rel=\"noopener noreferrer\"\r\n className=\"flex items-center space-x-1.5 text-gray-400 hover:text-cyan-400 transition-colors text-xs group\"\r\n >\r\n <svg className=\"w-3 h-3 group-hover:text-cyan-400\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\"/>\r\n </svg>\r\n <span>Ver en GitHub</span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/ Bottom /}\r\n <div className=\"border-t border-gray-800 mt-6 pt-4 flex flex-col items-center text-center\">\r\n <p className=\"text-gray-500 text-xs mb-2\">\r\n © 2025 Responsive System. Todos los derechos reservados.\r\n </p>\r\n <div className=\"flex items-center space-x-2\">\r\n <span className=\"text-gray-500 text-xs\">\r\n Auto-escalado activo\r\n </span>\r\n <div className=\"w-1.5 h-1.5 bg-cyan-400 rounded-full animate-pulse\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n )\r\n}\r\n\r\nexport default Footer\r\n","import { useState } from 'react'\r\nimport { useResponsiveLayout } from '../../hooks'\r\nimport { useNavigation } from '../../context'\r\n\r\nconst Navigation = () => {\r\n const { isMobile, breakpoint } = useResponsiveLayout()\r\n const { currentPage, setCurrentPage } = useNavigation()\r\n const [sidebarOpen, setSidebarOpen] = useState(false)\r\n\r\n const pages = [\r\n { id: 'demo', name: 'Demo' },\r\n { id: 'test', name: 'Suite de Test' }\r\n ]\r\n\r\n return (\r\n <div className=\"sticky top-0 z-50\">\r\n <nav 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 <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 {breakpoint.toUpperCase()}\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 && pages.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.name}\r\n </button>\r\n ))}\r\n \r\n {/ Menú hamburguesa para móvil - A LA DERECHA /}\r\n {isMobile && (\r\n <button\r\n onClick={() => setSidebarOpen(!sidebarOpen)}\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 </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/ Menú móvil desplegable - TRADICIONAL /}\r\n {isMobile && sidebarOpen && (\r\n <div className=\"absolute top-full left-0 right-0 bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl z-50\">\r\n <div className=\"p-4\">\r\n {/ Navigation - VERTICAL como menú tradicional /}\r\n <nav className=\"space-y-2\">\r\n {pages.map((page) => (\r\n <button\r\n key={page.id}\r\n onClick={() => {\r\n setCurrentPage(page.id as 'demo' \| 'test')\r\n setSidebarOpen(false)\r\n }}\r\n className={`w-full text-left px-4 py-3 rounded-lg transition-all font-bold text-sm 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.name}\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </div>\r\n )}\r\n </nav>\r\n </div>\r\n )\r\n}\r\n\r\nexport default Navigation\r\n","import React from 'react'\r\nimport { Navigation, Footer } from '../components/layout'\r\nimport { useResponsiveLayout } from '../hooks'\r\n\r\ninterface DefaultLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {\r\n const { layoutUtils } = useResponsiveLayout()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black flex flex-col\">\r\n {/ Navigation fijo arriba /}\r\n <Navigation />\r\n \r\n {/ Main content con padding-top para la navigation /}\r\n <main className=\"flex-1\">\r\n <div className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </div>\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 { useResponsiveLayout } from '../hooks'\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 const { layoutUtils } = useResponsiveLayout()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black flex\">\r\n {/ Sidebar /}\r\n <Sidebar />\r\n \r\n {/ Main content /}\r\n <main className=\"flex-1 overflow-auto\">\r\n <div className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </div>\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 { useResponsiveLayout } from '../hooks'\r\nimport { Sidebar, Footer } from '../components/layout'\r\nimport { SidebarProvider, useSidebar } 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 const { layoutUtils } = useResponsiveLayout()\r\n const { setSidebarOpen } = useSidebar()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black flex flex-col\">\r\n {/ Navbar para móvil (igual que SidebarLayout) /}\r\n <div className=\"sticky top-0 z-50\">\r\n <nav 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 <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 <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 </div>\r\n </div>\r\n </div>\r\n </nav>\r\n </div>\r\n \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\">\r\n <div className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </div>\r\n </main>\r\n </div>\r\n \r\n {/ Footer */}\r\n <Footer />\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\nimport { useResponsiveLayout } from '../hooks'\r\n\r\ninterface MinimalLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst MinimalLayout: React.FC<MinimalLayoutProps> = ({ children }) => {\r\n const { layoutUtils } = useResponsiveLayout()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black\">\r\n <main className={layoutUtils.getContainerClass()}>\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","pages","layoutUtils","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 } 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 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 { useNavigation, useSidebar } from '../../context'\r\n\r\nconst Sidebar = () => {\r\n const { isMobile, isTablet, breakpoint } = 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 <>\r\n {/ Hamburger button para móvil /}\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-cyan-400 hover:bg-cyan-500/10 transition-colors bg-black/50 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 {/ Sidebar desktop /}\r\n <aside className={`\r\n bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20\r\n ${isMobile ? 'hidden' : 'w-64 flex-shrink-0'}\r\n ${isTablet ? 'w-56' : 'w-64'}\r\n `}>\r\n <div className=\"p-6 flex flex-col h-full\">\r\n {/ Logo y Breakpoint /}\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 <div>\r\n <span className=\"text-white font-bold text-lg\">Sistema Responsivo</span>\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 mt-1\">\r\n {breakpoint.toUpperCase()}\r\n </div>\r\n </div>\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={() => setCurrentPage(item.id as 'demo' \| 'test')}\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 \r\n </div>\r\n </aside>\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 </>\r\n )\r\n}\r\n\r\nexport default Sidebar\r\n","import { useResponsiveLayout } from '../../hooks'\r\n\r\nconst Footer = () => {\r\n const { layout, breakpoint, width, height } = useResponsiveLayout()\r\n \r\n return (\r\n <footer className=\"bg-gradient-to-r from-gray-900 to-black border-t border-cyan-500/20\">\r\n <div className={`${layout.config.spacing} py-6`}>\r\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\r\n \r\n {/ Brand /}\r\n <div>\r\n <div className=\"flex items-center space-x-2 mb-2\">\r\n <div className=\"w-5 h-5 bg-cyan-500 rounded flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-xs\">RS</span>\r\n </div>\r\n <span className=\"text-white font-semibold text-sm\">Responsive System</span>\r\n </div>\r\n <p className=\"text-gray-400 text-xs leading-relaxed\">\r\n Sistema completo de auto-escalado para aplicaciones React + Tailwind CSS\r\n </p>\r\n </div>\r\n \r\n {/ Status /}\r\n <div>\r\n <h3 className=\"text-white font-semibold text-sm mb-2\">Estado del Sistema</h3>\r\n <div className=\"space-y-1\">\r\n <div className=\"flex items-center justify-between text-xs\">\r\n <span className=\"text-gray-400\">Breakpoint:</span>\r\n <span className=\"text-cyan-400 font-medium\">{breakpoint.toUpperCase()}</span>\r\n </div>\r\n <div className=\"flex items-center justify-between text-xs\">\r\n <span className=\"text-gray-400\">Layout:</span>\r\n <span className=\"text-cyan-400 font-medium\">{layout.config.name}</span>\r\n </div>\r\n <div className=\"flex items-center justify-between text-xs\">\r\n <span className=\"text-gray-400\">Resolución:</span>\r\n <span className=\"text-cyan-400 font-medium\">{width} × {height}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/ Developer /}\r\n <div>\r\n <h3 className=\"text-white font-semibold text-sm mb-2\">Desarrollador</h3>\r\n <div className=\"space-y-1\">\r\n <p className=\"text-white font-medium text-xs\">Felipe Caroca</p>\r\n <p className=\"text-gray-400 text-xs\">Frontend Developer</p>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/ Bottom /}\r\n <div className=\"border-t border-gray-800 mt-4 pt-4 flex flex-col items-center text-center\">\r\n <p className=\"text-gray-500 text-xs\">\r\n © 2025 Responsive System. 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 { useState } from 'react'\r\nimport { useResponsiveLayout } from '../../hooks'\r\nimport { useNavigation } from '../../context'\r\n\r\nconst Navigation = () => {\r\n const { isMobile, breakpoint } = useResponsiveLayout()\r\n const { currentPage, setCurrentPage } = useNavigation()\r\n const [sidebarOpen, setSidebarOpen] = useState(false)\r\n\r\n const pages = [\r\n { id: 'demo', name: 'Demo' },\r\n { id: 'test', name: 'Suite de Test' }\r\n ]\r\n\r\n return (\r\n <div className=\"sticky top-0 z-50\">\r\n <nav 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 <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 {breakpoint.toUpperCase()}\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 && pages.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.name}\r\n </button>\r\n ))}\r\n \r\n {/ Menú hamburguesa para móvil - A LA DERECHA /}\r\n {isMobile && (\r\n <button\r\n onClick={() => setSidebarOpen(!sidebarOpen)}\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 </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/ Menú móvil desplegable - TRADICIONAL /}\r\n {isMobile && sidebarOpen && (\r\n <div className=\"absolute top-full left-0 right-0 bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl z-50\">\r\n <div className=\"p-4\">\r\n {/ Navigation - VERTICAL como menú tradicional /}\r\n <nav className=\"space-y-2\">\r\n {pages.map((page) => (\r\n <button\r\n key={page.id}\r\n onClick={() => {\r\n setCurrentPage(page.id as 'demo' \| 'test')\r\n setSidebarOpen(false)\r\n }}\r\n className={`w-full text-left px-4 py-3 rounded-lg transition-all font-bold text-sm 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.name}\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </div>\r\n )}\r\n </nav>\r\n </div>\r\n )\r\n}\r\n\r\nexport default Navigation\r\n","import React from 'react'\r\nimport { Navigation, Footer } from '../components/layout'\r\nimport { useResponsiveLayout } from '../hooks'\r\n\r\ninterface DefaultLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {\r\n const { layoutUtils } = useResponsiveLayout()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black flex flex-col\">\r\n {/ Navigation fijo arriba /}\r\n <Navigation />\r\n \r\n {/ Main content con padding-top para la navigation /}\r\n <main className=\"flex-1\">\r\n <div className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </div>\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 { useResponsiveLayout } from '../hooks'\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 const { layoutUtils } = useResponsiveLayout()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black flex\">\r\n {/ Sidebar /}\r\n <Sidebar />\r\n \r\n {/ Main content /}\r\n <main className=\"flex-1 overflow-auto\">\r\n <div className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </div>\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 { useResponsiveLayout } from '../hooks'\r\nimport { Sidebar, Footer } from '../components/layout'\r\nimport { SidebarProvider, useSidebar } 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 const { layoutUtils } = useResponsiveLayout()\r\n const { setSidebarOpen } = useSidebar()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black flex flex-col\">\r\n {/ Navbar para móvil (igual que SidebarLayout) /}\r\n <div className=\"sticky top-0 z-50\">\r\n <nav 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 <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 <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 </div>\r\n </div>\r\n </div>\r\n </nav>\r\n </div>\r\n \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\">\r\n <div className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </div>\r\n </main>\r\n </div>\r\n \r\n {/ Footer */}\r\n <Footer />\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\nimport { useResponsiveLayout } from '../hooks'\r\n\r\ninterface MinimalLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst MinimalLayout: React.FC<MinimalLayoutProps> = ({ children }) => {\r\n const { layoutUtils } = useResponsiveLayout()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black\">\r\n <main className={layoutUtils.getContainerClass()}>\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","pages","layoutUtils","SidebarLayoutContent","DashboardLayoutContent","LayoutSwitcher","compact","setLayout","config","e","key"],"mappings":"wIAUaA,EAAwD,CAAC,CACpE,SAAAC,EACA,MAAOC,EAAS,EAClB,sBAGY,SAAAD,EAAS,ECVRE,EAAkD,CAC7D,GAAI,IACJ,GAAI,IACJ,GAAI,IACJ,GAAI,KACJ,GAAI,KACJ,MAAO,KACP,MAAO,KACP,MAAO,KACP,MAAO,IACT,EAKaC,EAAwBC,GAC/BA,GAASF,EAAoB,KAAK,EAAU,MAC5CE,GAASF,EAAoB,KAAK,EAAU,MAC5CE,GAASF,EAAoB,KAAK,EAAU,MAC5CE,GAASF,EAAoB,KAAK,EAAU,MAC5CE,GAASF,EAAoB,GAAW,KACxCE,GAASF,EAAoB,GAAW,KACxCE,GAASF,EAAoB,GAAW,KACxCE,GAASF,EAAoB,GAAW,KACrC,KAMIG,EAAsBC,GACC,CAAC,KAAM,KAAM,KAAM,KAAM,KAAM,MAAO,MAAO,MAAO,KAAK,EACxE,QAAQA,CAAU,EAM1BC,GAAsBD,GAC1BJ,EAAoBI,CAAU,EChCvC,SAASE,GACPC,EACAC,EACkC,CAClC,IAAIC,EAAgD,KACpD,MAAO,IAAIC,IAAwB,CAC7BD,gBAAsBA,CAAO,EACjCA,EAAU,WAAW,IAAMF,EAAK,GAAGG,CAAI,EAAGF,CAAI,CAChD,CACF,CAKA,SAASG,GAAeT,EAAeU,EAA0C,CAC/E,OAAOV,GAASU,EAAS,YAAc,UACzC,CAMO,MAAMC,EAAgB,IAAuB,CAClD,KAAM,CAACC,EAAYC,CAAa,EAAIC,WAAS,CAC3C,MAAO,OAAO,OAAW,IAAc,OAAO,WAAa,KAC3D,OAAQ,OAAO,OAAW,IAAc,OAAO,YAAc,GAAA,CAC9D,EAGKC,EAAmBC,EAAAA,YAAY,IAAM,CACzCH,EAAc,CACZ,MAAO,OAAO,WACd,OAAQ,OAAO,WAAA,CAChB,CACH,EAAG,CAAA,CAAE,EAGCI,EAA4BC,EAAAA,QAChC,IAAMd,GAASW,EAAkB,GAAG,EACpC,CAACA,CAAgB,CAAA,EAInBI,EAAAA,UAAU,IAAM,CACd,GAAI,SAAO,OAAW,KAEtB,cAAO,iBAAiB,SAAUF,CAAyB,EAEpD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAyB,CAChE,CACF,EAAG,CAACA,CAAyB,CAAC,EAE9B,KAAM,CAAE,MAAAjB,EAAO,OAAAU,CAAA,EAAWE,EAGpBV,EAAagB,EAAAA,QAAQ,IAAMnB,EAAqBC,CAAK,EAAG,CAACA,CAAK,CAAC,EAG/DoB,EAAcF,UAAQ,IAAMT,GAAeT,EAAOU,CAAM,EAAG,CAACV,EAAOU,CAAM,CAAC,EAG1EW,EAAOnB,IAAe,KACtBoB,EAAOpB,IAAe,KACtBqB,EAAOrB,IAAe,KACtBsB,EAAOtB,IAAe,KACtBuB,EAAOvB,IAAe,KACtBwB,EAAQxB,IAAe,MACvByB,EAAQzB,IAAe,MACvB0B,EAAQ1B,IAAe,MACvB2B,EAAQ3B,IAAe,MAGvB4B,EAAWT,GAAQC,EACnBS,EAAWR,EACXS,EAAYR,GAAQC,GAAQC,GAASC,GAASC,GAASC,EACvDI,EAAUZ,GAAQC,GAAQC,EAC1BW,EAAUV,GAAQC,GAAQC,GAASC,GAASC,GAASC,EACrDM,EAAcR,GAASC,GAASC,EAChCO,EAAOR,GAASC,EAChBQ,EAAOR,EAGPS,EAAalB,IAAgB,WAC7BmB,GAAcnB,IAAgB,YAG9BoB,GAAiBxB,cAAayB,GAC3BxC,EAAmBC,CAAU,GAAKD,EAAmBwC,CAAE,EAC7D,CAACvC,CAAU,CAAC,EAETwC,GAAmB1B,cAAayB,GAC7BxC,EAAmBC,CAAU,GAAKD,EAAmBwC,CAAE,EAC7D,CAACvC,CAAU,CAAC,EAETyC,GAAsB3B,EAAAA,YAAY,CAAC4B,EAAiBC,IAA6B,CACrF,MAAMC,EAAU7C,EAAmBC,CAAU,EAC7C,OAAO4C,GAAW7C,EAAmB2C,CAAG,GAAKE,GAAW7C,EAAmB4C,CAAG,CAChF,EAAG,CAAC3C,CAAU,CAAC,EAGT6C,GAAY/B,cAAagC,GACtBhD,GAASgD,EACf,CAAChD,CAAK,CAAC,EAEJiD,GAAcjC,cAAakC,GACxBlD,GAASkD,EACf,CAAClD,CAAK,CAAC,EAEJmD,GAAiBnC,EAAAA,YAAY,CAACgC,EAAkBE,IAC7ClD,GAASgD,GAAYhD,GAASkD,EACpC,CAAClD,CAAK,CAAC,EAGJoD,GAAapC,cAAaqC,GACvB3C,GAAU2C,EAChB,CAAC3C,CAAM,CAAC,EAEL4C,GAAetC,cAAauC,GACzB7C,GAAU6C,EAChB,CAAC7C,CAAM,CAAC,EAEL8C,GAAkBxC,EAAAA,YAAY,CAACqC,EAAmBE,IAC/C7C,GAAU2C,GAAa3C,GAAU6C,EACvC,CAAC7C,CAAM,CAAC,EAKX,MAAO,CAEL,WAAAR,EACA,MAAAF,EACA,OAAAU,EACA,YAAAU,EAGA,KAAAC,EACA,KAAAC,EACA,KAAAC,EACA,KAAAC,EACA,KAAAC,EACA,MAAAC,EACA,MAAAC,EACA,MAAAC,EACA,MAAAC,EAGA,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EACA,QAAAC,EACA,YAAAC,EACA,KAAAC,EACA,KAAAC,EAGA,WAAAC,EACA,YAAAC,GAGA,eAAAC,GACA,iBAAAE,GACA,oBAAAC,GACA,UAAAI,GACA,YAAAE,GACA,eAAAE,GACA,WAAAC,GACA,aAAAE,GACA,gBAAAE,GAGA,MA9CY,EA8CZ,CAEJ,EClKMC,EAA0BC,EAAAA,cAAiD,MAAS,EAE7EC,EAA6B,IAAM,CAC9C,MAAMC,EAAUC,EAAAA,WAAWJ,CAAuB,EAClD,GAAI,CAACG,EACH,MAAM,IAAI,MAAM,2EAA2E,EAE7F,OAAOA,CACT,EC3BME,EAAiBJ,EAAAA,cAA8C,MAAS,EAEjEK,EAA2D,CAAC,CAAE,SAAAnE,KAAe,CACxF,KAAM,CAACoE,EAAaC,CAAc,EAAInD,EAAAA,SAAS,EAAK,EAEpD,OACEoD,EAAAA,IAACJ,EAAe,SAAf,CAAwB,MAAO,CAAE,YAAAE,EAAa,eAAAC,GAC5C,SAAArE,EACH,CAEJ,EAEauE,EAAa,IAAM,CAC9B,MAAMP,EAAUC,EAAAA,WAAWC,CAAc,EACzC,GAAI,CAACF,EACH,MAAM,IAAI,MAAM,kDAAkD,EAEpE,OAAOA,CACT,EClBMQ,EAAoBV,EAAAA,cAAqC,CAC7D,YAAa,OACb,eAAgB,IAAM,CAAC,CACzB,CAAC,EAEYW,EAAgB,IAAMR,EAAAA,WAAWO,CAAiB,EAOlDE,GAAwD,CAAC,CACpE,SAAA1E,EACA,YAAA2E,EAAc,MAChB,IAAM,CACJ,KAAM,CAACC,EAAaC,CAAc,EAAI3D,EAAAA,SAA0ByD,CAAW,EAE3E,OACEL,EAAAA,IAACE,EAAkB,SAAlB,CAA2B,MAAO,CAAE,YAAAI,EAAa,eAAAC,GAC/C,SAAA7E,EACH,CAEJ,EC5Ba8E,EAAsB,IAAM,CACvC,MAAMd,EAAUD,EAAA,EAEhB,MAAO,CAEL,GAAGC,EAAQ,WAGX,OAAQ,CACN,QAASA,EAAQ,OAAO,QACxB,OAAQA,EAAQ,OAAO,OACvB,UAAWA,EAAQ,OAAO,SAAA,EAI5B,YAAaA,EAAQ,YAGrB,gBAAiB,IAAMA,EAAQ,OAAO,UAAY,UAClD,gBAAiB,IAAMA,EAAQ,OAAO,UAAY,UAClD,kBAAmB,IAAMA,EAAQ,OAAO,UAAY,YACpD,gBAAiB,IAAMA,EAAQ,OAAO,UAAY,UAGlD,KAAM,CACJ,KAAM,CAACZ,EAAW,OAAS,kBAAkBA,CAAQ,GACrD,WAAa2B,GAAwC,CACnD,MAAMC,EAAoB,CAAA,EAC1B,cAAO,QAAQD,CAAW,EAAE,QAAQ,CAAC,CAACzE,EAAY2E,CAAI,IAAM,CACtD3E,IAAe,OACjB0E,EAAQ,KAAK,aAAaC,CAAI,EAAE,EAEhCD,EAAQ,KAAK,GAAG1E,CAAU,cAAc2E,CAAI,EAAE,CAElD,CAAC,EACMD,EAAQ,KAAK,GAAG,CACzB,EACA,MAAQC,GAAiB,aAAaA,CAAI,EAAA,EAI5C,QAAS,CACP,UAAWjB,EAAQ,YAAY,kBAAA,EAC/B,QAAS,OACT,KAAM,MACN,IAAK,OAAA,CACP,CAEJ,EChDakB,EAAY,IAAM,CAC7B,MAAMC,EAAmBL,EAAA,EAEzB,MAAO,CAEL,QAASK,EAAiB,OAAO,QACjC,OAAQA,EAAiB,OAAO,OAChC,UAAWA,EAAiB,OAAO,UAGnC,GAAGA,EAAiB,YAGpB,gBAAiBA,EAAiB,gBAAA,EAClC,gBAAiBA,EAAiB,gBAAA,EAClC,kBAAmBA,EAAiB,kBAAA,EACpC,gBAAiBA,EAAiB,gBAAA,EAGlC,KAAMA,EAAiB,KAGvB,QAASA,EAAiB,OAAA,CAE9B,ECdaC,EAA8C,CACzD,QAAS,CACP,KAAM,UACN,YAAa,4CACb,WAAY,CAAC,aAAc,QAAQ,EACnC,QAAS,oBACT,WAAY,CACV,OAAQ,MACR,OAAQ,MACR,QAAS,KAAA,CACX,EAEF,QAAS,CACP,KAAM,UACN,YAAa,yCACb,WAAY,CAAC,SAAS,EACtB,QAAS,aACT,WAAY,CACV,OAAQ,MACR,OAAQ,MACR,QAAS,KAAA,CACX,EAEF,UAAW,CACT,KAAM,YACN,YAAa,mCACb,WAAY,CAAC,SAAU,UAAW,QAAQ,EAC1C,QAAS,oBACT,WAAY,CACV,OAAQ,MACR,OAAQ,MACR,QAAS,KAAA,CACX,EAEF,QAAS,CACP,KAAM,UACN,YAAa,iCACb,WAAY,CAAA,EACZ,QAAS,aACT,WAAY,CACV,OAAQ,MACR,OAAQ,MACR,QAAS,KAAA,CACX,CAEJ,EAEaC,EAAiB,UACjBC,GAAoB,OAAO,KAAKF,CAAa,ECpCpDG,GAA8E,CAAC,CACnF,SAAAvF,EACA,cAAAwF,EACA,kBAAAC,CACF,IAAM,CAEJ,MAAMC,EAAqB3E,EAAA,EAErB4E,EADmBF,IAAA,GACcC,EAEjC,CAACE,EAAeC,CAAgB,EAAI3E,EAAAA,SAASsE,CAAa,EAE1DM,EAAeV,EAAcQ,CAAa,GAAKR,EAAcC,CAAc,EAuB3EU,EAAe,CACnB,WAAAJ,EACA,OAAQ,CACN,QAASC,EACT,OAAQE,EACR,UAAWD,CAAA,EAEb,YA5BkB,CAClB,kBAAmB,IACbF,EAAW,SAAiBG,EAAa,WAAW,OACpDH,EAAW,SAAiBG,EAAa,WAAW,OACjDA,EAAa,WAAW,QAGjC,aAAc,IAAM,CAClB,MAAME,EAAY,wBAClB,OAAIJ,IAAkB,WAAaA,IAAkB,YAC5C,GAAGI,CAAS,QAEdA,CACT,EAEA,WAAY,IAAMJ,IAAkB,WAAaA,IAAkB,YACnE,UAAW,IAAMA,IAAkB,YACnC,UAAW,IAAMA,IAAkB,WAAaA,IAAkB,YAClE,cAAe,IAAMA,IAAkB,SAAA,CAUvC,EAGF,aACG/B,EAAwB,SAAxB,CAAiC,MAAOkC,EACtC,SAAA/F,EACH,CAEJ,EAEaiG,GAAoE,CAAC,CAChF,SAAAjG,EACA,cAAAwF,EAAgBH,EAChB,kBAAAI,CACF,UAEK1F,EAAA,CACC,SAAAuE,EAAAA,IAACiB,GAAA,CACC,cAAAC,EACA,kBAAAC,EAEC,SAAAzF,CAAA,CAAA,EAEL,ECvEEkG,GAAwC,CAAC,CAAE,SAAAlG,EAAU,OAAQmG,KAAiB,CAClF,KAAM,CAAE,OAAAC,CAAA,EAAWtB,EAAA,EAGbc,EAAgBO,GAAcC,EAAO,QAUrCC,EAPU,CACd,QAASC,EACT,QAASC,EACT,UAAWC,EACX,QAASC,CAAA,EAGqBb,CAAqC,GAAKU,EAE1E,OAAOhC,MAAC+B,GAAiB,SAAArG,EAAS,CACpC,EChCM0G,GAAS,IAAM,CACnB,KAAM,CAAE,SAAAxE,CAAA,EAAa4C,EAAA,EACf,CAAE,YAAAF,EAAa,eAAAC,CAAA,EAAmBJ,EAAA,EAClC,CAAE,YAAAL,EAAa,eAAAC,CAAA,EAAmBE,EAAA,EAElCoC,EAAY,CAChB,CAAE,GAAI,OAAQ,MAAO,eAAA,EACrB,CAAE,GAAI,OAAQ,MAAO,MAAA,CAAO,EAG9B,OACEC,EAAAA,KAAC,MAAA,CAAI,UAAU,oBACb,SAAA,CAAAtC,MAAC,SAAA,CAAO,UAAU,uGAChB,SAAAA,EAAAA,IAAC,OAAI,UAAU,SACb,SAAAA,EAAAA,IAAC,MAAA,CAAI,UAAU,YACb,SAAAsC,OAAC,MAAA,CAAI,UAAU,oCACb,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,8BAEZ,SAAA,CAAA1E,GACCoC,EAAAA,IAAC,SAAA,CACC,QAAS,IAAMD,EAAe,EAAI,EAClC,UAAU,0FAEV,SAAAC,EAAAA,IAAC,OAAI,UAAU,UAAU,KAAK,OAAO,OAAO,eAAe,QAAQ,YACjE,eAAC,OAAA,CAAK,cAAc,QAAQ,eAAe,QAAQ,YAAa,EAAG,EAAE,0BAA0B,CAAA,CACjG,CAAA,CAAA,EAIJsC,EAAAA,KAAC,MAAA,CAAI,UAAU,8BACb,SAAA,CAAAtC,EAAAA,IAAC,MAAA,CAAI,UAAU,iFAAA,CAAkF,EACjGA,EAAAA,IAAC,KAAA,CAAG,UAAU,iDAAiD,SAAA,oBAAA,CAE/D,CAAA,EACF,EACAA,EAAAA,IAAC,MAAA,CAAI,UAAU,sHAAsH,SAAA,WAAA,CAErI,CAAA,EACF,EAEAA,EAAAA,IAAC,OAAI,UAAU,8BAEZ,UAACpC,GAAYyE,EAAU,IAAKE,GAC3BvC,EAAAA,IAAC,SAAA,CAEC,QAAS,IAAMO,EAAegC,EAAK,EAAqB,EACxD,UAAW,gFACTjC,IAAgBiC,EAAK,GACjB,kDACA,qFACN,GAEC,SAAAA,EAAK,KAAA,EARDA,EAAK,EAAA,CAUb,CAAA,CACH,CAAA,EACF,CAAA,CACF,EACF,EACF,EAGC3E,GAAYkC,GACXE,MAAC,OAAI,UAAU,iCAAiC,QAAS,IAAMD,EAAe,EAAK,EACjF,eAAC,MAAA,CAAI,UAAU,qGACb,SAAAuC,OAAC,MAAA,CAAI,UAAU,iCAEb,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,mCACb,SAAA,CAAAtC,EAAAA,IAAC,MAAA,CAAI,UAAU,kEACb,SAAAA,EAAAA,IAAC,QAAK,UAAU,+BAA+B,cAAE,CAAA,CACnD,EACAA,EAAAA,IAAC,OAAA,CAAK,UAAU,+BAA+B,SAAA,oBAAA,CAAkB,CAAA,EACnE,QAGC,MAAA,CAAI,UAAU,YACZ,SAAAqC,EAAU,IAAKG,GACdxC,EAAAA,IAAC,SAAA,CAEC,QAAS,IAAM,CACbO,EAAeiC,EAAK,EAAqB,EACzCzC,EAAe,EAAK,CACtB,EACA,UAAW,gFACTO,IAAgBkC,EAAK,GACjB,yDACA,wDACN,GAEA,SAAAxC,EAAAA,IAAC,OAAA,CAAK,UAAU,cAAe,WAAK,KAAA,CAAM,CAAA,EAXrCwC,EAAK,EAAA,CAab,CAAA,CACH,CAAA,CAAA,CACF,EACF,CAAA,CACF,CAAA,EAEJ,CAEJ,ECnGMC,EAAU,IAAM,CACpB,KAAM,CAAE,SAAA7E,EAAU,SAAAC,EAAU,WAAA7B,CAAA,EAAewE,EAAA,EACrC,CAAE,YAAAF,EAAa,eAAAC,CAAA,EAAmBJ,EAAA,EAClC,CAAE,YAAAL,EAAa,eAAAC,CAAA,EAAmBE,EAAA,EAElCoC,EAAY,CAChB,CAAE,GAAI,OAAQ,MAAO,eAAA,EACrB,CAAE,GAAI,OAAQ,MAAO,MAAA,CAAO,EAG9B,OACEC,EAAAA,KAAAI,WAAA,CAEG,SAAA,CAAA9E,GACCoC,EAAAA,IAAC,SAAA,CACC,QAAS,IAAMD,EAAe,EAAI,EAClC,UAAU,qJAEV,SAAAC,EAAAA,IAAC,OAAI,UAAU,UAAU,KAAK,OAAO,OAAO,eAAe,QAAQ,YACjE,eAAC,OAAA,CAAK,cAAc,QAAQ,eAAe,QAAQ,YAAa,EAAG,EAAE,0BAA0B,CAAA,CACjG,CAAA,CAAA,EAKJA,MAAC,SAAM,UAAW;AAAA;AAAA,UAEdpC,EAAW,SAAW,oBAAoB;AAAA,UAC1CC,EAAW,OAAS,MAAM;AAAA,QAE9B,SAAAyE,OAAC,MAAA,CAAI,UAAU,2BAEb,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,mCACb,SAAA,CAAAtC,EAAAA,IAAC,MAAA,CAAI,UAAU,kEACb,SAAAA,EAAAA,IAAC,QAAK,UAAU,+BAA+B,cAAE,CAAA,CACnD,SACC,MAAA,CACC,SAAA,CAAAA,EAAAA,IAAC,OAAA,CAAK,UAAU,+BAA+B,SAAA,qBAAkB,QAChE,MAAA,CAAI,UAAU,2HACZ,SAAAhE,EAAW,aAAY,CAC1B,CAAA,CAAA,CACF,CAAA,EACF,QAGC,MAAA,CAAI,UAAU,YACZ,SAAAqG,EAAU,IAAKG,GACdxC,EAAAA,IAAC,SAAA,CAEC,QAAS,IAAMO,EAAeiC,EAAK,EAAqB,EACxD,UAAW,gFACTlC,IAAgBkC,EAAK,GACjB,yDACA,wDACN,GAEA,SAAAxC,EAAAA,IAAC,OAAA,CAAK,UAAU,cAAe,WAAK,KAAA,CAAM,CAAA,EARrCwC,EAAK,EAAA,CAUb,CAAA,CACH,CAAA,CAAA,CAEF,CAAA,CACA,EAGC5E,GAAYkC,GACXE,MAAC,OAAI,UAAU,iCAAiC,QAAS,IAAMD,EAAe,EAAK,EACjF,eAAC,MAAA,CAAI,UAAU,qGACb,SAAAuC,OAAC,MAAA,CAAI,UAAU,iCAEb,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,mCACb,SAAA,CAAAtC,EAAAA,IAAC,MAAA,CAAI,UAAU,kEACb,SAAAA,EAAAA,IAAC,QAAK,UAAU,+BAA+B,cAAE,CAAA,CACnD,EACAA,EAAAA,IAAC,OAAA,CAAK,UAAU,+BAA+B,SAAA,oBAAA,CAAkB,CAAA,EACnE,QAGC,MAAA,CAAI,UAAU,YACZ,SAAAqC,EAAU,IAAKG,GACdxC,EAAAA,IAAC,SAAA,CAEC,QAAS,IAAM,CACbO,EAAeiC,EAAK,EAAqB,EACzCzC,EAAe,EAAK,CACtB,EACA,UAAW,gFACTO,IAAgBkC,EAAK,GACjB,yDACA,wDACN,GAEA,SAAAxC,EAAAA,IAAC,OAAA,CAAK,UAAU,cAAe,WAAK,KAAA,CAAM,CAAA,EAXrCwC,EAAK,EAAA,CAab,CAAA,CACH,CAAA,CAAA,CACF,EACF,CAAA,CACF,CAAA,EAEJ,CAEJ,ECvGMG,EAAS,IAAM,CACnB,KAAM,CAAE,OAAAb,EAAQ,WAAA9F,EAAY,MAAAF,EAAO,OAAAU,CAAA,EAAWgE,EAAA,EAE9C,OACER,EAAAA,IAAC,SAAA,CAAO,UAAU,sEAChB,SAAAsC,OAAC,MAAA,CAAI,UAAW,GAAGR,EAAO,OAAO,OAAO,QACtC,SAAA,CAAAQ,EAAAA,KAAC,MAAA,CAAI,UAAU,wCAGb,SAAA,CAAAA,OAAC,MAAA,CACC,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,mCACb,SAAA,CAAAtC,EAAAA,IAAC,MAAA,CAAI,UAAU,+DACb,SAAAA,EAAAA,IAAC,QAAK,UAAU,+BAA+B,cAAE,CAAA,CACnD,EACAA,EAAAA,IAAC,OAAA,CAAK,UAAU,mCAAmC,SAAA,mBAAA,CAAiB,CAAA,EACtE,EACAA,EAAAA,IAAC,IAAA,CAAE,UAAU,wCAAwC,SAAA,0EAAA,CAErD,CAAA,EACF,SAGC,MAAA,CACC,SAAA,CAAAA,EAAAA,IAAC,KAAA,CAAG,UAAU,wCAAwC,SAAA,qBAAkB,EACxEsC,EAAAA,KAAC,MAAA,CAAI,UAAU,YACb,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,4CACb,SAAA,CAAAtC,EAAAA,IAAC,OAAA,CAAK,UAAU,gBAAgB,SAAA,cAAW,QAC1C,OAAA,CAAK,UAAU,4BAA6B,SAAAhE,EAAW,aAAY,CAAE,CAAA,EACxE,EACAsG,EAAAA,KAAC,MAAA,CAAI,UAAU,4CACb,SAAA,CAAAtC,EAAAA,IAAC,OAAA,CAAK,UAAU,gBAAgB,SAAA,UAAO,QACtC,OAAA,CAAK,UAAU,4BAA6B,SAAA8B,EAAO,OAAO,IAAA,CAAK,CAAA,EAClE,EACAQ,EAAAA,KAAC,MAAA,CAAI,UAAU,4CACb,SAAA,CAAAtC,EAAAA,IAAC,OAAA,CAAK,UAAU,gBAAgB,SAAA,cAAW,EAC3CsC,EAAAA,KAAC,OAAA,CAAK,UAAU,4BAA6B,SAAA,CAAAxG,EAAM,MAAIU,CAAA,CAAA,CAAO,CAAA,CAAA,CAChE,CAAA,CAAA,CACF,CAAA,EACF,SAGC,MAAA,CACC,SAAA,CAAAwD,EAAAA,IAAC,KAAA,CAAG,UAAU,wCAAwC,SAAA,gBAAa,EACnEsC,EAAAA,KAAC,MAAA,CAAI,UAAU,YACb,SAAA,CAAAtC,EAAAA,IAAC,IAAA,CAAE,UAAU,iCAAiC,SAAA,gBAAa,EAC3DA,EAAAA,IAAC,IAAA,CAAE,UAAU,wBAAwB,SAAA,oBAAA,CAAkB,CAAA,CAAA,CACzD,CAAA,CAAA,CACF,CAAA,EACF,EAGAA,EAAAA,IAAC,OAAI,UAAU,4EACb,eAAC,IAAA,CAAE,UAAU,wBAAwB,SAAA,0DAAA,CAErC,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CACF,CAEJ,ECzDM4C,EAAa,IAAM,CACvB,KAAM,CAAE,SAAAhF,EAAU,WAAA5B,CAAA,EAAewE,EAAA,EAC3B,CAAE,YAAAF,EAAa,eAAAC,CAAA,EAAmBJ,EAAA,EAClC,CAACL,EAAaC,CAAc,EAAInD,EAAAA,SAAS,EAAK,EAE9CiG,EAAQ,CACZ,CAAE,GAAI,OAAQ,KAAM,MAAA,EACpB,CAAE,GAAI,OAAQ,KAAM,eAAA,CAAgB,EAGtC,aACG,MAAA,CAAI,UAAU,oBACb,SAAAP,EAAAA,KAAC,MAAA,CAAI,UAAU,uGACb,SAAA,CAAAtC,EAAAA,IAAC,MAAA,CAAI,UAAU,SACb,SAAAA,EAAAA,IAAC,MAAA,CAAI,UAAU,YACb,SAAAsC,OAAC,MAAA,CAAI,UAAU,oCACf,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,8BACb,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,8BACb,SAAA,CAAAtC,EAAAA,IAAC,MAAA,CAAI,UAAU,iFAAA,CAAkF,EACjGA,EAAAA,IAAC,KAAA,CAAG,UAAU,iDAAiD,SAAA,oBAAA,CAE/D,CAAA,EACF,QACC,MAAA,CAAI,UAAU,sHACZ,SAAAhE,EAAW,aAAY,CAC1B,CAAA,EACF,EAEAsG,EAAAA,KAAC,MAAA,CAAI,UAAU,8BAEZ,SAAA,CAAA,CAAC1E,GAAYiF,EAAM,IAAIN,GACtBvC,EAAAA,IAAC,SAAA,CAEC,QAAS,IAAMO,EAAegC,EAAK,EAAqB,EACxD,UAAW,gFACTjC,IAAgBiC,EAAK,GACjB,kDACA,qFACN,GAEC,SAAAA,EAAK,IAAA,EARDA,EAAK,EAAA,CAUb,EAGA3E,GACCoC,EAAAA,IAAC,SAAA,CACC,QAAS,IAAMD,EAAe,CAACD,CAAW,EAC1C,UAAU,0FAEV,SAAAE,EAAAA,IAAC,OAAI,UAAU,UAAU,KAAK,OAAO,OAAO,eAAe,QAAQ,YACjE,eAAC,OAAA,CAAK,cAAc,QAAQ,eAAe,QAAQ,YAAa,EAAG,EAAE,0BAA0B,CAAA,CACjG,CAAA,CAAA,CACF,CAAA,CAEJ,CAAA,CAAA,CACF,EACF,EACF,EAGCpC,GAAYkC,GACXE,MAAC,MAAA,CAAI,UAAU,oIACb,SAAAA,EAAAA,IAAC,MAAA,CAAI,UAAU,MAEb,eAAC,MAAA,CAAI,UAAU,YACZ,SAAA6C,EAAM,IAAKN,GACVvC,EAAAA,IAAC,SAAA,CAEC,QAAS,IAAM,CACbO,EAAegC,EAAK,EAAqB,EACzCxC,EAAe,EAAK,CACtB,EACA,UAAW,+FACTO,IAAgBiC,EAAK,GACjB,kDACA,qFACN,GAEC,SAAAA,EAAK,IAAA,EAXDA,EAAK,EAAA,CAab,CAAA,CACH,CAAA,CACF,CAAA,CACF,CAAA,CAAA,CAEF,CAAA,CACF,CAEJ,ECrFMP,EAA8C,CAAC,CAAE,SAAAtG,KAAe,CACpE,KAAM,CAAE,YAAAoH,CAAA,EAAgBtC,EAAA,EAExB,OACE8B,EAAAA,KAAC,MAAA,CAAI,UAAU,sCAEb,SAAA,CAAAtC,EAAAA,IAAC4C,EAAA,EAAW,EAGZ5C,EAAAA,IAAC,OAAA,CAAK,UAAU,SACd,SAAAA,EAAAA,IAAC,MAAA,CAAI,UAAW8C,EAAY,kBAAA,EACzB,SAAApH,CAAA,CACH,CAAA,CACF,QAGCiH,EAAA,CAAA,CAAO,CAAA,EACV,CAEJ,EClBMI,GAAgE,CAAC,CAAE,SAAArH,KAAe,CACtF,KAAM,CAAE,YAAAoH,CAAA,EAAgBtC,EAAA,EAExB,OACE8B,EAAAA,KAAC,MAAA,CAAI,UAAU,6BAEb,SAAA,CAAAtC,EAAAA,IAACyC,EAAA,EAAQ,EAGTzC,EAAAA,IAAC,OAAA,CAAK,UAAU,uBACd,SAAAA,EAAAA,IAAC,MAAA,CAAI,UAAW8C,EAAY,kBAAA,EACzB,SAAApH,CAAA,CACH,CAAA,CACF,CAAA,EACF,CAEJ,EAEMuG,EAA8C,CAAC,CAAE,SAAAvG,KAEnDsE,EAAAA,IAACH,EAAA,CACC,SAAAG,EAAAA,IAAC+C,GAAA,CAAsB,SAAArH,EAAS,EAClC,ECtBEsH,GAAkE,CAAC,CAAE,SAAAtH,KAAe,CACxF,KAAM,CAAE,YAAAoH,CAAA,EAAgBtC,EAAA,EAClB,CAAE,eAAAT,CAAA,EAAmBE,EAAA,EAE3B,OACEqC,EAAAA,KAAC,MAAA,CAAI,UAAU,sCAEb,SAAA,CAAAtC,EAAAA,IAAC,MAAA,CAAI,UAAU,oBACb,SAAAA,EAAAA,IAAC,OAAI,UAAU,uGACb,SAAAA,EAAAA,IAAC,MAAA,CAAI,UAAU,SACb,eAAC,MAAA,CAAI,UAAU,YACb,SAAAA,EAAAA,IAAC,MAAA,CAAI,UAAU,oCACb,SAAAsC,OAAC,MAAA,CAAI,UAAU,8BAEb,SAAA,CAAAtC,EAAAA,IAAC,SAAA,CACC,QAAS,IAAMD,EAAe,EAAI,EAClC,UAAU,0FAEV,SAAAC,EAAAA,IAAC,OAAI,UAAU,UAAU,KAAK,OAAO,OAAO,eAAe,QAAQ,YACjE,eAAC,OAAA,CAAK,cAAc,QAAQ,eAAe,QAAQ,YAAa,EAAG,EAAE,0BAA0B,CAAA,CACjG,CAAA,CAAA,EAGFsC,EAAAA,KAAC,MAAA,CAAI,UAAU,8BACb,SAAA,CAAAtC,EAAAA,IAAC,MAAA,CAAI,UAAU,iFAAA,CAAkF,EACjGA,EAAAA,IAAC,KAAA,CAAG,UAAU,iDAAiD,SAAA,oBAAA,CAE/D,CAAA,EACF,EACAA,EAAAA,IAAC,MAAA,CAAI,UAAU,sHAAsH,SAAA,WAAA,CAErI,CAAA,CAAA,CACF,CAAA,CACF,CAAA,CACF,CAAA,CACF,CAAA,CACF,CAAA,CACF,EAGAsC,EAAAA,KAAC,MAAA,CAAI,UAAU,cAEb,SAAA,CAAAtC,EAAAA,IAACyC,EAAA,EAAQ,EAGTzC,EAAAA,IAAC,OAAA,CAAK,UAAU,uBACd,SAAAA,EAAAA,IAAC,MAAA,CAAI,UAAW8C,EAAY,kBAAA,EACzB,SAAApH,CAAA,CACH,CAAA,CACF,CAAA,EACF,QAGCiH,EAAA,CAAA,CAAO,CAAA,EACV,CAEJ,EAEMT,EAAkD,CAAC,CAAE,SAAAxG,KAEvDsE,EAAAA,IAACH,EAAA,CACC,SAAAG,EAAAA,IAACgD,GAAA,CAAwB,SAAAtH,EAAS,EACpC,EChEEyG,EAA8C,CAAC,CAAE,SAAAzG,KAAe,CACpE,KAAM,CAAE,YAAAoH,CAAA,EAAgBtC,EAAA,EAExB,OACER,EAAAA,IAAC,MAAA,CAAI,UAAU,wBACb,SAAAA,EAAAA,IAAC,OAAA,CAAK,UAAW8C,EAAY,kBAAA,EAC1B,SAAApH,CAAA,CACH,CAAA,CACF,CAEJ,ECVMuH,GAAiB,CAAC,CAAE,QAAAC,EAAU,MAAiC,CACnE,KAAM,CAAE,QAAAtE,EAAS,UAAAuE,EAAW,OAAAC,CAAA,EAAWxC,EAAA,EAEvC,OAAIsC,EAEAZ,EAAAA,KAAC,MAAA,CAAI,UAAU,oDACb,SAAA,CAAAtC,EAAAA,IAAC,MAAA,CAAI,UAAU,6BAA6B,SAAA,UAAO,EACnDA,EAAAA,IAAC,SAAA,CACC,MAAOpB,EACP,SAAWyE,GAAMF,EAAUE,EAAE,OAAO,KAAK,EACzC,UAAU,qIAET,gBAAO,QAAQvC,CAAa,EAAE,IAAI,CAAC,CAACwC,EAAK9B,CAAY,UACnD,SAAA,CAAiB,MAAO8B,EACtB,SAAA9B,EAAa,IAAA,EADH8B,CAEb,CACD,CAAA,CAAA,CACH,EACF,EAKFhB,EAAAA,KAAC,MAAA,CAAI,UAAU,wEACb,SAAA,CAAAtC,EAAAA,IAAC,KAAA,CAAG,UAAU,gCAAgC,SAAA,iBAAc,EAE5DA,EAAAA,IAAC,MAAA,CAAI,UAAU,uDACZ,SAAA,OAAO,QAAQc,CAAa,EAAE,IAAI,CAAC,CAACwC,EAAK9B,CAAY,IACpDc,EAAAA,KAAC,SAAA,CAEC,QAAS,IAAMa,EAAUG,CAAG,EAC5B,UAAW;AAAA;AAAA,gBAEP1E,IAAY0E,EACV,+CACA,iEACJ;AAAA,cAGF,SAAA,CAAAtD,EAAAA,IAAC,MAAA,CAAI,UAAU,qBAAsB,SAAAwB,EAAa,KAAK,EACvDxB,EAAAA,IAAC,MAAA,CAAI,UAAU,qBAAsB,WAAa,WAAA,CAAY,CAAA,CAAA,EAXzDsD,CAAA,CAaR,EACH,EAEAhB,EAAAA,KAAC,MAAA,CAAI,UAAU,qCACb,SAAA,CAAAtC,EAAAA,IAAC,MAAA,CAAI,UAAU,6BAA6B,SAAA,iBAAc,EAC1DA,EAAAA,IAAC,MAAA,CAAI,UAAU,oCAAqC,WAAO,KAAK,EAChEA,EAAAA,IAAC,MAAA,CAAI,UAAU,wBAAyB,WAAO,WAAA,CAAY,CAAA,CAAA,CAC7D,CAAA,EACF,CAEJ"}

package/dist/responsive-system.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as e, Fragment as B, jsxs as s } from "react/jsx-runtime";
-import { useState as w, useCallback as m, useMemo as D, useEffect as oe, createContext as M, useContext as R } from "react";
+import { useState as w, useCallback as m, useMemo as D, useEffect as oe, createContext as R, useContext as M } from "react";
 const le = ({
   children: t,
   debug: n = !1
@@ -42,10 +42,10 @@ const me = () => {
         window.removeEventListener("resize", l);
       };
   }, [l]);
-  const { width: r, height: o } = t, a = D(() => ce(r), [r]), c = D(() => ue(r, o), [r, o]), d = a === "xs", k = a === "sm", y = a === "md", p = a === "lg", C = a === "xl", S = a === "2xl", L = a === "3xl", f = a === "4xl", g = a === "5xl", W = d || k, I = y, X = p || C || S || L || f || g, _ = d || k || y, V = p || C || S || L || f || g, K = L || f || g, Y = f || g, G = g, q = c === "portrait", J = c === "landscape", Q = m((u) => x(a) >= x(u), [a]), Z = m((u) => x(a) <= x(u), [a]), ee = m((u, v) => {
+  const { width: r, height: o } = t, a = D(() => ce(r), [r]), c = D(() => ue(r, o), [r, o]), d = a === "xs", k = a === "sm", y = a === "md", p = a === "lg", C = a === "xl", S = a === "2xl", L = a === "3xl", f = a === "4xl", g = a === "5xl", W = d || k, I = y, X = p || C || S || L || f || g, _ = d || k || y, K = p || C || S || L || f || g, V = L || f || g, Y = f || g, q = g, G = c === "portrait", J = c === "landscape", Q = m((u) => x(a) >= x(u), [a]), Z = m((u) => x(a) <= x(u), [a]), ee = m((u, v) => {
     const O = x(a);
     return O >= x(u) && O <= x(v);
-  }, [a]), te = m((u) => r >= u, [r]), ae = m((u) => r <= u, [r]), se = m((u, v) => r >= u && r <= v, [r]), ne = m((u) => o >= u, [o]), re = m((u) => o <= u, [o]), ie = m((u, v) => o >= u && o <= v, [o]);
+  }, [a]), te = m((u) => r >= u, [r]), ae = m((u) => r <= u, [r]), ne = m((u, v) => r >= u && r <= v, [r]), se = m((u) => o >= u, [o]), re = m((u) => o <= u, [o]), ie = m((u, v) => o >= u && o <= v, [o]);
   return {
     // Estado básico
     breakpoint: a,
@@ -67,12 +67,12 @@ const me = () => {
     isTablet: I,
     isDesktop: X,
     isSmall: _,
-    isLarge: V,
-    isUltraWide: K,
+    isLarge: K,
+    isUltraWide: V,
     is4K: Y,
-    is5K: G,
+    is5K: q,
     // Helpers de orientación
-    isPortrait: q,
+    isPortrait: G,
     isLandscape: J,
     // Funciones de comparación
     isBreakpointUp: Q,
@@ -80,36 +80,36 @@ const me = () => {
     isBreakpointBetween: ee,
     isWidthUp: te,
     isWidthDown: ae,
-    isWidthBetween: se,
-    isHeightUp: ne,
+    isWidthBetween: ne,
+    isHeightUp: se,
     isHeightDown: re,
     isHeightBetween: ie,
     // Debug
     debug: !1
   };
-}, T = M(void 0), be = () => {
-  const t = R(T);
+}, T = R(void 0), be = () => {
+  const t = M(T);
   if (!t)
     throw new Error("useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider");
   return t;
-}, $ = M(void 0), A = ({ children: t }) => {
+}, $ = R(void 0), A = ({ children: t }) => {
   const [n, i] = w(!1);
   return /* @__PURE__ */ e($.Provider, { value: { sidebarOpen: n, setSidebarOpen: i }, children: t });
-}, j = () => {
-  const t = R($);
+}, U = () => {
+  const t = M($);
   if (!t)
     throw new Error("useSidebar must be used within a SidebarProvider");
   return t;
-}, z = M({
+}, E = R({
   currentPage: "test",
   setCurrentPage: () => {
   }
-}), U = () => R(z), Se = ({
+}), j = () => M(E), Se = ({
   children: t,
   defaultPage: n = "test"
 }) => {
   const [i, l] = w(n);
-  return /* @__PURE__ */ e(z.Provider, { value: { currentPage: i, setCurrentPage: l }, children: t });
+  return /* @__PURE__ */ e(E.Provider, { value: { currentPage: i, setCurrentPage: l }, children: t });
 }, b = () => {
   const t = be();
   return {
@@ -236,7 +236,7 @@ const me = () => {
     }
   };
   return /* @__PURE__ */ e(T.Provider, { value: y, children: t });
-}, Me = ({
+}, Re = ({
   children: t,
   defaultLayout: n = F,
   useResponsiveHook: i
@@ -247,7 +247,7 @@ const me = () => {
     useResponsiveHook: i,
     children: t
   }
-) }), Re = ({ children: t, layout: n }) => {
+) }), Me = ({ children: t, layout: n }) => {
   const { layout: i } = b(), l = n || i.current, o = {
     default: P,
     sidebar: ye,
@@ -255,8 +255,8 @@ const me = () => {
     minimal: Ne
   }[l] || P;
   return /* @__PURE__ */ e(o, { children: t });
-}, je = () => {
-  const { isMobile: t } = b(), { currentPage: n, setCurrentPage: i } = U(), { sidebarOpen: l, setSidebarOpen: r } = j(), o = [
+}, Ue = () => {
+  const { isMobile: t } = b(), { currentPage: n, setCurrentPage: i } = j(), { sidebarOpen: l, setSidebarOpen: r } = U(), o = [
     { id: "test", label: "Suite de Test" },
     { id: "demo", label: "Demo" }
   ];
@@ -306,7 +306,7 @@ const me = () => {
     ] }) }) })
   ] });
 }, H = () => {
-  const { isMobile: t, isTablet: n, breakpoint: i } = b(), { currentPage: l, setCurrentPage: r } = U(), { sidebarOpen: o, setSidebarOpen: a } = j(), c = [
+  const { isMobile: t, isTablet: n, breakpoint: i } = b(), { currentPage: l, setCurrentPage: r } = j(), { sidebarOpen: o, setSidebarOpen: a } = U(), c = [
     { id: "test", label: "Suite de Test" },
     { id: "demo", label: "Demo" }
   ];
@@ -359,20 +359,20 @@ const me = () => {
       )) })
     ] }) }) })
   ] });
-}, E = () => {
+}, z = () => {
   const { layout: t, breakpoint: n, width: i, height: l } = b();
   return /* @__PURE__ */ e("footer", { className: "bg-gradient-to-r from-gray-900 to-black border-t border-cyan-500/20", children: /* @__PURE__ */ s("div", { className: `${t.config.spacing} py-6`, children: [
-    /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
+    /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [
       /* @__PURE__ */ s("div", { children: [
-        /* @__PURE__ */ s("div", { className: "flex items-center space-x-2 mb-3", children: [
-          /* @__PURE__ */ e("div", { className: "w-6 h-6 bg-cyan-500 rounded flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-white font-bold text-xs", children: "RS" }) }),
+        /* @__PURE__ */ s("div", { className: "flex items-center space-x-2 mb-2", children: [
+          /* @__PURE__ */ e("div", { className: "w-5 h-5 bg-cyan-500 rounded flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-white font-bold text-xs", children: "RS" }) }),
           /* @__PURE__ */ e("span", { className: "text-white font-semibold text-sm", children: "Responsive System" })
         ] }),
         /* @__PURE__ */ e("p", { className: "text-gray-400 text-xs leading-relaxed", children: "Sistema completo de auto-escalado para aplicaciones React + Tailwind CSS" })
       ] }),
       /* @__PURE__ */ s("div", { children: [
-        /* @__PURE__ */ e("h3", { className: "text-white font-semibold text-sm mb-3", children: "Estado del Sistema" }),
-        /* @__PURE__ */ s("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ e("h3", { className: "text-white font-semibold text-sm mb-2", children: "Estado del Sistema" }),
+        /* @__PURE__ */ s("div", { className: "space-y-1", children: [
           /* @__PURE__ */ s("div", { className: "flex items-center justify-between text-xs", children: [
             /* @__PURE__ */ e("span", { className: "text-gray-400", children: "Breakpoint:" }),
             /* @__PURE__ */ e("span", { className: "text-cyan-400 font-medium", children: n.toUpperCase() })
@@ -392,41 +392,17 @@ const me = () => {
         ] })
       ] }),
       /* @__PURE__ */ s("div", { children: [
-        /* @__PURE__ */ e("h3", { className: "text-white font-semibold text-sm mb-3", children: "Desarrollador" }),
-        /* @__PURE__ */ s("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
-            /* @__PURE__ */ e("div", { className: "w-6 h-6 bg-gray-700 rounded-full flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ e("svg", { className: "w-3 h-3 text-gray-300", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" }) }) }),
-            /* @__PURE__ */ s("div", { children: [
-              /* @__PURE__ */ e("p", { className: "text-white font-medium text-xs", children: "Felipe Caroca" }),
-              /* @__PURE__ */ e("p", { className: "text-gray-400 text-xs", children: "Frontend Developer" })
-            ] })
-          ] }),
-          /* @__PURE__ */ s(
-            "a",
-            {
-              href: "https://github.com/FelipeCaroca1",
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "flex items-center space-x-1.5 text-gray-400 hover:text-cyan-400 transition-colors text-xs group",
-              children: [
-                /* @__PURE__ */ e("svg", { className: "w-3 h-3 group-hover:text-cyan-400", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" }) }),
-                /* @__PURE__ */ e("span", { children: "Ver en GitHub" })
-              ]
-            }
-          )
+        /* @__PURE__ */ e("h3", { className: "text-white font-semibold text-sm mb-2", children: "Desarrollador" }),
+        /* @__PURE__ */ s("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ e("p", { className: "text-white font-medium text-xs", children: "Felipe Caroca" }),
+          /* @__PURE__ */ e("p", { className: "text-gray-400 text-xs", children: "Frontend Developer" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ s("div", { className: "border-t border-gray-800 mt-6 pt-4 flex flex-col items-center text-center", children: [
-      /* @__PURE__ */ e("p", { className: "text-gray-500 text-xs mb-2", children: "© 2025 Responsive System. Todos los derechos reservados." }),
-      /* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ e("span", { className: "text-gray-500 text-xs", children: "Auto-escalado activo" }),
-        /* @__PURE__ */ e("div", { className: "w-1.5 h-1.5 bg-cyan-400 rounded-full animate-pulse" })
-      ] })
-    ] })
+    /* @__PURE__ */ e("div", { className: "border-t border-gray-800 mt-4 pt-4 flex flex-col items-center text-center", children: /* @__PURE__ */ e("p", { className: "text-gray-500 text-xs", children: "© 2025 Responsive System. Todos los derechos reservados." }) })
   ] }) });
 }, pe = () => {
-  const { isMobile: t, breakpoint: n } = b(), { currentPage: i, setCurrentPage: l } = U(), [r, o] = w(!1), a = [
+  const { isMobile: t, breakpoint: n } = b(), { currentPage: i, setCurrentPage: l } = j(), [r, o] = w(!1), a = [
     { id: "demo", name: "Demo" },
     { id: "test", name: "Suite de Test" }
   ];
@@ -476,7 +452,7 @@ const me = () => {
   return /* @__PURE__ */ s("div", { className: "min-h-screen bg-black flex flex-col", children: [
     /* @__PURE__ */ e(pe, {}),
     /* @__PURE__ */ e("main", { className: "flex-1", children: /* @__PURE__ */ e("div", { className: n.getContainerClass(), children: t }) }),
-    /* @__PURE__ */ e(E, {})
+    /* @__PURE__ */ e(z, {})
   ] });
 }, ge = ({ children: t }) => {
   const { layoutUtils: n } = b();
@@ -485,7 +461,7 @@ const me = () => {
     /* @__PURE__ */ e("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e("div", { className: n.getContainerClass(), children: t }) })
   ] });
 }, ye = ({ children: t }) => /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(ge, { children: t }) }), fe = ({ children: t }) => {
-  const { layoutUtils: n } = b(), { setSidebarOpen: i } = j();
+  const { layoutUtils: n } = b(), { setSidebarOpen: i } = U();
   return /* @__PURE__ */ s("div", { className: "min-h-screen bg-black flex flex-col", children: [
     /* @__PURE__ */ e("div", { className: "sticky top-0 z-50", children: /* @__PURE__ */ e("nav", { className: "bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative", children: /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e("div", { className: "px-4 py-4", children: /* @__PURE__ */ e("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
       /* @__PURE__ */ e(
@@ -506,12 +482,12 @@ const me = () => {
       /* @__PURE__ */ e(H, {}),
       /* @__PURE__ */ e("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e("div", { className: n.getContainerClass(), children: t }) })
     ] }),
-    /* @__PURE__ */ e(E, {})
+    /* @__PURE__ */ e(z, {})
   ] });
 }, ve = ({ children: t }) => /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(fe, { children: t }) }), Ne = ({ children: t }) => {
   const { layoutUtils: n } = b();
   return /* @__PURE__ */ e("div", { className: "min-h-screen bg-black", children: /* @__PURE__ */ e("main", { className: n.getContainerClass(), children: t }) });
-}, Ue = ({ compact: t = !1 }) => {
+}, je = ({ compact: t = !1 }) => {
   const { current: n, setLayout: i, config: l } = he();
   return t ? /* @__PURE__ */ s("div", { className: "bg-black/50 rounded-lg p-3 border border-gray-700", children: [
     /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 mb-2", children: "Layout:" }),
@@ -554,15 +530,15 @@ export {
   F as DEFAULT_LAYOUT,
   ve as DashboardLayout,
   P as DefaultLayout,
-  E as Footer,
-  je as Header,
+  z as Footer,
+  Ue as Header,
   N as LAYOUT_CONFIG,
-  Ue as LayoutSwitcher,
-  Re as MainLayout,
+  je as LayoutSwitcher,
+  Me as MainLayout,
   Ne as MinimalLayout,
   pe as Navigation,
   Se as NavigationProvider,
-  Me as ResponsiveLayoutProvider,
+  Re as ResponsiveLayoutProvider,
   le as ResponsiveProvider,
   H as Sidebar,
   ye as SidebarLayout,
@@ -571,10 +547,10 @@ export {
   Ce as getBreakpointValue,
   ce as getCurrentBreakpoint,
   he as useLayout,
-  U as useNavigation,
+  j as useNavigation,
   me as useResponsive,
   b as useResponsiveLayout,
   be as useResponsiveLayoutContext,
-  j as useSidebar
+  U as useSidebar
 };
 //# sourceMappingURL=responsive-system.mjs.map

package/dist/responsive-system.mjs.map CHANGED Viewed

	@@ -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 } 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 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 { useNavigation, useSidebar } from '../../context'\r\n\r\nconst Sidebar = () => {\r\n const { isMobile, isTablet, breakpoint } = 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 <>\r\n {/ Hamburger button para móvil /}\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-cyan-400 hover:bg-cyan-500/10 transition-colors bg-black/50 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 {/ Sidebar desktop /}\r\n <aside className={`\r\n bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20\r\n ${isMobile ? 'hidden' : 'w-64 flex-shrink-0'}\r\n ${isTablet ? 'w-56' : 'w-64'}\r\n `}>\r\n <div className=\"p-6 flex flex-col h-full\">\r\n {/ Logo y Breakpoint /}\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 <div>\r\n <span className=\"text-white font-bold text-lg\">Sistema Responsivo</span>\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 mt-1\">\r\n {breakpoint.toUpperCase()}\r\n </div>\r\n </div>\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={() => setCurrentPage(item.id as 'demo' \| 'test')}\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 \r\n </div>\r\n </aside>\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 </>\r\n )\r\n}\r\n\r\nexport default Sidebar\r\n","import { useResponsiveLayout } from '../../hooks'\r\n\r\nconst Footer = () => {\r\n const { layout, breakpoint, width, height } = useResponsiveLayout()\r\n \r\n return (\r\n <footer className=\"bg-gradient-to-r from-gray-900 to-black border-t border-cyan-500/20\">\r\n <div className={`${layout.config.spacing} py-6`}>\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\r\n \r\n {/ Brand /}\r\n <div>\r\n <div className=\"flex items-center space-x-2 mb-3\">\r\n <div className=\"w-6 h-6 bg-cyan-500 rounded flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-xs\">RS</span>\r\n </div>\r\n <span className=\"text-white font-semibold text-sm\">Responsive System</span>\r\n </div>\r\n <p className=\"text-gray-400 text-xs leading-relaxed\">\r\n Sistema completo de auto-escalado para aplicaciones React + Tailwind CSS\r\n </p>\r\n </div>\r\n \r\n {/ Status /}\r\n <div>\r\n <h3 className=\"text-white font-semibold text-sm mb-3\">Estado del Sistema</h3>\r\n <div className=\"space-y-1.5\">\r\n <div className=\"flex items-center justify-between text-xs\">\r\n <span className=\"text-gray-400\">Breakpoint:</span>\r\n <span className=\"text-cyan-400 font-medium\">{breakpoint.toUpperCase()}</span>\r\n </div>\r\n <div className=\"flex items-center justify-between text-xs\">\r\n <span className=\"text-gray-400\">Layout:</span>\r\n <span className=\"text-cyan-400 font-medium\">{layout.config.name}</span>\r\n </div>\r\n <div className=\"flex items-center justify-between text-xs\">\r\n <span className=\"text-gray-400\">Resolución:</span>\r\n <span className=\"text-cyan-400 font-medium\">{width} × {height}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/ Developer /}\r\n <div>\r\n <h3 className=\"text-white font-semibold text-sm mb-3\">Desarrollador</h3>\r\n <div className=\"space-y-2\">\r\n <div className=\"flex items-center space-x-2\">\r\n <div className=\"w-6 h-6 bg-gray-700 rounded-full flex items-center justify-center flex-shrink-0\">\r\n <svg className=\"w-3 h-3 text-gray-300\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\"/>\r\n </svg>\r\n </div>\r\n <div>\r\n <p className=\"text-white font-medium text-xs\">Felipe Caroca</p>\r\n <p className=\"text-gray-400 text-xs\">Frontend Developer</p>\r\n </div>\r\n </div>\r\n <a \r\n href=\"https://github.com/FelipeCaroca1\" \r\n target=\"_blank\" \r\n rel=\"noopener noreferrer\"\r\n className=\"flex items-center space-x-1.5 text-gray-400 hover:text-cyan-400 transition-colors text-xs group\"\r\n >\r\n <svg className=\"w-3 h-3 group-hover:text-cyan-400\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\"/>\r\n </svg>\r\n <span>Ver en GitHub</span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/ Bottom /}\r\n <div className=\"border-t border-gray-800 mt-6 pt-4 flex flex-col items-center text-center\">\r\n <p className=\"text-gray-500 text-xs mb-2\">\r\n © 2025 Responsive System. Todos los derechos reservados.\r\n </p>\r\n <div className=\"flex items-center space-x-2\">\r\n <span className=\"text-gray-500 text-xs\">\r\n Auto-escalado activo\r\n </span>\r\n <div className=\"w-1.5 h-1.5 bg-cyan-400 rounded-full animate-pulse\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n )\r\n}\r\n\r\nexport default Footer\r\n","import { useState } from 'react'\r\nimport { useResponsiveLayout } from '../../hooks'\r\nimport { useNavigation } from '../../context'\r\n\r\nconst Navigation = () => {\r\n const { isMobile, breakpoint } = useResponsiveLayout()\r\n const { currentPage, setCurrentPage } = useNavigation()\r\n const [sidebarOpen, setSidebarOpen] = useState(false)\r\n\r\n const pages = [\r\n { id: 'demo', name: 'Demo' },\r\n { id: 'test', name: 'Suite de Test' }\r\n ]\r\n\r\n return (\r\n <div className=\"sticky top-0 z-50\">\r\n <nav 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 <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 {breakpoint.toUpperCase()}\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 && pages.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.name}\r\n </button>\r\n ))}\r\n \r\n {/ Menú hamburguesa para móvil - A LA DERECHA /}\r\n {isMobile && (\r\n <button\r\n onClick={() => setSidebarOpen(!sidebarOpen)}\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 </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/ Menú móvil desplegable - TRADICIONAL /}\r\n {isMobile && sidebarOpen && (\r\n <div className=\"absolute top-full left-0 right-0 bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl z-50\">\r\n <div className=\"p-4\">\r\n {/ Navigation - VERTICAL como menú tradicional /}\r\n <nav className=\"space-y-2\">\r\n {pages.map((page) => (\r\n <button\r\n key={page.id}\r\n onClick={() => {\r\n setCurrentPage(page.id as 'demo' \| 'test')\r\n setSidebarOpen(false)\r\n }}\r\n className={`w-full text-left px-4 py-3 rounded-lg transition-all font-bold text-sm 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.name}\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </div>\r\n )}\r\n </nav>\r\n </div>\r\n )\r\n}\r\n\r\nexport default Navigation\r\n","import React from 'react'\r\nimport { Navigation, Footer } from '../components/layout'\r\nimport { useResponsiveLayout } from '../hooks'\r\n\r\ninterface DefaultLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {\r\n const { layoutUtils } = useResponsiveLayout()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black flex flex-col\">\r\n {/ Navigation fijo arriba /}\r\n <Navigation />\r\n \r\n {/ Main content con padding-top para la navigation /}\r\n <main className=\"flex-1\">\r\n <div className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </div>\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 { useResponsiveLayout } from '../hooks'\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 const { layoutUtils } = useResponsiveLayout()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black flex\">\r\n {/ Sidebar /}\r\n <Sidebar />\r\n \r\n {/ Main content /}\r\n <main className=\"flex-1 overflow-auto\">\r\n <div className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </div>\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 { useResponsiveLayout } from '../hooks'\r\nimport { Sidebar, Footer } from '../components/layout'\r\nimport { SidebarProvider, useSidebar } 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 const { layoutUtils } = useResponsiveLayout()\r\n const { setSidebarOpen } = useSidebar()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black flex flex-col\">\r\n {/ Navbar para móvil (igual que SidebarLayout) /}\r\n <div className=\"sticky top-0 z-50\">\r\n <nav 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 <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 <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 </div>\r\n </div>\r\n </div>\r\n </nav>\r\n </div>\r\n \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\">\r\n <div className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </div>\r\n </main>\r\n </div>\r\n \r\n {/ Footer */}\r\n <Footer />\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\nimport { useResponsiveLayout } from '../hooks'\r\n\r\ninterface MinimalLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst MinimalLayout: React.FC<MinimalLayoutProps> = ({ children }) => {\r\n const { layoutUtils } = useResponsiveLayout()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black\">\r\n <main className={layoutUtils.getContainerClass()}>\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","pages","layoutUtils","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 } 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 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 { useNavigation, useSidebar } from '../../context'\r\n\r\nconst Sidebar = () => {\r\n const { isMobile, isTablet, breakpoint } = 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 <>\r\n {/ Hamburger button para móvil /}\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-cyan-400 hover:bg-cyan-500/10 transition-colors bg-black/50 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 {/ Sidebar desktop /}\r\n <aside className={`\r\n bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20\r\n ${isMobile ? 'hidden' : 'w-64 flex-shrink-0'}\r\n ${isTablet ? 'w-56' : 'w-64'}\r\n `}>\r\n <div className=\"p-6 flex flex-col h-full\">\r\n {/ Logo y Breakpoint /}\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 <div>\r\n <span className=\"text-white font-bold text-lg\">Sistema Responsivo</span>\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 mt-1\">\r\n {breakpoint.toUpperCase()}\r\n </div>\r\n </div>\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={() => setCurrentPage(item.id as 'demo' \| 'test')}\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 \r\n </div>\r\n </aside>\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 </>\r\n )\r\n}\r\n\r\nexport default Sidebar\r\n","import { useResponsiveLayout } from '../../hooks'\r\n\r\nconst Footer = () => {\r\n const { layout, breakpoint, width, height } = useResponsiveLayout()\r\n \r\n return (\r\n <footer className=\"bg-gradient-to-r from-gray-900 to-black border-t border-cyan-500/20\">\r\n <div className={`${layout.config.spacing} py-6`}>\r\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\r\n \r\n {/ Brand /}\r\n <div>\r\n <div className=\"flex items-center space-x-2 mb-2\">\r\n <div className=\"w-5 h-5 bg-cyan-500 rounded flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-xs\">RS</span>\r\n </div>\r\n <span className=\"text-white font-semibold text-sm\">Responsive System</span>\r\n </div>\r\n <p className=\"text-gray-400 text-xs leading-relaxed\">\r\n Sistema completo de auto-escalado para aplicaciones React + Tailwind CSS\r\n </p>\r\n </div>\r\n \r\n {/ Status /}\r\n <div>\r\n <h3 className=\"text-white font-semibold text-sm mb-2\">Estado del Sistema</h3>\r\n <div className=\"space-y-1\">\r\n <div className=\"flex items-center justify-between text-xs\">\r\n <span className=\"text-gray-400\">Breakpoint:</span>\r\n <span className=\"text-cyan-400 font-medium\">{breakpoint.toUpperCase()}</span>\r\n </div>\r\n <div className=\"flex items-center justify-between text-xs\">\r\n <span className=\"text-gray-400\">Layout:</span>\r\n <span className=\"text-cyan-400 font-medium\">{layout.config.name}</span>\r\n </div>\r\n <div className=\"flex items-center justify-between text-xs\">\r\n <span className=\"text-gray-400\">Resolución:</span>\r\n <span className=\"text-cyan-400 font-medium\">{width} × {height}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/ Developer /}\r\n <div>\r\n <h3 className=\"text-white font-semibold text-sm mb-2\">Desarrollador</h3>\r\n <div className=\"space-y-1\">\r\n <p className=\"text-white font-medium text-xs\">Felipe Caroca</p>\r\n <p className=\"text-gray-400 text-xs\">Frontend Developer</p>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/ Bottom /}\r\n <div className=\"border-t border-gray-800 mt-4 pt-4 flex flex-col items-center text-center\">\r\n <p className=\"text-gray-500 text-xs\">\r\n © 2025 Responsive System. 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 { useState } from 'react'\r\nimport { useResponsiveLayout } from '../../hooks'\r\nimport { useNavigation } from '../../context'\r\n\r\nconst Navigation = () => {\r\n const { isMobile, breakpoint } = useResponsiveLayout()\r\n const { currentPage, setCurrentPage } = useNavigation()\r\n const [sidebarOpen, setSidebarOpen] = useState(false)\r\n\r\n const pages = [\r\n { id: 'demo', name: 'Demo' },\r\n { id: 'test', name: 'Suite de Test' }\r\n ]\r\n\r\n return (\r\n <div className=\"sticky top-0 z-50\">\r\n <nav 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 <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 {breakpoint.toUpperCase()}\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 && pages.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.name}\r\n </button>\r\n ))}\r\n \r\n {/ Menú hamburguesa para móvil - A LA DERECHA /}\r\n {isMobile && (\r\n <button\r\n onClick={() => setSidebarOpen(!sidebarOpen)}\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 </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/ Menú móvil desplegable - TRADICIONAL /}\r\n {isMobile && sidebarOpen && (\r\n <div className=\"absolute top-full left-0 right-0 bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl z-50\">\r\n <div className=\"p-4\">\r\n {/ Navigation - VERTICAL como menú tradicional /}\r\n <nav className=\"space-y-2\">\r\n {pages.map((page) => (\r\n <button\r\n key={page.id}\r\n onClick={() => {\r\n setCurrentPage(page.id as 'demo' \| 'test')\r\n setSidebarOpen(false)\r\n }}\r\n className={`w-full text-left px-4 py-3 rounded-lg transition-all font-bold text-sm 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.name}\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </div>\r\n )}\r\n </nav>\r\n </div>\r\n )\r\n}\r\n\r\nexport default Navigation\r\n","import React from 'react'\r\nimport { Navigation, Footer } from '../components/layout'\r\nimport { useResponsiveLayout } from '../hooks'\r\n\r\ninterface DefaultLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {\r\n const { layoutUtils } = useResponsiveLayout()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black flex flex-col\">\r\n {/ Navigation fijo arriba /}\r\n <Navigation />\r\n \r\n {/ Main content con padding-top para la navigation /}\r\n <main className=\"flex-1\">\r\n <div className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </div>\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 { useResponsiveLayout } from '../hooks'\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 const { layoutUtils } = useResponsiveLayout()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black flex\">\r\n {/ Sidebar /}\r\n <Sidebar />\r\n \r\n {/ Main content /}\r\n <main className=\"flex-1 overflow-auto\">\r\n <div className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </div>\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 { useResponsiveLayout } from '../hooks'\r\nimport { Sidebar, Footer } from '../components/layout'\r\nimport { SidebarProvider, useSidebar } 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 const { layoutUtils } = useResponsiveLayout()\r\n const { setSidebarOpen } = useSidebar()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black flex flex-col\">\r\n {/ Navbar para móvil (igual que SidebarLayout) /}\r\n <div className=\"sticky top-0 z-50\">\r\n <nav 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 <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 <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 </div>\r\n </div>\r\n </div>\r\n </nav>\r\n </div>\r\n \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\">\r\n <div className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </div>\r\n </main>\r\n </div>\r\n \r\n {/ Footer */}\r\n <Footer />\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\nimport { useResponsiveLayout } from '../hooks'\r\n\r\ninterface MinimalLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst MinimalLayout: React.FC<MinimalLayoutProps> = ({ children }) => {\r\n const { layoutUtils } = useResponsiveLayout()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black\">\r\n <main className={layoutUtils.getContainerClass()}>\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","pages","layoutUtils","SidebarLayoutContent","DashboardLayoutContent","LayoutSwitcher","compact","setLayout","config","e","key"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "responsive-system",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "Sistema de layout responsivo con auto-scaling para Tailwind CSS",
   "type": "module",
   "main": "./dist/responsive-system.cjs",

package/src/components/layout/Footer.tsx CHANGED Viewed

@@ -6,12 +6,12 @@ const Footer = () => {
   return (
     <footer className="bg-gradient-to-r from-gray-900 to-black border-t border-cyan-500/20">
       <div className={`${layout.config.spacing} py-6`}>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
           {/* Brand */}
           <div>
-            <div className="flex items-center space-x-2 mb-3">
-              <div className="w-6 h-6 bg-cyan-500 rounded flex items-center justify-center">
+            <div className="flex items-center space-x-2 mb-2">
+              <div className="w-5 h-5 bg-cyan-500 rounded flex items-center justify-center">
                 <span className="text-white font-bold text-xs">RS</span>
               </div>
               <span className="text-white font-semibold text-sm">Responsive System</span>
@@ -23,8 +23,8 @@ const Footer = () => {
           {/* Status */}
           <div>
-            <h3 className="text-white font-semibold text-sm mb-3">Estado del Sistema</h3>
-            <div className="space-y-1.5">
+            <h3 className="text-white font-semibold text-sm mb-2">Estado del Sistema</h3>
+            <div className="space-y-1">
               <div className="flex items-center justify-between text-xs">
                 <span className="text-gray-400">Breakpoint:</span>
                 <span className="text-cyan-400 font-medium">{breakpoint.toUpperCase()}</span>
@@ -42,45 +42,19 @@ const Footer = () => {
           {/* Developer */}
           <div>
-            <h3 className="text-white font-semibold text-sm mb-3">Desarrollador</h3>
-            <div className="space-y-2">
-              <div className="flex items-center space-x-2">
-                <div className="w-6 h-6 bg-gray-700 rounded-full flex items-center justify-center flex-shrink-0">
-                  <svg className="w-3 h-3 text-gray-300" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-                  </svg>
-                </div>
-                <div>
-                  <p className="text-white font-medium text-xs">Felipe Caroca</p>
-                  <p className="text-gray-400 text-xs">Frontend Developer</p>
-                </div>
-              </div>
-              <a
-                href="https://github.com/FelipeCaroca1"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center space-x-1.5 text-gray-400 hover:text-cyan-400 transition-colors text-xs group"
-              >
-                <svg className="w-3 h-3 group-hover:text-cyan-400" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-                </svg>
-                <span>Ver en GitHub</span>
-              </a>
+            <h3 className="text-white font-semibold text-sm mb-2">Desarrollador</h3>
+            <div className="space-y-1">
+              <p className="text-white font-medium text-xs">Felipe Caroca</p>
+              <p className="text-gray-400 text-xs">Frontend Developer</p>
             </div>
           </div>
         </div>
         {/* Bottom */}
-        <div className="border-t border-gray-800 mt-6 pt-4 flex flex-col items-center text-center">
-          <p className="text-gray-500 text-xs mb-2">
+        <div className="border-t border-gray-800 mt-4 pt-4 flex flex-col items-center text-center">
+          <p className="text-gray-500 text-xs">
             © 2025 Responsive System. Todos los derechos reservados.
           </p>
-          <div className="flex items-center space-x-2">
-            <span className="text-gray-500 text-xs">
-              Auto-escalado activo
-            </span>
-            <div className="w-1.5 h-1.5 bg-cyan-400 rounded-full animate-pulse"></div>
-          </div>
         </div>
       </div>
     </footer>