responsive-system 1.4.2 → 1.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,9 +1,9 @@
1
- import { jsx as e, Fragment as B, jsxs as s } from "react/jsx-runtime";
2
- import { useState as w, useCallback as m, useMemo as D, useEffect as oe, createContext as R, useContext as M } from "react";
3
- const le = ({
4
- children: t,
5
- debug: n = !1
6
- }) => /* @__PURE__ */ e(B, { children: t }), h = {
1
+ import { jsx as t, Fragment as A, jsxs as l } from "react/jsx-runtime";
2
+ import { useState as k, useCallback as d, useMemo as D, useEffect as oe, createContext as M, useContext as O } from "react";
3
+ const ie = ({
4
+ children: e,
5
+ debug: r = !1
6
+ }) => /* @__PURE__ */ t(A, { children: e }), u = {
7
7
  xs: 475,
8
8
  sm: 640,
9
9
  md: 768,
@@ -13,160 +13,160 @@ const le = ({
13
13
  "3xl": 1920,
14
14
  "4xl": 2560,
15
15
  "5xl": 3840
16
- }, 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];
17
- function de(t, n) {
18
- let i = null;
19
- return (...l) => {
20
- i && clearTimeout(i), i = setTimeout(() => t(...l), n);
16
+ }, 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];
17
+ function ce(e, r) {
18
+ let o = null;
19
+ return (...i) => {
20
+ o && clearTimeout(o), o = setTimeout(() => e(...i), r);
21
21
  };
22
22
  }
23
- function ue(t, n) {
24
- return t >= n ? "landscape" : "portrait";
23
+ function de(e, r) {
24
+ return e >= r ? "landscape" : "portrait";
25
25
  }
26
- const me = () => {
27
- const [t, n] = w({
26
+ const ue = () => {
27
+ const [e, r] = k({
28
28
  width: typeof window < "u" ? window.innerWidth : 1024,
29
29
  height: typeof window < "u" ? window.innerHeight : 768
30
- }), i = m(() => {
31
- n({
30
+ }), o = d(() => {
31
+ r({
32
32
  width: window.innerWidth,
33
33
  height: window.innerHeight
34
34
  });
35
- }, []), l = D(
36
- () => de(i, 100),
37
- [i]
35
+ }, []), i = D(
36
+ () => ce(o, 100),
37
+ [o]
38
38
  );
39
39
  oe(() => {
40
40
  if (!(typeof window > "u"))
41
- return window.addEventListener("resize", l), () => {
42
- window.removeEventListener("resize", l);
41
+ return window.addEventListener("resize", i), () => {
42
+ window.removeEventListener("resize", i);
43
43
  };
44
- }, [l]);
45
- 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) => {
46
- const O = x(a);
47
- return O >= x(u) && O <= x(v);
48
- }, [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]);
44
+ }, [i]);
45
+ 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) => {
46
+ const P = b(n);
47
+ return P >= b(c) && P <= b(y);
48
+ }, [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]);
49
49
  return {
50
50
  // Estado básico
51
- breakpoint: a,
52
- width: r,
53
- height: o,
54
- orientation: c,
51
+ breakpoint: n,
52
+ width: s,
53
+ height: a,
54
+ orientation: g,
55
55
  // Helpers booleanos específicos
56
- isXs: d,
57
- isSm: k,
58
- isMd: y,
59
- isLg: p,
56
+ isXs: m,
57
+ isSm: w,
58
+ isMd: x,
59
+ isLg: h,
60
60
  isXl: C,
61
61
  is2Xl: S,
62
62
  is3Xl: L,
63
63
  is4Xl: f,
64
- is5Xl: g,
64
+ is5Xl: p,
65
65
  // Helpers booleanos agrupados
66
66
  isMobile: W,
67
- isTablet: I,
68
- isDesktop: X,
69
- isSmall: _,
70
- isLarge: K,
71
- isUltraWide: V,
72
- is4K: Y,
73
- is5K: q,
67
+ isTablet: z,
68
+ isDesktop: I,
69
+ isSmall: X,
70
+ isLarge: _,
71
+ isUltraWide: Y,
72
+ is4K: K,
73
+ is5K: V,
74
74
  // Helpers de orientación
75
- isPortrait: G,
76
- isLandscape: J,
75
+ isPortrait: q,
76
+ isLandscape: G,
77
77
  // Funciones de comparación
78
- isBreakpointUp: Q,
79
- isBreakpointDown: Z,
80
- isBreakpointBetween: ee,
81
- isWidthUp: te,
82
- isWidthDown: ae,
78
+ isBreakpointUp: J,
79
+ isBreakpointDown: Q,
80
+ isBreakpointBetween: Z,
81
+ isWidthUp: ee,
82
+ isWidthDown: te,
83
83
  isWidthBetween: ne,
84
84
  isHeightUp: se,
85
85
  isHeightDown: re,
86
- isHeightBetween: ie,
86
+ isHeightBetween: ae,
87
87
  // Debug
88
88
  debug: !1
89
89
  };
90
- }, T = R(void 0), be = () => {
91
- const t = M(T);
92
- if (!t)
90
+ }, R = M(void 0), me = () => {
91
+ const e = O(R);
92
+ if (!e)
93
93
  throw new Error("useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider");
94
- return t;
95
- }, $ = R(void 0), A = ({ children: t }) => {
96
- const [n, i] = w(!1);
97
- return /* @__PURE__ */ e($.Provider, { value: { sidebarOpen: n, setSidebarOpen: i }, children: t });
98
- }, U = () => {
99
- const t = M($);
100
- if (!t)
94
+ return e;
95
+ }, T = M(void 0), U = ({ children: e }) => {
96
+ const [r, o] = k(!1);
97
+ return /* @__PURE__ */ t(T.Provider, { value: { sidebarOpen: r, setSidebarOpen: o }, children: e });
98
+ }, B = () => {
99
+ const e = O(T);
100
+ if (!e)
101
101
  throw new Error("useSidebar must be used within a SidebarProvider");
102
- return t;
103
- }, E = R({
102
+ return e;
103
+ }, $ = M({
104
104
  currentPage: "test",
105
105
  setCurrentPage: () => {
106
106
  }
107
- }), j = () => M(E), Se = ({
108
- children: t,
109
- defaultPage: n = "test"
107
+ }), be = () => O($), Se = ({
108
+ children: e,
109
+ defaultPage: r = "test"
110
110
  }) => {
111
- const [i, l] = w(n);
112
- return /* @__PURE__ */ e(E.Provider, { value: { currentPage: i, setCurrentPage: l }, children: t });
113
- }, b = () => {
114
- const t = be();
111
+ const [o, i] = k(r);
112
+ return /* @__PURE__ */ t($.Provider, { value: { currentPage: o, setCurrentPage: i }, children: e });
113
+ }, N = () => {
114
+ const e = me();
115
115
  return {
116
116
  // Todo el sistema responsivo original
117
- ...t.responsive,
117
+ ...e.responsive,
118
118
  // Sistema de layout
119
119
  layout: {
120
- current: t.layout.current,
121
- config: t.layout.config,
122
- setLayout: t.layout.setLayout
120
+ current: e.layout.current,
121
+ config: e.layout.config,
122
+ setLayout: e.layout.setLayout
123
123
  },
124
124
  // Utilidades de layout
125
- layoutUtils: t.layoutUtils,
125
+ layoutUtils: e.layoutUtils,
126
126
  // Helpers específicos del layout
127
- isDefaultLayout: () => t.layout.current === "default",
128
- isSidebarLayout: () => t.layout.current === "sidebar",
129
- isDashboardLayout: () => t.layout.current === "dashboard",
130
- isMinimalLayout: () => t.layout.current === "minimal",
127
+ isDefaultLayout: () => e.layout.current === "default",
128
+ isSidebarLayout: () => e.layout.current === "sidebar",
129
+ isDashboardLayout: () => e.layout.current === "dashboard",
130
+ isMinimalLayout: () => e.layout.current === "minimal",
131
131
  // Grid helpers que usan el sistema auto-escalable
132
132
  grid: {
133
- auto: (n = "md") => `grid-cols-auto-${n}`,
134
- responsive: (n) => {
135
- const i = [];
136
- return Object.entries(n).forEach(([l, r]) => {
137
- l === "base" ? i.push(`grid-cols-${r}`) : i.push(`${l}:grid-cols-${r}`);
138
- }), i.join(" ");
133
+ auto: (r = "md") => `grid-cols-auto-${r}`,
134
+ responsive: (r) => {
135
+ const o = [];
136
+ return Object.entries(r).forEach(([i, s]) => {
137
+ i === "base" ? o.push(`grid-cols-${s}`) : o.push(`${i}:grid-cols-${s}`);
138
+ }), o.join(" ");
139
139
  },
140
- fixed: (n) => `grid-cols-${n}`
140
+ fixed: (r) => `grid-cols-${r}`
141
141
  },
142
142
  // Spacing helpers que escalan automáticamente
143
143
  spacing: {
144
- container: t.layoutUtils.getContainerClass(),
144
+ container: e.layoutUtils.getContainerClass(),
145
145
  section: "mb-6",
146
146
  card: "p-6",
147
147
  gap: "gap-4"
148
148
  }
149
149
  };
150
150
  }, he = () => {
151
- const t = b();
151
+ const e = N();
152
152
  return {
153
153
  // Layout actual
154
- current: t.layout.current,
155
- config: t.layout.config,
156
- setLayout: t.layout.setLayout,
154
+ current: e.layout.current,
155
+ config: e.layout.config,
156
+ setLayout: e.layout.setLayout,
157
157
  // Utilidades
158
- ...t.layoutUtils,
158
+ ...e.layoutUtils,
159
159
  // Helpers específicos
160
- isDefaultLayout: t.isDefaultLayout(),
161
- isSidebarLayout: t.isSidebarLayout(),
162
- isDashboardLayout: t.isDashboardLayout(),
163
- isMinimalLayout: t.isMinimalLayout(),
160
+ isDefaultLayout: e.isDefaultLayout(),
161
+ isSidebarLayout: e.isSidebarLayout(),
162
+ isDashboardLayout: e.isDashboardLayout(),
163
+ isMinimalLayout: e.isMinimalLayout(),
164
164
  // Grid helpers
165
- grid: t.grid,
165
+ grid: e.grid,
166
166
  // Spacing helpers
167
- spacing: t.spacing
167
+ spacing: e.spacing
168
168
  };
169
- }, N = {
169
+ }, v = {
170
170
  default: {
171
171
  name: "Default",
172
172
  description: "Navbar arriba, body central, footer abajo",
@@ -211,346 +211,235 @@ const me = () => {
211
211
  desktop: "p-6"
212
212
  }
213
213
  }
214
- }, F = "default", De = Object.keys(N), xe = ({
215
- children: t,
216
- defaultLayout: n,
217
- useResponsiveHook: i
214
+ }, E = "default", De = Object.keys(v), pe = ({
215
+ children: e,
216
+ defaultLayout: r,
217
+ useResponsiveHook: o
218
218
  }) => {
219
- const l = me(), o = i?.() || l, [a, c] = w(n), d = N[a] || N[F], y = {
220
- responsive: o,
219
+ const i = ue(), a = o?.() || i, [n, g] = k(r), m = v[n] || v[E], x = {
220
+ responsive: a,
221
221
  layout: {
222
- current: a,
223
- config: d,
224
- setLayout: c
222
+ current: n,
223
+ config: m,
224
+ setLayout: g
225
225
  },
226
226
  layoutUtils: {
227
- getContainerClass: () => o.isMobile ? d.responsive.mobile : o.isTablet ? d.responsive.tablet : d.responsive.desktop,
227
+ getContainerClass: () => a.isMobile ? m.responsive.mobile : a.isTablet ? m.responsive.tablet : m.responsive.desktop,
228
228
  getMainClass: () => {
229
- const p = "min-h-screen bg-black";
230
- return a === "sidebar" || a === "dashboard" ? `${p} flex` : p;
229
+ const h = "min-h-screen bg-black";
230
+ return n === "sidebar" || n === "dashboard" ? `${h} flex` : h;
231
231
  },
232
- hasSidebar: () => a === "sidebar" || a === "dashboard",
233
- hasHeader: () => a === "dashboard",
234
- hasFooter: () => a === "default" || a === "dashboard",
235
- hasNavigation: () => a === "default"
232
+ hasSidebar: () => n === "sidebar" || n === "dashboard",
233
+ hasHeader: () => n === "dashboard",
234
+ hasFooter: () => n === "default" || n === "dashboard",
235
+ hasNavigation: () => n === "default"
236
236
  }
237
237
  };
238
- return /* @__PURE__ */ e(T.Provider, { value: y, children: t });
239
- }, Re = ({
240
- children: t,
241
- defaultLayout: n = F,
242
- useResponsiveHook: i
243
- }) => /* @__PURE__ */ e(le, { children: /* @__PURE__ */ e(
244
- xe,
238
+ return /* @__PURE__ */ t(R.Provider, { value: x, children: e });
239
+ }, Me = ({
240
+ children: e,
241
+ defaultLayout: r = E,
242
+ useResponsiveHook: o
243
+ }) => /* @__PURE__ */ t(ie, { children: /* @__PURE__ */ t(
244
+ pe,
245
245
  {
246
- defaultLayout: n,
247
- useResponsiveHook: i,
248
- children: t
246
+ defaultLayout: r,
247
+ useResponsiveHook: o,
248
+ children: e
249
249
  }
250
- ) }), Me = ({ children: t, layout: n }) => {
251
- const { layout: i } = b(), l = n || i.current, o = {
252
- default: P,
253
- sidebar: ye,
250
+ ) }), Oe = ({ children: e, layout: r }) => {
251
+ const { layout: o } = N(), i = r || o.current, a = {
252
+ default: j,
253
+ sidebar: fe,
254
254
  dashboard: ve,
255
255
  minimal: Ne
256
- }[l] || P;
257
- return /* @__PURE__ */ e(o, { children: t });
258
- }, Ue = () => {
259
- const { isMobile: t } = b(), { currentPage: n, setCurrentPage: i } = j(), { sidebarOpen: l, setSidebarOpen: r } = U(), o = [
256
+ }[i] || j;
257
+ return /* @__PURE__ */ t(a, { children: e });
258
+ }, Pe = () => {
259
+ const { isMobile: e } = N(), { currentPage: r, setCurrentPage: o } = be(), { sidebarOpen: i, setSidebarOpen: s } = B(), a = [
260
260
  { id: "test", label: "Suite de Test" },
261
261
  { id: "demo", label: "Demo" }
262
262
  ];
263
- return /* @__PURE__ */ s("div", { className: "sticky top-0 z-50", children: [
264
- /* @__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: [
265
- /* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
266
- t && /* @__PURE__ */ e(
263
+ return /* @__PURE__ */ l("div", { className: "sticky top-0 z-50", children: [
264
+ /* @__PURE__ */ t("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__ */ t("div", { className: "w-full", children: /* @__PURE__ */ t("div", { className: "px-4 py-4", children: /* @__PURE__ */ l("div", { className: "flex items-center justify-between", children: [
265
+ /* @__PURE__ */ l("div", { className: "flex items-center space-x-2", children: [
266
+ e && /* @__PURE__ */ t(
267
267
  "button",
268
268
  {
269
- onClick: () => r(!0),
269
+ onClick: () => s(!0),
270
270
  className: "p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors",
271
- 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" }) })
271
+ 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" }) })
272
272
  }
273
273
  ),
274
- /* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
275
- /* @__PURE__ */ e("div", { className: "w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse" }),
276
- /* @__PURE__ */ e("h3", { className: "text-base font-black text-white tracking-tight", children: "Sistema Responsivo" })
274
+ /* @__PURE__ */ l("div", { className: "flex items-center space-x-2", children: [
275
+ /* @__PURE__ */ t("div", { className: "w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse" }),
276
+ /* @__PURE__ */ t("h3", { className: "text-base font-black text-white tracking-tight", children: "Sistema Responsivo" })
277
277
  ] }),
278
- /* @__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" })
278
+ /* @__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" })
279
279
  ] }),
280
- /* @__PURE__ */ e("div", { className: "flex items-center space-x-2", children: !t && o.map((a) => /* @__PURE__ */ e(
280
+ /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: !e && a.map((n) => /* @__PURE__ */ t(
281
281
  "button",
282
282
  {
283
- onClick: () => i(a.id),
284
- 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"}`,
285
- children: a.label
283
+ onClick: () => o(n.id),
284
+ 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"}`,
285
+ children: n.label
286
286
  },
287
- a.id
287
+ n.id
288
288
  )) })
289
289
  ] }) }) }) }),
290
- 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: [
291
- /* @__PURE__ */ s("div", { className: "flex items-center space-x-3 mb-8", children: [
292
- /* @__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" }) }),
293
- /* @__PURE__ */ e("span", { className: "text-white font-bold text-lg", children: "Sistema Responsivo" })
290
+ 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: [
291
+ /* @__PURE__ */ l("div", { className: "flex items-center space-x-3 mb-8", children: [
292
+ /* @__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" }) }),
293
+ /* @__PURE__ */ t("span", { className: "text-white font-bold text-lg", children: "Sistema Responsivo" })
294
294
  ] }),
295
- /* @__PURE__ */ e("nav", { className: "space-y-2", children: o.map((a) => /* @__PURE__ */ e(
295
+ /* @__PURE__ */ t("nav", { className: "space-y-2", children: a.map((n) => /* @__PURE__ */ t(
296
296
  "button",
297
297
  {
298
298
  onClick: () => {
299
- i(a.id), r(!1);
299
+ o(n.id), s(!1);
300
300
  },
301
- 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"}`,
302
- children: /* @__PURE__ */ e("span", { className: "font-medium", children: a.label })
301
+ 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"}`,
302
+ children: /* @__PURE__ */ t("span", { className: "font-medium", children: n.label })
303
303
  },
304
- a.id
304
+ n.id
305
305
  )) })
306
306
  ] }) }) })
307
307
  ] });
308
- }, H = () => {
309
- const { isMobile: t, isTablet: n, breakpoint: i } = b(), { currentPage: l, setCurrentPage: r } = j(), { sidebarOpen: o, setSidebarOpen: a } = U(), c = [
310
- { id: "test", label: "Suite de Test" },
311
- { id: "demo", label: "Demo" }
308
+ }, F = () => {
309
+ const { isMobile: e, isTablet: r } = N(), { sidebarOpen: o, setSidebarOpen: i } = B(), s = [
310
+ { id: "home", label: "Inicio" },
311
+ { id: "about", label: "Acerca" },
312
+ { id: "contact", label: "Contacto" }
312
313
  ];
313
- return /* @__PURE__ */ s(B, { children: [
314
- t && /* @__PURE__ */ e(
314
+ return /* @__PURE__ */ l(A, { children: [
315
+ e && /* @__PURE__ */ t(
315
316
  "button",
316
317
  {
317
- onClick: () => a(!0),
318
- 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",
319
- 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" }) })
318
+ onClick: () => i(!0),
319
+ 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",
320
+ 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" }) })
320
321
  }
321
322
  ),
322
- /* @__PURE__ */ e("aside", { className: `
323
- bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20
324
- ${t ? "hidden" : "w-64 flex-shrink-0"}
325
- ${n ? "w-56" : "w-64"}
326
- `, children: /* @__PURE__ */ s("div", { className: "p-6 flex flex-col h-full", children: [
327
- /* @__PURE__ */ s("div", { className: "flex items-center space-x-3 mb-8", children: [
328
- /* @__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" }) }),
329
- /* @__PURE__ */ s("div", { children: [
330
- /* @__PURE__ */ e("span", { className: "text-white font-bold text-lg", children: "Sistema Responsivo" }),
331
- /* @__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() })
332
- ] })
323
+ /* @__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: [
324
+ /* @__PURE__ */ l("div", { className: "flex items-center space-x-3 mb-8", children: [
325
+ /* @__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" }) }),
326
+ /* @__PURE__ */ t("span", { className: "text-white font-bold text-lg", children: "Tu Aplicación" })
333
327
  ] }),
334
- /* @__PURE__ */ e("nav", { className: "space-y-2", children: c.map((d) => /* @__PURE__ */ e(
328
+ /* @__PURE__ */ t("nav", { className: "space-y-2", children: s.map((a) => /* @__PURE__ */ t(
335
329
  "button",
336
330
  {
337
- onClick: () => r(d.id),
338
- 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"}`,
339
- children: /* @__PURE__ */ e("span", { className: "font-medium", children: d.label })
331
+ 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",
332
+ children: /* @__PURE__ */ t("span", { className: "font-medium", children: a.label })
340
333
  },
341
- d.id
334
+ a.id
342
335
  )) })
343
336
  ] }) }),
344
- 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: [
345
- /* @__PURE__ */ s("div", { className: "flex items-center space-x-3 mb-8", children: [
346
- /* @__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" }) }),
347
- /* @__PURE__ */ e("span", { className: "text-white font-bold text-lg", children: "Sistema Responsivo" })
337
+ 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: [
338
+ /* @__PURE__ */ l("div", { className: "flex items-center space-x-3 mb-8", children: [
339
+ /* @__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" }) }),
340
+ /* @__PURE__ */ t("span", { className: "text-white font-bold text-lg", children: "Tu Aplicación" })
348
341
  ] }),
349
- /* @__PURE__ */ e("nav", { className: "space-y-2", children: c.map((d) => /* @__PURE__ */ e(
342
+ /* @__PURE__ */ t("nav", { className: "space-y-2", children: s.map((a) => /* @__PURE__ */ t(
350
343
  "button",
351
344
  {
352
- onClick: () => {
353
- r(d.id), a(!1);
354
- },
355
- 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"}`,
356
- children: /* @__PURE__ */ e("span", { className: "font-medium", children: d.label })
345
+ onClick: () => i(!1),
346
+ 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",
347
+ children: /* @__PURE__ */ t("span", { className: "font-medium", children: a.label })
357
348
  },
358
- d.id
349
+ a.id
359
350
  )) })
360
351
  ] }) }) })
361
352
  ] });
362
- }, z = () => {
363
- const { layout: t, breakpoint: n, width: i, height: l } = b();
364
- 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: [
365
- /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [
366
- /* @__PURE__ */ s("div", { children: [
367
- /* @__PURE__ */ s("div", { className: "flex items-center space-x-2 mb-2", children: [
368
- /* @__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" }) }),
369
- /* @__PURE__ */ e("span", { className: "text-white font-semibold text-sm", children: "Responsive System" })
370
- ] }),
371
- /* @__PURE__ */ e("p", { className: "text-gray-400 text-xs leading-relaxed", children: "Sistema completo de auto-escalado para aplicaciones React + Tailwind CSS" })
372
- ] }),
373
- /* @__PURE__ */ s("div", { children: [
374
- /* @__PURE__ */ e("h3", { className: "text-white font-semibold text-sm mb-2", children: "Estado del Sistema" }),
375
- /* @__PURE__ */ s("div", { className: "space-y-1", children: [
376
- /* @__PURE__ */ s("div", { className: "flex items-center justify-between text-xs", children: [
377
- /* @__PURE__ */ e("span", { className: "text-gray-400", children: "Breakpoint:" }),
378
- /* @__PURE__ */ e("span", { className: "text-cyan-400 font-medium", children: n.toUpperCase() })
379
- ] }),
380
- /* @__PURE__ */ s("div", { className: "flex items-center justify-between text-xs", children: [
381
- /* @__PURE__ */ e("span", { className: "text-gray-400", children: "Layout:" }),
382
- /* @__PURE__ */ e("span", { className: "text-cyan-400 font-medium", children: t.config.name })
383
- ] }),
384
- /* @__PURE__ */ s("div", { className: "flex items-center justify-between text-xs", children: [
385
- /* @__PURE__ */ e("span", { className: "text-gray-400", children: "Resolución:" }),
386
- /* @__PURE__ */ s("span", { className: "text-cyan-400 font-medium", children: [
387
- i,
388
- " × ",
389
- l
390
- ] })
391
- ] })
392
- ] })
393
- ] }),
394
- /* @__PURE__ */ s("div", { children: [
395
- /* @__PURE__ */ e("h3", { className: "text-white font-semibold text-sm mb-2", children: "Desarrollador" }),
396
- /* @__PURE__ */ s("div", { className: "space-y-1", children: [
397
- /* @__PURE__ */ e("p", { className: "text-white font-medium text-xs", children: "Felipe Caroca" }),
398
- /* @__PURE__ */ e("p", { className: "text-gray-400 text-xs", children: "Frontend Developer" })
399
- ] })
400
- ] })
401
- ] }),
402
- /* @__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." }) })
403
- ] }) });
404
- }, pe = () => {
405
- const { isMobile: t, breakpoint: n } = b(), { currentPage: i, setCurrentPage: l } = j(), [r, o] = w(!1), a = [
406
- { id: "demo", name: "Demo" },
407
- { id: "test", name: "Suite de Test" }
408
- ];
409
- 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: [
410
- /* @__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: [
411
- /* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
412
- /* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
413
- /* @__PURE__ */ e("div", { className: "w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse" }),
414
- /* @__PURE__ */ e("h3", { className: "text-base font-black text-white tracking-tight", children: "Sistema Responsivo" })
415
- ] }),
416
- /* @__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() })
417
- ] }),
418
- /* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
419
- !t && a.map((c) => /* @__PURE__ */ e(
420
- "button",
421
- {
422
- onClick: () => l(c.id),
423
- 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"}`,
424
- children: c.name
425
- },
426
- c.id
427
- )),
428
- t && /* @__PURE__ */ e(
429
- "button",
430
- {
431
- onClick: () => o(!r),
432
- className: "p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors",
433
- 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" }) })
434
- }
435
- )
436
- ] })
437
- ] }) }) }),
438
- 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(
439
- "button",
440
- {
441
- onClick: () => {
442
- l(c.id), o(!1);
443
- },
444
- 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"}`,
445
- children: c.name
446
- },
447
- c.id
448
- )) }) }) })
449
- ] }) });
450
- }, P = ({ children: t }) => {
451
- const { layoutUtils: n } = b();
452
- return /* @__PURE__ */ s("div", { className: "min-h-screen bg-black flex flex-col", children: [
453
- /* @__PURE__ */ e(pe, {}),
454
- /* @__PURE__ */ e("main", { className: "flex-1", children: /* @__PURE__ */ e("div", { className: n.getContainerClass(), children: t }) }),
455
- /* @__PURE__ */ e(z, {})
456
- ] });
457
- }, ge = ({ children: t }) => {
458
- const { layoutUtils: n } = b();
459
- return /* @__PURE__ */ s("div", { className: "min-h-screen bg-black flex", children: [
460
- /* @__PURE__ */ e(H, {}),
461
- /* @__PURE__ */ e("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e("div", { className: n.getContainerClass(), children: t }) })
462
- ] });
463
- }, ye = ({ children: t }) => /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(ge, { children: t }) }), fe = ({ children: t }) => {
464
- const { layoutUtils: n } = b(), { setSidebarOpen: i } = U();
465
- return /* @__PURE__ */ s("div", { className: "min-h-screen bg-black flex flex-col", children: [
466
- /* @__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: [
467
- /* @__PURE__ */ e(
468
- "button",
469
- {
470
- onClick: () => i(!0),
471
- className: "p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors",
472
- 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" }) })
473
- }
474
- ),
475
- /* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
476
- /* @__PURE__ */ e("div", { className: "w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse" }),
477
- /* @__PURE__ */ e("h3", { className: "text-base font-black text-white tracking-tight", children: "Sistema Responsivo" })
478
- ] }),
479
- /* @__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" })
480
- ] }) }) }) }) }) }),
481
- /* @__PURE__ */ s("div", { className: "flex flex-1", children: [
482
- /* @__PURE__ */ e(H, {}),
483
- /* @__PURE__ */ e("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e("div", { className: n.getContainerClass(), children: t }) })
353
+ }, 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: [
354
+ ",
355
+ (/* @__PURE__ */ new Date()).getFullYear(),
356
+ " Tu Aplicación. Todos los derechos reservados."
357
+ ] }) }) }) }), ge = () => {
358
+ const { isMobile: e } = N();
359
+ 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: [
360
+ /* @__PURE__ */ l("div", { className: "flex items-center space-x-3", children: [
361
+ /* @__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" }) }),
362
+ /* @__PURE__ */ t("h1", { className: "text-white font-semibold text-lg", children: "Tu Aplicación" })
484
363
  ] }),
485
- /* @__PURE__ */ e(z, {})
486
- ] });
487
- }, ve = ({ children: t }) => /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(fe, { children: t }) }), Ne = ({ children: t }) => {
488
- const { layoutUtils: n } = b();
489
- return /* @__PURE__ */ e("div", { className: "min-h-screen bg-black", children: /* @__PURE__ */ e("main", { className: n.getContainerClass(), children: t }) });
490
- }, je = ({ compact: t = !1 }) => {
491
- const { current: n, setLayout: i, config: l } = he();
492
- return t ? /* @__PURE__ */ s("div", { className: "bg-black/50 rounded-lg p-3 border border-gray-700", children: [
493
- /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 mb-2", children: "Layout:" }),
494
- /* @__PURE__ */ e(
364
+ 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" }) }) })
365
+ ] }) }) });
366
+ }, j = ({ children: e }) => /* @__PURE__ */ l("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
367
+ /* @__PURE__ */ t(ge, {}),
368
+ /* @__PURE__ */ t("main", { className: "flex-1", children: e }),
369
+ /* @__PURE__ */ t(H, {})
370
+ ] }), xe = ({ children: e }) => /* @__PURE__ */ l("div", { className: "min-h-screen bg-gray-50 flex", children: [
371
+ /* @__PURE__ */ t(F, {}),
372
+ /* @__PURE__ */ t("main", { className: "flex-1 overflow-auto", children: e })
373
+ ] }), 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: [
374
+ /* @__PURE__ */ t(F, {}),
375
+ /* @__PURE__ */ l("main", { className: "flex-1 overflow-auto flex flex-col", children: [
376
+ /* @__PURE__ */ t("div", { className: "flex-1", children: e }),
377
+ /* @__PURE__ */ t(H, {})
378
+ ] })
379
+ ] }) }), 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 }) => {
380
+ const { current: r, setLayout: o, config: i } = he();
381
+ return e ? /* @__PURE__ */ l("div", { className: "bg-black/50 rounded-lg p-3 border border-gray-700", children: [
382
+ /* @__PURE__ */ t("div", { className: "text-xs text-gray-500 mb-2", children: "Layout:" }),
383
+ /* @__PURE__ */ t(
495
384
  "select",
496
385
  {
497
- value: n,
498
- onChange: (r) => i(r.target.value),
386
+ value: r,
387
+ onChange: (s) => o(s.target.value),
499
388
  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",
500
- children: Object.entries(N).map(([r, o]) => /* @__PURE__ */ e("option", { value: r, children: o.name }, r))
389
+ children: Object.entries(v).map(([s, a]) => /* @__PURE__ */ t("option", { value: s, children: a.name }, s))
501
390
  }
502
391
  )
503
- ] }) : /* @__PURE__ */ s("div", { className: "bg-black/50 backdrop-blur-sm rounded-lg p-4 border border-cyan-500/30", children: [
504
- /* @__PURE__ */ e("h3", { className: "text-white font-semibold mb-3", children: "Cambiar Layout" }),
505
- /* @__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(
392
+ ] }) : /* @__PURE__ */ l("div", { className: "bg-black/50 backdrop-blur-sm rounded-lg p-4 border border-cyan-500/30", children: [
393
+ /* @__PURE__ */ t("h3", { className: "text-white font-semibold mb-3", children: "Cambiar Layout" }),
394
+ /* @__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(
506
395
  "button",
507
396
  {
508
- onClick: () => i(r),
397
+ onClick: () => o(s),
509
398
  className: `
510
399
  p-4 rounded-lg border transition-all text-left
511
- ${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"}
400
+ ${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"}
512
401
  `,
513
402
  children: [
514
- /* @__PURE__ */ e("div", { className: "font-semibold mb-1", children: o.name }),
515
- /* @__PURE__ */ e("div", { className: "text-xs opacity-75", children: o.description })
403
+ /* @__PURE__ */ t("div", { className: "font-semibold mb-1", children: a.name }),
404
+ /* @__PURE__ */ t("div", { className: "text-xs opacity-75", children: a.description })
516
405
  ]
517
406
  },
518
- r
407
+ s
519
408
  )) }),
520
- /* @__PURE__ */ s("div", { className: "mt-4 p-3 bg-gray-900/50 rounded-lg", children: [
521
- /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 mb-1", children: "Layout Actual:" }),
522
- /* @__PURE__ */ e("div", { className: "text-sm text-cyan-400 font-medium", children: l.name }),
523
- /* @__PURE__ */ e("div", { className: "text-xs text-gray-400", children: l.description })
409
+ /* @__PURE__ */ l("div", { className: "mt-4 p-3 bg-gray-900/50 rounded-lg", children: [
410
+ /* @__PURE__ */ t("div", { className: "text-xs text-gray-500 mb-1", children: "Layout Actual:" }),
411
+ /* @__PURE__ */ t("div", { className: "text-sm text-cyan-400 font-medium", children: i.name }),
412
+ /* @__PURE__ */ t("div", { className: "text-xs text-gray-400", children: i.description })
524
413
  ] })
525
414
  ] });
526
415
  };
