@opensite/ui 1.0.3 → 1.0.5

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 (47) hide show
  1. package/dist/navbar-animated-preview.cjs +67 -82
  2. package/dist/navbar-animated-preview.js +67 -81
  3. package/dist/navbar-centered-menu.cjs +101 -125
  4. package/dist/navbar-centered-menu.js +101 -124
  5. package/dist/navbar-dark-icons.cjs +67 -81
  6. package/dist/navbar-dark-icons.js +67 -80
  7. package/dist/navbar-dropdown-menu.cjs +87 -122
  8. package/dist/navbar-dropdown-menu.js +87 -121
  9. package/dist/navbar-education-platform.cjs +1 -1
  10. package/dist/navbar-education-platform.js +1 -1
  11. package/dist/navbar-enterprise-mega.cjs +7 -7
  12. package/dist/navbar-enterprise-mega.js +7 -7
  13. package/dist/navbar-feature-grid.cjs +131 -150
  14. package/dist/navbar-feature-grid.d.cts +9 -1
  15. package/dist/navbar-feature-grid.d.ts +9 -1
  16. package/dist/navbar-feature-grid.js +131 -149
  17. package/dist/navbar-floating-pill.cjs +2 -2
  18. package/dist/navbar-floating-pill.js +2 -2
  19. package/dist/navbar-fullscreen-menu.cjs +1 -1
  20. package/dist/navbar-fullscreen-menu.js +1 -1
  21. package/dist/navbar-icon-links.cjs +102 -138
  22. package/dist/navbar-icon-links.js +102 -137
  23. package/dist/navbar-image-preview.cjs +64 -95
  24. package/dist/navbar-image-preview.js +64 -94
  25. package/dist/navbar-mega-menu.cjs +1 -1
  26. package/dist/navbar-mega-menu.js +1 -1
  27. package/dist/navbar-multi-column-groups.cjs +67 -81
  28. package/dist/navbar-multi-column-groups.js +67 -80
  29. package/dist/navbar-platform-resources.cjs +80 -42
  30. package/dist/navbar-platform-resources.js +80 -42
  31. package/dist/navbar-search-focused.cjs +76 -93
  32. package/dist/navbar-search-focused.js +76 -92
  33. package/dist/navbar-sidebar-mobile.cjs +76 -93
  34. package/dist/navbar-sidebar-mobile.js +76 -92
  35. package/dist/navbar-simple-links.cjs +1 -1
  36. package/dist/navbar-simple-links.js +1 -1
  37. package/dist/navbar-split-cta.cjs +78 -95
  38. package/dist/navbar-split-cta.js +78 -94
  39. package/dist/navbar-sticky-compact.cjs +82 -100
  40. package/dist/navbar-sticky-compact.js +82 -99
  41. package/dist/navbar-tabbed-sections.cjs +91 -115
  42. package/dist/navbar-tabbed-sections.js +91 -114
  43. package/dist/navbar-transparent-overlay.cjs +1 -1
  44. package/dist/navbar-transparent-overlay.js +1 -1
  45. package/dist/registry.cjs +594 -618
  46. package/dist/registry.js +593 -617
  47. package/package.json +1 -1
@@ -9,7 +9,6 @@ var jsxRuntime = require('react/jsx-runtime');
9
9
  var img = require('@page-speed/img');
10
10
  var AccordionPrimitive = require('@radix-ui/react-accordion');
11
11
  var NavigationMenuPrimitive = require('@radix-ui/react-navigation-menu');
12
- var SheetPrimitive = require('@radix-ui/react-dialog');
13
12
 
