@opensite/ui 0.9.4 → 0.9.6

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 (45) hide show
  1. package/dist/navbar-animated-preview.cjs +71 -29
  2. package/dist/navbar-animated-preview.js +71 -29
  3. package/dist/navbar-centered-menu.cjs +101 -31
  4. package/dist/navbar-centered-menu.js +101 -31
  5. package/dist/navbar-dark-icons.cjs +72 -30
  6. package/dist/navbar-dark-icons.js +72 -30
  7. package/dist/navbar-dropdown-menu.cjs +97 -30
  8. package/dist/navbar-dropdown-menu.js +97 -30
  9. package/dist/navbar-education-platform.cjs +71 -26
  10. package/dist/navbar-education-platform.js +71 -26
  11. package/dist/navbar-enterprise-mega.cjs +71 -29
  12. package/dist/navbar-enterprise-mega.js +71 -29
  13. package/dist/navbar-feature-grid.cjs +81 -28
  14. package/dist/navbar-feature-grid.js +81 -28
  15. package/dist/navbar-floating-pill.cjs +71 -26
  16. package/dist/navbar-floating-pill.js +71 -26
  17. package/dist/navbar-fullscreen-menu.cjs +71 -26
  18. package/dist/navbar-fullscreen-menu.js +72 -27
  19. package/dist/navbar-icon-links.cjs +72 -27
  20. package/dist/navbar-icon-links.js +72 -27
  21. package/dist/navbar-image-preview.cjs +2 -2
  22. package/dist/navbar-image-preview.js +2 -2
  23. package/dist/navbar-mega-menu.cjs +71 -40
  24. package/dist/navbar-mega-menu.js +71 -40
  25. package/dist/navbar-multi-column-groups.cjs +2 -2
  26. package/dist/navbar-multi-column-groups.js +2 -2
  27. package/dist/navbar-platform-resources.cjs +71 -26
  28. package/dist/navbar-platform-resources.js +71 -26
  29. package/dist/navbar-search-focused.cjs +2 -2
  30. package/dist/navbar-search-focused.js +2 -2
  31. package/dist/navbar-sidebar-mobile.cjs +2 -2
  32. package/dist/navbar-sidebar-mobile.js +2 -2
  33. package/dist/navbar-simple-links.cjs +72 -27
  34. package/dist/navbar-simple-links.js +72 -27
  35. package/dist/navbar-split-cta.cjs +2 -2
  36. package/dist/navbar-split-cta.js +2 -2
  37. package/dist/navbar-sticky-compact.cjs +2 -2
  38. package/dist/navbar-sticky-compact.js +2 -2
  39. package/dist/navbar-tabbed-sections.cjs +2 -2
  40. package/dist/navbar-tabbed-sections.js +2 -2
  41. package/dist/navbar-transparent-overlay.cjs +2 -2
  42. package/dist/navbar-transparent-overlay.js +2 -2
  43. package/dist/registry.cjs +242 -345
  44. package/dist/registry.js +242 -345
  45. package/package.json +6 -1
@@ -5,10 +5,10 @@ import { clsx } from 'clsx';
5
5
  import { twMerge } from 'tailwind-merge';
6
6
  import { cva } from 'class-variance-authority';
7
7
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
8
- import { Img } from '@page-speed/img';
9
8
  import * as AccordionPrimitive from '@radix-ui/react-accordion';
10
9
  import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
11
10
  import * as SheetPrimitive from '@radix-ui/react-dialog';
11
+ import { Img } from '@page-speed/img';
12
12
 
13
13
  // components/blocks/navbars/navbar-feature-grid.tsx
14
14
  function cn(...inputs) {
@@ -1194,6 +1194,66 @@ function SheetTitle({
1194
1194
  }
1195
1195
  );
1196
1196
  }
