@opensite/ui 1.0.9 → 1.1.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.
Files changed (41) hide show
  1. package/dist/navbar-animated-preview.cjs +27 -17
  2. package/dist/navbar-animated-preview.js +27 -17
  3. package/dist/navbar-centered-menu.cjs +20 -10
  4. package/dist/navbar-centered-menu.js +20 -10
  5. package/dist/navbar-dark-icons.cjs +20 -10
  6. package/dist/navbar-dark-icons.js +20 -10
  7. package/dist/navbar-dropdown-menu.cjs +20 -10
  8. package/dist/navbar-dropdown-menu.js +20 -10
  9. package/dist/navbar-education-platform.cjs +81 -56
  10. package/dist/navbar-education-platform.js +81 -56
  11. package/dist/navbar-enterprise-mega.cjs +21 -11
  12. package/dist/navbar-enterprise-mega.js +21 -11
  13. package/dist/navbar-feature-grid.cjs +20 -10
  14. package/dist/navbar-feature-grid.js +20 -10
  15. package/dist/navbar-icon-links.cjs +20 -10
  16. package/dist/navbar-icon-links.js +20 -10
  17. package/dist/navbar-image-preview.cjs +20 -10
  18. package/dist/navbar-image-preview.js +20 -10
  19. package/dist/navbar-mega-menu.cjs +20 -10
  20. package/dist/navbar-mega-menu.js +20 -10
  21. package/dist/navbar-multi-column-groups.cjs +52 -35
  22. package/dist/navbar-multi-column-groups.js +52 -35
  23. package/dist/navbar-platform-resources.cjs +20 -10
  24. package/dist/navbar-platform-resources.js +20 -10
  25. package/dist/navbar-search-focused.cjs +20 -10
  26. package/dist/navbar-search-focused.js +20 -10
  27. package/dist/navbar-sidebar-mobile.cjs +21 -10
  28. package/dist/navbar-sidebar-mobile.js +21 -10
  29. package/dist/navbar-simple-links.cjs +22 -12
  30. package/dist/navbar-simple-links.js +22 -12
  31. package/dist/navbar-split-cta.cjs +20 -10
  32. package/dist/navbar-split-cta.js +20 -10
  33. package/dist/navbar-sticky-compact.cjs +240 -123
  34. package/dist/navbar-sticky-compact.js +239 -123
  35. package/dist/navbar-tabbed-sections.cjs +20 -10
  36. package/dist/navbar-tabbed-sections.js +20 -10
  37. package/dist/navbar-transparent-overlay.cjs +21 -10
  38. package/dist/navbar-transparent-overlay.js +21 -10
  39. package/dist/registry.cjs +285 -206
  40. package/dist/registry.js +285 -206
  41. package/package.json +1 -1
