responsive-system 1.4.2 → 1.4.3

package/dist/responsive-system.mjs

@@ -1,9 +1,9 @@
-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 R, useContext as M } from "react";
-const le = ({
+import { jsx as e, Fragment as T, jsxs as i } from "react/jsx-runtime";
+import { useState as k, useCallback as d, useMemo as D, useEffect as ie, createContext as M, useContext as O } from "react";
+const oe = ({
   children: t,
-  debug: n = !1
-}) => /* @__PURE__ */ e(B, { children: t }), h = {
+  debug: r = !1
+}) => /* @__PURE__ */ e(T, { children: t }), u = {
   xs: 475,
   sm: 640,
   md: 768,
@@ -13,105 +13,105 @@ const le = ({
   "3xl": 1920,
   "4xl": 2560,
   "5xl": 3840
-}, ce = (t) => t >= h["5xl"] ? "5xl" : t >= h["4xl"] ? "4xl" : t >= h["3xl"] ? "3xl" : t >= h["2xl"] ? "2xl" : t >= h.xl ? "xl" : t >= h.lg ? "lg" : t >= h.md ? "md" : t >= h.sm ? "sm" : "xs", x = (t) => ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl"].indexOf(t), Ce = (t) => h[t];
-function de(t, n) {
-  let i = null;
+}, le = (t) => t >= u["5xl"] ? "5xl" : t >= u["4xl"] ? "4xl" : t >= u["3xl"] ? "3xl" : t >= u["2xl"] ? "2xl" : t >= u.xl ? "xl" : t >= u.lg ? "lg" : t >= u.md ? "md" : t >= u.sm ? "sm" : "xs", h = (t) => ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl"].indexOf(t), Ce = (t) => u[t];
+function ce(t, r) {
+  let o = null;
   return (...l) => {
-    i && clearTimeout(i), i = setTimeout(() => t(...l), n);
+    o && clearTimeout(o), o = setTimeout(() => t(...l), r);
   };
 }
-function ue(t, n) {
-  return t >= n ? "landscape" : "portrait";
+function de(t, r) {
+  return t >= r ? "landscape" : "portrait";
 }
-const me = () => {
-  const [t, n] = w({
+const ue = () => {
+  const [t, r] = k({
     width: typeof window < "u" ? window.innerWidth : 1024,
     height: typeof window < "u" ? window.innerHeight : 768
-  }), i = m(() => {
-    n({
+  }), o = d(() => {
+    r({
       width: window.innerWidth,
       height: window.innerHeight
     });
   }, []), l = D(
-    () => de(i, 100),
-    [i]
+    () => ce(o, 100),
+    [o]
   );
-  oe(() => {
+  ie(() => {
     if (!(typeof window > "u"))
       return window.addEventListener("resize", l), () => {
         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, 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]), 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]);
+  const { width: s, height: a } = t, n = D(() => le(s), [s]), g = D(() => de(s, a), [s, a]), m = n === "xs", w = n === "sm", f = n === "md", b = n === "lg", C = n === "xl", S = n === "2xl", L = n === "3xl", y = n === "4xl", p = n === "5xl", I = m || w, W = f, z = b || C || S || L || y || p, X = m || w || f, _ = b || C || S || L || y || p, Y = L || y || p, K = y || p, V = p, q = g === "portrait", G = g === "landscape", J = d((c) => h(n) >= h(c), [n]), Q = d((c) => h(n) <= h(c), [n]), Z = d((c, v) => {
+    const A = h(n);
+    return A >= h(c) && A <= h(v);
+  }, [n]), ee = d((c) => s >= c, [s]), te = d((c) => s <= c, [s]), ne = d((c, v) => s >= c && s <= v, [s]), se = d((c) => a >= c, [a]), re = d((c) => a <= c, [a]), ae = d((c, v) => a >= c && a <= v, [a]);
   return {
     // Estado básico
-    breakpoint: a,
-    width: r,
-    height: o,
-    orientation: c,
+    breakpoint: n,
+    width: s,
+    height: a,
+    orientation: g,
     // Helpers booleanos específicos
-    isXs: d,
-    isSm: k,
-    isMd: y,
-    isLg: p,
+    isXs: m,
+    isSm: w,
+    isMd: f,
+    isLg: b,
     isXl: C,
     is2Xl: S,
     is3Xl: L,
-    is4Xl: f,
-    is5Xl: g,
+    is4Xl: y,
+    is5Xl: p,
     // Helpers booleanos agrupados
-    isMobile: W,
-    isTablet: I,
-    isDesktop: X,
-    isSmall: _,
-    isLarge: K,
-    isUltraWide: V,
-    is4K: Y,
-    is5K: q,
+    isMobile: I,
+    isTablet: W,
+    isDesktop: z,
+    isSmall: X,
+    isLarge: _,
+    isUltraWide: Y,
+    is4K: K,
+    is5K: V,
     // Helpers de orientación
-    isPortrait: G,
-    isLandscape: J,
+    isPortrait: q,
+    isLandscape: G,
     // Funciones de comparación
-    isBreakpointUp: Q,
-    isBreakpointDown: Z,
-    isBreakpointBetween: ee,
-    isWidthUp: te,
-    isWidthDown: ae,
+    isBreakpointUp: J,
+    isBreakpointDown: Q,
+    isBreakpointBetween: Z,
+    isWidthUp: ee,
+    isWidthDown: te,
     isWidthBetween: ne,
     isHeightUp: se,
     isHeightDown: re,
-    isHeightBetween: ie,
+    isHeightBetween: ae,
     // Debug
     debug: !1
   };
-}, T = R(void 0), be = () => {
-  const t = M(T);
+}, j = M(void 0), me = () => {
+  const t = O(j);
   if (!t)
     throw new Error("useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider");
   return t;
-}, $ = R(void 0), A = ({ children: t }) => {
-  const [n, i] = w(!1);
-  return /* @__PURE__ */ e($.Provider, { value: { sidebarOpen: n, setSidebarOpen: i }, children: t });
-}, U = () => {
-  const t = M($);
+}, R = M(void 0), U = ({ children: t }) => {
+  const [r, o] = k(!1);
+  return /* @__PURE__ */ e(R.Provider, { value: { sidebarOpen: r, setSidebarOpen: o }, children: t });
+}, B = () => {
+  const t = O(R);
   if (!t)
     throw new Error("useSidebar must be used within a SidebarProvider");
   return t;
-}, E = R({
+}, E = M({
   currentPage: "test",
   setCurrentPage: () => {
   }
-}), j = () => M(E), Se = ({
+}), he = () => O(E), Se = ({
   children: t,
-  defaultPage: n = "test"
+  defaultPage: r = "test"
 }) => {
-  const [i, l] = w(n);
-  return /* @__PURE__ */ e(E.Provider, { value: { currentPage: i, setCurrentPage: l }, children: t });
-}, b = () => {
-  const t = be();
+  const [o, l] = k(r);
+  return /* @__PURE__ */ e(E.Provider, { value: { currentPage: o, setCurrentPage: l }, children: t });
+}, x = () => {
+  const t = me();
   return {
     // Todo el sistema responsivo original
     ...t.responsive,
@@ -130,14 +130,14 @@ const me = () => {
     isMinimalLayout: () => t.layout.current === "minimal",
     // Grid helpers que usan el sistema auto-escalable
     grid: {
-      auto: (n = "md") => `grid-cols-auto-${n}`,
-      responsive: (n) => {
-        const i = [];
-        return Object.entries(n).forEach(([l, r]) => {
-          l === "base" ? i.push(`grid-cols-${r}`) : i.push(`${l}:grid-cols-${r}`);
-        }), i.join(" ");
+      auto: (r = "md") => `grid-cols-auto-${r}`,
+      responsive: (r) => {
+        const o = [];
+        return Object.entries(r).forEach(([l, s]) => {
+          l === "base" ? o.push(`grid-cols-${s}`) : o.push(`${l}:grid-cols-${s}`);
+        }), o.join(" ");
       },
-      fixed: (n) => `grid-cols-${n}`
+      fixed: (r) => `grid-cols-${r}`
     },
     // Spacing helpers que escalan automáticamente
     spacing: {
@@ -147,8 +147,8 @@ const me = () => {
       gap: "gap-4"
     }
   };
-}, he = () => {
-  const t = b();
+}, be = () => {
+  const t = x();
   return {
     // Layout actual
     current: t.layout.current,
@@ -211,313 +211,228 @@ const me = () => {
       desktop: "p-6"
     }
   }
-}, F = "default", De = Object.keys(N), xe = ({
+}, $ = "default", De = Object.keys(N), pe = ({
   children: t,
-  defaultLayout: n,
-  useResponsiveHook: i
+  defaultLayout: r,
+  useResponsiveHook: o
 }) => {
-  const l = me(), o = i?.() || l, [a, c] = w(n), d = N[a] || N[F], y = {
-    responsive: o,
+  const l = ue(), a = o?.() || l, [n, g] = k(r), m = N[n] || N[$], f = {
+    responsive: a,
     layout: {
-      current: a,
-      config: d,
-      setLayout: c
+      current: n,
+      config: m,
+      setLayout: g
     },
     layoutUtils: {
-      getContainerClass: () => o.isMobile ? d.responsive.mobile : o.isTablet ? d.responsive.tablet : d.responsive.desktop,
+      getContainerClass: () => a.isMobile ? m.responsive.mobile : a.isTablet ? m.responsive.tablet : m.responsive.desktop,
       getMainClass: () => {
-        const p = "min-h-screen bg-black";
-        return a === "sidebar" || a === "dashboard" ? `${p} flex` : p;
+        const b = "min-h-screen bg-black";
+        return n === "sidebar" || n === "dashboard" ? `${b} flex` : b;
       },
-      hasSidebar: () => a === "sidebar" || a === "dashboard",
-      hasHeader: () => a === "dashboard",
-      hasFooter: () => a === "default" || a === "dashboard",
-      hasNavigation: () => a === "default"
+      hasSidebar: () => n === "sidebar" || n === "dashboard",
+      hasHeader: () => n === "dashboard",
+      hasFooter: () => n === "default" || n === "dashboard",
+      hasNavigation: () => n === "default"
     }
   };
-  return /* @__PURE__ */ e(T.Provider, { value: y, children: t });
-}, Re = ({
+  return /* @__PURE__ */ e(j.Provider, { value: f, children: t });
+}, Me = ({
   children: t,
-  defaultLayout: n = F,
-  useResponsiveHook: i
-}) => /* @__PURE__ */ e(le, { children: /* @__PURE__ */ e(
-  xe,
+  defaultLayout: r = $,
+  useResponsiveHook: o
+}) => /* @__PURE__ */ e(oe, { children: /* @__PURE__ */ e(
+  pe,
   {
-    defaultLayout: n,
-    useResponsiveHook: i,
+    defaultLayout: r,
+    useResponsiveHook: o,
     children: t
   }
-) }), Me = ({ children: t, layout: n }) => {
-  const { layout: i } = b(), l = n || i.current, o = {
+) }), Oe = ({ children: t, layout: r }) => {
+  const { layout: o } = x(), l = r || o.current, a = {
     default: P,
-    sidebar: ye,
+    sidebar: fe,
     dashboard: ve,
     minimal: Ne
   }[l] || P;
-  return /* @__PURE__ */ e(o, { children: t });
-}, Ue = () => {
-  const { isMobile: t } = b(), { currentPage: n, setCurrentPage: i } = j(), { sidebarOpen: l, setSidebarOpen: r } = U(), o = [
+  return /* @__PURE__ */ e(a, { children: t });
+}, Ae = () => {
+  const { isMobile: t } = x(), { currentPage: r, setCurrentPage: o } = he(), { sidebarOpen: l, setSidebarOpen: s } = B(), a = [
     { id: "test", label: "Suite de Test" },
     { id: "demo", label: "Demo" }
   ];
-  return /* @__PURE__ */ s("div", { className: "sticky top-0 z-50", children: [
-    /* @__PURE__ */ e("header", { 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__ */ s("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
+  return /* @__PURE__ */ i("div", { className: "sticky top-0 z-50", children: [
+    /* @__PURE__ */ e("header", { 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__ */ i("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ i("div", { className: "flex items-center space-x-2", children: [
         t && /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => r(!0),
+            onClick: () => s(!0),
             className: "p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors",
             children: /* @__PURE__ */ e("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) })
           }
         ),
-        /* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ i("div", { className: "flex items-center space-x-2", children: [
           /* @__PURE__ */ e("div", { className: "w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse" }),
           /* @__PURE__ */ e("h3", { className: "text-base font-black text-white tracking-tight", children: "Sistema Responsivo" })
         ] }),
         /* @__PURE__ */ e("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" })
       ] }),
-      /* @__PURE__ */ e("div", { className: "flex items-center space-x-2", children: !t && o.map((a) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "flex items-center space-x-2", children: !t && a.map((n) => /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => i(a.id),
-          className: `px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${n === a.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: a.label
+          onClick: () => o(n.id),
+          className: `px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${r === n.id ? "bg-cyan-500/20 text-cyan-400 border-cyan-500/50" : "bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600"}`,
+          children: n.label
         },
-        a.id
+        n.id
       )) })
     ] }) }) }) }),
-    t && l && /* @__PURE__ */ e("div", { className: "fixed inset-0 z-40 bg-black/50", onClick: () => r(!1), children: /* @__PURE__ */ e("div", { className: "fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20", children: /* @__PURE__ */ s("div", { className: "p-6 flex flex-col h-full pt-20", children: [
-      /* @__PURE__ */ s("div", { className: "flex items-center space-x-3 mb-8", children: [
+    t && l && /* @__PURE__ */ e("div", { className: "fixed inset-0 z-40 bg-black/50", onClick: () => s(!1), children: /* @__PURE__ */ e("div", { className: "fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20", children: /* @__PURE__ */ i("div", { className: "p-6 flex flex-col h-full pt-20", children: [
+      /* @__PURE__ */ i("div", { className: "flex items-center space-x-3 mb-8", children: [
         /* @__PURE__ */ e("div", { className: "w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-white font-bold text-sm", children: "RS" }) }),
         /* @__PURE__ */ e("span", { className: "text-white font-bold text-lg", children: "Sistema Responsivo" })
       ] }),
-      /* @__PURE__ */ e("nav", { className: "space-y-2", children: o.map((a) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("nav", { className: "space-y-2", children: a.map((n) => /* @__PURE__ */ e(
         "button",
         {
           onClick: () => {
-            i(a.id), r(!1);
+            o(n.id), s(!1);
           },
-          className: `w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${n === a.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: /* @__PURE__ */ e("span", { className: "font-medium", children: a.label })
+          className: `w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${r === n.id ? "bg-cyan-500/20 text-cyan-400 border border-cyan-500/50" : "text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10"}`,
+          children: /* @__PURE__ */ e("span", { className: "font-medium", children: n.label })
         },
-        a.id
+        n.id
       )) })
     ] }) }) })
   ] });
-}, H = () => {
-  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" }
+}, F = () => {
+  const { isMobile: t, isTablet: r } = x(), { sidebarOpen: o, setSidebarOpen: l } = B(), s = [
+    { id: "home", label: "Inicio" },
+    { id: "about", label: "Acerca" },
+    { id: "contact", label: "Contacto" }
   ];
-  return /* @__PURE__ */ s(B, { children: [
+  return /* @__PURE__ */ i(T, { children: [
     t && /* @__PURE__ */ e(
       "button",
       {
-        onClick: () => a(!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",
+        onClick: () => l(!0),
+        className: "fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800 bg-gray-900 border border-gray-700",
         children: /* @__PURE__ */ e("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) })
       }
     ),
-    /* @__PURE__ */ e("aside", { className: `
-        bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20
-        ${t ? "hidden" : "w-64 flex-shrink-0"}
-        ${n ? "w-56" : "w-64"}
-      `, children: /* @__PURE__ */ s("div", { className: "p-6 flex flex-col h-full", children: [
-      /* @__PURE__ */ s("div", { className: "flex items-center space-x-3 mb-8", children: [
-        /* @__PURE__ */ e("div", { className: "w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-white font-bold text-sm", children: "RS" }) }),
-        /* @__PURE__ */ s("div", { children: [
-          /* @__PURE__ */ e("span", { className: "text-white font-bold text-lg", children: "Sistema Responsivo" }),
-          /* @__PURE__ */ e("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: i.toUpperCase() })
-        ] })
+    /* @__PURE__ */ e("aside", { className: `bg-gray-900 border-r border-gray-800 ${t ? "hidden" : "w-64 flex-shrink-0"} ${r ? "w-56" : "w-64"}`, children: /* @__PURE__ */ i("div", { className: "p-6 flex flex-col h-full", children: [
+      /* @__PURE__ */ i("div", { className: "flex items-center space-x-3 mb-8", children: [
+        /* @__PURE__ */ e("div", { className: "w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-white font-bold text-sm", children: "LO" }) }),
+        /* @__PURE__ */ e("span", { className: "text-white font-bold text-lg", children: "Tu Aplicación" })
       ] }),
-      /* @__PURE__ */ e("nav", { className: "space-y-2", children: c.map((d) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("nav", { className: "space-y-2", children: s.map((a) => /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => r(d.id),
-          className: `w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${l === 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: /* @__PURE__ */ e("span", { className: "font-medium", children: d.label })
+          className: "w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800",
+          children: /* @__PURE__ */ e("span", { className: "font-medium", children: a.label })
         },
-        d.id
+        a.id
       )) })
     ] }) }),
-    t && o && /* @__PURE__ */ e("div", { className: "fixed inset-0 z-40 bg-black/50", onClick: () => a(!1), children: /* @__PURE__ */ e("div", { className: "fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20", children: /* @__PURE__ */ s("div", { className: "p-6 flex flex-col h-full pt-20", children: [
-      /* @__PURE__ */ s("div", { className: "flex items-center space-x-3 mb-8", children: [
-        /* @__PURE__ */ e("div", { className: "w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-white font-bold text-sm", children: "RS" }) }),
-        /* @__PURE__ */ e("span", { className: "text-white font-bold text-lg", children: "Sistema Responsivo" })
+    t && o && /* @__PURE__ */ e("div", { className: "fixed inset-0 z-40 bg-black/50", onClick: () => l(!1), children: /* @__PURE__ */ e("div", { className: "fixed top-0 left-0 w-64 h-full bg-gray-900 border-r border-gray-800", children: /* @__PURE__ */ i("div", { className: "p-6 flex flex-col h-full pt-20", children: [
+      /* @__PURE__ */ i("div", { className: "flex items-center space-x-3 mb-8", children: [
+        /* @__PURE__ */ e("div", { className: "w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-white font-bold text-sm", children: "LO" }) }),
+        /* @__PURE__ */ e("span", { className: "text-white font-bold text-lg", children: "Tu Aplicación" })
       ] }),
-      /* @__PURE__ */ e("nav", { className: "space-y-2", children: c.map((d) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("nav", { className: "space-y-2", children: s.map((a) => /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => {
-            r(d.id), a(!1);
-          },
-          className: `w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${l === 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: /* @__PURE__ */ e("span", { className: "font-medium", children: d.label })
+          onClick: () => l(!1),
+          className: "w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800",
+          children: /* @__PURE__ */ e("span", { className: "font-medium", children: a.label })
         },
-        d.id
+        a.id
       )) })
     ] }) }) })
   ] });
-}, 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-3 gap-6", children: [
-      /* @__PURE__ */ s("div", { children: [
-        /* @__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" })
+}, H = () => {
+  const { breakpoint: t } = x();
+  return /* @__PURE__ */ e("footer", { className: "bg-gray-900 border-t border-gray-800", children: /* @__PURE__ */ e("div", { className: "px-4 py-6", children: /* @__PURE__ */ i("div", { className: "max-w-7xl mx-auto", children: [
+    /* @__PURE__ */ i("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [
+      /* @__PURE__ */ i("div", { children: [
+        /* @__PURE__ */ e("h3", { className: "text-white font-semibold mb-2", children: "Tu Aplicación" }),
+        /* @__PURE__ */ e("p", { className: "text-gray-400 text-sm", children: "Descripción de tu aplicación aquí." })
       ] }),
-      /* @__PURE__ */ s("div", { 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() })
-          ] }),
-          /* @__PURE__ */ s("div", { className: "flex items-center justify-between text-xs", children: [
-            /* @__PURE__ */ e("span", { className: "text-gray-400", children: "Layout:" }),
-            /* @__PURE__ */ e("span", { className: "text-cyan-400 font-medium", children: t.config.name })
-          ] }),
-          /* @__PURE__ */ s("div", { className: "flex items-center justify-between text-xs", children: [
-            /* @__PURE__ */ e("span", { className: "text-gray-400", children: "Resolución:" }),
-            /* @__PURE__ */ s("span", { className: "text-cyan-400 font-medium", children: [
-              i,
-              " × ",
-              l
-            ] })
-          ] })
+      /* @__PURE__ */ i("div", { children: [
+        /* @__PURE__ */ e("h3", { className: "text-white font-semibold mb-2", children: "Enlaces" }),
+        /* @__PURE__ */ i("ul", { className: "space-y-1 text-gray-400 text-sm", children: [
+          /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e("a", { href: "#", className: "hover:text-white", children: "Inicio" }) }),
+          /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e("a", { href: "#", className: "hover:text-white", children: "Acerca" }) }),
+          /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e("a", { href: "#", className: "hover:text-white", children: "Contacto" }) })
         ] })
       ] }),
-      /* @__PURE__ */ s("div", { children: [
-        /* @__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__ */ i("div", { children: [
+        /* @__PURE__ */ e("h3", { className: "text-white font-semibold mb-2", children: "Info" }),
+        /* @__PURE__ */ i("p", { className: "text-gray-400 text-xs", children: [
+          "Breakpoint: ",
+          /* @__PURE__ */ e("span", { className: "text-blue-400", children: t.toUpperCase() })
         ] })
       ] })
     ] }),
-    /* @__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 } = j(), [r, o] = w(!1), a = [
-    { id: "demo", name: "Demo" },
-    { id: "test", name: "Suite de Test" }
-  ];
-  return /* @__PURE__ */ e("div", { className: "sticky top-0 z-50", children: /* @__PURE__ */ s("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__ */ s("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
-          /* @__PURE__ */ e("div", { className: "w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse" }),
-          /* @__PURE__ */ e("h3", { className: "text-base font-black text-white tracking-tight", children: "Sistema Responsivo" })
-        ] }),
-        /* @__PURE__ */ e("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: n.toUpperCase() })
-      ] }),
-      /* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
-        !t && a.map((c) => /* @__PURE__ */ e(
-          "button",
-          {
-            onClick: () => l(c.id),
-            className: `px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${i === 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
-        )),
-        t && /* @__PURE__ */ e(
-          "button",
-          {
-            onClick: () => o(!r),
-            className: "p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors",
-            children: /* @__PURE__ */ e("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) })
-          }
-        )
-      ] })
-    ] }) }) }),
-    t && r && /* @__PURE__ */ e("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: /* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ e("nav", { className: "space-y-2", children: a.map((c) => /* @__PURE__ */ e(
-      "button",
-      {
-        onClick: () => {
-          l(c.id), o(!1);
-        },
-        className: `w-full text-left px-4 py-3 rounded-lg transition-all font-bold text-sm tracking-wide border ${i === 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
-    )) }) }) })
-  ] }) });
-}, P = ({ children: t }) => {
-  const { layoutUtils: n } = b();
-  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(z, {})
-  ] });
-}, ge = ({ children: t }) => {
-  const { layoutUtils: n } = b();
-  return /* @__PURE__ */ s("div", { className: "min-h-screen bg-black flex", children: [
-    /* @__PURE__ */ e(H, {}),
-    /* @__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 } = 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(
-        "button",
-        {
-          onClick: () => i(!0),
-          className: "p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors",
-          children: /* @__PURE__ */ e("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) })
-        }
-      ),
-      /* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ e("div", { className: "w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse" }),
-        /* @__PURE__ */ e("h3", { className: "text-base font-black text-white tracking-tight", children: "Sistema Responsivo" })
-      ] }),
-      /* @__PURE__ */ e("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" })
-    ] }) }) }) }) }) }),
-    /* @__PURE__ */ s("div", { className: "flex flex-1", children: [
-      /* @__PURE__ */ e(H, {}),
-      /* @__PURE__ */ e("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e("div", { className: n.getContainerClass(), children: t }) })
+    /* @__PURE__ */ e("div", { className: "border-t border-gray-800 mt-6 pt-4 text-center", children: /* @__PURE__ */ i("p", { className: "text-gray-500 text-xs", children: [
+      "© ",
+      (/* @__PURE__ */ new Date()).getFullYear(),
+      " Tu Aplicación. Todos los derechos reservados."
+    ] }) })
+  ] }) }) });
+}, xe = () => {
+  const { isMobile: t } = x();
+  return /* @__PURE__ */ e("nav", { className: "sticky top-0 z-50 bg-gray-900 border-b border-gray-800", children: /* @__PURE__ */ e("div", { className: "px-4 py-4", children: /* @__PURE__ */ i("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ i("div", { className: "flex items-center space-x-3", children: [
+      /* @__PURE__ */ e("div", { className: "w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-white font-bold text-sm", children: "LO" }) }),
+      /* @__PURE__ */ e("h1", { className: "text-white font-semibold text-lg", children: "Tu Aplicación" })
     ] }),
-    /* @__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 }) });
-}, 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: [
+    t && /* @__PURE__ */ e("button", { className: "p-2 text-gray-400 hover:text-white", children: /* @__PURE__ */ e("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) }) })
+  ] }) }) });
+}, P = ({ children: t }) => /* @__PURE__ */ i("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
+  /* @__PURE__ */ e(xe, {}),
+  /* @__PURE__ */ e("main", { className: "flex-1", children: t }),
+  /* @__PURE__ */ e(H, {})
+] }), ge = ({ children: t }) => /* @__PURE__ */ i("div", { className: "min-h-screen bg-gray-50 flex", children: [
+  /* @__PURE__ */ e(F, {}),
+  /* @__PURE__ */ e("main", { className: "flex-1 overflow-auto", children: t })
+] }), fe = ({ children: t }) => /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(ge, { children: t }) }), ye = ({ children: t }) => /* @__PURE__ */ e("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: /* @__PURE__ */ i("div", { className: "flex flex-1", children: [
+  /* @__PURE__ */ e(F, {}),
+  /* @__PURE__ */ i("main", { className: "flex-1 overflow-auto flex flex-col", children: [
+    /* @__PURE__ */ e("div", { className: "flex-1", children: t }),
+    /* @__PURE__ */ e(H, {})
+  ] })
+] }) }), ve = ({ children: t }) => /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(ye, { children: t }) }), Ne = ({ children: t }) => /* @__PURE__ */ e("div", { className: "min-h-screen bg-gray-50", children: /* @__PURE__ */ e("main", { children: t }) }), Pe = ({ compact: t = !1 }) => {
+  const { current: r, setLayout: o, config: l } = be();
+  return t ? /* @__PURE__ */ i("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:" }),
     /* @__PURE__ */ e(
       "select",
       {
-        value: n,
-        onChange: (r) => i(r.target.value),
+        value: r,
+        onChange: (s) => o(s.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(N).map(([r, o]) => /* @__PURE__ */ e("option", { value: r, children: o.name }, r))
+        children: Object.entries(N).map(([s, a]) => /* @__PURE__ */ e("option", { value: s, children: a.name }, s))
       }
     )
-  ] }) : /* @__PURE__ */ s("div", { className: "bg-black/50 backdrop-blur-sm rounded-lg p-4 border border-cyan-500/30", children: [
+  ] }) : /* @__PURE__ */ i("div", { className: "bg-black/50 backdrop-blur-sm rounded-lg p-4 border border-cyan-500/30", children: [
     /* @__PURE__ */ e("h3", { className: "text-white font-semibold mb-3", children: "Cambiar Layout" }),
-    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3", children: Object.entries(N).map(([r, o]) => /* @__PURE__ */ s(
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3", children: Object.entries(N).map(([s, a]) => /* @__PURE__ */ i(
       "button",
       {
-        onClick: () => i(r),
+        onClick: () => o(s),
         className: `
               p-4 rounded-lg border transition-all text-left
-              ${n === r ? "border-cyan-500 bg-cyan-500/10 text-cyan-400" : "border-gray-700 bg-black/30 text-gray-300 hover:border-gray-600"}
+              ${r === s ? "border-cyan-500 bg-cyan-500/10 text-cyan-400" : "border-gray-700 bg-black/30 text-gray-300 hover:border-gray-600"}
             `,
         children: [
-          /* @__PURE__ */ e("div", { className: "font-semibold mb-1", children: o.name }),
-          /* @__PURE__ */ e("div", { className: "text-xs opacity-75", children: o.description })
+          /* @__PURE__ */ e("div", { className: "font-semibold mb-1", children: a.name }),
+          /* @__PURE__ */ e("div", { className: "text-xs opacity-75", children: a.description })
         ]
       },
-      r
+      s
     )) }),
