responsive-system 1.2.3 → 1.2.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,8 +1,8 @@
|
|
|
1
|
-
import { jsx as e, Fragment as B, jsxs as
|
|
2
|
-
import { useState as w, useCallback as
|
|
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 M, useContext as R } from "react";
|
|
3
3
|
const le = ({
|
|
4
4
|
children: t,
|
|
5
|
-
debug:
|
|
5
|
+
debug: n = !1
|
|
6
6
|
}) => /* @__PURE__ */ e(B, { children: t }), h = {
|
|
7
7
|
xs: 475,
|
|
8
8
|
sm: 640,
|
|
@@ -14,21 +14,21 @@ const le = ({
|
|
|
14
14
|
"4xl": 2560,
|
|
15
15
|
"5xl": 3840
|
|
16
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,
|
|
17
|
+
function de(t, n) {
|
|
18
18
|
let i = null;
|
|
19
19
|
return (...l) => {
|
|
20
|
-
i && clearTimeout(i), i = setTimeout(() => t(...l),
|
|
20
|
+
i && clearTimeout(i), i = setTimeout(() => t(...l), n);
|
|
21
21
|
};
|
|
22
22
|
}
|
|
23
|
-
function
|
|
24
|
-
return t >=
|
|
23
|
+
function ue(t, n) {
|
|
24
|
+
return t >= n ? "landscape" : "portrait";
|
|
25
25
|
}
|
|
26
|
-
const
|
|
27
|
-
const [t,
|
|
26
|
+
const me = () => {
|
|
27
|
+
const [t, n] = w({
|
|
28
28
|
width: typeof window < "u" ? window.innerWidth : 1024,
|
|
29
29
|
height: typeof window < "u" ? window.innerHeight : 768
|
|
30
|
-
}), i =
|
|
31
|
-
|
|
30
|
+
}), i = m(() => {
|
|
31
|
+
n({
|
|
32
32
|
width: window.innerWidth,
|
|
33
33
|
height: window.innerHeight
|
|
34
34
|
});
|
|
@@ -42,10 +42,10 @@ const ue = () => {
|
|
|
42
42
|
window.removeEventListener("resize", l);
|
|
43
43
|
};
|
|
44
44
|
}, [l]);
|
|
45
|
-
const { width: r, height: o } = t, a = D(() => ce(r), [r]), c = D(() =>
|
|
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, V = p || C || S || L || f || g, K = L || f || g, Y = f || g, G = g, q = 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
46
|
const O = x(a);
|
|
47
|
-
return O >= x(
|
|
48
|
-
}, [a]), te =
|
|
47
|
+
return O >= x(u) && O <= x(v);
|
|
48
|
+
}, [a]), te = m((u) => r >= u, [r]), ae = m((u) => r <= u, [r]), se = m((u, v) => r >= u && r <= v, [r]), ne = m((u) => o >= u, [o]), re = m((u) => o <= u, [o]), ie = m((u, v) => o >= u && o <= v, [o]);
|
|
49
49
|
return {
|
|
50
50
|
// Estado básico
|
|
51
51
|
breakpoint: a,
|
|
@@ -80,8 +80,8 @@ const ue = () => {
|
|
|
80
80
|
isBreakpointBetween: ee,
|
|
81
81
|
isWidthUp: te,
|
|
82
82
|
isWidthDown: ae,
|
|
83
|
-
isWidthBetween:
|
|
84
|
-
isHeightUp:
|
|
83
|
+
isWidthBetween: se,
|
|
84
|
+
isHeightUp: ne,
|
|
85
85
|
isHeightDown: re,
|
|
86
86
|
isHeightBetween: ie,
|
|
87
87
|
// Debug
|
|
@@ -93,8 +93,8 @@ const ue = () => {
|
|
|
93
93
|
throw new Error("useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider");
|
|
94
94
|
return t;
|
|
95
95
|
}, $ = M(void 0), A = ({ children: t }) => {
|
|
96
|
-
const [
|
|
97
|
-
return /* @__PURE__ */ e($.Provider, { value: { sidebarOpen:
|
|
96
|
+
const [n, i] = w(!1);
|
|
97
|
+
return /* @__PURE__ */ e($.Provider, { value: { sidebarOpen: n, setSidebarOpen: i }, children: t });
|
|
98
98
|
}, j = () => {
|
|
99
99
|
const t = R($);
|
|
100
100
|
if (!t)
|
|
@@ -106,9 +106,9 @@ const ue = () => {
|
|
|
106
106
|
}
|
|
107
107
|
}), U = () => R(z), Se = ({
|
|
108
108
|
children: t,
|
|
109
|
-
defaultPage:
|
|
109
|
+
defaultPage: n = "test"
|
|
110
110
|
}) => {
|
|
111
|
-
const [i, l] = w(
|
|
111
|
+
const [i, l] = w(n);
|
|
112
112
|
return /* @__PURE__ */ e(z.Provider, { value: { currentPage: i, setCurrentPage: l }, children: t });
|
|
113
113
|
}, b = () => {
|
|
114
114
|
const t = be();
|
|
@@ -130,14 +130,14 @@ const ue = () => {
|
|
|
130
130
|
isMinimalLayout: () => t.layout.current === "minimal",
|
|
131
131
|
// Grid helpers que usan el sistema auto-escalable
|
|
132
132
|
grid: {
|
|
133
|
-
auto: (
|
|
134
|
-
responsive: (
|
|
133
|
+
auto: (n = "md") => `grid-cols-auto-${n}`,
|
|
134
|
+
responsive: (n) => {
|
|
135
135
|
const i = [];
|
|
136
|
-
return Object.entries(
|
|
136
|
+
return Object.entries(n).forEach(([l, r]) => {
|
|
137
137
|
l === "base" ? i.push(`grid-cols-${r}`) : i.push(`${l}:grid-cols-${r}`);
|
|
138
138
|
}), i.join(" ");
|
|
139
139
|
},
|
|
140
|
-
fixed: (
|
|
140
|
+
fixed: (n) => `grid-cols-${n}`
|
|
141
141
|
},
|
|
142
142
|
// Spacing helpers que escalan automáticamente
|
|
143
143
|
spacing: {
|
|
@@ -213,10 +213,10 @@ const ue = () => {
|
|
|
213
213
|
}
|
|
214
214
|
}, F = "default", De = Object.keys(N), xe = ({
|
|
215
215
|
children: t,
|
|
216
|
-
defaultLayout:
|
|
216
|
+
defaultLayout: n,
|
|
217
217
|
useResponsiveHook: i
|
|
218
218
|
}) => {
|
|
219
|
-
const l =
|
|
219
|
+
const l = me(), o = i?.() || l, [a, c] = w(n), d = N[a] || N[F], y = {
|
|
220
220
|
responsive: o,
|
|
221
221
|
layout: {
|
|
222
222
|
current: a,
|
|
@@ -238,17 +238,17 @@ const ue = () => {
|
|
|
238
238
|
return /* @__PURE__ */ e(T.Provider, { value: y, children: t });
|
|
239
239
|
}, Me = ({
|
|
240
240
|
children: t,
|
|
241
|
-
defaultLayout:
|
|
241
|
+
defaultLayout: n = F,
|
|
242
242
|
useResponsiveHook: i
|
|
243
243
|
}) => /* @__PURE__ */ e(le, { children: /* @__PURE__ */ e(
|
|
244
244
|
xe,
|
|
245
245
|
{
|
|
246
|
-
defaultLayout:
|
|
246
|
+
defaultLayout: n,
|
|
247
247
|
useResponsiveHook: i,
|
|
248
248
|
children: t
|
|
249
249
|
}
|
|
250
|
-
) }), Re = ({ children: t, layout:
|
|
251
|
-
const { layout: i } = b(), l =
|
|
250
|
+
) }), Re = ({ children: t, layout: n }) => {
|
|
251
|
+
const { layout: i } = b(), l = n || i.current, o = {
|
|
252
252
|
default: P,
|
|
253
253
|
sidebar: ye,
|
|
254
254
|
dashboard: ve,
|
|
@@ -256,13 +256,13 @@ const ue = () => {
|
|
|
256
256
|
}[l] || P;
|
|
257
257
|
return /* @__PURE__ */ e(o, { children: t });
|
|
258
258
|
}, je = () => {
|
|
259
|
-
const { isMobile: t } = b(), { currentPage:
|
|
259
|
+
const { isMobile: t } = b(), { currentPage: n, setCurrentPage: i } = U(), { sidebarOpen: l, setSidebarOpen: r } = j(), o = [
|
|
260
260
|
{ id: "test", label: "Suite de Test" },
|
|
261
261
|
{ id: "demo", label: "Demo" }
|
|
262
262
|
];
|
|
263
|
-
return /* @__PURE__ */
|
|
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__ */
|
|
265
|
-
/* @__PURE__ */
|
|
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
266
|
t && /* @__PURE__ */ e(
|
|
267
267
|
"button",
|
|
268
268
|
{
|
|
@@ -271,7 +271,7 @@ const ue = () => {
|
|
|
271
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" }) })
|
|
272
272
|
}
|
|
273
273
|
),
|
|
274
|
-
/* @__PURE__ */
|
|
274
|
+
/* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
|
|
275
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
276
|
/* @__PURE__ */ e("h3", { className: "text-base font-black text-white tracking-tight", children: "Sistema Responsivo" })
|
|
277
277
|
] }),
|
|
@@ -281,14 +281,14 @@ const ue = () => {
|
|
|
281
281
|
"button",
|
|
282
282
|
{
|
|
283
283
|
onClick: () => i(a.id),
|
|
284
|
-
className: `px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${
|
|
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
285
|
children: a.label
|
|
286
286
|
},
|
|
287
287
|
a.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__ */
|
|
291
|
-
/* @__PURE__ */
|
|
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
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
293
|
/* @__PURE__ */ e("span", { className: "text-white font-bold text-lg", children: "Sistema Responsivo" })
|
|
294
294
|
] }),
|
|
@@ -298,7 +298,7 @@ const ue = () => {
|
|
|
298
298
|
onClick: () => {
|
|
299
299
|
i(a.id), r(!1);
|
|
300
300
|
},
|
|
301
|
-
className: `w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${
|
|
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
302
|
children: /* @__PURE__ */ e("span", { className: "font-medium", children: a.label })
|
|
303
303
|
},
|
|
304
304
|
a.id
|
|
@@ -306,11 +306,11 @@ const ue = () => {
|
|
|
306
306
|
] }) }) })
|
|
307
307
|
] });
|
|
308
308
|
}, H = () => {
|
|
309
|
-
const { isMobile: t, isTablet:
|
|
309
|
+
const { isMobile: t, isTablet: n, breakpoint: i } = b(), { currentPage: l, setCurrentPage: r } = U(), { sidebarOpen: o, setSidebarOpen: a } = j(), c = [
|
|
310
310
|
{ id: "test", label: "Suite de Test" },
|
|
311
311
|
{ id: "demo", label: "Demo" }
|
|
312
312
|
];
|
|
313
|
-
return /* @__PURE__ */
|
|
313
|
+
return /* @__PURE__ */ s(B, { children: [
|
|
314
314
|
t && /* @__PURE__ */ e(
|
|
315
315
|
"button",
|
|
316
316
|
{
|
|
@@ -322,11 +322,11 @@ const ue = () => {
|
|
|
322
322
|
/* @__PURE__ */ e("aside", { className: `
|
|
323
323
|
bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20
|
|
324
324
|
${t ? "hidden" : "w-64 flex-shrink-0"}
|
|
325
|
-
${
|
|
326
|
-
`, children: /* @__PURE__ */
|
|
327
|
-
/* @__PURE__ */
|
|
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
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__ */
|
|
329
|
+
/* @__PURE__ */ s("div", { children: [
|
|
330
330
|
/* @__PURE__ */ e("span", { className: "text-white font-bold text-lg", children: "Sistema Responsivo" }),
|
|
331
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
332
|
] })
|
|
@@ -341,8 +341,8 @@ const ue = () => {
|
|
|
341
341
|
d.id
|
|
342
342
|
)) })
|
|
343
343
|
] }) }),
|
|
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__ */
|
|
345
|
-
/* @__PURE__ */
|
|
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
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
347
|
/* @__PURE__ */ e("span", { className: "text-white font-bold text-lg", children: "Sistema Responsivo" })
|
|
348
348
|
] }),
|
|
@@ -360,30 +360,30 @@ const ue = () => {
|
|
|
360
360
|
] }) }) })
|
|
361
361
|
] });
|
|
362
362
|
}, E = () => {
|
|
363
|
-
const { layout: t, breakpoint:
|
|
364
|
-
return /* @__PURE__ */ e("footer", { className: "bg-gradient-to-r from-gray-900 to-black border-t border-cyan-500/20", children: /* @__PURE__ */
|
|
365
|
-
/* @__PURE__ */
|
|
366
|
-
/* @__PURE__ */
|
|
367
|
-
/* @__PURE__ */
|
|
368
|
-
/* @__PURE__ */ e("div", { className: "w-
|
|
369
|
-
/* @__PURE__ */ e("span", { className: "text-white font-
|
|
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-2 lg:grid-cols-3 gap-6", children: [
|
|
366
|
+
/* @__PURE__ */ s("div", { children: [
|
|
367
|
+
/* @__PURE__ */ s("div", { className: "flex items-center space-x-2 mb-3", children: [
|
|
368
|
+
/* @__PURE__ */ e("div", { className: "w-6 h-6 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
370
|
] }),
|
|
371
|
-
/* @__PURE__ */ e("p", { className: "text-gray-400 text-
|
|
371
|
+
/* @__PURE__ */ e("p", { className: "text-gray-400 text-xs leading-relaxed", children: "Sistema completo de auto-escalado para aplicaciones React + Tailwind CSS" })
|
|
372
372
|
] }),
|
|
373
|
-
/* @__PURE__ */
|
|
374
|
-
/* @__PURE__ */ e("h3", { className: "text-white font-semibold mb-
|
|
375
|
-
/* @__PURE__ */
|
|
376
|
-
/* @__PURE__ */
|
|
373
|
+
/* @__PURE__ */ s("div", { children: [
|
|
374
|
+
/* @__PURE__ */ e("h3", { className: "text-white font-semibold text-sm mb-3", children: "Estado del Sistema" }),
|
|
375
|
+
/* @__PURE__ */ s("div", { className: "space-y-1.5", children: [
|
|
376
|
+
/* @__PURE__ */ s("div", { className: "flex items-center justify-between text-xs", children: [
|
|
377
377
|
/* @__PURE__ */ e("span", { className: "text-gray-400", children: "Breakpoint:" }),
|
|
378
|
-
/* @__PURE__ */ e("span", { className: "text-cyan-400 font-medium", children:
|
|
378
|
+
/* @__PURE__ */ e("span", { className: "text-cyan-400 font-medium", children: n.toUpperCase() })
|
|
379
379
|
] }),
|
|
380
|
-
/* @__PURE__ */
|
|
380
|
+
/* @__PURE__ */ s("div", { className: "flex items-center justify-between text-xs", children: [
|
|
381
381
|
/* @__PURE__ */ e("span", { className: "text-gray-400", children: "Layout:" }),
|
|
382
382
|
/* @__PURE__ */ e("span", { className: "text-cyan-400 font-medium", children: t.config.name })
|
|
383
383
|
] }),
|
|
384
|
-
/* @__PURE__ */
|
|
384
|
+
/* @__PURE__ */ s("div", { className: "flex items-center justify-between text-xs", children: [
|
|
385
385
|
/* @__PURE__ */ e("span", { className: "text-gray-400", children: "Resolución:" }),
|
|
386
|
-
/* @__PURE__ */
|
|
386
|
+
/* @__PURE__ */ s("span", { className: "text-cyan-400 font-medium", children: [
|
|
387
387
|
i,
|
|
388
388
|
" × ",
|
|
389
389
|
l
|
|
@@ -391,25 +391,25 @@ const ue = () => {
|
|
|
391
391
|
] })
|
|
392
392
|
] })
|
|
393
393
|
] }),
|
|
394
|
-
/* @__PURE__ */
|
|
395
|
-
/* @__PURE__ */ e("h3", { className: "text-white font-semibold mb-
|
|
396
|
-
/* @__PURE__ */
|
|
397
|
-
/* @__PURE__ */
|
|
398
|
-
/* @__PURE__ */ e("div", { className: "w-
|
|
399
|
-
/* @__PURE__ */
|
|
400
|
-
/* @__PURE__ */ e("p", { className: "text-white font-medium text-
|
|
394
|
+
/* @__PURE__ */ s("div", { children: [
|
|
395
|
+
/* @__PURE__ */ e("h3", { className: "text-white font-semibold text-sm mb-3", children: "Desarrollador" }),
|
|
396
|
+
/* @__PURE__ */ s("div", { className: "space-y-2", children: [
|
|
397
|
+
/* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
|
|
398
|
+
/* @__PURE__ */ e("div", { className: "w-6 h-6 bg-gray-700 rounded-full flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ e("svg", { className: "w-3 h-3 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" }) }) }),
|
|
399
|
+
/* @__PURE__ */ s("div", { children: [
|
|
400
|
+
/* @__PURE__ */ e("p", { className: "text-white font-medium text-xs", children: "Felipe Caroca" }),
|
|
401
401
|
/* @__PURE__ */ e("p", { className: "text-gray-400 text-xs", children: "Frontend Developer" })
|
|
402
402
|
] })
|
|
403
403
|
] }),
|
|
404
|
-
/* @__PURE__ */
|
|
404
|
+
/* @__PURE__ */ s(
|
|
405
405
|
"a",
|
|
406
406
|
{
|
|
407
407
|
href: "https://github.com/FelipeCaroca1",
|
|
408
408
|
target: "_blank",
|
|
409
409
|
rel: "noopener noreferrer",
|
|
410
|
-
className: "flex items-center space-x-
|
|
410
|
+
className: "flex items-center space-x-1.5 text-gray-400 hover:text-cyan-400 transition-colors text-xs group",
|
|
411
411
|
children: [
|
|
412
|
-
/* @__PURE__ */ e("svg", { className: "w-
|
|
412
|
+
/* @__PURE__ */ e("svg", { className: "w-3 h-3 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" }) }),
|
|
413
413
|
/* @__PURE__ */ e("span", { children: "Ver en GitHub" })
|
|
414
414
|
]
|
|
415
415
|
}
|
|
@@ -417,29 +417,29 @@ const ue = () => {
|
|
|
417
417
|
] })
|
|
418
418
|
] })
|
|
419
419
|
] }),
|
|
420
|
-
/* @__PURE__ */
|
|
421
|
-
/* @__PURE__ */ e("p", { className: "text-gray-500 text-
|
|
422
|
-
/* @__PURE__ */
|
|
420
|
+
/* @__PURE__ */ s("div", { className: "border-t border-gray-800 mt-6 pt-4 flex flex-col items-center text-center", children: [
|
|
421
|
+
/* @__PURE__ */ e("p", { className: "text-gray-500 text-xs mb-2", children: "© 2025 Responsive System. Todos los derechos reservados." }),
|
|
422
|
+
/* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
|
|
423
423
|
/* @__PURE__ */ e("span", { className: "text-gray-500 text-xs", children: "Auto-escalado activo" }),
|
|
424
|
-
/* @__PURE__ */ e("div", { className: "w-
|
|
424
|
+
/* @__PURE__ */ e("div", { className: "w-1.5 h-1.5 bg-cyan-400 rounded-full animate-pulse" })
|
|
425
425
|
] })
|
|
426
426
|
] })
|
|
427
427
|
] }) });
|
|
428
428
|
}, pe = () => {
|
|
429
|
-
const { isMobile: t, breakpoint:
|
|
429
|
+
const { isMobile: t, breakpoint: n } = b(), { currentPage: i, setCurrentPage: l } = U(), [r, o] = w(!1), a = [
|
|
430
430
|
{ id: "demo", name: "Demo" },
|
|
431
431
|
{ id: "test", name: "Suite de Test" }
|
|
432
432
|
];
|
|
433
|
-
return /* @__PURE__ */ e("div", { className: "sticky top-0 z-50", children: /* @__PURE__ */
|
|
434
|
-
/* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e("div", { className: "px-4 py-4", children: /* @__PURE__ */
|
|
435
|
-
/* @__PURE__ */
|
|
436
|
-
/* @__PURE__ */
|
|
433
|
+
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: [
|
|
434
|
+
/* @__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: [
|
|
435
|
+
/* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
|
|
436
|
+
/* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
|
|
437
437
|
/* @__PURE__ */ e("div", { className: "w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse" }),
|
|
438
438
|
/* @__PURE__ */ e("h3", { className: "text-base font-black text-white tracking-tight", children: "Sistema Responsivo" })
|
|
439
439
|
] }),
|
|
440
|
-
/* @__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:
|
|
440
|
+
/* @__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() })
|
|
441
441
|
] }),
|
|
442
|
-
/* @__PURE__ */
|
|
442
|
+
/* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
|
|
443
443
|
!t && a.map((c) => /* @__PURE__ */ e(
|
|
444
444
|
"button",
|
|
445
445
|
{
|
|
@@ -472,22 +472,22 @@ const ue = () => {
|
|
|
472
472
|
)) }) }) })
|
|
473
473
|
] }) });
|
|
474
474
|
}, P = ({ children: t }) => {
|
|
475
|
-
const { layoutUtils:
|
|
476
|
-
return /* @__PURE__ */
|
|
475
|
+
const { layoutUtils: n } = b();
|
|
476
|
+
return /* @__PURE__ */ s("div", { className: "min-h-screen bg-black flex flex-col", children: [
|
|
477
477
|
/* @__PURE__ */ e(pe, {}),
|
|
478
|
-
/* @__PURE__ */ e("main", { className: "flex-1", children: /* @__PURE__ */ e("div", { className:
|
|
478
|
+
/* @__PURE__ */ e("main", { className: "flex-1", children: /* @__PURE__ */ e("div", { className: n.getContainerClass(), children: t }) }),
|
|
479
479
|
/* @__PURE__ */ e(E, {})
|
|
480
480
|
] });
|
|
481
481
|
}, ge = ({ children: t }) => {
|
|
482
|
-
const { layoutUtils:
|
|
483
|
-
return /* @__PURE__ */
|
|
482
|
+
const { layoutUtils: n } = b();
|
|
483
|
+
return /* @__PURE__ */ s("div", { className: "min-h-screen bg-black flex", children: [
|
|
484
484
|
/* @__PURE__ */ e(H, {}),
|
|
485
|
-
/* @__PURE__ */ e("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e("div", { className:
|
|
485
|
+
/* @__PURE__ */ e("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e("div", { className: n.getContainerClass(), children: t }) })
|
|
486
486
|
] });
|
|
487
487
|
}, ye = ({ children: t }) => /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(ge, { children: t }) }), fe = ({ children: t }) => {
|
|
488
|
-
const { layoutUtils:
|
|
489
|
-
return /* @__PURE__ */
|
|
490
|
-
/* @__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__ */
|
|
488
|
+
const { layoutUtils: n } = b(), { setSidebarOpen: i } = j();
|
|
489
|
+
return /* @__PURE__ */ s("div", { className: "min-h-screen bg-black flex flex-col", children: [
|
|
490
|
+
/* @__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: [
|
|
491
491
|
/* @__PURE__ */ e(
|
|
492
492
|
"button",
|
|
493
493
|
{
|
|
@@ -496,43 +496,43 @@ const ue = () => {
|
|
|
496
496
|
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" }) })
|
|
497
497
|
}
|
|
498
498
|
),
|
|
499
|
-
/* @__PURE__ */
|
|
499
|
+
/* @__PURE__ */ s("div", { className: "flex items-center space-x-2", children: [
|
|
500
500
|
/* @__PURE__ */ e("div", { className: "w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse" }),
|
|
501
501
|
/* @__PURE__ */ e("h3", { className: "text-base font-black text-white tracking-tight", children: "Sistema Responsivo" })
|
|
502
502
|
] }),
|
|
503
503
|
/* @__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" })
|
|
504
504
|
] }) }) }) }) }) }),
|
|
505
|
-
/* @__PURE__ */
|
|
505
|
+
/* @__PURE__ */ s("div", { className: "flex flex-1", children: [
|
|
506
506
|
/* @__PURE__ */ e(H, {}),
|
|
507
|
-
/* @__PURE__ */ e("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e("div", { className:
|
|
507
|
+
/* @__PURE__ */ e("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e("div", { className: n.getContainerClass(), children: t }) })
|
|
508
508
|
] }),
|
|
509
509
|
/* @__PURE__ */ e(E, {})
|
|
510
510
|
] });
|
|
511
511
|
}, ve = ({ children: t }) => /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(fe, { children: t }) }), Ne = ({ children: t }) => {
|
|
512
|
-
const { layoutUtils:
|
|
513
|
-
return /* @__PURE__ */ e("div", { className: "min-h-screen bg-black", children: /* @__PURE__ */ e("main", { className:
|
|
512
|
+
const { layoutUtils: n } = b();
|
|
513
|
+
return /* @__PURE__ */ e("div", { className: "min-h-screen bg-black", children: /* @__PURE__ */ e("main", { className: n.getContainerClass(), children: t }) });
|
|
514
514
|
}, Ue = ({ compact: t = !1 }) => {
|
|
515
|
-
const { current:
|
|
516
|
-
return t ? /* @__PURE__ */
|
|
515
|
+
const { current: n, setLayout: i, config: l } = he();
|
|
516
|
+
return t ? /* @__PURE__ */ s("div", { className: "bg-black/50 rounded-lg p-3 border border-gray-700", children: [
|
|
517
517
|
/* @__PURE__ */ e("div", { className: "text-xs text-gray-500 mb-2", children: "Layout:" }),
|
|
518
518
|
/* @__PURE__ */ e(
|
|
519
519
|
"select",
|
|
520
520
|
{
|
|
521
|
-
value:
|
|
521
|
+
value: n,
|
|
522
522
|
onChange: (r) => i(r.target.value),
|
|
523
523
|
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",
|
|
524
524
|
children: Object.entries(N).map(([r, o]) => /* @__PURE__ */ e("option", { value: r, children: o.name }, r))
|
|
525
525
|
}
|
|
526
526
|
)
|
|
527
|
-
] }) : /* @__PURE__ */
|
|
527
|
+
] }) : /* @__PURE__ */ s("div", { className: "bg-black/50 backdrop-blur-sm rounded-lg p-4 border border-cyan-500/30", children: [
|
|
528
528
|
/* @__PURE__ */ e("h3", { className: "text-white font-semibold mb-3", children: "Cambiar Layout" }),
|
|
529
|
-
/* @__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__ */
|
|
529
|
+
/* @__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(
|
|
530
530
|
"button",
|
|
531
531
|
{
|
|
532
532
|
onClick: () => i(r),
|
|
533
533
|
className: `
|
|
534
534
|
p-4 rounded-lg border transition-all text-left
|
|
535
|
-
${
|
|
535
|
+
${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"}
|
|
536
536
|
`,
|
|
537
537
|
children: [
|
|
538
538
|
/* @__PURE__ */ e("div", { className: "font-semibold mb-1", children: o.name }),
|
|
@@ -541,7 +541,7 @@ const ue = () => {
|
|
|
541
541
|
},
|
|
542
542
|
r
|
|
543
543
|
)) }),
|
|
544
|
-
/* @__PURE__ */
|
|
544
|
+
/* @__PURE__ */ s("div", { className: "mt-4 p-3 bg-gray-900/50 rounded-lg", children: [
|
|
545
545
|
/* @__PURE__ */ e("div", { className: "text-xs text-gray-500 mb-1", children: "Layout Actual:" }),
|
|
546
546
|
/* @__PURE__ */ e("div", { className: "text-sm text-cyan-400 font-medium", children: l.name }),
|
|
547
547
|
/* @__PURE__ */ e("div", { className: "text-xs text-gray-400", children: l.description })
|
|
@@ -572,7 +572,7 @@ export {
|
|
|
572
572
|
ce as getCurrentBreakpoint,
|
|
573
573
|
he as useLayout,
|
|
574
574
|
U as useNavigation,
|
|
575
|
-
|
|
575
|
+
me as useResponsive,
|
|
576
576
|
b as useResponsiveLayout,
|
|
577
577
|
be as useResponsiveLayoutContext,
|
|
578
578
|
j as useSidebar
|