@almadar/ui 6.11.0 → 6.13.0
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/avl/index.cjs +204 -9
- package/dist/avl/index.js +204 -9
- package/dist/components/index.cjs +204 -9
- package/dist/components/index.js +204 -9
- package/dist/providers/index.cjs +204 -9
- package/dist/providers/index.js +204 -9
- package/dist/runtime/index.cjs +204 -9
- package/dist/runtime/index.js +204 -9
- package/package.json +4 -4
package/dist/providers/index.cjs
CHANGED
|
@@ -26493,6 +26493,18 @@ var init_useAuthContext = __esm({
|
|
|
26493
26493
|
"hooks/useAuthContext.ts"() {
|
|
26494
26494
|
}
|
|
26495
26495
|
});
|
|
26496
|
+
function resolveActiveNavHref(items, currentPath) {
|
|
26497
|
+
let best;
|
|
26498
|
+
for (const item of items) {
|
|
26499
|
+
for (const href of item.children?.length ? [item.href, ...item.children.map((c) => c.href)] : [item.href]) {
|
|
26500
|
+
if (currentPath === href) return href;
|
|
26501
|
+
if (currentPath.startsWith(href + "/") && (!best || href.length > best.length)) {
|
|
26502
|
+
best = href;
|
|
26503
|
+
}
|
|
26504
|
+
}
|
|
26505
|
+
}
|
|
26506
|
+
return best;
|
|
26507
|
+
}
|
|
26496
26508
|
var DashboardLayout, NavLink, NavLinkTopnav, NavLinkBottom;
|
|
26497
26509
|
var init_DashboardLayout = __esm({
|
|
26498
26510
|
"components/core/templates/DashboardLayout.tsx"() {
|
|
@@ -26564,6 +26576,7 @@ var init_DashboardLayout = __esm({
|
|
|
26564
26576
|
const location = reactRouterDom.useLocation();
|
|
26565
26577
|
const ctxPagePath = providers.useCurrentPagePath();
|
|
26566
26578
|
const activePath = (currentPath || void 0) ?? ctxPagePath ?? location.pathname;
|
|
26579
|
+
const activeHref = React89.useMemo(() => resolveActiveNavHref(navItems, activePath), [navItems, activePath]);
|
|
26567
26580
|
const { signOut: authSignOut } = useAuthContext();
|
|
26568
26581
|
const user = userProp || (null);
|
|
26569
26582
|
const { t } = hooks.useTranslate();
|
|
@@ -26656,7 +26669,7 @@ var init_DashboardLayout = __esm({
|
|
|
26656
26669
|
NavLink,
|
|
26657
26670
|
{
|
|
26658
26671
|
item,
|
|
26659
|
-
|
|
26672
|
+
activeHref,
|
|
26660
26673
|
compact: isRail
|
|
26661
26674
|
},
|
|
26662
26675
|
item.href
|
|
@@ -26723,7 +26736,7 @@ var init_DashboardLayout = __esm({
|
|
|
26723
26736
|
NavLinkTopnav,
|
|
26724
26737
|
{
|
|
26725
26738
|
item,
|
|
26726
|
-
|
|
26739
|
+
activeHref
|
|
26727
26740
|
},
|
|
26728
26741
|
item.href
|
|
26729
26742
|
))
|
|
@@ -26899,7 +26912,7 @@ var init_DashboardLayout = __esm({
|
|
|
26899
26912
|
NavLinkBottom,
|
|
26900
26913
|
{
|
|
26901
26914
|
item,
|
|
26902
|
-
|
|
26915
|
+
activeHref
|
|
26903
26916
|
},
|
|
26904
26917
|
item.href
|
|
26905
26918
|
)) })
|
|
@@ -26913,15 +26926,71 @@ var init_DashboardLayout = __esm({
|
|
|
26913
26926
|
DashboardLayout.displayName = "DashboardLayout";
|
|
26914
26927
|
NavLink = ({
|
|
26915
26928
|
item,
|
|
26916
|
-
|
|
26929
|
+
activeHref,
|
|
26917
26930
|
compact = false
|
|
26918
26931
|
}) => {
|
|
26919
|
-
const
|
|
26932
|
+
const hasChildren = !!item.children?.length;
|
|
26933
|
+
const childActive = hasChildren && item.children.some((child) => child.href === activeHref);
|
|
26934
|
+
const isActive = item.href === activeHref || childActive;
|
|
26935
|
+
const [open, setOpen] = React89.useState(childActive);
|
|
26920
26936
|
const iconClassName = cn(
|
|
26921
26937
|
"h-5 w-5",
|
|
26922
26938
|
isActive ? "text-primary-foreground" : "text-muted-foreground"
|
|
26923
26939
|
);
|
|
26924
26940
|
if (compact) {
|
|
26941
|
+
if (hasChildren) {
|
|
26942
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "relative", children: [
|
|
26943
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
26944
|
+
Button,
|
|
26945
|
+
{
|
|
26946
|
+
variant: "ghost",
|
|
26947
|
+
title: item.label,
|
|
26948
|
+
"aria-label": item.label,
|
|
26949
|
+
"aria-expanded": open,
|
|
26950
|
+
className: cn(
|
|
26951
|
+
"flex items-center justify-center w-full px-2 py-2 rounded-lg transition-colors",
|
|
26952
|
+
isActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
26953
|
+
),
|
|
26954
|
+
onClick: () => setOpen(!open),
|
|
26955
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { as: "span", className: "relative inline-flex", children: [
|
|
26956
|
+
item.icon ? typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, className: iconClassName }) : /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: iconClassName }) : /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "font-semibold", as: "span", children: item.label.charAt(0).toUpperCase() }),
|
|
26957
|
+
item.badge && /* @__PURE__ */ jsxRuntime.jsx(
|
|
26958
|
+
Badge,
|
|
26959
|
+
{
|
|
26960
|
+
variant: isActive ? "primary" : "default",
|
|
26961
|
+
size: "sm",
|
|
26962
|
+
className: "absolute -top-2 -right-2 px-1 py-0 text-[10px] leading-4",
|
|
26963
|
+
children: item.badge
|
|
26964
|
+
}
|
|
26965
|
+
)
|
|
26966
|
+
] })
|
|
26967
|
+
}
|
|
26968
|
+
),
|
|
26969
|
+
open && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
26970
|
+
/* @__PURE__ */ jsxRuntime.jsx(Box, { className: "fixed inset-0 z-20", onClick: () => setOpen(false) }),
|
|
26971
|
+
/* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute left-full top-0 ml-2 w-48 bg-card dark:bg-card rounded-lg shadow-lg border border-border dark:border-border py-1 z-30", children: item.children.map((child) => {
|
|
26972
|
+
const childIsActive = child.href === activeHref;
|
|
26973
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
26974
|
+
reactRouterDom.Link,
|
|
26975
|
+
{
|
|
26976
|
+
to: child.href,
|
|
26977
|
+
onClick: () => setOpen(false),
|
|
26978
|
+
className: cn(
|
|
26979
|
+
"flex items-center gap-2 px-3 py-2 text-sm transition-colors",
|
|
26980
|
+
childIsActive ? "bg-muted text-foreground font-medium" : "text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
26981
|
+
),
|
|
26982
|
+
children: [
|
|
26983
|
+
child.icon && (typeof child.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: child.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(child.icon, { className: "h-4 w-4" })),
|
|
26984
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "flex-1", as: "span", children: child.label }),
|
|
26985
|
+
child.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: childIsActive ? "primary" : "default", size: "sm", children: child.badge })
|
|
26986
|
+
]
|
|
26987
|
+
},
|
|
26988
|
+
child.href
|
|
26989
|
+
);
|
|
26990
|
+
}) })
|
|
26991
|
+
] })
|
|
26992
|
+
] });
|
|
26993
|
+
}
|
|
26925
26994
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
26926
26995
|
reactRouterDom.Link,
|
|
26927
26996
|
{
|
|
@@ -26947,6 +27016,78 @@ var init_DashboardLayout = __esm({
|
|
|
26947
27016
|
}
|
|
26948
27017
|
);
|
|
26949
27018
|
}
|
|
27019
|
+
if (hasChildren) {
|
|
27020
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
|
|
27021
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
27022
|
+
Button,
|
|
27023
|
+
{
|
|
27024
|
+
variant: "ghost",
|
|
27025
|
+
"aria-expanded": open,
|
|
27026
|
+
className: cn(
|
|
27027
|
+
"flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm font-medium transition-colors",
|
|
27028
|
+
isActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
27029
|
+
),
|
|
27030
|
+
onClick: () => setOpen(!open),
|
|
27031
|
+
children: [
|
|
27032
|
+
item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, className: iconClassName }) : /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: iconClassName })),
|
|
27033
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
27034
|
+
Typography,
|
|
27035
|
+
{
|
|
27036
|
+
variant: "small",
|
|
27037
|
+
color: isActive ? "inherit" : "primary",
|
|
27038
|
+
className: "flex-1 text-left",
|
|
27039
|
+
as: "span",
|
|
27040
|
+
children: item.label
|
|
27041
|
+
}
|
|
27042
|
+
),
|
|
27043
|
+
item.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: isActive ? "primary" : "default", size: "sm", children: item.badge }),
|
|
27044
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
27045
|
+
Icon,
|
|
27046
|
+
{
|
|
27047
|
+
name: "chevron-down",
|
|
27048
|
+
className: cn("h-4 w-4 shrink-0 transition-transform", open && "rotate-180")
|
|
27049
|
+
}
|
|
27050
|
+
)
|
|
27051
|
+
]
|
|
27052
|
+
}
|
|
27053
|
+
),
|
|
27054
|
+
open && /* @__PURE__ */ jsxRuntime.jsx(
|
|
27055
|
+
VStack,
|
|
27056
|
+
{
|
|
27057
|
+
gap: "none",
|
|
27058
|
+
className: "mt-1 ml-4 pl-4 border-l border-border dark:border-border space-y-1",
|
|
27059
|
+
children: item.children.map((child) => {
|
|
27060
|
+
const childIsActive = child.href === activeHref;
|
|
27061
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
27062
|
+
reactRouterDom.Link,
|
|
27063
|
+
{
|
|
27064
|
+
to: child.href,
|
|
27065
|
+
className: cn(
|
|
27066
|
+
"flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors",
|
|
27067
|
+
childIsActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
27068
|
+
),
|
|
27069
|
+
children: [
|
|
27070
|
+
child.icon && (typeof child.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: child.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(child.icon, { className: "h-4 w-4" })),
|
|
27071
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
27072
|
+
Typography,
|
|
27073
|
+
{
|
|
27074
|
+
variant: "small",
|
|
27075
|
+
color: childIsActive ? "inherit" : "primary",
|
|
27076
|
+
className: "flex-1",
|
|
27077
|
+
as: "span",
|
|
27078
|
+
children: child.label
|
|
27079
|
+
}
|
|
27080
|
+
),
|
|
27081
|
+
child.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: childIsActive ? "primary" : "default", size: "sm", children: child.badge })
|
|
27082
|
+
]
|
|
27083
|
+
},
|
|
27084
|
+
child.href
|
|
27085
|
+
);
|
|
27086
|
+
})
|
|
27087
|
+
}
|
|
27088
|
+
)
|
|
27089
|
+
] });
|
|
27090
|
+
}
|
|
26950
27091
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
26951
27092
|
reactRouterDom.Link,
|
|
26952
27093
|
{
|
|
@@ -26975,9 +27116,63 @@ var init_DashboardLayout = __esm({
|
|
|
26975
27116
|
NavLink.displayName = "NavLink";
|
|
26976
27117
|
NavLinkTopnav = ({
|
|
26977
27118
|
item,
|
|
26978
|
-
|
|
27119
|
+
activeHref
|
|
26979
27120
|
}) => {
|
|
26980
|
-
const
|
|
27121
|
+
const hasChildren = !!item.children?.length;
|
|
27122
|
+
const childActive = hasChildren && item.children.some((child) => child.href === activeHref);
|
|
27123
|
+
const isActive = item.href === activeHref || childActive;
|
|
27124
|
+
const [open, setOpen] = React89.useState(false);
|
|
27125
|
+
if (hasChildren) {
|
|
27126
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "relative", children: [
|
|
27127
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
27128
|
+
Button,
|
|
27129
|
+
{
|
|
27130
|
+
variant: "ghost",
|
|
27131
|
+
"aria-expanded": open,
|
|
27132
|
+
className: cn(
|
|
27133
|
+
"flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors whitespace-nowrap",
|
|
27134
|
+
isActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
27135
|
+
),
|
|
27136
|
+
onClick: () => setOpen(!open),
|
|
27137
|
+
children: [
|
|
27138
|
+
item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: "h-4 w-4" })),
|
|
27139
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "inherit", className: "flex-1", as: "span", children: item.label }),
|
|
27140
|
+
item.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: isActive ? "primary" : "default", size: "sm", children: item.badge }),
|
|
27141
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
27142
|
+
Icon,
|
|
27143
|
+
{
|
|
27144
|
+
name: "chevron-down",
|
|
27145
|
+
className: cn("h-3.5 w-3.5 shrink-0 transition-transform", open && "rotate-180")
|
|
27146
|
+
}
|
|
27147
|
+
)
|
|
27148
|
+
]
|
|
27149
|
+
}
|
|
27150
|
+
),
|
|
27151
|
+
open && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
27152
|
+
/* @__PURE__ */ jsxRuntime.jsx(Box, { className: "fixed inset-0 z-20", onClick: () => setOpen(false) }),
|
|
27153
|
+
/* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute left-0 top-full mt-1 w-48 bg-card dark:bg-card rounded-lg shadow-lg border border-border dark:border-border py-1 z-30", children: item.children.map((child) => {
|
|
27154
|
+
const childIsActive = child.href === activeHref;
|
|
27155
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
27156
|
+
reactRouterDom.Link,
|
|
27157
|
+
{
|
|
27158
|
+
to: child.href,
|
|
27159
|
+
onClick: () => setOpen(false),
|
|
27160
|
+
className: cn(
|
|
27161
|
+
"flex items-center gap-2 px-3 py-2 text-sm transition-colors",
|
|
27162
|
+
childIsActive ? "bg-muted text-foreground font-medium" : "text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
27163
|
+
),
|
|
27164
|
+
children: [
|
|
27165
|
+
child.icon && (typeof child.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: child.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(child.icon, { className: "h-4 w-4" })),
|
|
27166
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "flex-1", as: "span", children: child.label }),
|
|
27167
|
+
child.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: childIsActive ? "primary" : "default", size: "sm", children: child.badge })
|
|
27168
|
+
]
|
|
27169
|
+
},
|
|
27170
|
+
child.href
|
|
27171
|
+
);
|
|
27172
|
+
}) })
|
|
27173
|
+
] })
|
|
27174
|
+
] });
|
|
27175
|
+
}
|
|
26981
27176
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
26982
27177
|
reactRouterDom.Link,
|
|
26983
27178
|
{
|
|
@@ -26997,9 +27192,9 @@ var init_DashboardLayout = __esm({
|
|
|
26997
27192
|
NavLinkTopnav.displayName = "NavLinkTopnav";
|
|
26998
27193
|
NavLinkBottom = ({
|
|
26999
27194
|
item,
|
|
27000
|
-
|
|
27195
|
+
activeHref
|
|
27001
27196
|
}) => {
|
|
27002
|
-
const isActive =
|
|
27197
|
+
const isActive = item.href === activeHref;
|
|
27003
27198
|
const iconClassName = cn(
|
|
27004
27199
|
"h-5 w-5",
|
|
27005
27200
|
isActive ? "text-primary" : "text-muted-foreground"
|
package/dist/providers/index.js
CHANGED
|
@@ -26419,6 +26419,18 @@ var init_useAuthContext = __esm({
|
|
|
26419
26419
|
"hooks/useAuthContext.ts"() {
|
|
26420
26420
|
}
|
|
26421
26421
|
});
|
|
26422
|
+
function resolveActiveNavHref(items, currentPath) {
|
|
26423
|
+
let best;
|
|
26424
|
+
for (const item of items) {
|
|
26425
|
+
for (const href of item.children?.length ? [item.href, ...item.children.map((c) => c.href)] : [item.href]) {
|
|
26426
|
+
if (currentPath === href) return href;
|
|
26427
|
+
if (currentPath.startsWith(href + "/") && (!best || href.length > best.length)) {
|
|
26428
|
+
best = href;
|
|
26429
|
+
}
|
|
26430
|
+
}
|
|
26431
|
+
}
|
|
26432
|
+
return best;
|
|
26433
|
+
}
|
|
26422
26434
|
var DashboardLayout, NavLink, NavLinkTopnav, NavLinkBottom;
|
|
26423
26435
|
var init_DashboardLayout = __esm({
|
|
26424
26436
|
"components/core/templates/DashboardLayout.tsx"() {
|
|
@@ -26490,6 +26502,7 @@ var init_DashboardLayout = __esm({
|
|
|
26490
26502
|
const location = useLocation();
|
|
26491
26503
|
const ctxPagePath = useCurrentPagePath();
|
|
26492
26504
|
const activePath = (currentPath || void 0) ?? ctxPagePath ?? location.pathname;
|
|
26505
|
+
const activeHref = useMemo(() => resolveActiveNavHref(navItems, activePath), [navItems, activePath]);
|
|
26493
26506
|
const { signOut: authSignOut } = useAuthContext();
|
|
26494
26507
|
const user = userProp || (null);
|
|
26495
26508
|
const { t } = useTranslate();
|
|
@@ -26582,7 +26595,7 @@ var init_DashboardLayout = __esm({
|
|
|
26582
26595
|
NavLink,
|
|
26583
26596
|
{
|
|
26584
26597
|
item,
|
|
26585
|
-
|
|
26598
|
+
activeHref,
|
|
26586
26599
|
compact: isRail
|
|
26587
26600
|
},
|
|
26588
26601
|
item.href
|
|
@@ -26649,7 +26662,7 @@ var init_DashboardLayout = __esm({
|
|
|
26649
26662
|
NavLinkTopnav,
|
|
26650
26663
|
{
|
|
26651
26664
|
item,
|
|
26652
|
-
|
|
26665
|
+
activeHref
|
|
26653
26666
|
},
|
|
26654
26667
|
item.href
|
|
26655
26668
|
))
|
|
@@ -26825,7 +26838,7 @@ var init_DashboardLayout = __esm({
|
|
|
26825
26838
|
NavLinkBottom,
|
|
26826
26839
|
{
|
|
26827
26840
|
item,
|
|
26828
|
-
|
|
26841
|
+
activeHref
|
|
26829
26842
|
},
|
|
26830
26843
|
item.href
|
|
26831
26844
|
)) })
|
|
@@ -26839,15 +26852,71 @@ var init_DashboardLayout = __esm({
|
|
|
26839
26852
|
DashboardLayout.displayName = "DashboardLayout";
|
|
26840
26853
|
NavLink = ({
|
|
26841
26854
|
item,
|
|
26842
|
-
|
|
26855
|
+
activeHref,
|
|
26843
26856
|
compact = false
|
|
26844
26857
|
}) => {
|
|
26845
|
-
const
|
|
26858
|
+
const hasChildren = !!item.children?.length;
|
|
26859
|
+
const childActive = hasChildren && item.children.some((child) => child.href === activeHref);
|
|
26860
|
+
const isActive = item.href === activeHref || childActive;
|
|
26861
|
+
const [open, setOpen] = useState(childActive);
|
|
26846
26862
|
const iconClassName = cn(
|
|
26847
26863
|
"h-5 w-5",
|
|
26848
26864
|
isActive ? "text-primary-foreground" : "text-muted-foreground"
|
|
26849
26865
|
);
|
|
26850
26866
|
if (compact) {
|
|
26867
|
+
if (hasChildren) {
|
|
26868
|
+
return /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
|
|
26869
|
+
/* @__PURE__ */ jsx(
|
|
26870
|
+
Button,
|
|
26871
|
+
{
|
|
26872
|
+
variant: "ghost",
|
|
26873
|
+
title: item.label,
|
|
26874
|
+
"aria-label": item.label,
|
|
26875
|
+
"aria-expanded": open,
|
|
26876
|
+
className: cn(
|
|
26877
|
+
"flex items-center justify-center w-full px-2 py-2 rounded-lg transition-colors",
|
|
26878
|
+
isActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
26879
|
+
),
|
|
26880
|
+
onClick: () => setOpen(!open),
|
|
26881
|
+
children: /* @__PURE__ */ jsxs(Box, { as: "span", className: "relative inline-flex", children: [
|
|
26882
|
+
item.icon ? typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, className: iconClassName }) : /* @__PURE__ */ jsx(item.icon, { className: iconClassName }) : /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold", as: "span", children: item.label.charAt(0).toUpperCase() }),
|
|
26883
|
+
item.badge && /* @__PURE__ */ jsx(
|
|
26884
|
+
Badge,
|
|
26885
|
+
{
|
|
26886
|
+
variant: isActive ? "primary" : "default",
|
|
26887
|
+
size: "sm",
|
|
26888
|
+
className: "absolute -top-2 -right-2 px-1 py-0 text-[10px] leading-4",
|
|
26889
|
+
children: item.badge
|
|
26890
|
+
}
|
|
26891
|
+
)
|
|
26892
|
+
] })
|
|
26893
|
+
}
|
|
26894
|
+
),
|
|
26895
|
+
open && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
26896
|
+
/* @__PURE__ */ jsx(Box, { className: "fixed inset-0 z-20", onClick: () => setOpen(false) }),
|
|
26897
|
+
/* @__PURE__ */ jsx(Box, { className: "absolute left-full top-0 ml-2 w-48 bg-card dark:bg-card rounded-lg shadow-lg border border-border dark:border-border py-1 z-30", children: item.children.map((child) => {
|
|
26898
|
+
const childIsActive = child.href === activeHref;
|
|
26899
|
+
return /* @__PURE__ */ jsxs(
|
|
26900
|
+
Link,
|
|
26901
|
+
{
|
|
26902
|
+
to: child.href,
|
|
26903
|
+
onClick: () => setOpen(false),
|
|
26904
|
+
className: cn(
|
|
26905
|
+
"flex items-center gap-2 px-3 py-2 text-sm transition-colors",
|
|
26906
|
+
childIsActive ? "bg-muted text-foreground font-medium" : "text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
26907
|
+
),
|
|
26908
|
+
children: [
|
|
26909
|
+
child.icon && (typeof child.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: child.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsx(child.icon, { className: "h-4 w-4" })),
|
|
26910
|
+
/* @__PURE__ */ jsx(Typography, { variant: "small", className: "flex-1", as: "span", children: child.label }),
|
|
26911
|
+
child.badge && /* @__PURE__ */ jsx(Badge, { variant: childIsActive ? "primary" : "default", size: "sm", children: child.badge })
|
|
26912
|
+
]
|
|
26913
|
+
},
|
|
26914
|
+
child.href
|
|
26915
|
+
);
|
|
26916
|
+
}) })
|
|
26917
|
+
] })
|
|
26918
|
+
] });
|
|
26919
|
+
}
|
|
26851
26920
|
return /* @__PURE__ */ jsx(
|
|
26852
26921
|
Link,
|
|
26853
26922
|
{
|
|
@@ -26873,6 +26942,78 @@ var init_DashboardLayout = __esm({
|
|
|
26873
26942
|
}
|
|
26874
26943
|
);
|
|
26875
26944
|
}
|
|
26945
|
+
if (hasChildren) {
|
|
26946
|
+
return /* @__PURE__ */ jsxs(Box, { children: [
|
|
26947
|
+
/* @__PURE__ */ jsxs(
|
|
26948
|
+
Button,
|
|
26949
|
+
{
|
|
26950
|
+
variant: "ghost",
|
|
26951
|
+
"aria-expanded": open,
|
|
26952
|
+
className: cn(
|
|
26953
|
+
"flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm font-medium transition-colors",
|
|
26954
|
+
isActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
26955
|
+
),
|
|
26956
|
+
onClick: () => setOpen(!open),
|
|
26957
|
+
children: [
|
|
26958
|
+
item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, className: iconClassName }) : /* @__PURE__ */ jsx(item.icon, { className: iconClassName })),
|
|
26959
|
+
/* @__PURE__ */ jsx(
|
|
26960
|
+
Typography,
|
|
26961
|
+
{
|
|
26962
|
+
variant: "small",
|
|
26963
|
+
color: isActive ? "inherit" : "primary",
|
|
26964
|
+
className: "flex-1 text-left",
|
|
26965
|
+
as: "span",
|
|
26966
|
+
children: item.label
|
|
26967
|
+
}
|
|
26968
|
+
),
|
|
26969
|
+
item.badge && /* @__PURE__ */ jsx(Badge, { variant: isActive ? "primary" : "default", size: "sm", children: item.badge }),
|
|
26970
|
+
/* @__PURE__ */ jsx(
|
|
26971
|
+
Icon,
|
|
26972
|
+
{
|
|
26973
|
+
name: "chevron-down",
|
|
26974
|
+
className: cn("h-4 w-4 shrink-0 transition-transform", open && "rotate-180")
|
|
26975
|
+
}
|
|
26976
|
+
)
|
|
26977
|
+
]
|
|
26978
|
+
}
|
|
26979
|
+
),
|
|
26980
|
+
open && /* @__PURE__ */ jsx(
|
|
26981
|
+
VStack,
|
|
26982
|
+
{
|
|
26983
|
+
gap: "none",
|
|
26984
|
+
className: "mt-1 ml-4 pl-4 border-l border-border dark:border-border space-y-1",
|
|
26985
|
+
children: item.children.map((child) => {
|
|
26986
|
+
const childIsActive = child.href === activeHref;
|
|
26987
|
+
return /* @__PURE__ */ jsxs(
|
|
26988
|
+
Link,
|
|
26989
|
+
{
|
|
26990
|
+
to: child.href,
|
|
26991
|
+
className: cn(
|
|
26992
|
+
"flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors",
|
|
26993
|
+
childIsActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
26994
|
+
),
|
|
26995
|
+
children: [
|
|
26996
|
+
child.icon && (typeof child.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: child.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsx(child.icon, { className: "h-4 w-4" })),
|
|
26997
|
+
/* @__PURE__ */ jsx(
|
|
26998
|
+
Typography,
|
|
26999
|
+
{
|
|
27000
|
+
variant: "small",
|
|
27001
|
+
color: childIsActive ? "inherit" : "primary",
|
|
27002
|
+
className: "flex-1",
|
|
27003
|
+
as: "span",
|
|
27004
|
+
children: child.label
|
|
27005
|
+
}
|
|
27006
|
+
),
|
|
27007
|
+
child.badge && /* @__PURE__ */ jsx(Badge, { variant: childIsActive ? "primary" : "default", size: "sm", children: child.badge })
|
|
27008
|
+
]
|
|
27009
|
+
},
|
|
27010
|
+
child.href
|
|
27011
|
+
);
|
|
27012
|
+
})
|
|
27013
|
+
}
|
|
27014
|
+
)
|
|
27015
|
+
] });
|
|
27016
|
+
}
|
|
26876
27017
|
return /* @__PURE__ */ jsxs(
|
|
26877
27018
|
Link,
|
|
26878
27019
|
{
|
|
@@ -26901,9 +27042,63 @@ var init_DashboardLayout = __esm({
|
|
|
26901
27042
|
NavLink.displayName = "NavLink";
|
|
26902
27043
|
NavLinkTopnav = ({
|
|
26903
27044
|
item,
|
|
26904
|
-
|
|
27045
|
+
activeHref
|
|
26905
27046
|
}) => {
|
|
26906
|
-
const
|
|
27047
|
+
const hasChildren = !!item.children?.length;
|
|
27048
|
+
const childActive = hasChildren && item.children.some((child) => child.href === activeHref);
|
|
27049
|
+
const isActive = item.href === activeHref || childActive;
|
|
27050
|
+
const [open, setOpen] = useState(false);
|
|
27051
|
+
if (hasChildren) {
|
|
27052
|
+
return /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
|
|
27053
|
+
/* @__PURE__ */ jsxs(
|
|
27054
|
+
Button,
|
|
27055
|
+
{
|
|
27056
|
+
variant: "ghost",
|
|
27057
|
+
"aria-expanded": open,
|
|
27058
|
+
className: cn(
|
|
27059
|
+
"flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors whitespace-nowrap",
|
|
27060
|
+
isActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
27061
|
+
),
|
|
27062
|
+
onClick: () => setOpen(!open),
|
|
27063
|
+
children: [
|
|
27064
|
+
item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4" })),
|
|
27065
|
+
/* @__PURE__ */ jsx(Typography, { variant: "small", color: "inherit", className: "flex-1", as: "span", children: item.label }),
|
|
27066
|
+
item.badge && /* @__PURE__ */ jsx(Badge, { variant: isActive ? "primary" : "default", size: "sm", children: item.badge }),
|
|
27067
|
+
/* @__PURE__ */ jsx(
|
|
27068
|
+
Icon,
|
|
27069
|
+
{
|
|
27070
|
+
name: "chevron-down",
|
|
27071
|
+
className: cn("h-3.5 w-3.5 shrink-0 transition-transform", open && "rotate-180")
|
|
27072
|
+
}
|
|
27073
|
+
)
|
|
27074
|
+
]
|
|
27075
|
+
}
|
|
27076
|
+
),
|
|
27077
|
+
open && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
27078
|
+
/* @__PURE__ */ jsx(Box, { className: "fixed inset-0 z-20", onClick: () => setOpen(false) }),
|
|
27079
|
+
/* @__PURE__ */ jsx(Box, { className: "absolute left-0 top-full mt-1 w-48 bg-card dark:bg-card rounded-lg shadow-lg border border-border dark:border-border py-1 z-30", children: item.children.map((child) => {
|
|
27080
|
+
const childIsActive = child.href === activeHref;
|
|
27081
|
+
return /* @__PURE__ */ jsxs(
|
|
27082
|
+
Link,
|
|
27083
|
+
{
|
|
27084
|
+
to: child.href,
|
|
27085
|
+
onClick: () => setOpen(false),
|
|
27086
|
+
className: cn(
|
|
27087
|
+
"flex items-center gap-2 px-3 py-2 text-sm transition-colors",
|
|
27088
|
+
childIsActive ? "bg-muted text-foreground font-medium" : "text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
27089
|
+
),
|
|
27090
|
+
children: [
|
|
27091
|
+
child.icon && (typeof child.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: child.icon, className: "h-4 w-4" }) : /* @__PURE__ */ jsx(child.icon, { className: "h-4 w-4" })),
|
|
27092
|
+
/* @__PURE__ */ jsx(Typography, { variant: "small", className: "flex-1", as: "span", children: child.label }),
|
|
27093
|
+
child.badge && /* @__PURE__ */ jsx(Badge, { variant: childIsActive ? "primary" : "default", size: "sm", children: child.badge })
|
|
27094
|
+
]
|
|
27095
|
+
},
|
|
27096
|
+
child.href
|
|
27097
|
+
);
|
|
27098
|
+
}) })
|
|
27099
|
+
] })
|
|
27100
|
+
] });
|
|
27101
|
+
}
|
|
26907
27102
|
return /* @__PURE__ */ jsxs(
|
|
26908
27103
|
Link,
|
|
26909
27104
|
{
|
|
@@ -26923,9 +27118,9 @@ var init_DashboardLayout = __esm({
|
|
|
26923
27118
|
NavLinkTopnav.displayName = "NavLinkTopnav";
|
|
26924
27119
|
NavLinkBottom = ({
|
|
26925
27120
|
item,
|
|
26926
|
-
|
|
27121
|
+
activeHref
|
|
26927
27122
|
}) => {
|
|
26928
|
-
const isActive =
|
|
27123
|
+
const isActive = item.href === activeHref;
|
|
26929
27124
|
const iconClassName = cn(
|
|
26930
27125
|
"h-5 w-5",
|
|
26931
27126
|
isActive ? "text-primary" : "text-muted-foreground"
|