@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
@@ -7,7 +7,6 @@ var tailwindMerge = require('tailwind-merge');
7
7
  var classVarianceAuthority = require('class-variance-authority');
8
8
  var jsxRuntime = require('react/jsx-runtime');
9
9
  var NavigationMenuPrimitive = require('@radix-ui/react-navigation-menu');
10
- var SheetPrimitive = require('@radix-ui/react-dialog');
11
10
  var TooltipPrimitive = require('@radix-ui/react-tooltip');
12
11
  var img = require('@page-speed/img');
13
12
 
@@ -31,7 +30,6 @@ function _interopNamespace(e) {
31
30
 
32
31
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
33
32
  var NavigationMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(NavigationMenuPrimitive);
34
- var SheetPrimitive__namespace = /*#__PURE__*/_interopNamespace(SheetPrimitive);
35
33
  var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
36
34
 
37
35
  // components/blocks/navbars/navbar-icon-links.tsx
@@ -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
  }
@@ -1031,90 +1029,62 @@ function NavigationMenuLink({
1031
1029
  }
1032
1030
  );
1033
1031
  }
1034
- function Sheet({ ...props }) {
1035
- return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Root, { "data-slot": "sheet", ...props });
1036
- }
1037
- function SheetTrigger({
1038
- ...props
1039
- }) {
1040
- return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Trigger, { "data-slot": "sheet-trigger", ...props });
1041
- }
1042
- function SheetPortal({
1043
- ...props
1044
- }) {
1045
- return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Portal, { "data-slot": "sheet-portal", ...props });
1046
- }
1047
- function SheetOverlay({
1032
+ var NavbarMobileMenu = ({
1033
+ open,
1034
+ onClose,
1035
+ children,
1048
1036
  className,
1049
- ...props
1050
- }) {
1051
- return /* @__PURE__ */ jsxRuntime.jsx(
1052
- SheetPrimitive__namespace.Overlay,
1037
+ contentClassName,
1038
+ title = "Mobile Navigation"
1039
+ }) => {
1040
+ React__namespace.useEffect(() => {
1041
+ if (open) {
1042
+ const originalOverflow = document.body.style.overflow;
1043
+ document.body.style.overflow = "hidden";
1044
+ return () => {
1045
+ document.body.style.overflow = originalOverflow;
1046
+ };
1047
+ }
1048
+ }, [open]);
1049
+ if (!open) return null;
1050
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1051
+ "div",
1053
1052
  {
1054
- "data-slot": "sheet-overlay",
1055
1053
  className: cn(
1056
- "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",
1054
+ "fixed inset-0 z-[998] flex flex-col bg-background",
1055
+ "animate-in slide-in-from-top duration-300",
1056
+ "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
1057
1057
  className
1058
1058
  ),
1059
- ...props
1060
- }
1061
- );
1062
- }
1063
- function SheetContent({
1064
- className,
1065
- children,
1066
- side = "right",
1067
- ...props
1068
- }) {
1069
- return /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
1070
- /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
1071
- /* @__PURE__ */ jsxRuntime.jsxs(
1072
- SheetPrimitive__namespace.Content,
1073
- {
1074
- "data-slot": "sheet-content",
1075
- className: cn(
1076
- "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",
1077
- 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",
1078
- 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",
1079
- 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",
1080
- 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",
1081
- className
1082
- ),
1083
- ...props,
1084
- children: [
1085
- children,
1086
- /* @__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: [
1087
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1088
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1089
- ] })
1090
- ]
1091
- }
1092
- )
1093
- ] });
1094
- }
1095
- function SheetHeader({ className, ...props }) {
1096
- return /* @__PURE__ */ jsxRuntime.jsx(
1097
- "div",
1098
- {
1099
- "data-slot": "sheet-header",
1100
- className: cn("flex flex-col gap-1.5 p-4", className),
1101
- ...props
1102
- }
1103
- );
1104
- }
1105
- function SheetTitle({
1106
- className,
1107
- ...props
1108
- }) {
1109
- return /* @__PURE__ */ jsxRuntime.jsx(
1110
- SheetPrimitive__namespace.Title,
1111
- {
1112
- "data-slot": "sheet-title",
1113
- className: cn("text-foreground font-semibold", className),
1114
- ...props
1059
+ "data-state": open ? "open" : "closed",
1060
+ children: [
1061
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
1062
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
1063
+ "button",
1064
+ {
1065
+ onClick: onClose,
1066
+ 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",
1067
+ "aria-label": "Close mobile menu",
1068
+ children: [
1069
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1070
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1071
+ ]
1072
+ }
1073
+ ) }),
1074
+ /* @__PURE__ */ jsxRuntime.jsx(
1075
+ "div",
1076
+ {
1077
+ className: cn(
1078
+ "h-full overflow-y-auto pt-20 pb-8 px-4 sm:px-6",
1079
+ contentClassName
1080
+ ),
1081
+ children
1082
+ }
1083
+ )
1084
+ ]
1115
1085
  }
1116
1086
  );
1117
- }
1087
+ };
1118
1088
  function TooltipProvider({
1119
1089
  delayDuration = 0,
1120
1090
  ...props
@@ -1237,7 +1207,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
1237
1207
  // Outer container wrapper (only for floating bar - this containerizes the entire navbar)
1238
1208
  containerWrapperClasses: cn(
1239
1209
  "w-full",
1240
- isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
1210
+ isFloatingBar && "mx-auto container relative z-10 px-0 sm:px-0 lg:px-0"
1241
1211
  ),
1242
1212
  // Inner container classes (only for fullScreenContainerizedLinks - this containerizes the content inside the navbar)
1243
1213
  innerContainerClasses: cn(
@@ -1394,65 +1364,59 @@ var NavbarIconLinks = ({
1394
1364
  optixFlowConfig
1395
1365
  }
1396
1366
  ),
1397
- /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: [
1398
- /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
1399
- Pressable,
1400
- {
1401
- variant: "outline",
1402
- size: "icon",
1403
- asButton: true,
1404
- onClick: () => {
1405
- },
1406
- children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
1407
- }
1408
- ) }),
1409
- /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { className: "overflow-y-auto", children: [
1410
- /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: /* @__PURE__ */ jsxRuntime.jsx(
1411
- NavbarLogo,
1367
+ /* @__PURE__ */ jsxRuntime.jsx(
1368
+ Pressable,
1369
+ {
1370
+ variant: "outline",
1371
+ size: "icon",
1372
+ asButton: true,
1373
+ onClick: () => setIsOpen(!isOpen),
1374
+ children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
1375
+ }
1376
+ )
1377
+ ] }) }),
1378
+ /* @__PURE__ */ jsxRuntime.jsx(
1379
+ NavbarMobileMenu,
1380
+ {
1381
+ open: isOpen,
1382
+ onClose: () => setIsOpen(false),
1383
+ title: "Mobile Navigation",
1384
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-screen-sm mx-auto", children: [
1385
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: navItemsSlot ? navItemsSlot : renderNavItems?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
1386
+ Pressable,
1412
1387
  {
1413
- logo,
1414
- logoSlot,
1415
- logoClassName,
1416
- optixFlowConfig
1417
- }
1418
- ) }) }),
1419
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 p-4", children: [
1420
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: navItemsSlot ? navItemsSlot : renderNavItems?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
1421
- Pressable,
1422
- {
1423
- href: item.url,
1424
- onClick: () => {
1425
- setActiveItem(item.title);
1426
- setIsOpen(false);
1427
- },
1428
- className: cn(
1429
- "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
1430
- activeItem === item.title ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
1431
- ),
1432
- children: [
1433
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 18 }),
1434
- item.title
1435
- ]
1388
+ href: item.url,
1389
+ onClick: () => {
1390
+ setActiveItem(item.title);
1391
+ setIsOpen(false);
1436
1392
  },
