@opensite/ui 1.0.9 → 1.1.1

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 +30 -19
  2. package/dist/navbar-animated-preview.js +30 -19
  3. package/dist/navbar-centered-menu.cjs +21 -10
  4. package/dist/navbar-centered-menu.js +21 -10
  5. package/dist/navbar-dark-icons.cjs +21 -10
  6. package/dist/navbar-dark-icons.js +21 -10
  7. package/dist/navbar-dropdown-menu.cjs +21 -10
  8. package/dist/navbar-dropdown-menu.js +21 -10
  9. package/dist/navbar-education-platform.cjs +82 -56
  10. package/dist/navbar-education-platform.js +82 -56
  11. package/dist/navbar-enterprise-mega.cjs +22 -11
  12. package/dist/navbar-enterprise-mega.js +22 -11
  13. package/dist/navbar-feature-grid.cjs +21 -10
  14. package/dist/navbar-feature-grid.js +21 -10
  15. package/dist/navbar-icon-links.cjs +21 -10
  16. package/dist/navbar-icon-links.js +21 -10
  17. package/dist/navbar-image-preview.cjs +21 -10
  18. package/dist/navbar-image-preview.js +21 -10
  19. package/dist/navbar-mega-menu.cjs +21 -10
  20. package/dist/navbar-mega-menu.js +21 -10
  21. package/dist/navbar-multi-column-groups.cjs +53 -35
  22. package/dist/navbar-multi-column-groups.js +53 -35
  23. package/dist/navbar-platform-resources.cjs +21 -10
  24. package/dist/navbar-platform-resources.js +21 -10
  25. package/dist/navbar-search-focused.cjs +192 -103
  26. package/dist/navbar-search-focused.js +192 -103
  27. package/dist/navbar-sidebar-mobile.cjs +22 -10
  28. package/dist/navbar-sidebar-mobile.js +22 -10
  29. package/dist/navbar-simple-links.cjs +23 -12
  30. package/dist/navbar-simple-links.js +23 -12
  31. package/dist/navbar-split-cta.cjs +21 -10
  32. package/dist/navbar-split-cta.js +21 -10
  33. package/dist/navbar-sticky-compact.cjs +231 -123
  34. package/dist/navbar-sticky-compact.js +230 -123
  35. package/dist/navbar-tabbed-sections.cjs +21 -10
  36. package/dist/navbar-tabbed-sections.js +21 -10
  37. package/dist/navbar-transparent-overlay.cjs +23 -10
  38. package/dist/navbar-transparent-overlay.js +23 -10
  39. package/dist/registry.cjs +435 -302
  40. package/dist/registry.js +435 -302
  41. package/package.json +1 -1
