responsive-system 1.6.1 → 1.7.1

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 C, useCallback as d, useMemo as M, useEffect as ie, createContext as O, useContext as P } from "react";
-const oe = ({
+import { jsx as t, Fragment as O, jsxs as l } from "react/jsx-runtime";
+import { useState as C, useCallback as d, useMemo as D, useEffect as ie, createContext as P, useContext as j } from "react";
+const le = ({
   children: e,
   debug: s = !1
-}) => /* @__PURE__ */ t(A, { children: e }), u = {
+}) => /* @__PURE__ */ t(O, { children: e }), u = {
   xs: 475,
   sm: 640,
   md: 768,
@@ -13,105 +13,105 @@ const oe = ({
   "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, s) {
-  let i = null;
-  return (...o) => {
-    i && clearTimeout(i), i = setTimeout(() => e(...o), s);
+}, ce = (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", p = (e) => ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl"].indexOf(e), Ce = (e) => u[e];
+function de(e, s) {
+  let a = null;
+  return (...i) => {
+    a && clearTimeout(a), a = setTimeout(() => e(...i), s);
   };
 }
-function de(e, s) {
+function ue(e, s) {
   return e >= s ? "landscape" : "portrait";
 }
-const ue = () => {
+const me = () => {
   const [e, s] = C({
     width: typeof window < "u" ? window.innerWidth : 1024,
     height: typeof window < "u" ? window.innerHeight : 768
-  }), i = d(() => {
+  }), a = d(() => {
     s({
       width: window.innerWidth,
       height: window.innerHeight
     });
-  }, []), o = M(
-    () => ce(i, 100),
-    [i]
+  }, []), i = D(
+    () => de(a, 100),
+    [a]
   );
   ie(() => {
     if (!(typeof window > "u"))
-      return window.addEventListener("resize", o), () => {
-        window.removeEventListener("resize", o);
+      return window.addEventListener("resize", i), () => {
+        window.removeEventListener("resize", i);
       };
-  }, [o]);
-  const { width: r, height: a } = e, n = M(() => le(r), [r]), x = M(() => de(r, a), [r, a]), m = n === "xs", w = n === "sm", f = n === "md", p = n === "lg", S = n === "xl", D = n === "2xl", L = n === "3xl", y = n === "4xl", g = n === "5xl", z = m || w, W = f, I = p || S || D || L || y || g, X = m || w || f, _ = p || S || D || L || y || g, Y = L || y || g, K = y || g, V = g, q = x === "portrait", G = x === "landscape", J = d((c) => b(n) >= b(c), [n]), Q = d((c) => b(n) <= b(c), [n]), Z = d((c, v) => {
-    const T = b(n);
-    return T >= b(c) && T <= b(v);
-  }, [n]), ee = d((c) => r >= c, [r]), te = d((c) => r <= c, [r]), ne = d((c, v) => r >= c && r <= v, [r]), se = d((c) => a >= c, [a]), re = d((c) => a <= c, [a]), ae = d((c, v) => a >= c && a <= v, [a]);
+  }, [i]);
+  const { width: r, height: o } = e, n = D(() => ce(r), [r]), x = D(() => ue(r, o), [r, o]), m = n === "xs", w = n === "sm", g = n === "md", h = n === "lg", S = n === "xl", M = n === "2xl", L = n === "3xl", v = n === "4xl", f = n === "5xl", W = m || w, I = g, X = h || S || M || L || v || f, Y = m || w || g, _ = h || S || M || L || v || f, K = L || v || f, V = v || f, q = f, G = x === "portrait", J = x === "landscape", Q = d((c) => p(n) >= p(c), [n]), Z = d((c) => p(n) <= p(c), [n]), ee = d((c, y) => {
+    const A = p(n);
+    return A >= p(c) && A <= p(y);
+  }, [n]), te = d((c) => r >= c, [r]), ne = d((c) => r <= c, [r]), se = d((c, y) => r >= c && r <= y, [r]), re = d((c) => o >= c, [o]), ae = d((c) => o <= c, [o]), oe = d((c, y) => o >= c && o <= y, [o]);
   return {
     // Estado básico
     breakpoint: n,
     width: r,
-    height: a,
+    height: o,
     orientation: x,
     // Helpers booleanos específicos
     isXs: m,
     isSm: w,
-    isMd: f,
-    isLg: p,
+    isMd: g,
+    isLg: h,
     isXl: S,
-    is2Xl: D,
+    is2Xl: M,
     is3Xl: L,
-    is4Xl: y,
-    is5Xl: g,
+    is4Xl: v,
+    is5Xl: f,
     // Helpers booleanos agrupados
-    isMobile: z,
-    isTablet: W,
-    isDesktop: I,
-    isSmall: X,
+    isMobile: W,
+    isTablet: I,
+    isDesktop: X,
+    isSmall: Y,
     isLarge: _,
-    isUltraWide: Y,
-    is4K: K,
-    is5K: V,
+    isUltraWide: K,
+    is4K: 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: oe,
     // Debug
     debug: !1
   };
-}, R = O(void 0), me = () => {
-  const e = P(R);
+}, U = P(void 0), pe = () => {
+  const e = j(U);
   if (!e)
     throw new Error("useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider");
   return e;
-}, U = O(void 0), B = ({ children: e }) => {
-  const [s, i] = C(!1);
-  return /* @__PURE__ */ t(U.Provider, { value: { sidebarOpen: s, setSidebarOpen: i }, children: e });
+}, B = P(void 0), T = ({ children: e }) => {
+  const [s, a] = C(!1);
+  return /* @__PURE__ */ t(B.Provider, { value: { sidebarOpen: s, setSidebarOpen: a }, children: e });
 }, $ = () => {
-  const e = P(U);
+  const e = j(B);
   if (!e)
     throw new Error("useSidebar must be used within a SidebarProvider");
   return e;
-}, E = O({
+}, F = P({
   currentPage: "test",
   setCurrentPage: () => {
   }
-}), be = () => P(E), Se = ({
+}), be = () => j(F), Se = ({
   children: e,
   defaultPage: s = "test"
 }) => {
-  const [i, o] = C(s);
-  return /* @__PURE__ */ t(E.Provider, { value: { currentPage: i, setCurrentPage: o }, children: e });
+  const [a, i] = C(s);
+  return /* @__PURE__ */ t(F.Provider, { value: { currentPage: a, setCurrentPage: i }, children: e });
 }, N = () => {
-  const e = me();
+  const e = pe();
   return {
     // Todo el sistema responsivo original
     ...e.responsive,
@@ -132,10 +132,10 @@ const ue = () => {
     grid: {
       auto: (s = "md") => `grid-cols-auto-${s}`,
       responsive: (s) => {
-        const i = [];
-        return Object.entries(s).forEach(([o, r]) => {
-          o === "base" ? i.push(`grid-cols-${r}`) : i.push(`${o}:grid-cols-${r}`);
-        }), i.join(" ");
+        const a = [];
+        return Object.entries(s).forEach(([i, r]) => {
+          i === "base" ? a.push(`grid-cols-${r}`) : a.push(`${i}:grid-cols-${r}`);
+        }), a.join(" ");
       },
       fixed: (s) => `grid-cols-${s}`
     },
@@ -166,7 +166,7 @@ const ue = () => {
     // Spacing helpers
     spacing: e.spacing
   };
-}, h = {
+}, b = {
   default: {
     name: "Default",
     description: "Navbar arriba, body central, footer abajo",
@@ -211,23 +211,23 @@ const ue = () => {
       desktop: "p-6"
     }
   }
-}, k = "default", De = Object.keys(h), pe = ({
+}, k = "default", Me = Object.keys(b), fe = ({
   children: e,
   defaultLayout: s,
-  useResponsiveHook: i
+  useResponsiveHook: a
 }) => {
-  const o = ue(), a = i?.() || o, [n, x] = C(() => s && typeof s == "string" && h[s] ? s : k), m = h[n] || h[k], f = {
-    responsive: a,
+  const i = me(), o = a?.() || i, [n, x] = C(() => s && typeof s == "string" && b[s] ? s : k), m = b[n] || b[k], g = {
+    responsive: o,
     layout: {
       current: n,
       config: m,
       setLayout: x
     },
     layoutUtils: {
-      getContainerClass: () => a.isMobile ? m.responsive.mobile : a.isTablet ? m.responsive.tablet : m.responsive.desktop,
+      getContainerClass: () => o.isMobile ? m.responsive.mobile : o.isTablet ? m.responsive.tablet : m.responsive.desktop,
       getMainClass: () => {
-        const p = "min-h-screen bg-black";
-        return n === "sidebar" || n === "dashboard" ? `${p} flex` : p;
+        const h = "min-h-screen bg-black";
+        return n === "sidebar" || n === "dashboard" ? `${h} flex` : h;
       },
       hasSidebar: () => n === "sidebar" || n === "dashboard",
       hasHeader: () => n === "dashboard",
@@ -235,31 +235,31 @@ const ue = () => {
       hasNavigation: () => n === "default"
     }
   };
-  return /* @__PURE__ */ t(R.Provider, { value: f, children: e });
-}, Me = ({
+  return /* @__PURE__ */ t(U.Provider, { value: g, children: e });
+}, De = ({
   children: e,
   defaultLayout: s = k,
-  useResponsiveHook: i
+  useResponsiveHook: a
 }) => {
-  const o = s && typeof s == "string" && h[s] ? s : k;
-  return /* @__PURE__ */ t(oe, { children: /* @__PURE__ */ t(
-    pe,
+  const i = s && typeof s == "string" && b[s] ? s : k;
+  return /* @__PURE__ */ t(le, { children: /* @__PURE__ */ t(
+    fe,
     {
-      defaultLayout: o,
-      useResponsiveHook: i,
+      defaultLayout: i,
+      useResponsiveHook: a,
       children: e
     }
   ) });
 }, Oe = ({ children: e, layout: s }) => {
-  const { layout: i } = N(), o = {
-    default: j,
-    sidebar: fe,
-    dashboard: ve,
+  const { layout: a } = N(), i = {
+    default: R,
+    sidebar: ge,
+    dashboard: ye,
     minimal: Ne
-  }, r = s || i.current || "default", a = o[r] ? r : "default", n = o[a] || j;
+  }, r = s || a.current || "default", o = i[r] ? r : "default", n = i[o] || R;
   return /* @__PURE__ */ t(n, { children: e });
 }, Pe = () => {
-  const { isMobile: e } = N(), { currentPage: s, setCurrentPage: i } = be(), { sidebarOpen: o, setSidebarOpen: r } = $(), a = [
+  const { isMobile: e } = N(), { currentPage: s, setCurrentPage: a } = be(), { sidebarOpen: i, setSidebarOpen: r } = $(), o = [
     { id: "test", label: "Suite de Test" },
     { id: "demo", label: "Demo" }
   ];
@@ -280,26 +280,26 @@ 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 && o.map((n) => /* @__PURE__ */ t(
         "button",
         {
-          onClick: () => i(n.id),
+          onClick: () => a(n.id),
           className: `px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${s === n.id ? "bg-cyan-500/20 text-cyan-400 border-cyan-500/50" : "bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600"}`,
           children: n.label
         },
         n.id
       )) })
     ] }) }) }) }),
-    e && o && /* @__PURE__ */ t("div", { className: "fixed inset-0 z-40 bg-black/50", onClick: () => r(!1), children: /* @__PURE__ */ t("div", { className: "fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20", children: /* @__PURE__ */ l("div", { className: "p-6 flex flex-col h-full pt-20", children: [
+    e && i && /* @__PURE__ */ t("div", { className: "fixed inset-0 z-40 bg-black/50", onClick: () => r(!1), children: /* @__PURE__ */ t("div", { className: "fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20", children: /* @__PURE__ */ l("div", { className: "p-6 flex flex-col h-full pt-20", children: [
       /* @__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: o.map((n) => /* @__PURE__ */ t(
         "button",
         {
           onClick: () => {
-            i(n.id), r(!1);
+            a(n.id), r(!1);
           },
           className: `w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${s === n.id ? "bg-cyan-500/20 text-cyan-400 border border-cyan-500/50" : "text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10"}`,
           children: /* @__PURE__ */ t("span", { className: "font-medium", children: n.label })
@@ -308,141 +308,190 @@ const ue = () => {
       )) })
     ] }) }) })
   ] });
-}, F = () => {
-  const { isMobile: e, isTablet: s } = N(), { sidebarOpen: i, setSidebarOpen: o } = $(), r = [
-    { id: "home", label: "Inicio" },
-    { id: "about", label: "Acerca" },
-    { id: "contact", label: "Contacto" }
+}, H = ({ showLogo: e = !0 }) => {
+  const { isMobile: s, isTablet: a } = N(), { sidebarOpen: i, setSidebarOpen: r } = $(), o = [
+    { id: "home", label: "Home" },
+    { id: "about", label: "About" },
+    { id: "contact", label: "Contact" }
   ];
-  return /* @__PURE__ */ l(A, { children: [
-    e && /* @__PURE__ */ t(
+  return /* @__PURE__ */ l(O, { children: [
+    s && /* @__PURE__ */ t(
       "button",
       {
-        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" }) })
+        type: "button",
+        onClick: () => r(!0),
+        "aria-label": "Open sidebar",
+        className: "fixed top-4 left-4 z-50 p-2 rounded border transition-opacity hover:opacity-75 focus:outline-none focus:ring-2 focus:ring-offset-2",
+        children: /* @__PURE__ */ t("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", 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"} ${s ? "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: r.map((a) => /* @__PURE__ */ t(
-        "button",
+    /* @__PURE__ */ t(
+      "aside",
+      {
+        className: `border-r h-full ${s ? "hidden" : "w-64 flex-shrink-0"} ${a ? "w-56" : "w-64"}`,
+        "aria-label": "Sidebar navigation",
+        children: /* @__PURE__ */ l("div", { className: "p-6 flex flex-col h-full overflow-y-auto", children: [
+          e && /* @__PURE__ */ l("div", { className: "flex items-center space-x-3 mb-8 flex-shrink-0", children: [
+            /* @__PURE__ */ t("div", { className: "w-8 h-8 border rounded flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ t("span", { className: "text-sm", children: "Logo" }) }),
+            /* @__PURE__ */ t("span", { className: "font-bold text-lg truncate", children: "App Name" })
+          ] }),
+          /* @__PURE__ */ t("nav", { className: `space-y-2 flex-1 ${e ? "" : "pt-0"}`, role: "navigation", "aria-label": "Main navigation", children: o.map((n) => /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              className: "w-full flex items-center px-4 py-3 rounded transition-all text-left hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-offset-2",
+              "aria-label": n.label,
+              children: /* @__PURE__ */ t("span", { className: "font-medium", children: n.label })
+            },
+            n.id
+          )) })
+        ] })
+      }
+    ),
+    s && i && /* @__PURE__ */ l(O, { children: [
+      /* @__PURE__ */ t(
+        "div",
         {
-          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 })
-        },
-        a.id
-      )) })
-    ] }) }),
-    e && i && /* @__PURE__ */ t("div", { className: "fixed inset-0 z-40 bg-black/50", onClick: () => o(!1), children: /* @__PURE__ */ t("div", { className: "fixed top-0 left-0 w-64 h-full bg-gray-900 border-r border-gray-800", children: /* @__PURE__ */ l("div", { className: "p-6 flex flex-col h-full pt-20", children: [
-      /* @__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: r.map((a) => /* @__PURE__ */ t(
-        "button",
+          className: "fixed inset-0 z-40 bg-black bg-opacity-50 transition-opacity",
+          onClick: () => r(!1),
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ t(
+        "aside",
         {
-          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 })
-        },
-        a.id
-      )) })
-    ] }) }) })
+          className: "fixed top-0 left-0 w-64 h-full border-r z-50 overflow-y-auto",
+          "aria-label": "Mobile sidebar navigation",
+          role: "dialog",
+          "aria-modal": "true",
+          children: /* @__PURE__ */ l("div", { className: "p-6 flex flex-col h-full pt-20", children: [
+            e && /* @__PURE__ */ l("div", { className: "flex items-center space-x-3 mb-8 flex-shrink-0", children: [
+              /* @__PURE__ */ t("div", { className: "w-8 h-8 border rounded flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ t("span", { className: "text-sm", children: "Logo" }) }),
+              /* @__PURE__ */ t("span", { className: "font-bold text-lg truncate", children: "App Name" })
+            ] }),
+            /* @__PURE__ */ t("nav", { className: `space-y-2 flex-1 ${e ? "" : "pt-0"}`, role: "navigation", "aria-label": "Main navigation", children: o.map((n) => /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                onClick: () => r(!1),
+                className: "w-full flex items-center px-4 py-3 rounded transition-all text-left hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-offset-2",
+                "aria-label": n.label,
+                children: /* @__PURE__ */ t("span", { className: "font-medium", children: n.label })
+              },
+              n.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: [
+}, z = () => /* @__PURE__ */ t("footer", { className: "border-t flex-shrink-0", role: "contentinfo", 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-sm", children: [
   "© ",
   (/* @__PURE__ */ new Date()).getFullYear(),
-  " Tu Aplicación. Todos los derechos reservados."
-] }) }) }) }), ge = () => {
+  " Your App. All rights reserved."
+] }) }) }) }), E = () => {
   const { isMobile: e } = N();
-  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: [
+  return /* @__PURE__ */ t("nav", { className: "sticky top-0 z-50 border-b bg-white", 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" }) }),
-      /* @__PURE__ */ t("h1", { className: "text-white font-semibold text-lg", children: "Tu Aplicación" })
+      /* @__PURE__ */ t("div", { className: "w-8 h-8 border rounded flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ t("span", { className: "text-sm", children: "Logo" }) }),
+      /* @__PURE__ */ t("h1", { className: "font-semibold text-lg truncate", children: "App Name" })
     ] }),
-    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" }) }) })
+    e && /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Toggle menu",
+        className: "p-2 rounded transition-opacity hover:opacity-75 focus:outline-none focus:ring-2 focus:ring-offset-2",
+        children: /* @__PURE__ */ t("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", 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: [
-  /* @__PURE__ */ t(ge, {}),
-  /* @__PURE__ */ t("main", { className: "flex-1", children: e }),
-  /* @__PURE__ */ t(H, {})
-] }), xe = ({ children: e }) => /* @__PURE__ */ l("div", { className: "min-h-screen bg-gray-50 flex", children: [
-  /* @__PURE__ */ t(F, {}),
-  /* @__PURE__ */ t("main", { className: "flex-1 overflow-auto", children: e })
-] }), fe = ({ children: e }) => /* @__PURE__ */ t(B, { children: /* @__PURE__ */ t(xe, { children: e }) }), ye = ({ children: e }) => /* @__PURE__ */ t("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: /* @__PURE__ */ l("div", { className: "flex flex-1", children: [
-  /* @__PURE__ */ t(F, {}),
-  /* @__PURE__ */ l("main", { className: "flex-1 overflow-auto flex flex-col", children: [
-    /* @__PURE__ */ t("div", { className: "flex-1", children: e }),
-    /* @__PURE__ */ t(H, {})
+}, R = ({ children: e }) => /* @__PURE__ */ l("div", { className: "min-h-screen flex flex-col", children: [
+  /* @__PURE__ */ t(E, {}),
+  /* @__PURE__ */ t("main", { className: "flex-1 overflow-x-hidden", children: e }),
+  /* @__PURE__ */ t(z, {})
+] }), xe = ({ children: e }) => /* @__PURE__ */ l("div", { className: "min-h-screen flex h-screen", children: [
+  /* @__PURE__ */ t(H, {}),
+  /* @__PURE__ */ t("main", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: e })
+] }), ge = ({ children: e }) => /* @__PURE__ */ t(T, { children: /* @__PURE__ */ t(xe, { children: e }) }), ve = ({ children: e }) => /* @__PURE__ */ l("div", { className: "min-h-screen flex flex-col h-screen", children: [
+  /* @__PURE__ */ t(E, {}),
+  /* @__PURE__ */ l("div", { className: "flex flex-1 overflow-hidden", children: [
+    /* @__PURE__ */ t(H, { showLogo: !1 }),
+    /* @__PURE__ */ l("main", { className: "flex-1 overflow-y-auto overflow-x-hidden flex flex-col", children: [
+      /* @__PURE__ */ t("div", { className: "flex-1", children: e }),
+      /* @__PURE__ */ t(z, {})
+    ] })
   ] })
-] }) }), ve = ({ children: e }) => /* @__PURE__ */ t(B, { children: /* @__PURE__ */ t(ye, { children: e }) }), Ne = ({ children: e }) => /* @__PURE__ */ t("div", { className: "min-h-screen bg-gray-50", children: /* @__PURE__ */ t("main", { children: e }) }), Te = ({ compact: e = !1 }) => {
-  const { current: s, setLayout: i, 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:" }),
+] }), ye = ({ children: e }) => /* @__PURE__ */ t(T, { children: /* @__PURE__ */ t(ve, { children: e }) }), Ne = ({ children: e }) => /* @__PURE__ */ t("div", { className: "min-h-screen", children: /* @__PURE__ */ t("main", { children: e }) }), je = ({ compact: e = !1 }) => {
+  const { current: s, setLayout: a, config: i } = he();
+  return e ? /* @__PURE__ */ l("div", { className: "p-3 border rounded", children: [
+    /* @__PURE__ */ t("label", { htmlFor: "layout-select", className: "text-xs mb-2 block", children: "Layout:" }),
     /* @__PURE__ */ t(
       "select",
       {
+        id: "layout-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(h).map(([r, a]) => /* @__PURE__ */ t("option", { value: r, children: a.name }, r))
+        onChange: (r) => a(r.target.value),
+        className: "w-full text-sm p-2 rounded border focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all",
+        "aria-label": "Select layout",
+        children: Object.entries(b).map(([r, o]) => /* @__PURE__ */ t("option", { value: r, children: o.name }, r))
       }
     )
-  ] }) : /* @__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(h).map(([r, a]) => /* @__PURE__ */ l(
+  ] }) : /* @__PURE__ */ l("div", { className: "p-4 border rounded", role: "region", "aria-label": "Layout switcher", children: [
+    /* @__PURE__ */ t("h3", { className: "font-semibold mb-3", children: "Change Layout" }),
+    /* @__PURE__ */ t("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3", role: "group", "aria-label": "Layout options", children: Object.entries(b).map(([r, o]) => /* @__PURE__ */ l(
       "button",
       {
-        onClick: () => i(r),
+        type: "button",
+        onClick: () => a(r),
+        "aria-pressed": s === r,
+        "aria-label": `Switch to ${o.name} layout`,
         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"}
+              p-4 rounded border transition-all text-left
+              focus:outline-none focus:ring-2 focus:ring-offset-2
+              ${s === r ? "border-2" : "border hover:border-opacity-50"}
             `,
         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: o.name }),
+          /* @__PURE__ */ t("div", { className: "text-xs opacity-75", children: o.description })
         ]
       },
       r
     )) }),
-    /* @__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: o.name }),
-      /* @__PURE__ */ t("div", { className: "text-xs text-gray-400", children: o.description })
+    /* @__PURE__ */ l("div", { className: "mt-4 p-3 border rounded", role: "status", "aria-live": "polite", children: [
+      /* @__PURE__ */ t("div", { className: "text-xs mb-1", children: "Current Layout:" }),
+      /* @__PURE__ */ t("div", { className: "text-sm font-medium", children: i.name }),
+      /* @__PURE__ */ t("div", { className: "text-xs opacity-75", children: i.description })
     ] })
   ] });
 };
 export {
-  De as AVAILABLE_LAYOUTS,
+  Me as AVAILABLE_LAYOUTS,
   u as DEFAULT_BREAKPOINTS,
   k as DEFAULT_LAYOUT,
-  ve as DashboardLayout,
-  j as DefaultLayout,
-  H as Footer,
+  ye as DashboardLayout,
+  R as DefaultLayout,
+  z as Footer,
   Pe as Header,
-  h as LAYOUT_CONFIG,
-  Te as LayoutSwitcher,
+  b as LAYOUT_CONFIG,
+  je as LayoutSwitcher,
   Oe as MainLayout,
   Ne as MinimalLayout,
-  ge as Navigation,
+  E as Navigation,
   Se as NavigationProvider,
-  Me as ResponsiveLayoutProvider,
-  oe as ResponsiveProvider,
-  F as Sidebar,
-  fe as SidebarLayout,
-  B as SidebarProvider,
-  b as getBreakpointIndex,
+  De as ResponsiveLayoutProvider,
+  le as ResponsiveProvider,
+  H as Sidebar,
+  ge as SidebarLayout,
+  T as SidebarProvider,
+  p as getBreakpointIndex,
   Ce as getBreakpointValue,
-  le as getCurrentBreakpoint,
+  ce as getCurrentBreakpoint,
   he as useLayout,
   be as useNavigation,
-  ue as useResponsive,
+  me as useResponsive,
   N as useResponsiveLayout,
-  me as useResponsiveLayoutContext,
+  pe as useResponsiveLayoutContext,
   $ as useSidebar
 };
 //# sourceMappingURL=responsive-system.mjs.map