responsive-system 1.4.5 → 1.4.8

package/dist/responsive-system.mjs

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