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.
- package/dist/responsive-system.cjs +2 -6
- package/dist/responsive-system.cjs.map +1 -1
- package/dist/responsive-system.mjs +249 -360
- package/dist/responsive-system.mjs.map +1 -1
- package/package.json +1 -1
- package/scripts/postinstall.js +32 -73
- package/src/components/layout/Footer.tsx +5 -54
- package/src/components/layout/Navigation.tsx +18 -84
- package/src/components/layout/Sidebar.tsx +29 -58
- package/src/layouts/DashboardLayout.tsx +7 -44
- package/src/layouts/DefaultLayout.tsx +3 -8
- package/src/layouts/MinimalLayout.tsx +2 -5
- package/src/layouts/SidebarLayout.tsx +2 -7
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useState as
|
|
3
|
-
const
|
|
4
|
-
children:
|
|
5
|
-
debug:
|
|
6
|
-
}) => /* @__PURE__ */
|
|
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
|
-
},
|
|
17
|
-
function
|
|
18
|
-
let
|
|
19
|
-
return (...
|
|
20
|
-
|
|
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
|
|
24
|
-
return
|
|
23
|
+
function de(e, r) {
|
|
24
|
+
return e >= r ? "landscape" : "portrait";
|
|
25
25
|
}
|
|
26
|
-
const
|
|
27
|
-
const [
|
|
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
|
-
}),
|
|
31
|
-
|
|
30
|
+
}), o = d(() => {
|
|
31
|
+
r({
|
|
32
32
|
width: window.innerWidth,
|
|
33
33
|
height: window.innerHeight
|
|
34
34
|
});
|
|
35
|
-
}, []),
|
|
36
|
-
() =>
|
|
37
|
-
[
|
|
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",
|
|
42
|
-
window.removeEventListener("resize",
|
|
41
|
+
return window.addEventListener("resize", i), () => {
|
|
42
|
+
window.removeEventListener("resize", i);
|
|
43
43
|
};
|
|
44
|
-
}, [
|
|
45
|
-
const { width:
|
|
46
|
-
const
|
|
47
|
-
return
|
|
48
|
-
}, [
|
|
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:
|
|
52
|
-
width:
|
|
53
|
-
height:
|
|
54
|
-
orientation:
|
|
51
|
+
breakpoint: n,
|
|
52
|
+
width: s,
|
|
53
|
+
height: a,
|
|
54
|
+
orientation: g,
|
|
55
55
|
// Helpers booleanos específicos
|
|
56
|
-
isXs:
|
|
57
|
-
isSm:
|
|
58
|
-
isMd:
|
|
59
|
-
isLg:
|
|
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:
|
|
64
|
+
is5Xl: p,
|
|
65
65
|
// Helpers booleanos agrupados
|
|
66
66
|
isMobile: W,
|
|
67
|
-
isTablet:
|
|
68
|
-
isDesktop:
|
|
69
|
-
isSmall:
|
|
70
|
-
isLarge:
|
|
71
|
-
isUltraWide:
|
|
72
|
-
is4K:
|
|
73
|
-
is5K:
|
|
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:
|
|
76
|
-
isLandscape:
|
|
75
|
+
isPortrait: q,
|
|
76
|
+
isLandscape: G,
|
|
77
77
|
// Funciones de comparación
|
|
78
|
-
isBreakpointUp:
|
|
79
|
-
isBreakpointDown:
|
|
80
|
-
isBreakpointBetween:
|
|
81
|
-
isWidthUp:
|
|
82
|
-
isWidthDown:
|
|
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:
|
|
86
|
+
isHeightBetween: ae,
|
|
87
87
|
// Debug
|
|
88
88
|
debug: !1
|
|
89
89
|
};
|
|
90
|
-
},
|
|
91
|
-
const
|
|
92
|
-
if (!
|
|
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
|
|
95
|
-
},
|
|
96
|
-
const [
|
|
97
|
-
return /* @__PURE__ */
|
|
98
|
-
},
|
|
99
|
-
const
|
|
100
|
-
if (!
|
|
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
|
|
103
|
-
},
|
|
102
|
+
return e;
|
|
103
|
+
}, $ = M({
|
|
104
104
|
currentPage: "test",
|
|
105
105
|
setCurrentPage: () => {
|
|
106
106
|
}
|
|
107
|
-
}),
|
|
108
|
-
children:
|
|
109
|
-
defaultPage:
|
|
107
|
+
}), be = () => O($), Se = ({
|
|
108
|
+
children: e,
|
|
109
|
+
defaultPage: r = "test"
|
|
110
110
|
}) => {
|
|
111
|
-
const [
|
|
112
|
-
return /* @__PURE__ */
|
|
113
|
-
},
|
|
114
|
-
const
|
|
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
|
-
...
|
|
117
|
+
...e.responsive,
|
|
118
118
|
// Sistema de layout
|
|
119
119
|
layout: {
|
|
120
|
-
current:
|
|
121
|
-
config:
|
|
122
|
-
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:
|
|
125
|
+
layoutUtils: e.layoutUtils,
|
|
126
126
|
// Helpers específicos del layout
|
|
127
|
-
isDefaultLayout: () =>
|
|
128
|
-
isSidebarLayout: () =>
|
|
129
|
-
isDashboardLayout: () =>
|
|
130
|
-
isMinimalLayout: () =>
|
|
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: (
|
|
134
|
-
responsive: (
|
|
135
|
-
const
|
|
136
|
-
return Object.entries(
|
|
137
|
-
|
|
138
|
-
}),
|
|
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: (
|
|
140
|
+
fixed: (r) => `grid-cols-${r}`
|
|
141
141
|
},
|
|
142
142
|
// Spacing helpers que escalan automáticamente
|
|
143
143
|
spacing: {
|
|
144
|
-
container:
|
|
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
|
|
151
|
+
const e = N();
|
|
152
152
|
return {
|
|
153
153
|
// Layout actual
|
|
154
|
-
current:
|
|
155
|
-
config:
|
|
156
|
-
setLayout:
|
|
154
|
+
current: e.layout.current,
|
|
155
|
+
config: e.layout.config,
|
|
156
|
+
setLayout: e.layout.setLayout,
|
|
157
157
|
// Utilidades
|
|
158
|
-
...
|
|
158
|
+
...e.layoutUtils,
|
|
159
159
|
// Helpers específicos
|
|
160
|
-
isDefaultLayout:
|
|
161
|
-
isSidebarLayout:
|
|
162
|
-
isDashboardLayout:
|
|
163
|
-
isMinimalLayout:
|
|
160
|
+
isDefaultLayout: e.isDefaultLayout(),
|
|
161
|
+
isSidebarLayout: e.isSidebarLayout(),
|
|
162
|
+
isDashboardLayout: e.isDashboardLayout(),
|
|
163
|
+
isMinimalLayout: e.isMinimalLayout(),
|
|
164
164
|
// Grid helpers
|
|
165
|
-
grid:
|
|
165
|
+
grid: e.grid,
|
|
166
166
|
// Spacing helpers
|
|
167
|
-
spacing:
|
|
167
|
+
spacing: e.spacing
|
|
168
168
|
};
|
|
169
|
-
},
|
|
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
|
-
},
|
|
215
|
-
children:
|
|
216
|
-
defaultLayout:
|
|
217
|
-
useResponsiveHook:
|
|
214
|
+
}, E = "default", De = Object.keys(v), pe = ({
|
|
215
|
+
children: e,
|
|
216
|
+
defaultLayout: r,
|
|
217
|
+
useResponsiveHook: o
|
|
218
218
|
}) => {
|
|
219
|
-
const
|
|
220
|
-
responsive:
|
|
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:
|
|
223
|
-
config:
|
|
224
|
-
setLayout:
|
|
222
|
+
current: n,
|
|
223
|
+
config: m,
|
|
224
|
+
setLayout: g
|
|
225
225
|
},
|
|
226
226
|
layoutUtils: {
|
|
227
|
-
getContainerClass: () =>
|
|
227
|
+
getContainerClass: () => a.isMobile ? m.responsive.mobile : a.isTablet ? m.responsive.tablet : m.responsive.desktop,
|
|
228
228
|
getMainClass: () => {
|
|
229
|
-
const
|
|
230
|
-
return
|
|
229
|
+
const h = "min-h-screen bg-black";
|
|
230
|
+
return n === "sidebar" || n === "dashboard" ? `${h} flex` : h;
|
|
231
231
|
},
|
|
232
|
-
hasSidebar: () =>
|
|
233
|
-
hasHeader: () =>
|
|
234
|
-
hasFooter: () =>
|
|
235
|
-
hasNavigation: () =>
|
|
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__ */
|
|
239
|
-
},
|
|
240
|
-
children:
|
|
241
|
-
defaultLayout:
|
|
242
|
-
useResponsiveHook:
|
|
243
|
-
}) => /* @__PURE__ */
|
|
244
|
-
|
|
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:
|
|
247
|
-
useResponsiveHook:
|
|
248
|
-
children:
|
|
246
|
+
defaultLayout: r,
|
|
247
|
+
useResponsiveHook: o,
|
|
248
|
+
children: e
|
|
249
249
|
}
|
|
250
|
-
) }),
|
|
251
|
-
const { layout:
|
|
252
|
-
default:
|
|
253
|
-
sidebar:
|
|
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
|
-
}[
|
|
257
|
-
return /* @__PURE__ */
|
|
258
|
-
},
|
|
259
|
-
const { isMobile:
|
|
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__ */
|
|
264
|
-
/* @__PURE__ */
|
|
265
|
-
/* @__PURE__ */
|
|
266
|
-
|
|
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: () =>
|
|
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__ */
|
|
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__ */
|
|
275
|
-
/* @__PURE__ */
|
|
276
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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: () =>
|
|
284
|
-
className: `px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${
|
|
285
|
-
children:
|
|
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
|
-
|
|
287
|
+
n.id
|
|
288
288
|
)) })
|
|
289
289
|
] }) }) }) }),
|
|
290
|
-
|
|
291
|
-
/* @__PURE__ */
|
|
292
|
-
/* @__PURE__ */
|
|
293
|
-
/* @__PURE__ */
|
|
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__ */
|
|
295
|
+
/* @__PURE__ */ t("nav", { className: "space-y-2", children: a.map((n) => /* @__PURE__ */ t(
|
|
296
296
|
"button",
|
|
297
297
|
{
|
|
298
298
|
onClick: () => {
|
|
299
|
-
|
|
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 ${
|
|
302
|
-
children: /* @__PURE__ */
|
|
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
|
-
|
|
304
|
+
n.id
|
|
305
305
|
)) })
|
|
306
306
|
] }) }) })
|
|
307
307
|
] });
|
|
308
|
-
},
|
|
309
|
-
const { isMobile:
|
|
310
|
-
{ id: "
|
|
311
|
-
{ id: "
|
|
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__ */
|
|
314
|
-
|
|
314
|
+
return /* @__PURE__ */ l(A, { children: [
|
|
315
|
+
e && /* @__PURE__ */ t(
|
|
315
316
|
"button",
|
|
316
317
|
{
|
|
317
|
-
onClick: () =>
|
|
318
|
-
className: "fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-300 hover:text-
|
|
319
|
-
children: /* @__PURE__ */
|
|
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__ */
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
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__ */
|
|
328
|
+
/* @__PURE__ */ t("nav", { className: "space-y-2", children: s.map((a) => /* @__PURE__ */ t(
|
|
335
329
|
"button",
|
|
336
330
|
{
|
|
337
|
-
|
|
338
|
-
|
|
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
|
-
|
|
334
|
+
a.id
|
|
342
335
|
)) })
|
|
343
336
|
] }) }),
|
|
344
|
-
|
|
345
|
-
/* @__PURE__ */
|
|
346
|
-
/* @__PURE__ */
|
|
347
|
-
/* @__PURE__ */
|
|
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__ */
|
|
342
|
+
/* @__PURE__ */ t("nav", { className: "space-y-2", children: s.map((a) => /* @__PURE__ */ t(
|
|
350
343
|
"button",
|
|
351
344
|
{
|
|
352
|
-
onClick: () =>
|
|
353
|
-
|
|
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
|
-
|
|
349
|
+
a.id
|
|
359
350
|
)) })
|
|
360
351
|
] }) }) })
|
|
361
352
|
] });
|
|
362
|
-
},
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
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__ */
|
|
486
|
-
] });
|
|
487
|
-
},
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
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:
|
|
498
|
-
onChange: (
|
|
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(
|
|
389
|
+
children: Object.entries(v).map(([s, a]) => /* @__PURE__ */ t("option", { value: s, children: a.name }, s))
|
|
501
390
|
}
|
|
502
391
|
)
|
|
503
|
-
] }) : /* @__PURE__ */
|
|
504
|
-
/* @__PURE__ */
|
|
505
|
-
/* @__PURE__ */
|
|
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: () =>
|
|
397
|
+
onClick: () => o(s),
|
|
509
398
|
className: `
|
|
510
399
|
p-4 rounded-lg border transition-all text-left
|
|
511
|
-
${
|
|
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__ */
|
|
515
|
-
/* @__PURE__ */
|
|
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
|
-
|
|
407
|
+
s
|
|
519
408
|
)) }),
|
|
520
|
-
/* @__PURE__ */
|
|
521
|
-
/* @__PURE__ */
|
|
522
|
-
/* @__PURE__ */
|
|
523
|
-
/* @__PURE__ */
|
|
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
|
-
|
|
530
|
-
|
|
418
|
+
u as DEFAULT_BREAKPOINTS,
|
|
419
|
+
E as DEFAULT_LAYOUT,
|
|
531
420
|
ve as DashboardLayout,
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
421
|
+
j as DefaultLayout,
|
|
422
|
+
H as Footer,
|
|
423
|
+
Pe as Header,
|
|
424
|
+
v as LAYOUT_CONFIG,
|
|
536
425
|
je as LayoutSwitcher,
|
|
537
|
-
|
|
426
|
+
Oe as MainLayout,
|
|
538
427
|
Ne as MinimalLayout,
|
|
539
|
-
|
|
428
|
+
ge as Navigation,
|
|
540
429
|
Se as NavigationProvider,
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
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
|
-
|
|
437
|
+
le as getCurrentBreakpoint,
|
|
549
438
|
he as useLayout,
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
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
|