@axzydev/axzy_ui_system 1.2.6 → 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.
- package/dist/index.cjs +246 -182
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +7 -1
- package/dist/index.d.ts +7 -1
- package/dist/index.js +246 -182
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/grid/grid.tsx +7 -2
- package/src/components/layout/layout.tsx +14 -17
- package/src/components/navbar/navbar.tsx +51 -46
- package/src/components/page/page.props.ts +4 -0
- package/src/components/page/page.tsx +17 -7
- package/src/components/page-header/page-header.props.ts +2 -0
- package/src/components/page-header/page-header.stories.tsx +14 -0
- package/src/components/page-header/page-header.tsx +35 -15
- package/src/index.css +15 -0
- package/src/showcases/PageShowcases.tsx +465 -45
- package/src/showcases/StructureShowcases.tsx +205 -36
package/dist/index.cjs
CHANGED
|
@@ -6331,6 +6331,10 @@ function breakpointSpan(span, bp, cols) {
|
|
|
6331
6331
|
const clamped = Math.min(Math.max(Math.round(span), 1), cols);
|
|
6332
6332
|
return `${bp}:col-span-${clamped}`;
|
|
6333
6333
|
}
|
|
6334
|
+
function gridColsClass(cols) {
|
|
6335
|
+
const clamped = Math.min(Math.max(cols, 1), 12);
|
|
6336
|
+
return `grid-cols-${clamped}`;
|
|
6337
|
+
}
|
|
6334
6338
|
function ITGrid({
|
|
6335
6339
|
children,
|
|
6336
6340
|
container,
|
|
@@ -6350,9 +6354,8 @@ function ITGrid({
|
|
|
6350
6354
|
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
6351
6355
|
Component,
|
|
6352
6356
|
{
|
|
6353
|
-
className: (0, import_clsx25.default)("grid", className),
|
|
6357
|
+
className: (0, import_clsx25.default)("grid", gridColsClass(columns), className),
|
|
6354
6358
|
style: {
|
|
6355
|
-
gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
|
|
6356
6359
|
gap: spacing > 0 ? `${spacing * 0.25}rem` : void 0,
|
|
6357
6360
|
...style
|
|
6358
6361
|
},
|
|
@@ -6365,6 +6368,7 @@ function ITGrid({
|
|
|
6365
6368
|
Component,
|
|
6366
6369
|
{
|
|
6367
6370
|
className: (0, import_clsx25.default)(
|
|
6371
|
+
"col-span-full",
|
|
6368
6372
|
colSpanClass(xs ?? sm, columns),
|
|
6369
6373
|
sm !== void 0 && breakpointSpan(sm, "sm", columns),
|
|
6370
6374
|
md !== void 0 && breakpointSpan(md, "md", columns),
|
|
@@ -6517,138 +6521,154 @@ function ITNavbar({
|
|
|
6517
6521
|
] })
|
|
6518
6522
|
] });
|
|
6519
6523
|
}
|
|
6520
|
-
|
|
6521
|
-
|
|
6522
|
-
|
|
6523
|
-
|
|
6524
|
-
|
|
6525
|
-
|
|
6526
|
-
|
|
6527
|
-
|
|
6528
|
-
|
|
6529
|
-
{
|
|
6530
|
-
|
|
6531
|
-
|
|
6532
|
-
|
|
6533
|
-
|
|
6534
|
-
|
|
6535
|
-
|
|
6536
|
-
|
|
6537
|
-
|
|
6538
|
-
|
|
6539
|
-
|
|
6540
|
-
|
|
6524
|
+
const sidebar = theme.sidebar;
|
|
6525
|
+
const topbar = theme.topbar;
|
|
6526
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex h-screen font-sans", style: { backgroundColor: theme.layout.backgroundColor }, children: [
|
|
6527
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
6528
|
+
"aside",
|
|
6529
|
+
{
|
|
6530
|
+
className: "w-72 shadow-xl flex flex-col transition-all duration-300 ease-in-out",
|
|
6531
|
+
style: { backgroundColor: sidebar.backgroundColor, borderRight: `1px solid ${sidebar.borderColor}` },
|
|
6532
|
+
children: [
|
|
6533
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "p-6 flex items-center gap-3", style: { borderBottom: `1px solid ${sidebar.borderColor}` }, children: [
|
|
6534
|
+
logo && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-8 w-auto object-contain transition-transform hover:scale-105", children: logo }),
|
|
6535
|
+
logoText && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", className: "text-lg font-bold tracking-wide", style: { color: sidebar.active.color }, children: logoText })
|
|
6536
|
+
] }),
|
|
6537
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("nav", { className: "flex-1 px-4 py-6 overflow-y-auto custom-scrollbar", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { className: "flex flex-col gap-1.5", children: navigationItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("li", { children: [
|
|
6538
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
6539
|
+
"div",
|
|
6540
|
+
{
|
|
6541
|
+
className: `group flex items-center justify-between px-4 py-3 rounded-xl cursor-pointer transition-all duration-200 border-l-4 ${item.isActive ? "shadow-sm" : "hover:shadow-sm"}`,
|
|
6542
|
+
onClick: () => handleItemClick(item),
|
|
6543
|
+
style: {
|
|
6544
|
+
backgroundColor: item.isActive ? sidebar.active.backgroundColor : "transparent",
|
|
6545
|
+
borderColor: item.isActive ? sidebar.active.iconColor : "transparent",
|
|
6546
|
+
color: item.isActive ? sidebar.active.color : sidebar.label.color
|
|
6547
|
+
},
|
|
6548
|
+
onMouseEnter: (e) => {
|
|
6549
|
+
if (!item.isActive) {
|
|
6550
|
+
e.currentTarget.style.backgroundColor = sidebar.hover.backgroundColor;
|
|
6551
|
+
e.currentTarget.style.color = sidebar.active.color;
|
|
6552
|
+
}
|
|
6553
|
+
},
|
|
6554
|
+
onMouseLeave: (e) => {
|
|
6555
|
+
if (!item.isActive) {
|
|
6556
|
+
e.currentTarget.style.backgroundColor = "transparent";
|
|
6557
|
+
e.currentTarget.style.color = sidebar.label.color;
|
|
6558
|
+
}
|
|
6559
|
+
},
|
|
6560
|
+
children: [
|
|
6561
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
6562
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-xl transition-colors", style: {
|
|
6563
|
+
color: item.isActive ? sidebar.active.iconColor : sidebar.icon.color
|
|
6564
|
+
}, children: item.icon }),
|
|
6565
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", className: `font-medium text-sm ${item.isActive ? "font-semibold" : ""}`, children: item.label })
|
|
6566
|
+
] }),
|
|
6567
|
+
item.subitems && item.subitems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "transition-transform", style: { color: sidebar.icon.color }, children: expandedItems.has(item.id) ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_fa15.FaChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_fa15.FaChevronRight, { className: "w-3 h-3" }) })
|
|
6568
|
+
]
|
|
6541
6569
|
}
|
|
6542
|
-
|
|
6543
|
-
|
|
6544
|
-
|
|
6545
|
-
|
|
6546
|
-
|
|
6570
|
+
),
|
|
6571
|
+
item.subitems && item.subitems.length > 0 && expandedItems.has(item.id) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { className: "mt-1 ml-4 pl-4 space-y-1", style: { borderLeft: `1px solid ${sidebar.borderColor}` }, children: item.subitems.map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
6572
|
+
"button",
|
|
6573
|
+
{
|
|
6574
|
+
onClick: subitem.action,
|
|
6575
|
+
className: "block w-full text-left px-4 py-2.5 rounded-lg text-sm transition-all duration-200",
|
|
6576
|
+
style: {
|
|
6577
|
+
color: subitem.isActive ? sidebar.active.color : sidebar.label.color,
|
|
6578
|
+
backgroundColor: subitem.isActive ? sidebar.active.backgroundColor : "transparent"
|
|
6579
|
+
},
|
|
6580
|
+
onMouseEnter: (e) => {
|
|
6581
|
+
if (!subitem.isActive) {
|
|
6582
|
+
e.currentTarget.style.backgroundColor = sidebar.hover.backgroundColor;
|
|
6583
|
+
}
|
|
6584
|
+
},
|
|
6585
|
+
onMouseLeave: (e) => {
|
|
6586
|
+
if (!subitem.isActive) {
|
|
6587
|
+
e.currentTarget.style.backgroundColor = "transparent";
|
|
6588
|
+
}
|
|
6589
|
+
},
|
|
6590
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", children: subitem.label })
|
|
6547
6591
|
}
|
|
6548
|
-
},
|
|
6549
|
-
|
|
6550
|
-
|
|
6551
|
-
|
|
6552
|
-
|
|
6553
|
-
|
|
6554
|
-
|
|
6555
|
-
|
|
6556
|
-
|
|
6557
|
-
|
|
6558
|
-
|
|
6559
|
-
|
|
6560
|
-
|
|
6561
|
-
|
|
6562
|
-
|
|
6563
|
-
|
|
6564
|
-
|
|
6565
|
-
|
|
6566
|
-
|
|
6567
|
-
|
|
6568
|
-
|
|
6569
|
-
|
|
6570
|
-
|
|
6571
|
-
|
|
6592
|
+
) }, subitem.id)) })
|
|
6593
|
+
] }, item.id)) }) }),
|
|
6594
|
+
userMenu && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "p-4", style: { borderTop: `1px solid ${sidebar.borderColor}` }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative", children: [
|
|
6595
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
6596
|
+
"button",
|
|
6597
|
+
{
|
|
6598
|
+
type: "button",
|
|
6599
|
+
className: "flex items-center gap-3 w-full p-3 rounded-xl transition-colors duration-200 group",
|
|
6600
|
+
style: { color: sidebar.label.color },
|
|
6601
|
+
onMouseEnter: (e) => {
|
|
6602
|
+
e.currentTarget.style.backgroundColor = sidebar.hover.backgroundColor;
|
|
6603
|
+
e.currentTarget.style.color = sidebar.active.color;
|
|
6604
|
+
},
|
|
6605
|
+
onMouseLeave: (e) => {
|
|
6606
|
+
e.currentTarget.style.backgroundColor = "transparent";
|
|
6607
|
+
e.currentTarget.style.color = sidebar.label.color;
|
|
6608
|
+
},
|
|
6609
|
+
onClick: toggleUserMenu,
|
|
6610
|
+
children: [
|
|
6611
|
+
userMenu.userImage ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
6612
|
+
"img",
|
|
6613
|
+
{
|
|
6614
|
+
className: "w-10 h-10 rounded-full border-2 transition-colors",
|
|
6615
|
+
src: userMenu.userImage,
|
|
6616
|
+
alt: "user photo",
|
|
6617
|
+
style: { borderColor: sidebar.borderColor }
|
|
6618
|
+
}
|
|
6619
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
6620
|
+
"div",
|
|
6621
|
+
{
|
|
6622
|
+
className: "w-10 h-10 rounded-full flex items-center justify-center transition-colors",
|
|
6623
|
+
style: { backgroundColor: sidebar.hover.backgroundColor, color: sidebar.icon.color },
|
|
6624
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_fa15.FaUserCircle, { className: "w-6 h-6" })
|
|
6625
|
+
}
|
|
6626
|
+
),
|
|
6627
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex-1 text-left overflow-hidden", children: [
|
|
6628
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "div", className: "font-medium text-sm truncate", style: { color: sidebar.active.color }, children: userMenu.userName }),
|
|
6629
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "div", className: "text-xs truncate", style: { color: sidebar.label.color }, children: userMenu.userEmail })
|
|
6630
|
+
] }),
|
|
6631
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_fa15.FaChevronRight, { className: "w-3 h-3", style: { color: sidebar.icon.color } })
|
|
6632
|
+
]
|
|
6572
6633
|
}
|
|
6573
|
-
|
|
6574
|
-
|
|
6575
|
-
|
|
6576
|
-
|
|
6634
|
+
),
|
|
6635
|
+
isUserMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
6636
|
+
"div",
|
|
6637
|
+
{
|
|
6638
|
+
ref: userMenuRef,
|
|
6639
|
+
className: "absolute bottom-full left-0 mb-3 w-full rounded-xl shadow-2xl overflow-hidden transform transition-all duration-200 origin-bottom",
|
|
6640
|
+
style: { backgroundColor: topbar.userMenu.dropdown.backgroundColor, border: `1px solid ${topbar.userMenu.dropdown.borderColor}` },
|
|
6641
|
+
children: [
|
|
6642
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "px-4 py-3", style: { backgroundColor: topbar.userMenu.backgroundColor, borderBottom: `1px solid ${topbar.userMenu.dropdown.borderColor}` }, children: [
|
|
6643
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", className: "block text-sm font-semibold", style: { color: topbar.userMenu.textColor }, children: userMenu.userName }),
|
|
6644
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", className: "block text-xs truncate", style: { color: topbar.userMenu.subtitleColor }, children: userMenu.userEmail })
|
|
6645
|
+
] }),
|
|
6646
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { className: "py-1", children: userMenu.menuItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
6647
|
+
"button",
|
|
6648
|
+
{
|
|
6649
|
+
onClick: () => {
|
|
6650
|
+
item.onClick();
|
|
6651
|
+
setIsUserMenuOpen(false);
|
|
6652
|
+
},
|
|
6653
|
+
className: "flex items-center w-full px-4 py-2.5 text-sm transition-colors",
|
|
6654
|
+
style: { color: topbar.userMenu.textColor },
|
|
6655
|
+
onMouseEnter: (e) => {
|
|
6656
|
+
e.currentTarget.style.backgroundColor = topbar.userMenu.dropdown.itemHoverBackground;
|
|
6657
|
+
},
|
|
6658
|
+
onMouseLeave: (e) => {
|
|
6659
|
+
e.currentTarget.style.backgroundColor = "transparent";
|
|
6660
|
+
},
|
|
6661
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", children: item.label })
|
|
6662
|
+
}
|
|
6663
|
+
) }, index)) })
|
|
6664
|
+
]
|
|
6577
6665
|
}
|
|
6578
|
-
|
|
6579
|
-
|
|
6580
|
-
|
|
6581
|
-
|
|
6582
|
-
|
|
6583
|
-
|
|
6584
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
6585
|
-
"button",
|
|
6586
|
-
{
|
|
6587
|
-
type: "button",
|
|
6588
|
-
className: "flex items-center gap-3 w-full p-3 rounded-xl transition-colors duration-200 group",
|
|
6589
|
-
style: { color: "var(--sidebar-label-color, #94a3b8)" },
|
|
6590
|
-
onMouseEnter: (e) => {
|
|
6591
|
-
e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, rgba(255,255,255,0.05))";
|
|
6592
|
-
e.currentTarget.style.color = "var(--sidebar-active-color, #ffffff)";
|
|
6593
|
-
},
|
|
6594
|
-
onMouseLeave: (e) => {
|
|
6595
|
-
e.currentTarget.style.backgroundColor = "transparent";
|
|
6596
|
-
e.currentTarget.style.color = "var(--sidebar-label-color, #94a3b8)";
|
|
6597
|
-
},
|
|
6598
|
-
onClick: toggleUserMenu,
|
|
6599
|
-
children: [
|
|
6600
|
-
userMenu.userImage ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
6601
|
-
"img",
|
|
6602
|
-
{
|
|
6603
|
-
className: "w-10 h-10 rounded-full border-2 transition-colors",
|
|
6604
|
-
src: userMenu.userImage,
|
|
6605
|
-
alt: "user photo",
|
|
6606
|
-
style: { borderColor: "var(--sidebar-border, #1e293b)" }
|
|
6607
|
-
}
|
|
6608
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-10 h-10 rounded-full flex items-center justify-center transition-colors", style: { backgroundColor: "var(--sidebar-hover-bg, rgba(255,255,255,0.1))", color: "var(--sidebar-icon-color, #64748b)" }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_fa15.FaUserCircle, { className: "w-6 h-6" }) }),
|
|
6609
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex-1 text-left overflow-hidden", children: [
|
|
6610
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "div", className: "font-medium text-sm truncate", style: { color: "var(--sidebar-active-color, #ffffff)" }, children: userMenu.userName }),
|
|
6611
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "div", className: "text-xs truncate", style: { color: "var(--sidebar-label-color, #94a3b8)" }, children: userMenu.userEmail })
|
|
6612
|
-
] }),
|
|
6613
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_fa15.FaChevronRight, { className: "w-3 h-3", style: { color: "var(--sidebar-icon-color, #64748b)" } })
|
|
6614
|
-
]
|
|
6615
|
-
}
|
|
6616
|
-
),
|
|
6617
|
-
isUserMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
6618
|
-
"div",
|
|
6619
|
-
{
|
|
6620
|
-
ref: userMenuRef,
|
|
6621
|
-
className: "absolute bottom-full left-0 mb-3 w-full rounded-xl shadow-2xl overflow-hidden transform transition-all duration-200 origin-bottom",
|
|
6622
|
-
style: { backgroundColor: "var(--topbar-user-dropdown-bg, #ffffff)", border: "1px solid var(--topbar-user-dropdown-border, #e2e8f0)" },
|
|
6623
|
-
children: [
|
|
6624
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "px-4 py-3", style: { backgroundColor: "var(--topbar-user-bg, #f8fafc)", borderBottom: "1px solid var(--topbar-user-dropdown-border, #e2e8f0)" }, children: [
|
|
6625
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", className: "block text-sm font-semibold", style: { color: "var(--topbar-user-text, #0f172a)" }, children: userMenu.userName }),
|
|
6626
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", className: "block text-xs truncate", style: { color: "var(--topbar-user-subtitle, #64748b)" }, children: userMenu.userEmail })
|
|
6627
|
-
] }),
|
|
6628
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { className: "py-1", children: userMenu.menuItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
6629
|
-
"button",
|
|
6630
|
-
{
|
|
6631
|
-
onClick: () => {
|
|
6632
|
-
item.onClick();
|
|
6633
|
-
setIsUserMenuOpen(false);
|
|
6634
|
-
},
|
|
6635
|
-
className: "flex items-center w-full px-4 py-2.5 text-sm transition-colors",
|
|
6636
|
-
style: { color: "var(--topbar-user-text, #334155)" },
|
|
6637
|
-
onMouseEnter: (e) => {
|
|
6638
|
-
e.currentTarget.style.backgroundColor = "var(--topbar-user-item-hover, #f8fafc)";
|
|
6639
|
-
},
|
|
6640
|
-
onMouseLeave: (e) => {
|
|
6641
|
-
e.currentTarget.style.backgroundColor = "transparent";
|
|
6642
|
-
},
|
|
6643
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", children: item.label })
|
|
6644
|
-
}
|
|
6645
|
-
) }, index)) })
|
|
6646
|
-
]
|
|
6647
|
-
}
|
|
6648
|
-
)
|
|
6649
|
-
] }) })
|
|
6650
|
-
] }),
|
|
6651
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("main", { className: "flex-1 overflow-y-auto relative", style: { backgroundColor: "var(--layout-bg, #f8fafc)" }, children })
|
|
6666
|
+
)
|
|
6667
|
+
] }) })
|
|
6668
|
+
]
|
|
6669
|
+
}
|
|
6670
|
+
),
|
|
6671
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("main", { className: "flex-1 overflow-y-auto relative", style: { backgroundColor: theme.layout.backgroundColor }, children })
|
|
6652
6672
|
] });
|
|
6653
6673
|
}
|
|
6654
6674
|
|
|
@@ -6664,31 +6684,57 @@ function ITPageHeader({
|
|
|
6664
6684
|
breadcrumbs,
|
|
6665
6685
|
actions,
|
|
6666
6686
|
backAction,
|
|
6687
|
+
icon,
|
|
6688
|
+
iconColor,
|
|
6667
6689
|
className
|
|
6668
6690
|
}) {
|
|
6669
6691
|
const showTopRow = breadcrumbs?.length || backAction;
|
|
6670
|
-
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className
|
|
6671
|
-
showTopRow && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between gap-4
|
|
6692
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: `${className} space-y-3`, children: [
|
|
6693
|
+
showTopRow && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
|
|
6672
6694
|
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
|
|
6673
6695
|
backAction && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
6674
6696
|
"button",
|
|
6675
6697
|
{
|
|
6676
6698
|
onClick: backAction,
|
|
6677
|
-
className: "
|
|
6699
|
+
className: "flex items-center justify-center w-9 h-9 rounded-full border border-slate-200 dark:border-slate-700 text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800/60 transition-all duration-200 flex-shrink-0",
|
|
6678
6700
|
"aria-label": "Volver",
|
|
6679
6701
|
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fa16.FaChevronLeft, { size: 14 })
|
|
6680
6702
|
}
|
|
6681
6703
|
),
|
|
6682
6704
|
breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ITBreadcrumbs, { items: breadcrumbs })
|
|
6683
6705
|
] }),
|
|
6684
|
-
actions && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center gap-
|
|
6706
|
+
actions && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center gap-3 flex-shrink-0", children: actions })
|
|
6685
6707
|
] }),
|
|
6686
|
-
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-start justify-between gap-
|
|
6687
|
-
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "min-w-0", children: [
|
|
6688
|
-
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
6689
|
-
|
|
6708
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-start justify-between gap-6", children: [
|
|
6709
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-start gap-4 min-w-0", children: [
|
|
6710
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
6711
|
+
"div",
|
|
6712
|
+
{
|
|
6713
|
+
className: "flex items-center justify-center w-12 h-12 rounded-full border border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-slate-600 dark:text-slate-300 flex-shrink-0 transition-all duration-200 hover:border-slate-300 dark:hover:border-slate-500 hover:shadow-sm",
|
|
6714
|
+
style: iconColor ? { color: iconColor } : void 0,
|
|
6715
|
+
children: icon
|
|
6716
|
+
}
|
|
6717
|
+
),
|
|
6718
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "min-w-0", children: [
|
|
6719
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
6720
|
+
ITText,
|
|
6721
|
+
{
|
|
6722
|
+
as: "h1",
|
|
6723
|
+
className: "text-3xl font-bold text-slate-800 dark:text-white tracking-tight leading-tight",
|
|
6724
|
+
children: title
|
|
6725
|
+
}
|
|
6726
|
+
),
|
|
6727
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
6728
|
+
ITText,
|
|
6729
|
+
{
|
|
6730
|
+
as: "p",
|
|
6731
|
+
className: "text-sm font-light text-slate-500 dark:text-slate-400 mt-1 leading-relaxed",
|
|
6732
|
+
children: description
|
|
6733
|
+
}
|
|
6734
|
+
)
|
|
6735
|
+
] })
|
|
6690
6736
|
] }),
|
|
6691
|
-
!showTopRow && actions && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center gap-
|
|
6737
|
+
!showTopRow && actions && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center gap-3 flex-shrink-0", children: actions })
|
|
6692
6738
|
] })
|
|
6693
6739
|
] });
|
|
6694
6740
|
}
|
|
@@ -6803,7 +6849,7 @@ function ITStack({
|
|
|
6803
6849
|
|
|
6804
6850
|
// src/components/page/page.tsx
|
|
6805
6851
|
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
6806
|
-
var hasHeader = (props) => !!(props.title || props.description || props.breadcrumbs || props.actions || props.backAction);
|
|
6852
|
+
var hasHeader = (props) => !!(props.title || props.description || props.breadcrumbs || props.actions || props.backAction || props.icon);
|
|
6807
6853
|
var renderHeader = (props) => {
|
|
6808
6854
|
if (!hasHeader(props)) return null;
|
|
6809
6855
|
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
@@ -6813,7 +6859,9 @@ var renderHeader = (props) => {
|
|
|
6813
6859
|
description: props.description,
|
|
6814
6860
|
breadcrumbs: props.breadcrumbs,
|
|
6815
6861
|
actions: props.actions,
|
|
6816
|
-
backAction: props.backAction
|
|
6862
|
+
backAction: props.backAction,
|
|
6863
|
+
icon: props.icon,
|
|
6864
|
+
iconColor: props.iconColor
|
|
6817
6865
|
}
|
|
6818
6866
|
);
|
|
6819
6867
|
};
|
|
@@ -6829,16 +6877,24 @@ function ITPage(props) {
|
|
|
6829
6877
|
emptyDescription,
|
|
6830
6878
|
emptyAction,
|
|
6831
6879
|
className,
|
|
6832
|
-
children
|
|
6880
|
+
children,
|
|
6881
|
+
maxWidth = "7xl",
|
|
6882
|
+
noPadding = false
|
|
6833
6883
|
} = props;
|
|
6834
|
-
const wrapperClass = (0, import_clsx28.default)(
|
|
6884
|
+
const wrapperClass = (0, import_clsx28.default)(
|
|
6885
|
+
"mx-auto w-full",
|
|
6886
|
+
!noPadding && "px-4 sm:px-6 lg:px-8 py-6",
|
|
6887
|
+
`max-w-${maxWidth}`,
|
|
6888
|
+
"space-y-8",
|
|
6889
|
+
className
|
|
6890
|
+
);
|
|
6835
6891
|
if (loading) {
|
|
6836
6892
|
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: wrapperClass, children: [
|
|
6837
6893
|
renderHeader(props),
|
|
6838
|
-
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(ITStack, { spacing:
|
|
6839
|
-
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ITSkeleton, { variant: "rectangular", height: 40, width: "40%" }),
|
|
6840
|
-
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ITSkeleton, { variant: "rectangular", height: 200 }),
|
|
6841
|
-
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ITSkeleton, { variant: "rectangular", height: 200 })
|
|
6894
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(ITStack, { spacing: 6, children: [
|
|
6895
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ITSkeleton, { variant: "rectangular", height: 40, width: "40%", className: "rounded-lg" }),
|
|
6896
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ITSkeleton, { variant: "rectangular", height: 200, className: "rounded-lg" }),
|
|
6897
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ITSkeleton, { variant: "rectangular", height: 200, className: "rounded-lg" })
|
|
6842
6898
|
] })
|
|
6843
6899
|
] });
|
|
6844
6900
|
}
|
|
@@ -8972,6 +9028,7 @@ function ITLayout({
|
|
|
8972
9028
|
}) {
|
|
8973
9029
|
const [desktopCollapsed, setDesktopCollapsed] = (0, import_react34.useState)(true);
|
|
8974
9030
|
const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react34.useState)(false);
|
|
9031
|
+
const layoutTokens = theme.layout;
|
|
8975
9032
|
return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: `flex flex-col h-screen overflow-hidden w-full ${className}`, children: [
|
|
8976
9033
|
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
8977
9034
|
ITTopBar,
|
|
@@ -8981,48 +9038,55 @@ function ITLayout({
|
|
|
8981
9038
|
onToggleMobileMenu: () => setMobileSidebarOpen((v) => !v)
|
|
8982
9039
|
}
|
|
8983
9040
|
),
|
|
8984
|
-
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
|
|
8985
|
-
|
|
8986
|
-
|
|
8987
|
-
|
|
8988
|
-
|
|
8989
|
-
|
|
8990
|
-
|
|
8991
|
-
|
|
8992
|
-
|
|
8993
|
-
|
|
8994
|
-
|
|
8995
|
-
|
|
8996
|
-
|
|
8997
|
-
|
|
8998
|
-
|
|
8999
|
-
|
|
9000
|
-
|
|
9001
|
-
|
|
9002
|
-
|
|
9003
|
-
|
|
9041
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
|
|
9042
|
+
"div",
|
|
9043
|
+
{
|
|
9044
|
+
className: "flex flex-1 overflow-hidden relative",
|
|
9045
|
+
style: { backgroundColor: layoutTokens.backgroundColor },
|
|
9046
|
+
children: [
|
|
9047
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "hidden lg:block relative z-40 h-full", children: [
|
|
9048
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "w-[88px] h-full flex-shrink-0" }),
|
|
9049
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
9050
|
+
ITSidebar,
|
|
9051
|
+
{
|
|
9052
|
+
...sidebar,
|
|
9053
|
+
isCollapsed: desktopCollapsed,
|
|
9054
|
+
onToggleCollapse: () => setDesktopCollapsed((v) => !v),
|
|
9055
|
+
visibleOnMobile: false,
|
|
9056
|
+
className: "h-full drop-shadow-2xl transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] flex-shrink-0"
|
|
9057
|
+
}
|
|
9058
|
+
) })
|
|
9059
|
+
] }),
|
|
9060
|
+
mobileSidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
9004
9061
|
"div",
|
|
9005
9062
|
{
|
|
9006
|
-
className: "
|
|
9007
|
-
onClick: (
|
|
9063
|
+
className: "lg:hidden fixed inset-0 z-50 transition-opacity duration-300 backdrop-blur-sm bg-black/40",
|
|
9064
|
+
onClick: () => setMobileSidebarOpen(false),
|
|
9008
9065
|
children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
9009
|
-
|
|
9066
|
+
"div",
|
|
9010
9067
|
{
|
|
9011
|
-
|
|
9012
|
-
|
|
9013
|
-
|
|
9014
|
-
|
|
9015
|
-
|
|
9016
|
-
|
|
9017
|
-
|
|
9068
|
+
className: "h-full w-fit flex transform transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]",
|
|
9069
|
+
onClick: (e) => e.stopPropagation(),
|
|
9070
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
9071
|
+
ITSidebar,
|
|
9072
|
+
{
|
|
9073
|
+
...sidebar,
|
|
9074
|
+
isCollapsed: false,
|
|
9075
|
+
visibleOnMobile: true,
|
|
9076
|
+
className: "h-full shadow-2xl relative z-[60]",
|
|
9077
|
+
onToggleCollapse: () => setMobileSidebarOpen(false),
|
|
9078
|
+
onItemClick: () => setMobileSidebarOpen(false),
|
|
9079
|
+
onSubItemClick: () => setMobileSidebarOpen(false)
|
|
9080
|
+
}
|
|
9081
|
+
)
|
|
9018
9082
|
}
|
|
9019
9083
|
)
|
|
9020
9084
|
}
|
|
9021
|
-
)
|
|
9022
|
-
|
|
9023
|
-
|
|
9024
|
-
|
|
9025
|
-
|
|
9085
|
+
),
|
|
9086
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: (0, import_clsx42.default)("mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-6 h-full", contentClassName), children }) })
|
|
9087
|
+
]
|
|
9088
|
+
}
|
|
9089
|
+
)
|
|
9026
9090
|
] });
|
|
9027
9091
|
}
|
|
9028
9092
|
|