1197
+ var NavbarLogo = ({
1198
+ logo,
1199
+ logoSlot,
1200
+ logoClassName,
1201
+ optixFlowConfig
1202
+ }) => {
1203
+ if (logoSlot) return /* @__PURE__ */ jsx(Fragment, { children: logoSlot });
1204
+ if (!logo) return null;
1205
+ const hasResponsiveSources = logo.desktopSrc || logo.mobileSrc;
1206
+ return /* @__PURE__ */ jsx(
1207
+ Pressable,
1208
+ {
1209
+ href: logo.url || "/",
1210
+ className: cn("flex items-center", logoClassName),
1211
+ children: hasResponsiveSources ? (
1212
+ // Responsive logo with desktop/mobile sources
1213
+ /* @__PURE__ */ jsxs(Fragment, { children: [
1214
+ /* @__PURE__ */ jsx(
1215
+ Img,
1216
+ {
1217
+ src: logo.desktopSrc || logo.src || "",
1218
+ className: cn(
1219
+ "hidden h-8 w-auto object-contain md:block",
1220
+ logo.className
1221
+ ),
1222
+ alt: logo.alt || "Logo",
1223
+ optixFlowConfig
1224
+ }
1225
+ ),
1226
+ /* @__PURE__ */ jsx(
1227
+ Img,
1228
+ {
1229
+ src: logo.mobileSrc || logo.src || "",
1230
+ className: cn(
1231
+ "h-8 w-auto object-contain md:hidden",
1232
+ logo.className
1233
+ ),
1234
+ alt: logo.alt || "Logo",
1235
+ optixFlowConfig
1236
+ }
1237
+ )
1238
+ ] })
1239
+ ) : logo.src ? (
1240
+ // Standard single logo image
1241
+ /* @__PURE__ */ jsx(
1242
+ Img,
1243
+ {
1244
+ src: logo.src,
1245
+ className: cn("max-h-8 w-auto object-contain", logo.className),
1246
+ alt: logo.alt || "Logo",
1247
+ optixFlowConfig
1248
+ }
1249
+ )
1250
+ ) : (
1251
+ // Text-based logo (title as string or React element)
1252
+ logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
1253
+ )
1254
+ }
1255
+ );
1256
+ };
1197
1257
 
1198
1258
  // lib/mediaPlaceholders.ts
1199
1259
  var logoPlaceholders = {
@@ -1224,14 +1284,14 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
1224
1284
  ),
1225
1285
  // Navigation wrapper classes (for border and shadow)
1226
1286
  navWrapperClasses: cn(
1227
- "w-full",
1287
+ "w-full h-16 items-center",
1228
1288
  isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm flex justify-center"
1229
1289
  ),
1230
1290
  // Section container configuration for full-width navbars
1231
1291
  sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
1232
1292
  sectionContainerMaxWidth: "full",
1233
1293
  // Spacing adjustment for Section component
1234
- spacingOverride: isFloatingBar ? "none" : void 0
1294
+ spacingOverride: isFloatingBar ? "none" : "py-0 md:py-0"
1235
1295
  };
1236
1296
  }
