@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.
- package/dist/navbar-animated-preview.cjs +71 -29
- package/dist/navbar-animated-preview.js +71 -29
- package/dist/navbar-centered-menu.cjs +101 -31
- package/dist/navbar-centered-menu.js +101 -31
- package/dist/navbar-dark-icons.cjs +72 -30
- package/dist/navbar-dark-icons.js +72 -30
- package/dist/navbar-dropdown-menu.cjs +97 -30
- package/dist/navbar-dropdown-menu.js +97 -30
- package/dist/navbar-education-platform.cjs +71 -26
- package/dist/navbar-education-platform.js +71 -26
- package/dist/navbar-enterprise-mega.cjs +71 -29
- package/dist/navbar-enterprise-mega.js +71 -29
- package/dist/navbar-feature-grid.cjs +81 -28
- package/dist/navbar-feature-grid.js +81 -28
- package/dist/navbar-floating-pill.cjs +71 -26
- package/dist/navbar-floating-pill.js +71 -26
- package/dist/navbar-fullscreen-menu.cjs +71 -26
- package/dist/navbar-fullscreen-menu.js +72 -27
- package/dist/navbar-icon-links.cjs +72 -27
- package/dist/navbar-icon-links.js +72 -27
- package/dist/navbar-image-preview.cjs +2 -2
- package/dist/navbar-image-preview.js +2 -2
- package/dist/navbar-mega-menu.cjs +71 -40
- package/dist/navbar-mega-menu.js +71 -40
- package/dist/navbar-multi-column-groups.cjs +2 -2
- package/dist/navbar-multi-column-groups.js +2 -2
- package/dist/navbar-platform-resources.cjs +71 -26
- package/dist/navbar-platform-resources.js +71 -26
- package/dist/navbar-search-focused.cjs +2 -2
- package/dist/navbar-search-focused.js +2 -2
- package/dist/navbar-sidebar-mobile.cjs +2 -2
- package/dist/navbar-sidebar-mobile.js +2 -2
- package/dist/navbar-simple-links.cjs +72 -27
- package/dist/navbar-simple-links.js +72 -27
- package/dist/navbar-split-cta.cjs +2 -2
- package/dist/navbar-split-cta.js +2 -2
- package/dist/navbar-sticky-compact.cjs +2 -2
- package/dist/navbar-sticky-compact.js +2 -2
- package/dist/navbar-tabbed-sections.cjs +2 -2
- package/dist/navbar-tabbed-sections.js +2 -2
- package/dist/navbar-transparent-overlay.cjs +2 -2
- package/dist/navbar-transparent-overlay.js +2 -2
- package/dist/registry.cjs +242 -345
- package/dist/registry.js +242 -345
- 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" :
|
|
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
|
-
|
|
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:
|
|
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" :
|
|
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
|
-
|
|
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" :
|
|
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
|
-
|
|
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" :
|
|
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:
|
|
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" :
|
|
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:
|
|
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
|
{
|