14
13
  function _interopNamespace(e) {
15
14
  if (e && e.__esModule) return e;
@@ -32,7 +31,6 @@ function _interopNamespace(e) {
32
31
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
33
32
  var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
34
33
  var NavigationMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(NavigationMenuPrimitive);
35
- var SheetPrimitive__namespace = /*#__PURE__*/_interopNamespace(SheetPrimitive);
36
34
 
37
35
  // components/blocks/navbars/navbar-multi-column-groups.tsx
38
36
  function cn(...inputs) {
@@ -828,14 +826,14 @@ function PatternBackground({
828
826
  );
829
827
  }
830
828
  if (pattern in patternOverlays) {
831
- const Overlay2 = patternOverlays[pattern];
829
+ const Overlay = patternOverlays[pattern];
832
830
  return /* @__PURE__ */ jsxRuntime.jsx(
833
831
  "div",
834
832
  {
835
833
  className: cn("pointer-events-none absolute inset-0 z-0", className),
836
834
  style: { opacity, ...style },
837
835
  "aria-hidden": "true",
838
- children: Overlay2()
836
+ children: Overlay()
839
837
  }
840
838
  );
841
839
  }
@@ -1194,75 +1192,62 @@ function NavigationMenuLink({
1194
1192
  }
1195
1193
  );
1196
1194
  }
1197
- function Sheet({ ...props }) {
1198
- return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Root, { "data-slot": "sheet", ...props });
1199
- }
1200
- function SheetPortal({
1201
- ...props
1202
- }) {
1203
- return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Portal, { "data-slot": "sheet-portal", ...props });
1204
- }
1205
- function SheetOverlay({
1195
+ var NavbarMobileMenu = ({
1196
+ open,
1197
+ onClose,
1198
+ children,
1206
1199
  className,
1207
- ...props
1208
- }) {
1209
- return /* @__PURE__ */ jsxRuntime.jsx(
1210
- SheetPrimitive__namespace.Overlay,
1200
+ contentClassName,
1201
+ title = "Mobile Navigation"
1202
+ }) => {
1203
+ React__namespace.useEffect(() => {
1204
+ if (open) {
1205
+ const originalOverflow = document.body.style.overflow;
1206
+ document.body.style.overflow = "hidden";
1207
+ return () => {
1208
+ document.body.style.overflow = originalOverflow;
1209
+ };
1210
+ }
1211
+ }, [open]);
1212
+ if (!open) return null;
1213
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1214
+ "div",
1211
1215
  {
1212
- "data-slot": "sheet-overlay",
1213
1216
  className: cn(
1214
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
1217
+ "fixed inset-0 z-[998] flex flex-col bg-background",
1218
+ "animate-in slide-in-from-top duration-300",
1219
+ "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
1215
1220
  className
1216
1221
  ),
1217
- ...props
1218
- }
1219
- );
1220
- }
1221
- function SheetContent({
1222
- className,
1223
- children,
1224
- side = "right",
1225
- ...props
1226
- }) {
1227
- return /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
1228
- /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
1229
- /* @__PURE__ */ jsxRuntime.jsxs(
1230
- SheetPrimitive__namespace.Content,
1231
- {
1232
- "data-slot": "sheet-content",
1233
- className: cn(
1234
- "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
1235
- side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
1236
- side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
1237
- side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
1238
- side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
1239
- className
1240
- ),
1241
- ...props,
1242
- children: [
1243
- children,
1244
- /* @__PURE__ */ jsxRuntime.jsxs(SheetPrimitive__namespace.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
1245
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1246
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1247
- ] })
1248
- ]
1249
- }
1250
- )
1251
- ] });
1252
- }
1253
- function SheetTitle({
1254
- className,
1255
- ...props
1256
- }) {
1257
- return /* @__PURE__ */ jsxRuntime.jsx(
1258
- SheetPrimitive__namespace.Title,
1259
- {
1260
- "data-slot": "sheet-title",
1261
- className: cn("text-foreground font-semibold", className),
1262
- ...props
1222
+ "data-state": open ? "open" : "closed",
1223
+ children: [
1224
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
1225
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
1226
+ "button",
1227
+ {
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
+ ]
1235
+ }
1236
+ ) }),
1237
+ /* @__PURE__ */ jsxRuntime.jsx(
1238
+ "div",
1239
+ {
1240
+ className: cn(
1241
+ "h-full overflow-y-auto pt-20 pb-8 px-4 sm:px-6",
1242
+ contentClassName
1243
+ ),
1244
+ children
1245
+ }
1246
+ )
1247
+ ]
1263
1248
  }
1264
1249
  );
1265
- }
1250
+ };
1266
1251
 
1267
1252
  // components/blocks/navbars/layout-variant-utils.ts
1268
1253
  function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks", customClasses) {
@@ -1279,7 +1264,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
1279
1264
  // Outer container wrapper (only for floating bar - this containerizes the entire navbar)
1280
1265
  containerWrapperClasses: cn(
1281
1266
  "w-full",
1282
- isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
1267
+ isFloatingBar && "mx-auto container relative z-10 px-0 sm:px-0 lg:px-0"
1283
1268
  ),