1237
1297
  var NavbarFeatureGrid = ({
@@ -1256,29 +1316,6 @@ var NavbarFeatureGrid = ({
1256
1316
  patternOpacity,
1257
1317
  optixFlowConfig
1258
1318
  }) => {
1259
- const renderLogo = useMemo(() => {
1260
- if (logoSlot) return logoSlot;
1261
- if (!logo) return null;
1262
- return /* @__PURE__ */ jsxs(
1263
- Pressable,
1264
- {
1265
- href: logo.url || "/",
1266
- className: cn("flex items-center gap-2", logoClassName),
1267
- children: [
1268
- logo.src && /* @__PURE__ */ jsx(
1269
- Img,
1270
- {
1271
- src: logo.src,
1272
- className: cn("max-h-8", logo.className),
1273
- alt: logo.alt || "Logo",
1274
- optixFlowConfig
1275
- }
1276
- ),
1277
- logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
1278
- ]
1279
- }
1280
- );
1281
- }, [logoSlot, logo, logoClassName, optixFlowConfig]);
1282
1319
  const renderAuthActions = useMemo(() => {
1283
1320
  if (authActionsSlot) return authActionsSlot;
1284
1321
  if (!authActions || authActions.length === 0) return null;
@@ -1322,7 +1359,15 @@ var NavbarFeatureGrid = ({
1322
1359
  {
1323
1360
  className: cn("flex items-center justify-between", navClassName),
1324
1361
  children: [
1325
- renderLogo,
1362
+ /* @__PURE__ */ jsx(
1363
+ NavbarLogo,
1364
+ {
1365
+ logo,
1366
+ logoSlot,
1367
+ logoClassName,
1368
+ optixFlowConfig
1369
+ }
1370
+ ),
1326
1371
  /* @__PURE__ */ jsx(
1327
1372
  NavigationMenu,
1328
1373
  {
@@ -1367,7 +1412,15 @@ var NavbarFeatureGrid = ({
1367
1412
  }
1368
1413
  ) }),
1369
1414
  /* @__PURE__ */ jsxs(SheetContent, { side: "top", className: "max-h-screen overflow-auto", children: [
1370
- /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: renderLogo }) }),
1415
+ /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: /* @__PURE__ */ jsx(
1416
+ NavbarLogo,
1417
+ {
1418
+ logo,
1419
+ logoSlot,
1420
+ logoClassName,
1421
+ optixFlowConfig
1422
+ }
1423
+ ) }) }),
1371
1424
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-4", children: [
1372
1425
  features && features.length > 0 && /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "mt-4 mb-2", children: /* @__PURE__ */ jsxs(AccordionItem, { value: "solutions", className: "border-none", children: [
1373
1426
  /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-base hover:no-underline", children: "Features" }),
@@ -557,6 +557,66 @@ function processSvgForCurrentColor(svg) {
557
557
  );
558
558
  return processed;
559
559
  }
560
+ var NavbarLogo = ({
561
+ logo,
562
+ logoSlot,
563
+ logoClassName,
564
+ optixFlowConfig
565
+ }) => {
566
+ if (logoSlot) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: logoSlot });
567
+ if (!logo) return null;
568
+ const hasResponsiveSources = logo.desktopSrc || logo.mobileSrc;
569
+ return /* @__PURE__ */ jsxRuntime.jsx(
570
+ Pressable,
571
+ {
572
+ href: logo.url || "/",
573
+ className: cn("flex items-center", logoClassName),
574
+ children: hasResponsiveSources ? (
575
+ // Responsive logo with desktop/mobile sources
576
+ /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
577
+ /* @__PURE__ */ jsxRuntime.jsx(
578
+ img.Img,
579
+ {
580
+ src: logo.desktopSrc || logo.src || "",
581
+ className: cn(
582
+ "hidden h-8 w-auto object-contain md:block",
583
+ logo.className
584
+ ),
585
+ alt: logo.alt || "Logo",
586
+ optixFlowConfig
587
+ }
588
+ ),
589
+ /* @__PURE__ */ jsxRuntime.jsx(
590
+ img.Img,
591
+ {
592
+ src: logo.mobileSrc || logo.src || "",
593
+ className: cn(
594
+ "h-8 w-auto object-contain md:hidden",
595
+ logo.className
596
+ ),
597
+ alt: logo.alt || "Logo",
598
+ optixFlowConfig
599
+ }
600
+ )
601
+ ] })
602
+ ) : logo.src ? (
603
+ // Standard single logo image
604
+ /* @__PURE__ */ jsxRuntime.jsx(
605
+ img.Img,
606
+ {
607
+ src: logo.src,
608
+ className: cn("max-h-8 w-auto object-contain", logo.className),
609
+ alt: logo.alt || "Logo",
610
+ optixFlowConfig
611
+ }
612
+ )
613
+ ) : (
614
+ // Text-based logo (title as string or React element)
615
+ logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
616
+ )
617
+ }
618
+ );
619
+ };
560
620
  var maxWidthStyles = {
561
621
  sm: "max-w-screen-sm",
562
622
  md: "max-w-screen-md",
@@ -1100,14 +1160,14 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
1100
1160
  ),
1101
1161
  // Navigation wrapper classes (for border and shadow)
1102
1162
  navWrapperClasses: cn(
1103
- "w-full",
1163
+ "w-full h-16 items-center",
1104
1164
  isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm flex justify-center"
1105
1165
  ),
1106
1166
  // Section container configuration for full-width navbars
1107
1167
  sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
1108
1168
  sectionContainerMaxWidth: "full",
1109
1169
  // Spacing adjustment for Section component
1110
- spacingOverride: isFloatingBar ? "none" : void 0
1170
+ spacingOverride: isFloatingBar ? "none" : "py-0 md:py-0"
1111
1171
  };
1112
1172
  }