@@ -1012,6 +1012,8 @@ var NavbarMobileMenu = ({
1012
1012
  children,
1013
1013
  className,
1014
1014
  contentClassName,
1015
+ closeContainerClassName,
1016
+ closeIconClassName,
1015
1017
  title = "Mobile Navigation"
1016
1018
  }) => {
1017
1019
  React.useEffect(() => {
@@ -1036,18 +1038,27 @@ var NavbarMobileMenu = ({
1036
1038
  "data-state": open ? "open" : "closed",
1037
1039
  children: [
1038
1040
  /* @__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",
1041
+ /* @__PURE__ */ jsx(
1042
+ "div",
1041
1043
  {
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
- ]
1044
+ className: cn(
1045
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1046
+ closeContainerClassName
1047
+ ),
1048
+ children: /* @__PURE__ */ jsxs(
1049
+ "button",
1050
+ {
1051
+ onClick: onClose,
1052
+ 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",
1053
+ "aria-label": "Close mobile menu",
1054
+ children: [
1055
+ /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1056
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1057
+ ]
1058
+ }
1059
+ )
1049
1060
  }
1050
- ) }),
1061
+ ),
1051
1062
  /* @__PURE__ */ jsx(
1052
1063
  "div",
1053
1064
  {
@@ -1198,6 +1198,8 @@ var NavbarMobileMenu = ({
1198
1198
  children,
1199
1199
  className,
1200
1200
  contentClassName,
1201
+ closeContainerClassName,
1202
+ closeIconClassName,
1201
1203
  title = "Mobile Navigation"
1202
1204
  }) => {
1203
1205
  React__namespace.useEffect(() => {
@@ -1222,18 +1224,27 @@ var NavbarMobileMenu = ({
1222
1224
  "data-state": open ? "open" : "closed",
1223
1225
  children: [
1224
1226
  /* @__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",
1227
+ /* @__PURE__ */ jsxRuntime.jsx(
1228
+ "div",
1227
1229
  {
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
- ]
1230
+ className: cn(
1231
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1232
+ closeContainerClassName
1233
+ ),
1234
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1235
+ "button",
1236
+ {
1237
+ onClick: onClose,
1238
+ 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",
1239
+ "aria-label": "Close mobile menu",
1240
+ children: [
1241
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1242
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1243
+ ]
1244
+ }
1245
+ )
1235
1246
  }
1236
- ) }),
1247
+ ),
1237
1248
  /* @__PURE__ */ jsxRuntime.jsx(
1238
1249
  "div",
1239
1250
  {
@@ -1175,6 +1175,8 @@ var NavbarMobileMenu = ({
1175
1175
  children,
1176
1176
  className,
1177
1177
  contentClassName,
1178
+ closeContainerClassName,
1179
+ closeIconClassName,
1178
1180
  title = "Mobile Navigation"
1179
1181
  }) => {
1180
1182
  React.useEffect(() => {
@@ -1199,18 +1201,27 @@ var NavbarMobileMenu = ({
1199
1201
  "data-state": open ? "open" : "closed",
1200
1202
  children: [
1201
1203
  /* @__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",
1204
+ /* @__PURE__ */ jsx(
1205
+ "div",
1204
1206
  {
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
- ]
1207
+ className: cn(
1208
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1209
+ closeContainerClassName
1210
+ ),
1211
+ children: /* @__PURE__ */ jsxs(
1212
+ "button",
1213
+ {
1214
+ onClick: onClose,
1215
+ 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",
1216
+ "aria-label": "Close mobile menu",
1217
+ children: [
1218
+ /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1219
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1220
+ ]
1221
+ }
1222
+ )
1212
1223
  }
1213
- ) }),
1224
+ ),
1214
1225
  /* @__PURE__ */ jsx(
1215
1226
  "div",
1216
1227
  {
@@ -1198,6 +1198,8 @@ var NavbarMobileMenu = ({
1198
1198
  children,
1199
1199
  className,
1200
1200
  contentClassName,
1201
+ closeContainerClassName,
1202
+ closeIconClassName,
1201
1203
  title = "Mobile Navigation"
1202
1204
  }) => {
1203
1205
  React__namespace.useEffect(() => {
@@ -1222,18 +1224,27 @@ var NavbarMobileMenu = ({
1222
1224
  "data-state": open ? "open" : "closed",
1223
1225
  children: [
1224
1226
  /* @__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",
1227
+ /* @__PURE__ */ jsxRuntime.jsx(
1228
+ "div",
1227
1229
  {
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
- ]
1230
+ className: cn(
1231
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1232
+ closeContainerClassName
1233
+ ),
1234
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1235
+ "button",
1236
+ {
1237
+ onClick: onClose,
1238
+ 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",
1239
+ "aria-label": "Close mobile menu",
1240
+ children: [
1241
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1242
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1243
+ ]
1244
+ }
1245
+ )
1235
1246
  }
1236
- ) }),
1247
+ ),
1237
1248
  /* @__PURE__ */ jsxRuntime.jsx(
1238
1249
  "div",
1239
1250
  {
@@ -1175,6 +1175,8 @@ var NavbarMobileMenu = ({
1175
1175
  children,
1176
1176
  className,
1177
1177
  contentClassName,
1178
+ closeContainerClassName,
1179
+ closeIconClassName,
1178
1180
  title = "Mobile Navigation"
1179
1181
  }) => {
1180
1182
  React.useEffect(() => {
@@ -1199,18 +1201,27 @@ var NavbarMobileMenu = ({
1199
1201
  "data-state": open ? "open" : "closed",
1200
1202
  children: [
1201
1203
  /* @__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",
1204
+ /* @__PURE__ */ jsx(
1205
+ "div",
1204
1206
  {
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
- ]
1207
+ className: cn(
1208
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1209
+ closeContainerClassName
1210
+ ),
1211
+ children: /* @__PURE__ */ jsxs(
1212
+ "button",
1213
+ {
1214
+ onClick: onClose,
1215
+ 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",
1216
+ "aria-label": "Close mobile menu",
1217
+ children: [
1218
+ /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1219
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1220
+ ]
1221
+ }
1222
+ )
1212
1223
  }
1213
- ) }),
1224
+ ),
1214
1225
  /* @__PURE__ */ jsx(
1215
1226
  "div",
1216
1227
  {
@@ -1198,6 +1198,8 @@ var NavbarMobileMenu = ({
1198
1198
  children,
1199
1199
  className,
1200
1200
  contentClassName,
1201
+ closeContainerClassName,
1202
+ closeIconClassName,
1201
1203
  title = "Mobile Navigation"
1202
1204
  }) => {
1203
1205
  React__namespace.useEffect(() => {
@@ -1222,18 +1224,27 @@ var NavbarMobileMenu = ({
1222
1224
  "data-state": open ? "open" : "closed",
1223
1225
  children: [
1224
1226
  /* @__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",
1227
+ /* @__PURE__ */ jsxRuntime.jsx(
1228
+ "div",
1227
1229
  {
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
- ]
1230
+ className: cn(
1231
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1232
+ closeContainerClassName
1233
+ ),
1234
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1235
+ "button",
1236
+ {
1237
+ onClick: onClose,
1238
+ 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",
1239
+ "aria-label": "Close mobile menu",
1240
+ children: [
1241
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1242
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1243
+ ]
1244
+ }
1245
+ )
1235
1246
  }
1236
- ) }),
1247
+ ),
1237
1248
  /* @__PURE__ */ jsxRuntime.jsx(
1238
1249
  "div",
1239
1250
  {
@@ -1455,8 +1466,8 @@ var NavbarMultiColumnGroups = ({
1455
1466
  open,
1456
1467
  setOpen,
1457
1468
  navigation: navigation ?? [],
1458
- authActions: mobileAuthActions,
1459
- authActionsSlot: mobileAuthActionsSlot
1469
+ authActions: mobileAuthActions ?? authActions,
1470
+ authActionsSlot: mobileAuthActionsSlot ?? authActionsSlot
1460
1471
  }
1461
1472
  )
1462
1473
  ] });
@@ -1553,29 +1564,36 @@ var MobileNavigationMenu = ({
1553
1564
  className: "border-b-0",
1554
1565
  children: [
1555
1566
  /* @__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}`)) })
1567
+ /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
1568
+ "div",
1569
+ {
1570
+ className: "mb-4",
1571
+ children: [
1572
+ group.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 px-4 text-xs font-semibold text-muted-foreground uppercase", children: group.title }),
1573
+ group.links.map((link, linkIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
1574
+ Pressable,
1575
+ {
1576
+ href: link.url,
1577
+ 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",
1578
+ onClick: handleClose,
1579
+ children: [
1580
+ link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
1581
+ DynamicIcon,
1582
+ {
1583
+ name: link.iconName,
1584
+ size: 16,
1585
+ className: "stroke-muted-foreground"
1586
+ }
1587
+ ) : null,
1588
+ link.label
1589
+ ]
1590
+ },
1591
+ `mobile-link-${groupIndex}-${linkIndex}`
1592
+ ))
1593
+ ]
1594
+ },
1595
+ `mobile-group-${groupIndex}`
1596
+ )) })
1579
1597
  ]
1580
1598
  },
1581
1599
  `nav-item-${index}`
@@ -1175,6 +1175,8 @@ var NavbarMobileMenu = ({
1175
1175
  children,
1176
1176
  className,
1177
1177
  contentClassName,
1178
+ closeContainerClassName,
1179
+ closeIconClassName,
1178
1180
  title = "Mobile Navigation"
1179
1181
  }) => {
1180
1182
  React.useEffect(() => {
@@ -1199,18 +1201,27 @@ var NavbarMobileMenu = ({
1199
1201
  "data-state": open ? "open" : "closed",
1200
1202
  children: [
1201
1203
  /* @__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",
1204
+ /* @__PURE__ */ jsx(
1205
+ "div",
1204
1206
  {
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
- ]
1207
+ className: cn(
1208
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1209
+ closeContainerClassName
1210
+ ),
1211
+ children: /* @__PURE__ */ jsxs(
1212
+ "button",
1213
+ {
1214
+ onClick: onClose,
1215
+ 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",
1216
+ "aria-label": "Close mobile menu",
1217
+ children: [
1218
+ /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1219
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1220
+ ]
1221
+ }
1222
+ )
1212
1223
  }
1213
- ) }),
1224
+ ),
1214
1225
  /* @__PURE__ */ jsx(
1215
1226
  "div",
1216
1227
  {
@@ -1432,8 +1443,8 @@ var NavbarMultiColumnGroups = ({
1432
1443
  open,
1433
1444
  setOpen,
1434
1445
  navigation: navigation ?? [],
1435
- authActions: mobileAuthActions,
1436
- authActionsSlot: mobileAuthActionsSlot
1446
+ authActions: mobileAuthActions ?? authActions,
1447
+ authActionsSlot: mobileAuthActionsSlot ?? authActionsSlot
1437
1448
  }
1438
1449
  )
1439
1450
  ] });
@@ -1530,29 +1541,36 @@ var MobileNavigationMenu = ({
1530
1541
  className: "border-b-0",
1531
1542
  children: [
1532
1543
  /* @__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}`)) })
1544
+ /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(
1545
+ "div",
1546
+ {
1547
+ className: "mb-4",
1548
+ children: [
1549
+ group.title && /* @__PURE__ */ jsx("p", { className: "mt-4 px-4 text-xs font-semibold text-muted-foreground uppercase", children: group.title }),
1550
+ group.links.map((link, linkIndex) => /* @__PURE__ */ jsxs(
1551
+ Pressable,
1552
+ {
1553
+ href: link.url,
1554
+ 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",
1555
+ onClick: handleClose,
1556
+ children: [
1557
+ link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsx(
1558
+ DynamicIcon,
1559
+ {
1560
+ name: link.iconName,
1561
+ size: 16,
1562
+ className: "stroke-muted-foreground"
1563
+ }
1564
+ ) : null,
1565
+ link.label
1566
+ ]
1567
+ },
1568
+ `mobile-link-${groupIndex}-${linkIndex}`
1569
+ ))
1570
+ ]
1571
+ },
1572
+ `mobile-group-${groupIndex}`
1573
+ )) })
1556
1574
  ]
1557
1575
  },
1558
1576
  `nav-item-${index}`
@@ -1198,6 +1198,8 @@ var NavbarMobileMenu = ({
1198
1198
  children,
1199
1199
  className,
1200
1200
  contentClassName,
1201
+ closeContainerClassName,
1202
+ closeIconClassName,
1201
1203
  title = "Mobile Navigation"
1202
1204
  }) => {
1203
1205
  React__namespace.useEffect(() => {
@@ -1222,18 +1224,27 @@ var NavbarMobileMenu = ({
1222
1224
  "data-state": open ? "open" : "closed",
1223
1225
  children: [
1224
1226
  /* @__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",
1227
+ /* @__PURE__ */ jsxRuntime.jsx(
1228
+ "div",
1227
1229
  {
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
- ]
1230
+ className: cn(
1231
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1232
+ closeContainerClassName
1233
+ ),
1234
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1235
+ "button",
1236
+ {
1237
+ onClick: onClose,
1238
+ 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",
1239
+ "aria-label": "Close mobile menu",
1240
+ children: [
1241
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1242
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1243
+ ]
1244
+ }
1245
+ )
1235
1246
  }
1236
- ) }),
1247
+ ),
1237
1248
  /* @__PURE__ */ jsxRuntime.jsx(
1238
1249
  "div",
1239
1250
  {
@@ -1175,6 +1175,8 @@ var NavbarMobileMenu = ({
1175
1175
  children,
1176
1176
  className,
1177
1177
  contentClassName,
1178
+ closeContainerClassName,
1179
+ closeIconClassName,
1178
1180
  title = "Mobile Navigation"
1179
1181
  }) => {
1180
1182
  React.useEffect(() => {
@@ -1199,18 +1201,27 @@ var NavbarMobileMenu = ({
1199
1201
  "data-state": open ? "open" : "closed",
1200
1202
  children: [
1201
1203
  /* @__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",
1204
+ /* @__PURE__ */ jsx(
1205
+ "div",
1204
1206
  {
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
- ]
1207
+ className: cn(
1208
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1209
+ closeContainerClassName
1210
+ ),
1211
+ children: /* @__PURE__ */ jsxs(
1212
+ "button",
1213
+ {
1214
+ onClick: onClose,
1215
+ 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",
1216
+ "aria-label": "Close mobile menu",
1217
+ children: [
1218
+ /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1219
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1220
+ ]
1221
+ }
1222
+ )
1212
1223
  }
1213
- ) }),
1224
+ ),
1214
1225
  /* @__PURE__ */ jsx(
1215
1226
  "div",
1216
1227
  {