1437
- index
1438
- )) }),
1439
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t pt-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: authActions?.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(
1440
- Pressable,
1441
- {
1442
- href: action.href,
1443
- className: "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground",
1444
- onClick: () => setIsOpen(false),
1445
- children: [
1446
- action.icon,
1447
- action.label
1448
- ]
1449
- },
1450
- index
1451
- )) }) })
1452
- ] })
1393
+ className: cn(
1394
+ "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
1395
+ activeItem === item.title ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
1396
+ ),
1397
+ children: [
1398
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 18 }),
1399
+ item.title
1400
+ ]
1401
+ },
1402
+ index
1403
+ )) }),
1404
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t pt-4 mt-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: authActions?.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(
1405
+ Pressable,
1406
+ {
1407
+ href: action.href,
1408
+ className: "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground",
1409
+ onClick: () => setIsOpen(false),
1410
+ children: [
1411
+ action.icon,
1412
+ action.label
1413
+ ]
1414
+ },
1415
+ index
1416
+ )) }) })
1453
1417
  ] })
1454
- ] })
1455
- ] }) })
1418
+ }
1419
+ )
1456
1420
  ] }) }) })
1457
1421
  }
1458
1422
  );
@@ -6,7 +6,6 @@ import { twMerge } from 'tailwind-merge';
6
6
  import { cva } from 'class-variance-authority';
