@opensite/ui 3.8.0 → 3.8.2
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/navbar-enterprise-mega.cjs +731 -457
- package/dist/navbar-enterprise-mega.d.cts +2 -2
- package/dist/navbar-enterprise-mega.d.ts +2 -2
- package/dist/navbar-enterprise-mega.js +731 -457
- package/dist/navbar-multi-column-groups.cjs +51 -30
- package/dist/navbar-multi-column-groups.js +51 -30
- package/dist/registry.cjs +777 -487
- package/dist/registry.js +777 -487
- package/package.json +1 -1
|
@@ -764,6 +764,13 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
|
|
|
764
764
|
};
|
|
765
765
|
}
|
|
766
766
|
var MOBILE_BREAKPOINT = 1024;
|
|
767
|
+
var DESKTOP_GROUP_COLUMN_WIDTH = 248;
|
|
768
|
+
var DESKTOP_GROUP_GAP = 8;
|
|
769
|
+
var DESKTOP_GROUP_PADDING_X = 16;
|
|
770
|
+
var getDesktopGroupsGridStyle = (groupCount) => ({
|
|
771
|
+
width: groupCount * DESKTOP_GROUP_COLUMN_WIDTH + Math.max(groupCount - 1, 0) * DESKTOP_GROUP_GAP + DESKTOP_GROUP_PADDING_X,
|
|
772
|
+
gridTemplateColumns: `repeat(${groupCount}, minmax(0, 1fr))`
|
|
773
|
+
});
|
|
767
774
|
var NavbarMultiColumnGroups = ({
|
|
768
775
|
className,
|
|
769
776
|
containerClassName,
|
|
@@ -942,33 +949,47 @@ var NavbarMultiColumnGroups = ({
|
|
|
942
949
|
] });
|
|
943
950
|
};
|
|
944
951
|
var DesktopMenuItem = ({ item, index }) => {
|
|
945
|
-
if (item.groups) {
|
|
952
|
+
if (item.groups && item.groups.length > 0) {
|
|
946
953
|
return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { value: `${index}`, children: [
|
|
947
954
|
/* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { className: "h-fit bg-transparent px-2.5 font-normal text-muted-foreground", children: item.title }),
|
|
948
|
-
/* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "rounded-xl! border! p-0!", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
className: "
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
955
|
+
/* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "rounded-xl! border! p-0!", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
956
|
+
"ul",
|
|
957
|
+
{
|
|
958
|
+
className: "grid box-border max-w-[calc(100vw-2rem)] gap-2 overflow-x-auto p-2",
|
|
959
|
+
style: getDesktopGroupsGridStyle(item.groups.length),
|
|
960
|
+
children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "min-w-0", children: [
|
|
961
|
+
/* @__PURE__ */ jsxRuntime.jsx("li", { className: "line-clamp-2 break-words px-3 py-2 text-sm leading-normal text-muted-foreground", children: group.title }),
|
|
962
|
+
group.links.map((link, linkIndex) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
963
|
+
"li",
|
|
964
|
+
{
|
|
965
|
+
className: "min-w-0",
|
|
966
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
967
|
+
NavigationMenuLink,
|
|
968
|
+
{
|
|
969
|
+
asChild: true,
|
|
970
|
+
className: "group/link !flex !w-full max-w-full min-w-0 flex-row items-start gap-2 overflow-hidden px-3 py-2 text-left whitespace-normal transition-colors duration-200",
|
|
971
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(pressable.Pressable, { href: link.url, children: [
|
|
972
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 shrink-0 rounded-lg border duration-400 fade-in group-hover/link:bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
973
|
+
DynamicIcon,
|
|
974
|
+
{
|
|
975
|
+
name: link.icon || link.iconName,
|
|
976
|
+
size: 16,
|
|
977
|
+
className: "m-auto group-hover/link:stroke-black"
|
|
978
|
+
}
|
|
979
|
+
) }),
|
|
980
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
|
|
981
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "line-clamp-2 break-words text-sm leading-snug font-medium", children: link.label }),
|
|
982
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "line-clamp-2 break-words text-xs leading-snug text-muted-foreground group-hover/link:text-foreground", children: link.description })
|
|
983
|
+
] })
|
|
984
|
+
] })
|
|
985
|
+
}
|
|
986
|
+
)
|
|
987
|
+
},
|
|
988
|
+
`desktop-links-${groupIndex}-${linkIndex}`
|
|
989
|
+
))
|
|
990
|
+
] }) }, `desktop-group-${groupIndex}`))
|
|
991
|
+
}
|
|
992
|
+
) })
|
|
972
993
|
] }, `desktop-menu-item-${index}`);
|
|
973
994
|
}
|
|
974
995
|
return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { value: `${index}`, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1032,13 +1053,13 @@ var MobileNavigationMenu = ({
|
|
|
1032
1053
|
value: `nav-${index}`,
|
|
1033
1054
|
className: "border-b-0",
|
|
1034
1055
|
children: [
|
|
1035
|
-
/* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center p-0 px-4! text-base leading-[3.75] font-normal text-muted-foreground hover:bg-muted hover:no-underline", children: item.title }),
|
|
1056
|
+
/* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center p-0 px-4! text-base leading-[3.75] font-normal text-muted-foreground hover:bg-muted hover:no-underline", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-2 min-w-0 flex-1 break-words text-left", children: item.title }) }),
|
|
1036
1057
|
/* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1037
1058
|
"div",
|
|
1038
1059
|
{
|
|
1039
1060
|
className: "mb-4",
|
|
1040
1061
|
children: [
|
|
1041
|
-
group.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 px-4 text-xs font-semibold text-muted-foreground uppercase", children: group.title }),
|
|
1062
|
+
group.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 line-clamp-2 break-words px-4 text-xs font-semibold text-muted-foreground uppercase", children: group.title }),
|
|
1042
1063
|
group.links.map((link, linkIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1043
1064
|
pressable.Pressable,
|
|
1044
1065
|
{
|
|
@@ -1051,10 +1072,10 @@ var MobileNavigationMenu = ({
|
|
|
1051
1072
|
{
|
|
1052
1073
|
name: link.icon || link.iconName,
|
|
1053
1074
|
size: 16,
|
|
1054
|
-
className: "stroke-muted-foreground"
|
|
1075
|
+
className: "shrink-0 stroke-muted-foreground"
|
|
1055
1076
|
}
|
|
1056
1077
|
),
|
|
1057
|
-
link.label
|
|
1078
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-2 min-w-0 flex-1 break-words", children: link.label })
|
|
1058
1079
|
]
|
|
1059
1080
|
},
|
|
1060
1081
|
`mobile-link-${groupIndex}-${linkIndex}`
|
|
@@ -1074,7 +1095,7 @@ var MobileNavigationMenu = ({
|
|
|
1074
1095
|
href: item.url,
|
|
1075
1096
|
className: "flex h-15 items-center rounded-md p-0 px-4 text-left text-base leading-[3.75] font-normal text-muted-foreground ring-ring/10 outline-ring/50 transition-all hover:bg-muted focus-visible:ring-4 focus-visible:outline-1",
|
|
1076
1097
|
onClick: handleClose,
|
|
1077
|
-
children: item.title
|
|
1098
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-2 min-w-0 flex-1 break-words", children: item.title })
|
|
1078
1099
|
},
|
|
1079
1100
|
`nav-link-${index}`
|
|
1080
1101
|
);
|
|
@@ -741,6 +741,13 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
|
|
|
741
741
|
};
|
|
742
742
|
}
|
|
743
743
|
var MOBILE_BREAKPOINT = 1024;
|
|
744
|
+
var DESKTOP_GROUP_COLUMN_WIDTH = 248;
|
|
745
|
+
var DESKTOP_GROUP_GAP = 8;
|
|
746
|
+
var DESKTOP_GROUP_PADDING_X = 16;
|
|
747
|
+
var getDesktopGroupsGridStyle = (groupCount) => ({
|
|
748
|
+
width: groupCount * DESKTOP_GROUP_COLUMN_WIDTH + Math.max(groupCount - 1, 0) * DESKTOP_GROUP_GAP + DESKTOP_GROUP_PADDING_X,
|
|
749
|
+
gridTemplateColumns: `repeat(${groupCount}, minmax(0, 1fr))`
|
|
750
|
+
});
|
|
744
751
|
var NavbarMultiColumnGroups = ({
|
|
745
752
|
className,
|
|
746
753
|
containerClassName,
|
|
@@ -919,33 +926,47 @@ var NavbarMultiColumnGroups = ({
|
|
|
919
926
|
] });
|
|
920
927
|
};
|
|
921
928
|
var DesktopMenuItem = ({ item, index }) => {
|
|
922
|
-
if (item.groups) {
|
|
929
|
+
if (item.groups && item.groups.length > 0) {
|
|
923
930
|
return /* @__PURE__ */ jsxs(NavigationMenuItem, { value: `${index}`, children: [
|
|
924
931
|
/* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-fit bg-transparent px-2.5 font-normal text-muted-foreground", children: item.title }),
|
|
925
|
-
/* @__PURE__ */ jsx(NavigationMenuContent, { className: "rounded-xl! border! p-0!", children: /* @__PURE__ */ jsx(
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
className: "
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
932
|
+
/* @__PURE__ */ jsx(NavigationMenuContent, { className: "rounded-xl! border! p-0!", children: /* @__PURE__ */ jsx(
|
|
933
|
+
"ul",
|
|
934
|
+
{
|
|
935
|
+
className: "grid box-border max-w-[calc(100vw-2rem)] gap-2 overflow-x-auto p-2",
|
|
936
|
+
style: getDesktopGroupsGridStyle(item.groups.length),
|
|
937
|
+
children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsx("li", { className: "min-w-0", children: /* @__PURE__ */ jsxs("ul", { className: "min-w-0", children: [
|
|
938
|
+
/* @__PURE__ */ jsx("li", { className: "line-clamp-2 break-words px-3 py-2 text-sm leading-normal text-muted-foreground", children: group.title }),
|
|
939
|
+
group.links.map((link, linkIndex) => /* @__PURE__ */ jsx(
|
|
940
|
+
"li",
|
|
941
|
+
{
|
|
942
|
+
className: "min-w-0",
|
|
943
|
+
children: /* @__PURE__ */ jsx(
|
|
944
|
+
NavigationMenuLink,
|
|
945
|
+
{
|
|
946
|
+
asChild: true,
|
|
947
|
+
className: "group/link !flex !w-full max-w-full min-w-0 flex-row items-start gap-2 overflow-hidden px-3 py-2 text-left whitespace-normal transition-colors duration-200",
|
|
948
|
+
children: /* @__PURE__ */ jsxs(Pressable, { href: link.url, children: [
|
|
949
|
+
/* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 rounded-lg border duration-400 fade-in group-hover/link:bg-background", children: /* @__PURE__ */ jsx(
|
|
950
|
+
DynamicIcon,
|
|
951
|
+
{
|
|
952
|
+
name: link.icon || link.iconName,
|
|
953
|
+
size: 16,
|
|
954
|
+
className: "m-auto group-hover/link:stroke-black"
|
|
955
|
+
}
|
|
956
|
+
) }),
|
|
957
|
+
/* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
|
|
958
|
+
/* @__PURE__ */ jsx("div", { className: "line-clamp-2 break-words text-sm leading-snug font-medium", children: link.label }),
|
|
959
|
+
/* @__PURE__ */ jsx("div", { className: "line-clamp-2 break-words text-xs leading-snug text-muted-foreground group-hover/link:text-foreground", children: link.description })
|
|
960
|
+
] })
|
|
961
|
+
] })
|
|
962
|
+
}
|
|
963
|
+
)
|
|
964
|
+
},
|
|
965
|
+
`desktop-links-${groupIndex}-${linkIndex}`
|
|
966
|
+
))
|
|
967
|
+
] }) }, `desktop-group-${groupIndex}`))
|
|
968
|
+
}
|
|
969
|
+
) })
|
|
949
970
|
] }, `desktop-menu-item-${index}`);
|
|
950
971
|
}
|
|
951
972
|
return /* @__PURE__ */ jsx(NavigationMenuItem, { value: `${index}`, children: /* @__PURE__ */ jsx(
|
|
@@ -1009,13 +1030,13 @@ var MobileNavigationMenu = ({
|
|
|
1009
1030
|
value: `nav-${index}`,
|
|
1010
1031
|
className: "border-b-0",
|
|
1011
1032
|
children: [
|
|
1012
|
-
/* @__PURE__ */ jsx(AccordionTrigger, { className: "h-15 items-center p-0 px-4! text-base leading-[3.75] font-normal text-muted-foreground hover:bg-muted hover:no-underline", children: item.title }),
|
|
1033
|
+
/* @__PURE__ */ jsx(AccordionTrigger, { className: "h-15 items-center p-0 px-4! text-base leading-[3.75] font-normal text-muted-foreground hover:bg-muted hover:no-underline", children: /* @__PURE__ */ jsx("span", { className: "line-clamp-2 min-w-0 flex-1 break-words text-left", children: item.title }) }),
|
|
1013
1034
|
/* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(
|
|
1014
1035
|
"div",
|
|
1015
1036
|
{
|
|
1016
1037
|
className: "mb-4",
|
|
1017
1038
|
children: [
|
|
1018
|
-
group.title && /* @__PURE__ */ jsx("p", { className: "mt-4 px-4 text-xs font-semibold text-muted-foreground uppercase", children: group.title }),
|
|
1039
|
+
group.title && /* @__PURE__ */ jsx("p", { className: "mt-4 line-clamp-2 break-words px-4 text-xs font-semibold text-muted-foreground uppercase", children: group.title }),
|
|
1019
1040
|
group.links.map((link, linkIndex) => /* @__PURE__ */ jsxs(
|
|
1020
1041
|
Pressable,
|
|
1021
1042
|
{
|
|
@@ -1028,10 +1049,10 @@ var MobileNavigationMenu = ({
|
|
|
1028
1049
|
{
|
|
1029
1050
|
name: link.icon || link.iconName,
|
|
1030
1051
|
size: 16,
|
|
1031
|
-
className: "stroke-muted-foreground"
|
|
1052
|
+
className: "shrink-0 stroke-muted-foreground"
|
|
1032
1053
|
}
|
|
1033
1054
|
),
|
|
1034
|
-
link.label
|
|
1055
|
+
/* @__PURE__ */ jsx("span", { className: "line-clamp-2 min-w-0 flex-1 break-words", children: link.label })
|
|
1035
1056
|
]
|
|
1036
1057
|
},
|
|
1037
1058
|
`mobile-link-${groupIndex}-${linkIndex}`
|
|
@@ -1051,7 +1072,7 @@ var MobileNavigationMenu = ({
|
|
|
1051
1072
|
href: item.url,
|
|
1052
1073
|
className: "flex h-15 items-center rounded-md p-0 px-4 text-left text-base leading-[3.75] font-normal text-muted-foreground ring-ring/10 outline-ring/50 transition-all hover:bg-muted focus-visible:ring-4 focus-visible:outline-1",
|
|
1053
1074
|
onClick: handleClose,
|
|
1054
|
-
children: item.title
|
|
1075
|
+
children: /* @__PURE__ */ jsx("span", { className: "line-clamp-2 min-w-0 flex-1 break-words", children: item.title })
|
|
1055
1076
|
},
|
|
1056
1077
|
`nav-link-${index}`
|
|
1057
1078
|
);
|