527
416
  export {
528
417
  De as AVAILABLE_LAYOUTS,
529
- h as DEFAULT_BREAKPOINTS,
530
- F as DEFAULT_LAYOUT,
418
+ u as DEFAULT_BREAKPOINTS,
419
+ E as DEFAULT_LAYOUT,
531
420
  ve as DashboardLayout,
532
- P as DefaultLayout,
533
- z as Footer,
534
- Ue as Header,
535
- N as LAYOUT_CONFIG,
421
+ j as DefaultLayout,
422
+ H as Footer,
423
+ Pe as Header,
424
+ v as LAYOUT_CONFIG,
536
425
  je as LayoutSwitcher,
537
- Me as MainLayout,
426
+ Oe as MainLayout,
538
427
  Ne as MinimalLayout,
539
- pe as Navigation,
428
+ ge as Navigation,
540
429
  Se as NavigationProvider,
541
- Re as ResponsiveLayoutProvider,
542
- le as ResponsiveProvider,
543
- H as Sidebar,
544
- ye as SidebarLayout,
545
- A as SidebarProvider,
546
- x as getBreakpointIndex,
430
+ Me as ResponsiveLayoutProvider,
431
+ ie as ResponsiveProvider,
432
+ F as Sidebar,
433
+ fe as SidebarLayout,
434
+ U as SidebarProvider,
435
+ b as getBreakpointIndex,
547
436
  Ce as getBreakpointValue,
548
- ce as getCurrentBreakpoint,
437
+ le as getCurrentBreakpoint,
549
438
  he as useLayout,
550
- j as useNavigation,
551
- me as useResponsive,
552
- b as useResponsiveLayout,
553
- be as useResponsiveLayoutContext,
554
- U as useSidebar
439
+ be as useNavigation,
440
+ ue as useResponsive,
441
+ N as useResponsiveLayout,
442
+ me as useResponsiveLayoutContext,
443
+ B as useSidebar
555
444
  };
556
445
  //# sourceMappingURL=responsive-system.mjs.map