7
7
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
8
8
  import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
9
- import * as SheetPrimitive from '@radix-ui/react-dialog';
10
9
  import * as TooltipPrimitive from '@radix-ui/react-tooltip';
11
10
  import { Img } from '@page-speed/img';
12
11
 
@@ -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
  }
@@ -1007,90 +1006,62 @@ function NavigationMenuLink({
1007
1006
  }
1008
1007
  );
1009
1008
  }
1010
- function Sheet({ ...props }) {
1011
- return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
1012
- }
1013
- function SheetTrigger({
1014
- ...props
1015
- }) {
1016
- return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
1017
- }
1018
- function SheetPortal({
1019
- ...props
1020
- }) {
1021
- return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
1022
- }
1023
- function SheetOverlay({
1009
+ var NavbarMobileMenu = ({
1010
+ open,
1011
+ onClose,
1012
+ children,
1024
1013
  className,
1025
- ...props
1026
- }) {
1027
- return /* @__PURE__ */ jsx(
1028
- SheetPrimitive.Overlay,
1014
+ contentClassName,
1015
+ title = "Mobile Navigation"
1016
+ }) => {
1017
+ React.useEffect(() => {
1018
+ if (open) {
1019
+ const originalOverflow = document.body.style.overflow;
1020
+ document.body.style.overflow = "hidden";
1021
+ return () => {
1022
+ document.body.style.overflow = originalOverflow;
1023
+ };
1024
+ }
1025
+ }, [open]);
1026
+ if (!open) return null;
1027
+ return /* @__PURE__ */ jsxs(
1028
+ "div",
1029
1029
  {
1030
- "data-slot": "sheet-overlay",
1031
1030
  className: cn(
1032
- "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",
1031
+ "fixed inset-0 z-[998] flex flex-col bg-background",
1032
+ "animate-in slide-in-from-top duration-300",
1033
+ "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
1033
1034
  className
1034
1035
  ),
1035
- ...props
1036
- }
1037
- );
1038
- }
1039
- function SheetContent({
1040
- className,
1041
- children,
1042
- side = "right",
1043
- ...props
1044
- }) {
1045
- return /* @__PURE__ */ jsxs(SheetPortal, { children: [
1046
- /* @__PURE__ */ jsx(SheetOverlay, {}),
1047
- /* @__PURE__ */ jsxs(
1048
- SheetPrimitive.Content,
1049
- {
1050
- "data-slot": "sheet-content",
1051
- className: cn(
1052
- "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",
1053
- 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",
1054
- 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",
1055
- 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",
1056
- 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",
1057
- className
1058
- ),
1059
- ...props,
1060
- children: [
1061
- children,
1062
- /* @__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: [
1063
- /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1064
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1065
- ] })
1066
- ]
1067
- }
1068
- )
1069
- ] });
1070
- }
1071
- function SheetHeader({ className, ...props }) {
1072
- return /* @__PURE__ */ jsx(
1073
- "div",
1074
- {
1075
- "data-slot": "sheet-header",
1076
- className: cn("flex flex-col gap-1.5 p-4", className),
1077
- ...props
1078
- }
1079
- );
1080
- }
1081
- function SheetTitle({
1082
- className,
1083
- ...props
1084
- }) {
1085
- return /* @__PURE__ */ jsx(
1086
- SheetPrimitive.Title,
1087
- {
1088
- "data-slot": "sheet-title",
1089
- className: cn("text-foreground font-semibold", className),
1090
- ...props
1036
+ "data-state": open ? "open" : "closed",
1037
+ children: [
1038
+ /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
1039
+ /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxs(
1040
+ "button",
1041
+ {
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
+ ]
1049
+ }
1050
+ ) }),
1051
+ /* @__PURE__ */ jsx(
1052
+ "div",
1053
+ {
1054
+ className: cn(
1055
+ "h-full overflow-y-auto pt-20 pb-8 px-4 sm:px-6",
1056
+ contentClassName
1057
+ ),
1058
+ children
1059
+ }
1060
+ )
1061
+ ]
1091
1062
  }
1092
1063
  );
1093
- }
1064
+ };
1094
1065
  function TooltipProvider({
1095
1066
  delayDuration = 0,
1096
1067
  ...props
@@ -1213,7 +1184,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
1213
1184
  // Outer container wrapper (only for floating bar - this containerizes the entire navbar)
1214
1185
  containerWrapperClasses: cn(
1215
1186
  "w-full",
1216
- isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
1187
+ isFloatingBar && "mx-auto container relative z-10 px-0 sm:px-0 lg:px-0"
1217
1188
  ),
1218
1189
  // Inner container classes (only for fullScreenContainerizedLinks - this containerizes the content inside the navbar)
1219
1190
  innerContainerClasses: cn(
@@ -1370,65 +1341,59 @@ var NavbarIconLinks = ({
1370
1341
  optixFlowConfig
1371
1342
  }
1372
1343
  ),
1373
- /* @__PURE__ */ jsxs(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: [
1374
- /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
1375
- Pressable,
1376
- {
1377
- variant: "outline",
1378
- size: "icon",
1379
- asButton: true,
1380
- onClick: () => {
1381
- },
1382
- children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
1383
- }
1384
- ) }),
1385
- /* @__PURE__ */ jsxs(SheetContent, { className: "overflow-y-auto", children: [
1386
- /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: /* @__PURE__ */ jsx(
1387
- NavbarLogo,
1344
+ /* @__PURE__ */ jsx(
1345
+ Pressable,
1346
+ {
1347
+ variant: "outline",
1348
+ size: "icon",
1349
+ asButton: true,
1350
+ onClick: () => setIsOpen(!isOpen),
1351
+ children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
1352
+ }
1353
+ )
1354
+ ] }) }),
1355
+ /* @__PURE__ */ jsx(
1356
+ NavbarMobileMenu,
1357
+ {
1358
+ open: isOpen,
1359
+ onClose: () => setIsOpen(false),
1360
+ title: "Mobile Navigation",
1361
+ children: /* @__PURE__ */ jsxs("div", { className: "max-w-screen-sm mx-auto", children: [
1362
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: navItemsSlot ? navItemsSlot : renderNavItems?.map((item, index) => /* @__PURE__ */ jsxs(
1363
+ Pressable,
1388
1364
  {
1389
- logo,
1390
- logoSlot,
1391
- logoClassName,
1392
- optixFlowConfig
1393
- }
1394
- ) }) }),
1395
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-4", children: [
1396
- /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: navItemsSlot ? navItemsSlot : renderNavItems?.map((item, index) => /* @__PURE__ */ jsxs(
1397
- Pressable,
1398
- {
1399
- href: item.url,
1400
- onClick: () => {
1401
- setActiveItem(item.title);
1402
- setIsOpen(false);
1403
- },
1404
- className: cn(
1405
- "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
1406
- activeItem === item.title ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
1407
- ),
1408
- children: [
1409
- /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 18 }),
1410
- item.title
1411
- ]
1365
+ href: item.url,
1366
+ onClick: () => {
1367
+ setActiveItem(item.title);
1368
+ setIsOpen(false);
1412
1369
  },
1413
- index
1414
- )) }),
1415
- /* @__PURE__ */ jsx("div", { className: "border-t pt-4", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: authActions?.map((action, index) => /* @__PURE__ */ jsxs(
1416
- Pressable,
1417
- {
1418
- href: action.href,
1419
- className: "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground",
1420
- onClick: () => setIsOpen(false),
1421
- children: [
1422
- action.icon,
1423
- action.label
1424
- ]
1425
- },
1426
- index
1427
- )) }) })
1428
- ] })
1370
+ className: cn(
1371
+ "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
1372
+ activeItem === item.title ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
1373
+ ),
1374
+ children: [
1375
+ /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 18 }),
1376
+ item.title
1377
+ ]
1378
+ },
1379
+ index
1380
+ )) }),
1381
+ /* @__PURE__ */ jsx("div", { className: "border-t pt-4 mt-6", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: authActions?.map((action, index) => /* @__PURE__ */ jsxs(
1382
+ Pressable,
1383
+ {
1384
+ href: action.href,
1385
+ className: "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground",
1386
+ onClick: () => setIsOpen(false),
1387
+ children: [
1388
+ action.icon,
1389
+ action.label
1390
+ ]
1391
+ },
1392
+ index
1393
+ )) }) })
1429
1394
  ] })
1430
- ] })
1431
- ] }) })
1395
+ }
1396
+ )
1432
1397
  ] }) }) })
1433
1398
  }
1434
1399
  );