1284
1269
  // Inner container classes (only for fullScreenContainerizedLinks - this containerizes the content inside the navbar)
1285
1270
  innerContainerClasses: cn(
@@ -1472,6 +1457,7 @@ var NavbarMultiColumnGroups = ({
1472
1457
  MobileNavigationMenu,
1473
1458
  {
1474
1459
  open,
1460
+ setOpen,
1475
1461
  navigation: navigation ?? [],
1476
1462
  authActions: mobileAuthActions,
1477
1463
  authActionsSlot: mobileAuthActionsSlot
@@ -1522,6 +1508,7 @@ var DesktopMenuItem = ({ item, index }) => {
1522
1508
  };
1523
1509
  var MobileNavigationMenu = ({
1524
1510
  open,
1511
+ setOpen,
1525
1512
  navigation,
1526
1513
  authActions,
1527
1514
  authActionsSlot
@@ -1554,23 +1541,22 @@ var MobileNavigationMenu = ({
1554
1541
  );
1555
1542
  }) });
1556
1543
  }, [authActionsSlot, authActions]);
1557
- return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open, children: /* @__PURE__ */ jsxRuntime.jsx(
1558
- SheetContent,
1544
+ return /* @__PURE__ */ jsxRuntime.jsx(
1545
+ NavbarMobileMenu,
1559
1546
  {
1560
- "aria-describedby": void 0,
1561
- side: "top",
1562
- className: "dark inset-0 z-998 h-dvh w-full bg-background pt-15.75 [&>button]:hidden",
1563
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-y-auto pt-10 pb-20", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container", children: [
1564
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -m-px h-px w-px overflow-hidden border-0 mask-clip-border p-0 text-nowrap whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "text-primary", children: "Mobile Navigation" }) }),
1565
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
1566
- renderMobileAuthActions,
1567
- /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full", children: navigation.map(
1568
- (item, index) => renderMobileMenuItem(item, index)
1569
- ) })
1570
- ] })
1547
+ open,
1548
+ onClose: () => setOpen(false),
1549
+ title: "Mobile Navigation",
1550
+ className: "dark",
1551
+ contentClassName: "pt-10 pb-20",
1552
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
1553
+ /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full", children: navigation.map(
1554
+ (item, index) => renderMobileMenuItem(item, index)
1555
+ ) }),
1556
+ renderMobileAuthActions
1571
1557
  ] }) })
1572
1558
  }
1573
- ) });
1559
+ );
1574
1560
  };