-    /* @__PURE__ */ s("div", { className: "mt-4 p-3 bg-gray-900/50 rounded-lg", children: [
+    /* @__PURE__ */ i("div", { className: "mt-4 p-3 bg-gray-900/50 rounded-lg", children: [
       /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 mb-1", children: "Layout Actual:" }),
       /* @__PURE__ */ e("div", { className: "text-sm text-cyan-400 font-medium", children: l.name }),
       /* @__PURE__ */ e("div", { className: "text-xs text-gray-400", children: l.description })
@@ -526,31 +441,31 @@ const me = () => {
 };
 export {
   De as AVAILABLE_LAYOUTS,
-  h as DEFAULT_BREAKPOINTS,
-  F as DEFAULT_LAYOUT,
+  u as DEFAULT_BREAKPOINTS,
+  $ as DEFAULT_LAYOUT,
   ve as DashboardLayout,
   P as DefaultLayout,
-  z as Footer,
-  Ue as Header,
+  H as Footer,
+  Ae as Header,
   N as LAYOUT_CONFIG,
-  je as LayoutSwitcher,
-  Me as MainLayout,
+  Pe as LayoutSwitcher,
+  Oe as MainLayout,
   Ne as MinimalLayout,
-  pe as Navigation,
+  xe as Navigation,
   Se as NavigationProvider,
-  Re as ResponsiveLayoutProvider,
-  le as ResponsiveProvider,
-  H as Sidebar,
-  ye as SidebarLayout,
-  A as SidebarProvider,
-  x as getBreakpointIndex,
+  Me as ResponsiveLayoutProvider,
+  oe as ResponsiveProvider,
+  F as Sidebar,
+  fe as SidebarLayout,
+  U as SidebarProvider,
+  h as getBreakpointIndex,
   Ce as getBreakpointValue,
-  ce as getCurrentBreakpoint,
-  he as useLayout,
-  j as useNavigation,
-  me as useResponsive,
-  b as useResponsiveLayout,
-  be as useResponsiveLayoutContext,
-  U as useSidebar
+  le as getCurrentBreakpoint,
+  be as useLayout,
+  he as useNavigation,
+  ue as useResponsive,
+  x as useResponsiveLayout,
+  me as useResponsiveLayoutContext,
+  B as useSidebar
 };
 //# sourceMappingURL=responsive-system.mjs.map