@@ -1012,6 +1012,7 @@ var NavbarMobileMenu = ({
1012
1012
  children,
1013
1013
  className,
1014
1014
  contentClassName,
1015
+ closeContainerClassName = "",
1015
1016
  title = "Mobile Navigation"
1016
1017
  }) => {
1017
1018
  React.useEffect(() => {
@@ -1036,18 +1037,27 @@ var NavbarMobileMenu = ({
1036
1037
  "data-state": open ? "open" : "closed",
1037
1038
  children: [
1038
1039
  /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
1039
- /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxs(
1040
- "button",
1040
+ /* @__PURE__ */ jsx(
1041
+ "div",
1041
1042
  {
1042
- onClick: onClose,
1043
- className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1044
- "aria-label": "Close mobile menu",
1045
- children: [
1046
- /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1047
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1048
- ]
1043
+ className: cn(
1044
+ closeContainerClassName,
1045
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
1046
+ ),
1047
+ children: /* @__PURE__ */ jsxs(
1048
+ "button",
1049
+ {
1050
+ onClick: onClose,
1051
+ className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1052
+ "aria-label": "Close mobile menu",
1053
+ children: [
1054
+ /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1055
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1056
+ ]
1057
+ }
1058
+ )
1049
1059
  }
1050
- ) }),
1060
+ ),
1051
1061
  /* @__PURE__ */ jsx(
1052
1062
  "div",
1053
1063
  {
@@ -1198,6 +1198,7 @@ var NavbarMobileMenu = ({
1198
1198
  children,
1199
1199
  className,
1200
1200
  contentClassName,
1201
+ closeContainerClassName = "",
1201
1202
  title = "Mobile Navigation"
1202
1203
  }) => {
1203
1204
  React__namespace.useEffect(() => {
@@ -1222,18 +1223,27 @@ var NavbarMobileMenu = ({
1222
1223
  "data-state": open ? "open" : "closed",
1223
1224
  children: [
1224
1225
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
1225
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
1226
- "button",
1226
+ /* @__PURE__ */ jsxRuntime.jsx(
1227
+ "div",
1227
1228
  {
1228
- onClick: onClose,
1229
- className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1230
- "aria-label": "Close mobile menu",
1231
- children: [
1232
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1233
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1234
- ]
1229
+ className: cn(
1230
+ closeContainerClassName,
1231
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
1232
+ ),
1233
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1234
+ "button",
1235
+ {
1236
+ onClick: onClose,
1237
+ className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1238
+ "aria-label": "Close mobile menu",
1239
+ children: [
1240
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1241
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1242
+ ]
1243
+ }
1244
+ )
1235
1245
  }
1236
- ) }),
1246
+ ),
1237
1247
  /* @__PURE__ */ jsxRuntime.jsx(
1238
1248
  "div",
1239
1249
  {
@@ -1175,6 +1175,7 @@ var NavbarMobileMenu = ({
1175
1175
  children,
1176
1176
  className,
1177
1177
  contentClassName,
1178
+ closeContainerClassName = "",
1178
1179
  title = "Mobile Navigation"
1179
1180
  }) => {
1180
1181
  React.useEffect(() => {
@@ -1199,18 +1200,27 @@ var NavbarMobileMenu = ({
1199
1200
  "data-state": open ? "open" : "closed",
1200
1201
  children: [
1201
1202
  /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
1202
- /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxs(
1203
- "button",
1203
+ /* @__PURE__ */ jsx(
1204
+ "div",
1204
1205
  {
1205
- onClick: onClose,
1206
- className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1207
- "aria-label": "Close mobile menu",
1208
- children: [
1209
- /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1210
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1211
- ]
1206
+ className: cn(
1207
+ closeContainerClassName,
1208
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
1209
+ ),
1210
+ children: /* @__PURE__ */ jsxs(
1211
+ "button",
1212
+ {
1213
+ onClick: onClose,
1214
+ className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1215
+ "aria-label": "Close mobile menu",
1216
+ children: [
1217
+ /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1218
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1219
+ ]
1220
+ }
1221
+ )
1212
1222
  }
1213
- ) }),
1223
+ ),
1214
1224
  /* @__PURE__ */ jsx(
1215
1225
  "div",
1216
1226
  {
@@ -1198,6 +1198,7 @@ var NavbarMobileMenu = ({
1198
1198
  children,
1199
1199
  className,
1200
1200
  contentClassName,
1201
+ closeContainerClassName = "",
1201
1202
  title = "Mobile Navigation"
1202
1203
  }) => {
1203
1204
  React__namespace.useEffect(() => {
@@ -1222,18 +1223,27 @@ var NavbarMobileMenu = ({
1222
1223
  "data-state": open ? "open" : "closed",
1223
1224
  children: [
1224
1225
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
1225
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
1226
- "button",
1226
+ /* @__PURE__ */ jsxRuntime.jsx(
1227
+ "div",
1227
1228
  {
1228
- onClick: onClose,
1229
- className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1230
- "aria-label": "Close mobile menu",
1231
- children: [
1232
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1233
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1234
- ]
1229
+ className: cn(
1230
+ closeContainerClassName,
1231
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
1232
+ ),
1233
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1234
+ "button",
1235
+ {
1236
+ onClick: onClose,
1237
+ className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1238
+ "aria-label": "Close mobile menu",
1239
+ children: [
1240
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1241
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1242
+ ]
1243
+ }
1244
+ )
1235
1245
  }
1236
- ) }),
1246
+ ),
1237
1247
  /* @__PURE__ */ jsxRuntime.jsx(
1238
1248
  "div",
1239
1249
  {
@@ -1175,6 +1175,7 @@ var NavbarMobileMenu = ({
1175
1175
  children,
1176
1176
  className,
1177
1177
  contentClassName,
1178
+ closeContainerClassName = "",
1178
1179
  title = "Mobile Navigation"
1179
1180
  }) => {
1180
1181
  React.useEffect(() => {
@@ -1199,18 +1200,27 @@ var NavbarMobileMenu = ({
1199
1200
  "data-state": open ? "open" : "closed",
1200
1201
  children: [
1201
1202
  /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
1202
- /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxs(
1203
- "button",
1203
+ /* @__PURE__ */ jsx(
1204
+ "div",
1204
1205
  {
1205
- onClick: onClose,
1206
- className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1207
- "aria-label": "Close mobile menu",
1208
- children: [
1209
- /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1210
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1211
- ]
1206
+ className: cn(
1207
+ closeContainerClassName,
1208
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
1209
+ ),
1210
+ children: /* @__PURE__ */ jsxs(
1211
+ "button",
1212
+ {
1213
+ onClick: onClose,
1214
+ className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1215
+ "aria-label": "Close mobile menu",
1216
+ children: [
1217
+ /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1218
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1219
+ ]
1220
+ }
1221
+ )
1212
1222
  }
1213
- ) }),
1223
+ ),
1214
1224
  /* @__PURE__ */ jsx(
1215
1225
  "div",
1216
1226
  {
@@ -1198,6 +1198,7 @@ var NavbarMobileMenu = ({
1198
1198
  children,
1199
1199
  className,
1200
1200
  contentClassName,
1201
+ closeContainerClassName = "",
1201
1202
  title = "Mobile Navigation"
1202
1203
  }) => {
1203
1204
  React__namespace.useEffect(() => {
@@ -1222,18 +1223,27 @@ var NavbarMobileMenu = ({
1222
1223
  "data-state": open ? "open" : "closed",
1223
1224
  children: [
1224
1225
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
1225
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
1226
- "button",
1226
+ /* @__PURE__ */ jsxRuntime.jsx(
1227
+ "div",
1227
1228
  {
1228
- onClick: onClose,
1229
- className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1230
- "aria-label": "Close mobile menu",
1231
- children: [
1232
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1233
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1234
- ]
1229
+ className: cn(
1230
+ closeContainerClassName,
1231
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
1232
+ ),
1233
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1234
+ "button",
1235
+ {
1236
+ onClick: onClose,
1237
+ className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1238
+ "aria-label": "Close mobile menu",
1239
+ children: [
1240
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1241
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1242
+ ]
1243
+ }
1244
+ )
1235
1245
  }
1236
- ) }),
1246
+ ),
1237
1247
  /* @__PURE__ */ jsxRuntime.jsx(
1238
1248
  "div",
1239
1249
  {
@@ -1455,8 +1465,8 @@ var NavbarMultiColumnGroups = ({
1455
1465
  open,
1456
1466
  setOpen,
1457
1467
  navigation: navigation ?? [],
1458
- authActions: mobileAuthActions,
1459
- authActionsSlot: mobileAuthActionsSlot
1468
+ authActions: mobileAuthActions ?? authActions,
1469
+ authActionsSlot: mobileAuthActionsSlot ?? authActionsSlot
1460
1470
  }
1461
1471
  )
1462
1472
  ] });
@@ -1553,29 +1563,36 @@ var MobileNavigationMenu = ({
1553
1563
  className: "border-b-0",
1554
1564
  children: [
1555
1565
  /* @__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 }),
1556
- /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
1557
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 px-4 text-[10px] text-muted-foreground uppercase", children: group.title }),
1558
- group.links.map((link, linkIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
1559
- Pressable,
1560
- {
1561
- href: link.url,
1562
- className: "flex min-h-12 items-center gap-2 rounded-lg px-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
1563
- onClick: handleClose,
1564
- children: [
1565
- link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
1566
- DynamicIcon,
1567
- {
1568
- name: link.iconName,
1569
- size: 16,
1570
- className: "stroke-muted-foreground"
1571
- }
1572
- ) : null,
1573
- link.label
1574
- ]
1575
- },
1576
- `mobile-link-${groupIndex}-${linkIndex}`
1577
- ))
1578
- ] }, `mobile-group-${groupIndex}`)) })
1566
+ /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
1567
+ "div",
1568
+ {
1569
+ className: "mb-4",
1570
+ children: [
1571
+ group.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 px-4 text-xs font-semibold text-muted-foreground uppercase", children: group.title }),
1572
+ group.links.map((link, linkIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
1573
+ Pressable,
1574
+ {
1575
+ href: link.url,
1576
+ className: "flex min-h-12 items-center gap-2 rounded-lg px-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
1577
+ onClick: handleClose,
1578
+ children: [
1579
+ link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
1580
+ DynamicIcon,
1581
+ {
1582
+ name: link.iconName,
1583
+ size: 16,
1584
+ className: "stroke-muted-foreground"
1585
+ }
1586
+ ) : null,
1587
+ link.label
1588
+ ]
1589
+ },
1590
+ `mobile-link-${groupIndex}-${linkIndex}`
1591
+ ))
1592
+ ]
1593
+ },
1594
+ `mobile-group-${groupIndex}`
1595
+ )) })
1579
1596
  ]
1580
1597
  },
1581
1598
  `nav-item-${index}`
@@ -1175,6 +1175,7 @@ var NavbarMobileMenu = ({
1175
1175
  children,
1176
1176
  className,
1177
1177
  contentClassName,
1178
+ closeContainerClassName = "",
1178
1179
  title = "Mobile Navigation"
1179
1180
  }) => {
1180
1181
  React.useEffect(() => {
@@ -1199,18 +1200,27 @@ var NavbarMobileMenu = ({
1199
1200
  "data-state": open ? "open" : "closed",
1200
1201
  children: [
1201
1202
  /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
1202
- /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxs(
1203
- "button",
1203
+ /* @__PURE__ */ jsx(
1204
+ "div",
1204
1205
  {
1205
- onClick: onClose,
1206
- className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1207
- "aria-label": "Close mobile menu",
1208
- children: [
1209
- /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1210
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1211
- ]
1206
+ className: cn(
1207
+ closeContainerClassName,
1208
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
1209
+ ),
1210
+ children: /* @__PURE__ */ jsxs(
1211
+ "button",
1212
+ {
1213
+ onClick: onClose,
1214
+ className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1215
+ "aria-label": "Close mobile menu",
1216
+ children: [
1217
+ /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1218
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1219
+ ]
1220
+ }
1221
+ )
1212
1222
  }
1213
- ) }),
1223
+ ),
1214
1224
  /* @__PURE__ */ jsx(
1215
1225
  "div",
1216
1226
  {
@@ -1432,8 +1442,8 @@ var NavbarMultiColumnGroups = ({
1432
1442
  open,
1433
1443
  setOpen,
1434
1444
  navigation: navigation ?? [],
1435
- authActions: mobileAuthActions,
1436
- authActionsSlot: mobileAuthActionsSlot
1445
+ authActions: mobileAuthActions ?? authActions,
1446
+ authActionsSlot: mobileAuthActionsSlot ?? authActionsSlot
1437
1447
  }
1438
1448
  )
1439
1449
  ] });
@@ -1530,29 +1540,36 @@ var MobileNavigationMenu = ({
1530
1540
  className: "border-b-0",
1531
1541
  children: [
1532
1542
  /* @__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 }),
1533
- /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
1534
- /* @__PURE__ */ jsx("p", { className: "mb-2 px-4 text-[10px] text-muted-foreground uppercase", children: group.title }),
1535
- group.links.map((link, linkIndex) => /* @__PURE__ */ jsxs(
1536
- Pressable,
1537
- {
1538
- href: link.url,
1539
- className: "flex min-h-12 items-center gap-2 rounded-lg px-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
1540
- onClick: handleClose,
1541
- children: [
1542
- link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsx(
1543
- DynamicIcon,
1544
- {
1545
- name: link.iconName,
1546
- size: 16,
1547
- className: "stroke-muted-foreground"
1548
- }
1549
- ) : null,
1550
- link.label
1551
- ]
1552
- },
1553
- `mobile-link-${groupIndex}-${linkIndex}`
1554
- ))
1555
- ] }, `mobile-group-${groupIndex}`)) })
1543
+ /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(
1544
+ "div",
1545
+ {
1546
+ className: "mb-4",
1547
+ children: [
1548
+ group.title && /* @__PURE__ */ jsx("p", { className: "mt-4 px-4 text-xs font-semibold text-muted-foreground uppercase", children: group.title }),
1549
+ group.links.map((link, linkIndex) => /* @__PURE__ */ jsxs(
1550
+ Pressable,
1551
+ {
1552
+ href: link.url,
1553
+ className: "flex min-h-12 items-center gap-2 rounded-lg px-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
1554
+ onClick: handleClose,
1555
+ children: [
1556
+ link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsx(
1557
+ DynamicIcon,
1558
+ {
1559
+ name: link.iconName,
1560
+ size: 16,
1561
+ className: "stroke-muted-foreground"
1562
+ }
1563
+ ) : null,
1564
+ link.label
1565
+ ]
1566
+ },
1567
+ `mobile-link-${groupIndex}-${linkIndex}`
1568
+ ))
1569
+ ]
1570
+ },
1571
+ `mobile-group-${groupIndex}`
1572
+ )) })
1556
1573
  ]
1557
1574
  },
1558
1575
  `nav-item-${index}`
@@ -1198,6 +1198,7 @@ var NavbarMobileMenu = ({
1198
1198
  children,
1199
1199
  className,
1200
1200
  contentClassName,
1201
+ closeContainerClassName = "",
1201
1202
  title = "Mobile Navigation"
1202
1203
  }) => {
1203
1204
  React__namespace.useEffect(() => {
@@ -1222,18 +1223,27 @@ var NavbarMobileMenu = ({
1222
1223
  "data-state": open ? "open" : "closed",
1223
1224
  children: [
1224
1225
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
1225
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
1226
- "button",
1226
+ /* @__PURE__ */ jsxRuntime.jsx(
1227
+ "div",
1227
1228
  {
1228
- onClick: onClose,
1229
- className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1230
- "aria-label": "Close mobile menu",
1231
- children: [
1232
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1233
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1234
- ]
1229
+ className: cn(
1230
+ closeContainerClassName,
1231
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
1232
+ ),
1233
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1234
+ "button",
1235
+ {
1236
+ onClick: onClose,
1237
+ className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1238
+ "aria-label": "Close mobile menu",
1239
+ children: [
1240
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1241
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1242
+ ]
1243
+ }
1244
+ )
1235
1245
  }
1236
- ) }),
1246
+ ),
1237
1247
  /* @__PURE__ */ jsxRuntime.jsx(
1238
1248
  "div",
1239
1249
  {
@@ -1175,6 +1175,7 @@ var NavbarMobileMenu = ({
1175
1175
  children,
1176
1176
  className,
1177
1177
  contentClassName,
1178
+ closeContainerClassName = "",
1178
1179
  title = "Mobile Navigation"
1179
1180
  }) => {
1180
1181
  React.useEffect(() => {
@@ -1199,18 +1200,27 @@ var NavbarMobileMenu = ({
1199
1200
  "data-state": open ? "open" : "closed",
1200
1201
  children: [
1201
1202
  /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
1202
- /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxs(
1203
- "button",
1203
+ /* @__PURE__ */ jsx(
1204
+ "div",
1204
1205
  {
1205
- onClick: onClose,
1206
- className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1207
- "aria-label": "Close mobile menu",
1208
- children: [
1209
- /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1210
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1211
- ]
1206
+ className: cn(
1207
+ closeContainerClassName,
1208
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
1209
+ ),
1210
+ children: /* @__PURE__ */ jsxs(
1211
+ "button",
1212
+ {
1213
+ onClick: onClose,
1214
+ className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1215
+ "aria-label": "Close mobile menu",
1216
+ children: [
1217
+ /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1218
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1219
+ ]
1220
+ }
1221
+ )
1212
1222
  }
1213
- ) }),
1223
+ ),
1214
1224
  /* @__PURE__ */ jsx(
1215
1225
  "div",
1216
1226
  {
@@ -1093,6 +1093,7 @@ var NavbarMobileMenu = ({
1093
1093
  children,
1094
1094
  className,
1095
1095
  contentClassName,
1096
+ closeContainerClassName = "",
1096
1097
  title = "Mobile Navigation"
1097
1098
  }) => {
1098
1099
  React__namespace.useEffect(() => {
@@ -1117,18 +1118,27 @@ var NavbarMobileMenu = ({
1117
1118
  "data-state": open ? "open" : "closed",
1118
1119
  children: [
1119
1120
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
1120
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
1121
- "button",
1121
+ /* @__PURE__ */ jsxRuntime.jsx(
1122
+ "div",
1122
1123
  {
1123
- onClick: onClose,
1124
- className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1125
- "aria-label": "Close mobile menu",
1126
- children: [
1127
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1128
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1129
- ]
1124
+ className: cn(
1125
+ closeContainerClassName,
1126
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
1127
+ ),
1128
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1129
+ "button",
1130
+ {
1131
+ onClick: onClose,
1132
+ className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1133
+ "aria-label": "Close mobile menu",
1134
+ children: [
1135
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1136
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1137
+ ]
1138
+ }
1139
+ )
1130
1140
  }
1131
- ) }),
1141
+ ),
1132
1142
  /* @__PURE__ */ jsxRuntime.jsx(
1133
1143
  "div",
1134
1144
  {