1575
1561
  var renderMobileMenuItem = (item, index) => {
1576
1562
  if (item.groups) {
@@ -8,7 +8,6 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
8
8
  import { Img } from '@page-speed/img';
9
9
  import * as AccordionPrimitive from '@radix-ui/react-accordion';
10
10
  import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
11
- import * as SheetPrimitive from '@radix-ui/react-dialog';
12
11
 
13
12
  // components/blocks/navbars/navbar-multi-column-groups.tsx
14
13
  function cn(...inputs) {
@@ -804,14 +803,14 @@ function PatternBackground({
804
803
  );
805
804
  }
806
805
  if (pattern in patternOverlays) {
807
- const Overlay2 = patternOverlays[pattern];
806
+ const Overlay = patternOverlays[pattern];
808
807
  return /* @__PURE__ */ jsx(
809
808
  "div",
810
809
  {
811
810
  className: cn("pointer-events-none absolute inset-0 z-0", className),
812
811
  style: { opacity, ...style },
813
812
  "aria-hidden": "true",
814
- children: Overlay2()
813
+ children: Overlay()
815
814
  }
816
815
  );
817
816
  }
@@ -1170,75 +1169,62 @@ function NavigationMenuLink({
1170
1169
  }
1171
1170
  );
1172
1171
  }
1173
- function Sheet({ ...props }) {
1174
- return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
1175
- }
1176
- function SheetPortal({
1177
- ...props
1178
- }) {
1179
- return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
1180
- }
1181
- function SheetOverlay({
1172
+ var NavbarMobileMenu = ({
1173
+ open,
1174
+ onClose,
1175
+ children,
1182
1176
  className,
1183
- ...props
1184
- }) {
1185
- return /* @__PURE__ */ jsx(
1186
- SheetPrimitive.Overlay,
1177
+ contentClassName,
1178
+ title = "Mobile Navigation"
1179
+ }) => {
1180
+ React.useEffect(() => {
1181
+ if (open) {
1182
+ const originalOverflow = document.body.style.overflow;
1183
+ document.body.style.overflow = "hidden";
1184
+ return () => {
1185
+ document.body.style.overflow = originalOverflow;
1186
+ };
1187
+ }
1188
+ }, [open]);
1189
+ if (!open) return null;
1190
+ return /* @__PURE__ */ jsxs(
1191
+ "div",
1187
1192
  {
1188
- "data-slot": "sheet-overlay",
1189
1193
  className: cn(
1190
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
1194
+ "fixed inset-0 z-[998] flex flex-col bg-background",
1195
+ "animate-in slide-in-from-top duration-300",
1196
+ "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
1191
1197
  className
1192
1198
  ),
1193
- ...props
1194
- }
1195
- );
1196
- }
1197
- function SheetContent({
1198
- className,
1199
- children,
1200
- side = "right",
1201
- ...props
1202
- }) {
1203
- return /* @__PURE__ */ jsxs(SheetPortal, { children: [
1204
- /* @__PURE__ */ jsx(SheetOverlay, {}),
1205
- /* @__PURE__ */ jsxs(
1206
- SheetPrimitive.Content,
1207
- {
1208
- "data-slot": "sheet-content",
1209
- className: cn(
1210
- "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
1211
- side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
1212
- side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
1213
- side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
1214
- side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
1215
- className
1216
- ),
1217
- ...props,
1218
- children: [
1219
- children,
1220
- /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
1221
- /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1222
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1223
- ] })
1224
- ]
1225
- }
1226
- )
1227
- ] });
1228
- }
1229
- function SheetTitle({
1230
- className,
1231
- ...props
1232
- }) {
1233
- return /* @__PURE__ */ jsx(
1234
- SheetPrimitive.Title,
1235
- {
1236
- "data-slot": "sheet-title",
1237
- className: cn("text-foreground font-semibold", className),
1238
- ...props
1199
+ "data-state": open ? "open" : "closed",
1200
+ children: [
1201
+ /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
1202
+ /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxs(
1203
+ "button",
1204
+ {
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
+ ]
1212
+ }
1213
+ ) }),
1214
+ /* @__PURE__ */ jsx(
1215
+ "div",
1216
+ {
1217
+ className: cn(
1218
+ "h-full overflow-y-auto pt-20 pb-8 px-4 sm:px-6",
1219
+ contentClassName
1220
+ ),
1221
+ children
1222
+ }
1223
+ )
1224
+ ]
1239
1225
  }
1240
1226
  );
1241
- }
1227
+ };
1242
1228
 
1243
1229
  // components/blocks/navbars/layout-variant-utils.ts
1244
1230
  function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks", customClasses) {
@@ -1255,7 +1241,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
1255
1241
  // Outer container wrapper (only for floating bar - this containerizes the entire navbar)
1256
1242
  containerWrapperClasses: cn(
1257
1243
  "w-full",
1258
- isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
1244
+ isFloatingBar && "mx-auto container relative z-10 px-0 sm:px-0 lg:px-0"
1259
1245
  ),
1260
1246
  // Inner container classes (only for fullScreenContainerizedLinks - this containerizes the content inside the navbar)
