responsive-system 1.2.5 → 1.2.7
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,5 +1,5 @@
|
|
|
1
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
|
|
2
|
+
import { useState as w, useCallback as m, useMemo as D, useEffect as oe, createContext as R, useContext as M } from "react";
|
|
3
3
|
const le = ({
|
|
4
4
|
children: t,
|
|
5
5
|
debug: n = !1
|
|
@@ -42,10 +42,10 @@ const me = () => {
|
|
|
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(() => 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,
|
|
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
46
|
const O = x(a);
|
|
47
47
|
return O >= x(u) && O <= x(v);
|
|
48
|
-
}, [a]), te = m((u) => r >= u, [r]), ae = m((u) => r <= u, [r]),
|
|
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]);
|
|
49
49
|
return {
|
|
50
50
|
// Estado básico
|
|
51
51
|
breakpoint: a,
|
|
@@ -67,12 +67,12 @@ const me = () => {
|
|
|
67
67
|
isTablet: I,
|
|
68
68
|
isDesktop: X,
|
|
69
69
|
isSmall: _,
|
|
70
|
-
isLarge:
|
|
71
|
-
isUltraWide:
|
|
70
|
+
isLarge: K,
|
|
71
|
+
isUltraWide: V,
|
|
72
72
|
is4K: Y,
|
|
73
|
-
is5K:
|
|
73
|
+
is5K: q,
|
|
74
74
|
// Helpers de orientación
|
|
75
|
-
isPortrait:
|
|
75
|
+
isPortrait: G,
|
|
76
76
|
isLandscape: J,
|
|
77
77
|
// Funciones de comparación
|
|
78
78
|
isBreakpointUp: Q,
|
|
@@ -80,36 +80,36 @@ const me = () => {
|
|
|
80
80
|
isBreakpointBetween: ee,
|
|
81
81
|
isWidthUp: te,
|
|
82
82
|
isWidthDown: ae,
|
|
83
|
-
isWidthBetween:
|
|
84
|
-
isHeightUp:
|
|
83
|
+
isWidthBetween: ne,
|
|
84
|
+
isHeightUp: se,
|
|
85
85
|
isHeightDown: re,
|
|
86
86
|
isHeightBetween: ie,
|
|
87
87
|
// Debug
|
|
88
88
|
debug: !1
|
|
89
89
|
};
|
|
90
|
-
}, T =
|
|
91
|
-
const t =
|
|
90
|
+
}, T = R(void 0), be = () => {
|
|
91
|
+
const t = M(T);
|
|
92
92
|
if (!t)
|
|
93
93
|
throw new Error("useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider");
|
|
94
94
|
return t;
|
|
95
|
-
}, $ =
|
|
95
|
+
}, $ = R(void 0), A = ({ children: t }) => {
|
|
96
96
|
const [n, i] = w(!1);
|
|
97
97
|
return /* @__PURE__ */ e($.Provider, { value: { sidebarOpen: n, setSidebarOpen: i }, children: t });
|
|
98
|
-
},
|
|
99
|
-
const t =
|
|
98
|
+
}, U = () => {
|
|
99
|
+
const t = M($);
|
|
100
100
|
if (!t)
|
|
101
101
|
throw new Error("useSidebar must be used within a SidebarProvider");
|
|
102
102
|
return t;
|
|
103
|
-
},
|
|
103
|
+
}, E = R({
|
|
104
104
|
currentPage: "test",
|
|
105
105
|
setCurrentPage: () => {
|
|
106
106
|
}
|
|
107
|
-
}),
|
|
107
|
+
}), j = () => M(E), Se = ({
|
|
108
108
|
children: t,
|
|
109
109
|
defaultPage: n = "test"
|
|
110
110
|
}) => {
|
|
111
111
|
const [i, l] = w(n);
|
|
112
|
-
return /* @__PURE__ */ e(
|
|
112
|
+
return /* @__PURE__ */ e(E.Provider, { value: { currentPage: i, setCurrentPage: l }, children: t });
|
|
113
113
|
}, b = () => {
|
|
114
114
|
const t = be();
|
|
115
115
|
return {
|
|
@@ -236,7 +236,7 @@ const me = () => {
|
|
|
236
236
|
}
|
|
237
237
|
};
|
|
238
238
|
return /* @__PURE__ */ e(T.Provider, { value: y, children: t });
|
|
239
|
-
},
|
|
239
|
+
}, Re = ({
|
|
240
240
|
children: t,
|
|
241
241
|
defaultLayout: n = F,
|
|
242
242
|
useResponsiveHook: i
|
|
@@ -247,7 +247,7 @@ const me = () => {
|
|
|
247
247
|
useResponsiveHook: i,
|
|
248
248
|
children: t
|
|
249
249
|
}
|
|
250
|
-
) }),
|
|
250
|
+
) }), Me = ({ children: t, layout: n }) => {
|
|
251
251
|
const { layout: i } = b(), l = n || i.current, o = {
|
|
252
252
|
default: P,
|
|
253
253
|
sidebar: ye,
|
|
@@ -255,8 +255,8 @@ const me = () => {
|
|
|
255
255
|
minimal: Ne
|
|
256
256
|
}[l] || P;
|
|
257
257
|
return /* @__PURE__ */ e(o, { children: t });
|
|
258
|
-
},
|
|
259
|
-
const { isMobile: t } = b(), { currentPage: n, setCurrentPage: i } =
|
|
258
|
+
}, Ue = () => {
|
|
259
|
+
const { isMobile: t } = b(), { currentPage: n, setCurrentPage: i } = j(), { sidebarOpen: l, setSidebarOpen: r } = U(), o = [
|
|
260
260
|
{ id: "test", label: "Suite de Test" },
|
|
261
261
|
{ id: "demo", label: "Demo" }
|
|
262
262
|
];
|
|
@@ -306,7 +306,7 @@ const me = () => {
|
|
|
306
306
|
] }) }) })
|
|
307
307
|
] });
|
|
308
308
|
}, H = () => {
|
|
309
|
-
const { isMobile: t, isTablet: n, breakpoint: i } = b(), { currentPage: l, setCurrentPage: r } =
|
|
309
|
+
const { isMobile: t, isTablet: n, breakpoint: i } = b(), { currentPage: l, setCurrentPage: r } = j(), { sidebarOpen: o, setSidebarOpen: a } = U(), c = [
|
|
310
310
|
{ id: "test", label: "Suite de Test" },
|
|
311
311
|
{ id: "demo", label: "Demo" }
|
|
312
312
|
];
|
|
@@ -359,20 +359,20 @@ const me = () => {
|
|
|
359
359
|
)) })
|
|
360
360
|
] }) }) })
|
|
361
361
|
] });
|
|
362
|
-
},
|
|
362
|
+
}, z = () => {
|
|
363
363
|
const { layout: t, breakpoint: n, width: i, height: l } = b();
|
|
364
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-
|
|
365
|
+
/* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [
|
|
366
366
|
/* @__PURE__ */ s("div", { children: [
|
|
367
|
-
/* @__PURE__ */ s("div", { className: "flex items-center space-x-2 mb-
|
|
368
|
-
/* @__PURE__ */ e("div", { className: "w-
|
|
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
369
|
/* @__PURE__ */ e("span", { className: "text-white font-semibold text-sm", children: "Responsive System" })
|
|
370
370
|
] }),
|
|
371
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
373
|
/* @__PURE__ */ s("div", { children: [
|
|
374
|
-
/* @__PURE__ */ e("h3", { className: "text-white font-semibold text-sm mb-
|
|
375
|
-
/* @__PURE__ */ s("div", { className: "space-y-1
|
|
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
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
378
|
/* @__PURE__ */ e("span", { className: "text-cyan-400 font-medium", children: n.toUpperCase() })
|
|
@@ -392,41 +392,17 @@ const me = () => {
|
|
|
392
392
|
] })
|
|
393
393
|
] }),
|
|
394
394
|
/* @__PURE__ */ s("div", { children: [
|
|
395
|
-
/* @__PURE__ */ e("h3", { className: "text-white font-semibold text-sm mb-
|
|
396
|
-
/* @__PURE__ */ s("div", { className: "space-y-
|
|
397
|
-
/* @__PURE__ */
|
|
398
|
-
|
|
399
|
-
/* @__PURE__ */ s("div", { children: [
|
|
400
|
-
/* @__PURE__ */ e("p", { className: "text-white font-medium text-xs", children: "Felipe Caroca" }),
|
|
401
|
-
/* @__PURE__ */ e("p", { className: "text-gray-400 text-xs", children: "Frontend Developer" })
|
|
402
|
-
] })
|
|
403
|
-
] }),
|
|
404
|
-
/* @__PURE__ */ s(
|
|
405
|
-
"a",
|
|
406
|
-
{
|
|
407
|
-
href: "https://github.com/FelipeCaroca1",
|
|
408
|
-
target: "_blank",
|
|
409
|
-
rel: "noopener noreferrer",
|
|
410
|
-
className: "flex items-center space-x-1.5 text-gray-400 hover:text-cyan-400 transition-colors text-xs group",
|
|
411
|
-
children: [
|
|
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
|
-
/* @__PURE__ */ e("span", { children: "Ver en GitHub" })
|
|
414
|
-
]
|
|
415
|
-
}
|
|
416
|
-
)
|
|
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" })
|
|
417
399
|
] })
|
|
418
400
|
] })
|
|
419
401
|
] }),
|
|
420
|
-
/* @__PURE__ */
|
|
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
|
-
/* @__PURE__ */ e("span", { className: "text-gray-500 text-xs", children: "Auto-escalado activo" }),
|
|
424
|
-
/* @__PURE__ */ e("div", { className: "w-1.5 h-1.5 bg-cyan-400 rounded-full animate-pulse" })
|
|
425
|
-
] })
|
|
426
|
-
] })
|
|
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." }) })
|
|
427
403
|
] }) });
|
|
428
404
|
}, pe = () => {
|
|
429
|
-
const { isMobile: t, breakpoint: n } = b(), { currentPage: i, setCurrentPage: l } =
|
|
405
|
+
const { isMobile: t, breakpoint: n } = b(), { currentPage: i, setCurrentPage: l } = j(), [r, o] = w(!1), a = [
|
|
430
406
|
{ id: "demo", name: "Demo" },
|
|
431
407
|
{ id: "test", name: "Suite de Test" }
|
|
432
408
|
];
|
|
@@ -476,7 +452,7 @@ const me = () => {
|
|
|
476
452
|
return /* @__PURE__ */ s("div", { className: "min-h-screen bg-black flex flex-col", children: [
|
|
477
453
|
/* @__PURE__ */ e(pe, {}),
|
|
478
454
|
/* @__PURE__ */ e("main", { className: "flex-1", children: /* @__PURE__ */ e("div", { className: n.getContainerClass(), children: t }) }),
|
|
479
|
-
/* @__PURE__ */ e(
|
|
455
|
+
/* @__PURE__ */ e(z, {})
|
|
480
456
|
] });
|
|
481
457
|
}, ge = ({ children: t }) => {
|
|
482
458
|
const { layoutUtils: n } = b();
|
|
@@ -485,7 +461,7 @@ const me = () => {
|
|
|
485
461
|
/* @__PURE__ */ e("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e("div", { className: n.getContainerClass(), children: t }) })
|
|
486
462
|
] });
|
|
487
463
|
}, ye = ({ children: t }) => /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(ge, { children: t }) }), fe = ({ children: t }) => {
|
|
488
|
-
const { layoutUtils: n } = b(), { setSidebarOpen: i } =
|
|
464
|
+
const { layoutUtils: n } = b(), { setSidebarOpen: i } = U();
|
|
489
465
|
return /* @__PURE__ */ s("div", { className: "min-h-screen bg-black flex flex-col", children: [
|
|
490
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: [
|
|
491
467
|
/* @__PURE__ */ e(
|
|
@@ -506,12 +482,12 @@ const me = () => {
|
|
|
506
482
|
/* @__PURE__ */ e(H, {}),
|
|
507
483
|
/* @__PURE__ */ e("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e("div", { className: n.getContainerClass(), children: t }) })
|
|
508
484
|
] }),
|
|
509
|
-
/* @__PURE__ */ e(
|
|
485
|
+
/* @__PURE__ */ e(z, {})
|
|
510
486
|
] });
|
|
511
487
|
}, ve = ({ children: t }) => /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(fe, { children: t }) }), Ne = ({ children: t }) => {
|
|
512
488
|
const { layoutUtils: n } = b();
|
|
513
489
|
return /* @__PURE__ */ e("div", { className: "min-h-screen bg-black", children: /* @__PURE__ */ e("main", { className: n.getContainerClass(), children: t }) });
|
|
514
|
-
},
|
|
490
|
+
}, je = ({ compact: t = !1 }) => {
|
|
515
491
|
const { current: n, setLayout: i, config: l } = he();
|
|
516
492
|
return t ? /* @__PURE__ */ s("div", { className: "bg-black/50 rounded-lg p-3 border border-gray-700", children: [
|
|
517
493
|
/* @__PURE__ */ e("div", { className: "text-xs text-gray-500 mb-2", children: "Layout:" }),
|
|
@@ -554,15 +530,15 @@ export {
|
|
|
554
530
|
F as DEFAULT_LAYOUT,
|
|
555
531
|
ve as DashboardLayout,
|
|
556
532
|
P as DefaultLayout,
|
|
557
|
-
|
|
558
|
-
|
|
533
|
+
z as Footer,
|
|
534
|
+
Ue as Header,
|
|
559
535
|
N as LAYOUT_CONFIG,
|
|
560
|
-
|
|
561
|
-
|
|
536
|
+
je as LayoutSwitcher,
|
|
537
|
+
Me as MainLayout,
|
|
562
538
|
Ne as MinimalLayout,
|
|
563
539
|
pe as Navigation,
|
|
564
540
|
Se as NavigationProvider,
|
|
565
|
-
|
|
541
|
+
Re as ResponsiveLayoutProvider,
|
|
566
542
|
le as ResponsiveProvider,
|
|
567
543
|
H as Sidebar,
|
|
568
544
|
ye as SidebarLayout,
|
|
@@ -571,10 +547,10 @@ export {
|
|
|
571
547
|
Ce as getBreakpointValue,
|
|
572
548
|
ce as getCurrentBreakpoint,
|
|
573
549
|
he as useLayout,
|
|
574
|
-
|
|
550
|
+
j as useNavigation,
|
|
575
551
|
me as useResponsive,
|
|
576
552
|
b as useResponsiveLayout,
|
|
577
553
|
be as useResponsiveLayoutContext,
|
|
578
|
-
|
|
554
|
+
U as useSidebar
|
|
579
555
|
};
|
|
580
556
|
//# sourceMappingURL=responsive-system.mjs.map
|