1113
1173
  var NavbarFloatingPill = ({
@@ -1135,29 +1195,6 @@ var NavbarFloatingPill = ({
1135
1195
  }) => {
1136
1196
  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
1137
1197
  const [openDropdown, setOpenDropdown] = React.useState(null);
1138
- const renderLogo = React.useMemo(() => {
1139
- if (logoSlot) return logoSlot;
1140
- if (!logo) return null;
1141
- return /* @__PURE__ */ jsxRuntime.jsxs(
1142
- Pressable,
1143
- {
1144
- href: logo.url || "/",
1145
- className: cn("flex shrink-0 items-center gap-2", logoClassName),
1146
- children: [
1147
- logo.src && /* @__PURE__ */ jsxRuntime.jsx(
1148
- img.Img,
1149
- {
1150
- src: logo.src,
1151
- className: cn("w-10", logo.className),
1152
- alt: logo.alt || "Logo",
1153
- optixFlowConfig
1154
- }
1155
- ),
1156
- logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
1157
- ]
1158
- }
1159
- );
1160
- }, [logoSlot, logo, logoClassName, optixFlowConfig]);
1161
1198
  const renderAuthActions = React.useMemo(() => {
1162
1199
  if (authActionsSlot) return authActionsSlot;
1163
1200
  if (!authActions || authActions.length === 0) return null;
@@ -1226,7 +1263,15 @@ var NavbarFloatingPill = ({
1226
1263
  pillWrapperClassName
1227
1264
  ),
1228
1265
  children: [
1229
- renderLogo,
1266
+ /* @__PURE__ */ jsxRuntime.jsx(
1267
+ NavbarLogo,
1268
+ {
1269
+ logo,
1270
+ logoSlot,
1271
+ logoClassName,
1272
+ optixFlowConfig
1273
+ }
1274
+ ),
1230
1275
  /* @__PURE__ */ jsxRuntime.jsx(
1231
1276
  NavigationMenu,
1232
1277
  {
@@ -535,6 +535,66 @@ function processSvgForCurrentColor(svg) {
535
535
  );
536
536
  return processed;
537
537
  }
538
+ var NavbarLogo = ({
539
+ logo,
540
+ logoSlot,
541
+ logoClassName,
542
+ optixFlowConfig
543
+ }) => {
544
+ if (logoSlot) return /* @__PURE__ */ jsx(Fragment, { children: logoSlot });
545
+ if (!logo) return null;
546
+ const hasResponsiveSources = logo.desktopSrc || logo.mobileSrc;
547
+ return /* @__PURE__ */ jsx(
548
+ Pressable,
549
+ {
550
+ href: logo.url || "/",
551
+ className: cn("flex items-center", logoClassName),
552
+ children: hasResponsiveSources ? (
553
+ // Responsive logo with desktop/mobile sources
554
+ /* @__PURE__ */ jsxs(Fragment, { children: [
555
+ /* @__PURE__ */ jsx(
556
+ Img,
557
+ {
558
+ src: logo.desktopSrc || logo.src || "",
559
+ className: cn(
560
+ "hidden h-8 w-auto object-contain md:block",
561
+ logo.className
562
+ ),
563
+ alt: logo.alt || "Logo",
564
+ optixFlowConfig
565
+ }
566
+ ),
567
+ /* @__PURE__ */ jsx(
568
+ Img,
569
+ {
570
+ src: logo.mobileSrc || logo.src || "",
571
+ className: cn(
572
+ "h-8 w-auto object-contain md:hidden",
573
+ logo.className
574
+ ),
575
+ alt: logo.alt || "Logo",
576
+ optixFlowConfig
577
+ }
578
+ )
579
+ ] })
580
+ ) : logo.src ? (
581
+ // Standard single logo image
582
+ /* @__PURE__ */ jsx(
583
+ Img,
584
+ {
585
+ src: logo.src,
586
+ className: cn("max-h-8 w-auto object-contain", logo.className),
587
+ alt: logo.alt || "Logo",
588
+ optixFlowConfig
589
+ }
590
+ )
591
+ ) : (
592
+ // Text-based logo (title as string or React element)
593
+ logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
594
+ )
595
+ }
596
+ );
597
+ };
538
598
  var maxWidthStyles = {
539
599
  sm: "max-w-screen-sm",
540
600
  md: "max-w-screen-md",
@@ -1078,14 +1138,14 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
1078
1138
  ),
1079
1139
  // Navigation wrapper classes (for border and shadow)
1080
1140
  navWrapperClasses: cn(
1081
- "w-full",
1141
+ "w-full h-16 items-center",
1082
1142
  isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm flex justify-center"
1083
1143
  ),
1084
1144
  // Section container configuration for full-width navbars
1085
1145
  sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
1086
1146
  sectionContainerMaxWidth: "full",
1087
1147
  // Spacing adjustment for Section component
1088
- spacingOverride: isFloatingBar ? "none" : void 0
1148
+ spacingOverride: isFloatingBar ? "none" : "py-0 md:py-0"
1089
1149
  };
1090
1150
  }
1091
1151
  var NavbarFloatingPill = ({
@@ -1113,29 +1173,6 @@ var NavbarFloatingPill = ({
1113
1173
  }) => {
1114
1174
  const [isMenuOpen, setIsMenuOpen] = useState(false);
1115
1175
  const [openDropdown, setOpenDropdown] = useState(null);
1116
- const renderLogo = useMemo(() => {
1117
- if (logoSlot) return logoSlot;
1118
- if (!logo) return null;
1119
- return /* @__PURE__ */ jsxs(
1120
- Pressable,
1121
- {
1122
- href: logo.url || "/",
1123
- className: cn("flex shrink-0 items-center gap-2", logoClassName),
1124
- children: [
1125
- logo.src && /* @__PURE__ */ jsx(
1126
- Img,
1127
- {
1128
- src: logo.src,
1129
- className: cn("w-10", logo.className),
1130
- alt: logo.alt || "Logo",
1131
- optixFlowConfig
1132
- }
1133
- ),
1134
- logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
1135
- ]
1136
- }
1137
- );
1138
- }, [logoSlot, logo, logoClassName, optixFlowConfig]);
1139
1176
  const renderAuthActions = useMemo(() => {
1140
1177
  if (authActionsSlot) return authActionsSlot;
1141
1178
  if (!authActions || authActions.length === 0) return null;
@@ -1204,7 +1241,15 @@ var NavbarFloatingPill = ({
1204
1241
  pillWrapperClassName
1205
1242
  ),
1206
1243
  children: [
1207
- renderLogo,
1244
+ /* @__PURE__ */ jsx(
1245
+ NavbarLogo,
1246
+ {
1247
+ logo,
1248
+ logoSlot,
1249
+ logoClassName,
1250
+ optixFlowConfig
1251
+ }
1252
+ ),
1208
1253
  /* @__PURE__ */ jsx(
1209
1254
  NavigationMenu,
1210
1255
  {
@@ -825,6 +825,66 @@ var Section = React__namespace.default.forwardRef(
825
825
  }
826
826
  );
827
827
  Section.displayName = "Section";
828
+ var NavbarLogo = ({
829
+ logo,
830
+ logoSlot,
831
+ logoClassName,
832
+ optixFlowConfig
833
+ }) => {
834
+ if (logoSlot) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: logoSlot });
835
+ if (!logo) return null;
836
+ const hasResponsiveSources = logo.desktopSrc || logo.mobileSrc;
837
+ return /* @__PURE__ */ jsxRuntime.jsx(
838
+ Pressable,
839
+ {
840
+ href: logo.url || "/",
841
+ className: cn("flex items-center", logoClassName),
842
+ children: hasResponsiveSources ? (
843
+ // Responsive logo with desktop/mobile sources
844
+ /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
845
+ /* @__PURE__ */ jsxRuntime.jsx(
846
+ img.Img,
847
+ {
848
+ src: logo.desktopSrc || logo.src || "",
849
+ className: cn(
850
+ "hidden h-8 w-auto object-contain md:block",
851
+ logo.className
852
+ ),
853
+ alt: logo.alt || "Logo",
854
+ optixFlowConfig
855
+ }
856
+ ),
857
+ /* @__PURE__ */ jsxRuntime.jsx(
858
+ img.Img,
859
+ {
860
+ src: logo.mobileSrc || logo.src || "",
861
+ className: cn(
862
+ "h-8 w-auto object-contain md:hidden",
863
+ logo.className
864
+ ),
865
+ alt: logo.alt || "Logo",
866
+ optixFlowConfig
867
+ }
868
+ )
869
+ ] })
870
+ ) : logo.src ? (
871
+ // Standard single logo image
872
+ /* @__PURE__ */ jsxRuntime.jsx(
873
+ img.Img,
874
+ {
875
+ src: logo.src,
876
+ className: cn("max-h-8 w-auto object-contain", logo.className),
877
+ alt: logo.alt || "Logo",
878
+ optixFlowConfig
879
+ }
880
+ )
881
+ ) : (
882
+ // Text-based logo (title as string or React element)
883
+ logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
884
+ )
885
+ }
886
+ );
887
+ };
828
888
 
829
889
  // lib/mediaPlaceholders.ts
830
890
  var logoPlaceholders = {
@@ -855,14 +915,14 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
855
915
  ),
856
916
  // Navigation wrapper classes (for border and shadow)
857
917
  navWrapperClasses: cn(
858
- "w-full",
918
+ "w-full h-16 items-center",
859
919
  isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm flex justify-center"
860
920
  ),
861
921
  // Section container configuration for full-width navbars
862
922
  sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
863
923
  sectionContainerMaxWidth: "full",
864
924
  // Spacing adjustment for Section component
865
- spacingOverride: isFloatingBar ? "none" : void 0
925
+ spacingOverride: isFloatingBar ? "none" : "py-0 md:py-0"
866
926
  };
867
927
  }
868
928
  var NavbarFullscreenMenu = ({
@@ -891,29 +951,6 @@ var NavbarFullscreenMenu = ({
891
951
  }) => {
892
952
  const [isOpen, setIsOpen] = React.useState(false);
893
953
  const toggleMenu = () => setIsOpen(!isOpen);
894
- const renderLogo = React.useMemo(() => {
895
- if (logoSlot) return logoSlot;
896
- if (!logo) return null;
897
- return /* @__PURE__ */ jsxRuntime.jsxs(
898
- Pressable,
899
- {
900
- href: logo.url || "/",
901
- className: cn("flex items-center gap-2", logoClassName),
902
- children: [
903
- logo.src && /* @__PURE__ */ jsxRuntime.jsx(
904
- img.Img,
905
- {
906
- src: logo.src,
907
- className: cn("h-9", logo.className),
908
- alt: logo.alt || "Logo",
909
- optixFlowConfig
910
- }
911
- ),
912
- logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
913
- ]
914
- }
915
- );
916
- }, [logoSlot, logo, logoClassName, optixFlowConfig]);
917
954
  const renderMenuItems = React.useMemo(() => {
918
955
  if (menuSlot) return menuSlot;
919
956
  if (!menuItems || menuItems.length === 0) return null;
@@ -977,7 +1014,15 @@ var NavbarFullscreenMenu = ({
977
1014
  headerClassName
978
1015
  ),
979
1016
  children: [
980
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-50", children: renderLogo }),
1017
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
1018
+ NavbarLogo,
1019
+ {
1020
+ logo,
1021
+ logoSlot,
1022
+ logoClassName,
1023
+ optixFlowConfig
1024
+ }
1025
+ ) }),
981
1026
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-50", children: /* @__PURE__ */ jsxRuntime.jsxs(
982
1027
  "button",
983
1028
  {
@@ -4,7 +4,7 @@ import React__default, { useState, useMemo } from 'react';
4
4
  import { clsx } from 'clsx';
5
5
  import { twMerge } from 'tailwind-merge';
6
6
  import { cva } from 'class-variance-authority';
7
- import { jsx, jsxs } from 'react/jsx-runtime';
7
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
8
8
  import { Img } from '@page-speed/img';
9
9
 
10
10
  // components/blocks/navbars/navbar-fullscreen-menu.tsx
@@ -804,6 +804,66 @@ var Section = React__default.forwardRef(
804
804
  }
805
805
  );
806
806
  Section.displayName = "Section";
807
+ var NavbarLogo = ({
808
+ logo,
809
+ logoSlot,
810
+ logoClassName,
811
+ optixFlowConfig
812
+ }) => {
813
+ if (logoSlot) return /* @__PURE__ */ jsx(Fragment, { children: logoSlot });
814
+ if (!logo) return null;
815
+ const hasResponsiveSources = logo.desktopSrc || logo.mobileSrc;
816
+ return /* @__PURE__ */ jsx(
817
+ Pressable,
818
+ {
819
+ href: logo.url || "/",
820
+ className: cn("flex items-center", logoClassName),
821
+ children: hasResponsiveSources ? (
822
+ // Responsive logo with desktop/mobile sources
823
+ /* @__PURE__ */ jsxs(Fragment, { children: [
824
+ /* @__PURE__ */ jsx(
825
+ Img,
826
+ {
827
+ src: logo.desktopSrc || logo.src || "",
828
+ className: cn(
829
+ "hidden h-8 w-auto object-contain md:block",
830
+ logo.className
831
+ ),
832
+ alt: logo.alt || "Logo",
833
+ optixFlowConfig
834
+ }
835
+ ),
836
+ /* @__PURE__ */ jsx(
837
+ Img,
838
+ {
839
+ src: logo.mobileSrc || logo.src || "",
840
+ className: cn(
841
+ "h-8 w-auto object-contain md:hidden",
842
+ logo.className
843
+ ),
844
+ alt: logo.alt || "Logo",
845
+ optixFlowConfig
846
+ }
847
+ )
848
+ ] })
849
+ ) : logo.src ? (
850
+ // Standard single logo image
851
+ /* @__PURE__ */ jsx(
852
+ Img,
853
+ {
854
+ src: logo.src,
855
+ className: cn("max-h-8 w-auto object-contain", logo.className),
856
+ alt: logo.alt || "Logo",
857
+ optixFlowConfig
858
+ }
859
+ )
860
+ ) : (
861
+ // Text-based logo (title as string or React element)
862
+ logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
863
+ )
864
+ }
865
+ );
866
+ };
807
867
 
808
868
  // lib/mediaPlaceholders.ts
809
869
  var logoPlaceholders = {
@@ -834,14 +894,14 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
834
894
  ),
835
895
  // Navigation wrapper classes (for border and shadow)
836
896
  navWrapperClasses: cn(
837
- "w-full",
897
+ "w-full h-16 items-center",
838
898
  isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm flex justify-center"
839
899
  ),
840
900
  // Section container configuration for full-width navbars
841
901
  sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
842
902
  sectionContainerMaxWidth: "full",
843
903
  // Spacing adjustment for Section component
844
- spacingOverride: isFloatingBar ? "none" : void 0
904
+ spacingOverride: isFloatingBar ? "none" : "py-0 md:py-0"
845
905
  };
846
906
  }
847
907
  var NavbarFullscreenMenu = ({
@@ -870,29 +930,6 @@ var NavbarFullscreenMenu = ({
870
930
  }) => {
871
931
  const [isOpen, setIsOpen] = useState(false);
872
932
  const toggleMenu = () => setIsOpen(!isOpen);
873
- const renderLogo = useMemo(() => {
874
- if (logoSlot) return logoSlot;
875
- if (!logo) return null;
876
- return /* @__PURE__ */ jsxs(
877
- Pressable,
878
- {
879
- href: logo.url || "/",
880
- className: cn("flex items-center gap-2", logoClassName),
881
- children: [
882
- logo.src && /* @__PURE__ */ jsx(
883
- Img,
884
- {
885
- src: logo.src,
886
- className: cn("h-9", logo.className),
887
- alt: logo.alt || "Logo",
888
- optixFlowConfig
889
- }
890
- ),
891
- logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
892
- ]
893
- }
894
- );
895
- }, [logoSlot, logo, logoClassName, optixFlowConfig]);
896
933
  const renderMenuItems = useMemo(() => {
897
934
  if (menuSlot) return menuSlot;
898
935
  if (!menuItems || menuItems.length === 0) return null;
@@ -956,7 +993,15 @@ var NavbarFullscreenMenu = ({
956
993
  headerClassName
957
994
  ),
958
995
  children: [
959
- /* @__PURE__ */ jsx("div", { className: "z-50", children: renderLogo }),
996
+ /* @__PURE__ */ jsx("div", { className: "z-50", children: /* @__PURE__ */ jsx(
997
+ NavbarLogo,
998
+ {
999
+ logo,
1000
+ logoSlot,
1001
+ logoClassName,
1002
+ optixFlowConfig
1003
+ }
1004
+ ) }),
960
1005
  /* @__PURE__ */ jsx("div", { className: "z-50", children: /* @__PURE__ */ jsxs(
961
1006
  "button",
962
1007
  {