1261
1247
  innerContainerClasses: cn(
@@ -1448,6 +1434,7 @@ var NavbarMultiColumnGroups = ({
1448
1434
  MobileNavigationMenu,
1449
1435
  {
1450
1436
  open,
1437
+ setOpen,
1451
1438
  navigation: navigation ?? [],
1452
1439
  authActions: mobileAuthActions,
1453
1440
  authActionsSlot: mobileAuthActionsSlot
@@ -1498,6 +1485,7 @@ var DesktopMenuItem = ({ item, index }) => {
1498
1485
  };
1499
1486
  var MobileNavigationMenu = ({
1500
1487
  open,
1488
+ setOpen,
1501
1489
  navigation,
1502
1490
  authActions,
1503
1491
  authActionsSlot
@@ -1530,23 +1518,22 @@ var MobileNavigationMenu = ({
1530
1518
  );
1531
1519
  }) });
1532
1520
  }, [authActionsSlot, authActions]);
1533
- return /* @__PURE__ */ jsx(Sheet, { open, children: /* @__PURE__ */ jsx(
1534
- SheetContent,
1521
+ return /* @__PURE__ */ jsx(
1522
+ NavbarMobileMenu,
1535
1523
  {
1536
- "aria-describedby": void 0,
1537
- side: "top",
1538
- className: "dark inset-0 z-998 h-dvh w-full bg-background pt-15.75 [&>button]:hidden",
1539
- children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto pt-10 pb-20", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
1540
- /* @__PURE__ */ jsx("div", { className: "absolute -m-px h-px w-px overflow-hidden border-0 mask-clip-border p-0 text-nowrap whitespace-nowrap", children: /* @__PURE__ */ jsx(SheetTitle, { className: "text-primary", children: "Mobile Navigation" }) }),
1541
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
1542
- renderMobileAuthActions,
1543
- /* @__PURE__ */ jsx(Accordion, { type: "multiple", className: "w-full", children: navigation.map(
1544
- (item, index) => renderMobileMenuItem(item, index)
1545
- ) })
1546
- ] })
1524
+ open,
1525
+ onClose: () => setOpen(false),
1526
+ title: "Mobile Navigation",
1527
+ className: "dark",
1528
+ contentClassName: "pt-10 pb-20",
1529
+ children: /* @__PURE__ */ jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
1530
+ /* @__PURE__ */ jsx(Accordion, { type: "multiple", className: "w-full", children: navigation.map(
1531
+ (item, index) => renderMobileMenuItem(item, index)
1532
+ ) }),
1533
+ renderMobileAuthActions
1547
1534
  ] }) })
1548
1535
  }
1549
- ) });
1536
+ );
1550
1537
  };
1551
1538
  var renderMobileMenuItem = (item, index) => {
1552
1539
  if (item.groups) {
@@ -1192,6 +1192,62 @@ function NavigationMenuLink({
1192
1192
  }
1193
1193
  );
1194
1194
  }
1195
+ var NavbarMobileMenu = ({
1196
+ open,
1197
+ onClose,
1198
+ children,
1199
+ className,
1200
+ contentClassName,
1201
+ title = "Mobile Navigation"
1202
+ }) => {
1203
+ React__namespace.useEffect(() => {
1204
+ if (open) {
1205
+ const originalOverflow = document.body.style.overflow;
1206
+ document.body.style.overflow = "hidden";
1207
+ return () => {
1208
+ document.body.style.overflow = originalOverflow;
1209
+ };
1210
+ }
1211
+ }, [open]);
1212
+ if (!open) return null;
1213
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1214
+ "div",
1215
+ {
1216
+ className: cn(
1217
+ "fixed inset-0 z-[998] flex flex-col bg-background",
1218
+ "animate-in slide-in-from-top duration-300",
1219
+ "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
1220
+ className
1221
+ ),
1222
+ "data-state": open ? "open" : "closed",
1223
+ children: [
1224
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
1225
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
1226
+ "button",
1227
+ {
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
+ ]
1235
+ }
1236
+ ) }),
1237
+ /* @__PURE__ */ jsxRuntime.jsx(
1238
+ "div",
1239
+ {
1240
+ className: cn(
1241
+ "h-full overflow-y-auto pt-20 pb-8 px-4 sm:px-6",
1242
+ contentClassName
1243
+ ),
1244
+ children
1245
+ }
1246
+ )
1247
+ ]
1248
+ }
1249
+ );
1250
+ };
1195
1251
 
1196
1252
  // components/blocks/navbars/types.ts
1197
1253
  function getLinkUrl(item) {
@@ -1213,7 +1269,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
1213
1269
  // Outer container wrapper (only for floating bar - this containerizes the entire navbar)
1214
1270
  containerWrapperClasses: cn(
1215
1271
  "w-full",
1216
- isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
1272
+ isFloatingBar && "mx-auto container relative z-10 px-0 sm:px-0 lg:px-0"
1217
1273
  ),
1218
1274
  // Inner container classes (only for fullScreenContainerizedLinks - this containerizes the content inside the navbar)
1219
1275
  innerContainerClasses: cn(
@@ -1610,53 +1666,41 @@ var NavbarPlatformResources = ({
1610
1666
  }
1611
1667
  ) })
1612
1668
  ] }),
