responsive-system 1.0.0

package/dist/responsive-system.mjs

@@ -0,0 +1,580 @@
+import { jsx as e, Fragment as B, jsxs as n } from "react/jsx-runtime";
+import { useState as w, useCallback as u, useMemo as D, useEffect as oe, createContext as M, useContext as R } from "react";
+const le = ({
+  children: t,
+  debug: s = !1
+}) => /* @__PURE__ */ e(B, { children: t }), h = {
+  xs: 475,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+  "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, s) {
+  let i = null;
+  return (...l) => {
+    i && clearTimeout(i), i = setTimeout(() => t(...l), s);
+  };
+}
+function me(t, s) {
+  return t >= s ? "landscape" : "portrait";
+}
+const ue = () => {
+  const [t, s] = w({
+    width: typeof window < "u" ? window.innerWidth : 1024,
+    height: typeof window < "u" ? window.innerHeight : 768
+  }), i = u(() => {
+    s({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+  }, []), l = D(
+    () => de(i, 100),
+    [i]
+  );
+  oe(() => {
+    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(() => me(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 = u((m) => x(a) >= x(m), [a]), Z = u((m) => x(a) <= x(m), [a]), ee = u((m, v) => {
+    const O = x(a);
+    return O >= x(m) && O <= x(v);
+  }, [a]), te = u((m) => r >= m, [r]), ae = u((m) => r <= m, [r]), ne = u((m, v) => r >= m && r <= v, [r]), se = u((m) => o >= m, [o]), re = u((m) => o <= m, [o]), ie = u((m, v) => o >= m && o <= v, [o]);
+  return {
+    // Estado básico
+    breakpoint: a,
+    width: r,
+    height: o,
+    orientation: c,
+    // Helpers booleanos específicos
+    isXs: d,
+    isSm: k,
+    isMd: y,
+    isLg: p,
+    isXl: C,
+    is2Xl: S,
+    is3Xl: L,
+    is4Xl: f,
+    is5Xl: g,
+    // Helpers booleanos agrupados
+    isMobile: W,
+    isTablet: I,
+    isDesktop: X,
+    isSmall: _,
+    isLarge: V,
+    isUltraWide: K,
+    is4K: Y,
+    is5K: G,
+    // Helpers de orientación
+    isPortrait: q,
+    isLandscape: J,
+    // Funciones de comparación
+    isBreakpointUp: Q,
+    isBreakpointDown: Z,
+    isBreakpointBetween: ee,
+    isWidthUp: te,
+    isWidthDown: ae,
+    isWidthBetween: ne,
+    isHeightUp: se,
+    isHeightDown: re,
+    isHeightBetween: ie,
+    // Debug
+    debug: !1
+  };
+}, T = M(void 0), be = () => {
+  const t = R(T);
+  if (!t)
+    throw new Error("useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider");
+  return t;
+}, $ = M(void 0), A = ({ children: t }) => {
+  const [s, i] = w(!1);
+  return /* @__PURE__ */ e($.Provider, { value: { sidebarOpen: s, setSidebarOpen: i }, children: t });
+}, j = () => {
+  const t = R($);
+  if (!t)
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  return t;
+}, z = M({
+  currentPage: "test",
+  setCurrentPage: () => {
+  }
+}), U = () => R(z), Se = ({
+  children: t,
+  defaultPage: s = "test"
+}) => {
+  const [i, l] = w(s);
+  return /* @__PURE__ */ e(z.Provider, { value: { currentPage: i, setCurrentPage: l }, children: t });
+}, b = () => {
+  const t = be();
+  return {
+    // Todo el sistema responsivo original
+    ...t.responsive,
+    // Sistema de layout
+    layout: {
+      current: t.layout.current,
+      config: t.layout.config,
+      setLayout: t.layout.setLayout
+    },
+    // Utilidades de layout
+    layoutUtils: t.layoutUtils,
+    // Helpers específicos del layout
+    isDefaultLayout: () => t.layout.current === "default",
+    isSidebarLayout: () => t.layout.current === "sidebar",
+    isDashboardLayout: () => t.layout.current === "dashboard",
+    isMinimalLayout: () => t.layout.current === "minimal",
+    // Grid helpers que usan el sistema auto-escalable
+    grid: {
+      auto: (s = "md") => `grid-cols-auto-${s}`,
+      responsive: (s) => {
+        const i = [];
+        return Object.entries(s).forEach(([l, r]) => {
+          l === "base" ? i.push(`grid-cols-${r}`) : i.push(`${l}:grid-cols-${r}`);
+        }), i.join(" ");
+      },
+      fixed: (s) => `grid-cols-${s}`
+    },
+    // Spacing helpers que escalan automáticamente
+    spacing: {
+      container: t.layoutUtils.getContainerClass(),
+      section: "mb-6",
+      card: "p-6",
+      gap: "gap-4"
+    }
+  };
+}, he = () => {
+  const t = b();
+  return {
+    // Layout actual
+    current: t.layout.current,
+    config: t.layout.config,
+    setLayout: t.layout.setLayout,
+    // Utilidades
+    ...t.layoutUtils,
+    // Helpers específicos
+    isDefaultLayout: t.isDefaultLayout(),
+    isSidebarLayout: t.isSidebarLayout(),
+    isDashboardLayout: t.isDashboardLayout(),
+    isMinimalLayout: t.isMinimalLayout(),
+    // Grid helpers
+    grid: t.grid,
+    // Spacing helpers
+    spacing: t.spacing
+  };
+}, N = {
+  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"
+    }
+  }
+}, F = "default", De = Object.keys(N), xe = ({
+  children: t,
+  defaultLayout: s,
+  useResponsiveHook: i
+}) => {
+  const l = ue(), o = i?.() || l, [a, c] = w(s), d = N[a] || N[F], y = {
+    responsive: o,
+    layout: {
+      current: a,
+      config: d,
+      setLayout: c
+    },
+    layoutUtils: {
+      getContainerClass: () => o.isMobile ? d.responsive.mobile : o.isTablet ? d.responsive.tablet : d.responsive.desktop,
+      getMainClass: () => {
+        const p = "min-h-screen bg-black";
+        return a === "sidebar" || a === "dashboard" ? `${p} flex` : p;
+      },
+      hasSidebar: () => a === "sidebar" || a === "dashboard",
+      hasHeader: () => a === "dashboard",
+      hasFooter: () => a === "default" || a === "dashboard",
+      hasNavigation: () => a === "default"
+    }
+  };
+  return /* @__PURE__ */ e(T.Provider, { value: y, children: t });
+}, Me = ({
+  children: t,
+  defaultLayout: s = F,
+  useResponsiveHook: i
+}) => /* @__PURE__ */ e(le, { children: /* @__PURE__ */ e(
+  xe,
+  {
+    defaultLayout: s,
+    useResponsiveHook: i,
+    children: t
+  }
+) }), Re = ({ children: t, layout: s }) => {
+  const { layout: i } = b(), l = s || i.current, o = {
+    default: P,
+    sidebar: ye,
+    dashboard: ve,
+    minimal: Ne
+  }[l] || P;
+  return /* @__PURE__ */ e(o, { children: t });
+}, je = () => {
+  const { isMobile: t } = b(), { currentPage: s, setCurrentPage: i } = U(), { sidebarOpen: l, setSidebarOpen: r } = j(), o = [
+    { id: "test", label: "Suite de Test" },
+    { id: "demo", label: "Demo" }
+  ];
+  return /* @__PURE__ */ n("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__ */ n("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ n("div", { className: "flex items-center space-x-2", children: [
+        t && /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: () => r(!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__ */ n("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(
+        "button",
+        {
+          onClick: () => i(a.id),
+          className: `px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${s === 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
+        },
+        a.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__ */ n("div", { className: "p-6 flex flex-col h-full pt-20", children: [
+      /* @__PURE__ */ n("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(
+        "button",
+        {
+          onClick: () => {
+            i(a.id), r(!1);
+          },
+          className: `w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${s === 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 })
+        },
+        a.id
+      )) })
+    ] }) }) })
+  ] });
+}, H = () => {
+  const { isMobile: t, isTablet: s, breakpoint: i } = b(), { currentPage: l, setCurrentPage: r } = U(), { sidebarOpen: o, setSidebarOpen: a } = j(), c = [
+    { id: "test", label: "Suite de Test" },
+    { id: "demo", label: "Demo" }
+  ];
+  return /* @__PURE__ */ n(B, { 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",
+        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"}
+        ${s ? "w-56" : "w-64"}
+      `, children: /* @__PURE__ */ n("div", { className: "p-6 flex flex-col h-full", children: [
+      /* @__PURE__ */ n("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__ */ n("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("nav", { className: "space-y-2", children: c.map((d) => /* @__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 })
+        },
+        d.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__ */ n("div", { className: "p-6 flex flex-col h-full pt-20", children: [
+      /* @__PURE__ */ n("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: c.map((d) => /* @__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 })
+        },
+        d.id
+      )) })
+    ] }) }) })
+  ] });
+}, E = () => {
+  const { layout: t, breakpoint: s, 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__ */ n("div", { className: `${t.config.spacing} py-8`, children: [
+    /* @__PURE__ */ n("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", children: [
+      /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ n("div", { className: "flex items-center space-x-3 mb-4", 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: "Responsive System" })
+        ] }),
+        /* @__PURE__ */ e("p", { className: "text-gray-400 text-sm leading-relaxed", children: "Sistema completo de auto-escalado para aplicaciones React + Tailwind CSS" })
+      ] }),
+      /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ e("h3", { className: "text-white font-semibold mb-4", children: "Estado del Sistema" }),
+        /* @__PURE__ */ n("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ n("div", { className: "flex items-center justify-between text-sm", children: [
+            /* @__PURE__ */ e("span", { className: "text-gray-400", children: "Breakpoint:" }),
+            /* @__PURE__ */ e("span", { className: "text-cyan-400 font-medium", children: s.toUpperCase() })
+          ] }),
+          /* @__PURE__ */ n("div", { className: "flex items-center justify-between text-sm", children: [
+            /* @__PURE__ */ e("span", { className: "text-gray-400", children: "Layout:" }),
+            /* @__PURE__ */ e("span", { className: "text-cyan-400 font-medium", children: t.config.name })
+          ] }),
+          /* @__PURE__ */ n("div", { className: "flex items-center justify-between text-sm", children: [
+            /* @__PURE__ */ e("span", { className: "text-gray-400", children: "Resolución:" }),
+            /* @__PURE__ */ n("span", { className: "text-cyan-400 font-medium", children: [
+              i,
+              " × ",
+              l
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ e("h3", { className: "text-white font-semibold mb-4", children: "Desarrollador" }),
+        /* @__PURE__ */ n("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ n("div", { className: "flex items-center space-x-3", children: [
+            /* @__PURE__ */ e("div", { className: "w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center", children: /* @__PURE__ */ e("svg", { className: "w-4 h-4 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__ */ n("div", { children: [
+              /* @__PURE__ */ e("p", { className: "text-white font-medium text-sm", children: "Felipe Caroca" }),
+              /* @__PURE__ */ e("p", { className: "text-gray-400 text-xs", children: "Frontend Developer" })
+            ] })
+          ] }),
+          /* @__PURE__ */ n(
+            "a",
+            {
+              href: "https://github.com/FelipeCaroca1",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "flex items-center space-x-2 text-gray-400 hover:text-cyan-400 transition-colors text-sm group",
+              children: [
+                /* @__PURE__ */ e("svg", { className: "w-4 h-4 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__ */ n("div", { className: "border-t border-gray-800 mt-8 pt-6 flex flex-col items-center text-center", children: [
+      /* @__PURE__ */ e("p", { className: "text-gray-500 text-sm mb-4", children: "© 2025 Responsive System. Todos los derechos reservados." }),
+      /* @__PURE__ */ n("div", { className: "flex items-center space-x-4", children: [
+        /* @__PURE__ */ e("span", { className: "text-gray-500 text-xs", children: "Auto-escalado activo" }),
+        /* @__PURE__ */ e("div", { className: "w-2 h-2 bg-cyan-400 rounded-full animate-pulse" })
+      ] })
+    ] })
+  ] }) });
+}, pe = () => {
+  const { isMobile: t, breakpoint: s } = b(), { currentPage: i, setCurrentPage: l } = U(), [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__ */ n("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__ */ n("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ n("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ n("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: s.toUpperCase() })
+      ] }),
+      /* @__PURE__ */ n("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: s } = b();
+  return /* @__PURE__ */ n("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: s.getContainerClass(), children: t }) }),
+    /* @__PURE__ */ e(E, {})
+  ] });
+}, ge = ({ children: t }) => {
+  const { layoutUtils: s } = b();
+  return /* @__PURE__ */ n("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: s.getContainerClass(), children: t }) })
+  ] });
+}, ye = ({ children: t }) => /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(ge, { children: t }) }), fe = ({ children: t }) => {
+  const { layoutUtils: s } = b(), { setSidebarOpen: i } = j();
+  return /* @__PURE__ */ n("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__ */ n("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__ */ n("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__ */ n("div", { className: "flex flex-1", children: [
+      /* @__PURE__ */ e(H, {}),
+      /* @__PURE__ */ e("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e("div", { className: s.getContainerClass(), children: t }) })
+    ] }),
+    /* @__PURE__ */ e(E, {})
+  ] });
+}, ve = ({ children: t }) => /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(fe, { children: t }) }), Ne = ({ children: t }) => {
+  const { layoutUtils: s } = b();
+  return /* @__PURE__ */ e("div", { className: "min-h-screen bg-black", children: /* @__PURE__ */ e("main", { className: s.getContainerClass(), children: t }) });
+}, Ue = ({ compact: t = !1 }) => {
+  const { current: s, setLayout: i, config: l } = he();
+  return t ? /* @__PURE__ */ n("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: s,
+        onChange: (r) => i(r.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))
+      }
+    )
+  ] }) : /* @__PURE__ */ n("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__ */ n(
+      "button",
+      {
+        onClick: () => i(r),
+        className: `
+              p-4 rounded-lg border transition-all text-left
+              ${s === r ? "border-cyan-500 bg-cyan-500/10 text-cyan-400" : "border-gray-700 bg-black/30 text-gray-300 hover:border-gray-600"}
+            `,
+        children: [
+          /* @__PURE__ */ e("div", { className: "font-semibold mb-1", children: o.name }),
+          /* @__PURE__ */ e("div", { className: "text-xs opacity-75", children: o.description })
+        ]
+      },
+      r
+    )) }),
+    /* @__PURE__ */ n("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 })
+    ] })
+  ] });
+};
+export {
+  De as AVAILABLE_LAYOUTS,
+  h as DEFAULT_BREAKPOINTS,
+  F as DEFAULT_LAYOUT,
+  ve as DashboardLayout,
+  P as DefaultLayout,
+  E as Footer,
+  je as Header,
+  N as LAYOUT_CONFIG,
+  Ue as LayoutSwitcher,
+  Re as MainLayout,
+  Ne as MinimalLayout,
+  pe as Navigation,
+  Se as NavigationProvider,
+  Me as ResponsiveLayoutProvider,
+  le as ResponsiveProvider,
+  H as Sidebar,
+  ye as SidebarLayout,
+  A as SidebarProvider,
+  x as getBreakpointIndex,
+  Ce as getBreakpointValue,
+  ce as getCurrentBreakpoint,
+  he as useLayout,
+  U as useNavigation,
+  ue as useResponsive,
+  b as useResponsiveLayout,
+  be as useResponsiveLayoutContext,
+  j as useSidebar
+};
+//# sourceMappingURL=responsive-system.mjs.map