1613
- open && /* @__PURE__ */ jsxRuntime.jsxs(
1614
- "div",
1669
+ /* @__PURE__ */ jsxRuntime.jsx(
1670
+ NavbarMobileMenu,
1615
1671
  {
1616
- className: cn(
1617
- "absolute inset-0 top-[72px] flex h-[calc(100vh-72px)] w-full flex-col overflow-scroll border-t border-border bg-background lg:hidden",
1618
- mobileMenuClassName
1619
- ),
1620
- children: [
1621
- /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: menuLinks?.map((link, index) => {
1672
+ open,
1673
+ onClose: () => setOpen(false),
1674
+ title: "Mobile Navigation",
1675
+ contentClassName: "pt-10 pb-20",
1676
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-screen-sm mx-auto", children: [
1677
+ /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full", children: menuLinks?.map((link, index) => {
1622
1678
  if (hasDropdownItems(link)) {
1623
1679
  return /* @__PURE__ */ jsxRuntime.jsxs(
1624
1680
  AccordionItem,
1625
1681
  {
1626
1682
  value: `menu-${index}`,
1627
- className: "border-b-2 border-dashed",
1683
+ className: "border-b-0",
1628
1684
  children: [
1629
- /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "px-2 py-4 text-left hover:no-underline", children: link.label }),
1630
- /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "px-2 pb-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
1685
+ /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center text-base font-normal text-foreground hover:no-underline", children: link.label }),
1686
+ /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "max-h-[60dvh] overflow-y-auto space-y-2", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
1631
1687
  Pressable,
1632
1688
  {
1633
1689
  href: getLinkUrl(item),
1634
- className: "group flex items-start gap-4 rounded-lg p-2 hover:bg-muted",
1690
+ className: "flex items-center gap-2 pl-4 text-sm text-muted-foreground hover:text-foreground",
1635
1691
  children: [
1636
- item.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-10 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
1637
- img.Img,
1638
- {
1639
- src: item.image,
1640
- alt: typeof item.label === "string" ? item.label : "Menu item",
1641
- className: "h-full w-full object-cover object-center",
1642
- optixFlowConfig
1643
- }
1644
- ) }),
1645
- !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
1692
+ (item.icon || item.iconName) && (item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
1646
1693
  DynamicIcon,
1647
1694
  {
1648
1695
  name: item.iconName,
1649
- size: 16
1696
+ size: 14
1650
1697
  }
1651
- ) : null }),
1652
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
1653
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-foreground", children: item.label }),
1654
- item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
1655
- ] })
1698
+ ) : null),
1699
+ item.label
1656
1700
  ]
1657
1701
  },
1658
1702
  `${typeof item.label === "string" ? item.label : "item"}-${itemIndex}`
1659
- )) }) })
1703
+ )) })
1660
1704
  ]
1661
1705
  },
1662
1706
  `${typeof link.label === "string" ? link.label : "menu"}-${index}`
@@ -1666,17 +1710,11 @@ var NavbarPlatformResources = ({
1666
1710
  return null;
1667
1711
  }
1668
1712
  return /* @__PURE__ */ jsxRuntime.jsx(
1669
- "div",
1713
+ Pressable,
1670
1714
  {
1671
- className: "border-b-2 border-dashed",
1672
- children: /* @__PURE__ */ jsxRuntime.jsx(
1673
- Pressable,
1674
- {
1675
- href: link.href,
1676
- className: "flex w-full items-center px-2 py-4 text-left text-sm font-medium",
1677
- children: link.label
1678
- }
1679
- )
1715
+ href: link.href,
1716
+ className: "flex h-15 items-center text-base font-normal text-foreground",
1717
+ children: link.label
1680
1718
  },
1681
1719
  `${typeof link.label === "string" ? link.label : "menu"}-${index}`
1682
1720
  );
@@ -1685,13 +1723,13 @@ var NavbarPlatformResources = ({
1685
1723
  "div",
1686
1724
  {
1687
1725
  className: cn(
1688
- "mx-8 mt-auto flex flex-col gap-4 py-12",
1726
+ "mt-6 flex flex-col gap-4",
1689
1727
  actionsClassName
1690
1728
  ),
1691
1729
  children: renderActions
1692
1730
  }
1693
1731
  )
1694
- ]
1732
+ ] })
1695
1733
  }
1696
1734
  )
1697
1735
  ]