@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
|
@@ -1265,6 +1265,66 @@ function AspectRatio({
|
|
|
1265
1265
|
}) {
|
|
1266
1266
|
return /* @__PURE__ */ jsxRuntime.jsx(AspectRatioPrimitive__namespace.Root, { "data-slot": "aspect-ratio", ...props });
|
|
1267
1267
|
}
|
|
1268
|
+
var NavbarLogo = ({
|
|
1269
|
+
logo,
|
|
1270
|
+
logoSlot,
|
|
1271
|
+
logoClassName,
|
|
1272
|
+
optixFlowConfig
|
|
1273
|
+
}) => {
|
|
1274
|
+
if (logoSlot) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: logoSlot });
|
|
1275
|
+
if (!logo) return null;
|
|
1276
|
+
const hasResponsiveSources = logo.desktopSrc || logo.mobileSrc;
|
|
1277
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1278
|
+
Pressable,
|
|
1279
|
+
{
|
|
1280
|
+
href: logo.url || "/",
|
|
1281
|
+
className: cn("flex items-center", logoClassName),
|
|
1282
|
+
children: hasResponsiveSources ? (
|
|
1283
|
+
// Responsive logo with desktop/mobile sources
|
|
1284
|
+
/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1285
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1286
|
+
img.Img,
|
|
1287
|
+
{
|
|
1288
|
+
src: logo.desktopSrc || logo.src || "",
|
|
1289
|
+
className: cn(
|
|
1290
|
+
"hidden h-8 w-auto object-contain md:block",
|
|
1291
|
+
logo.className
|
|
1292
|
+
),
|
|
1293
|
+
alt: logo.alt || "Logo",
|
|
1294
|
+
optixFlowConfig
|
|
1295
|
+
}
|
|
1296
|
+
),
|
|
1297
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1298
|
+
img.Img,
|
|
1299
|
+
{
|
|
1300
|
+
src: logo.mobileSrc || logo.src || "",
|
|
1301
|
+
className: cn(
|
|
1302
|
+
"h-8 w-auto object-contain md:hidden",
|
|
1303
|
+
logo.className
|
|
1304
|
+
),
|
|
1305
|
+
alt: logo.alt || "Logo",
|
|
1306
|
+
optixFlowConfig
|
|
1307
|
+
}
|
|
1308
|
+
)
|
|
1309
|
+
] })
|
|
1310
|
+
) : logo.src ? (
|
|
1311
|
+
// Standard single logo image
|
|
1312
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1313
|
+
img.Img,
|
|
1314
|
+
{
|
|
1315
|
+
src: logo.src,
|
|
1316
|
+
className: cn("max-h-8 w-auto object-contain", logo.className),
|
|
1317
|
+
alt: logo.alt || "Logo",
|
|
1318
|
+
optixFlowConfig
|
|
1319
|
+
}
|
|
1320
|
+
)
|
|
1321
|
+
) : (
|
|
1322
|
+
// Text-based logo (title as string or React element)
|
|
1323
|
+
logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
|
|
1324
|
+
)
|
|
1325
|
+
}
|
|
1326
|
+
);
|
|
1327
|
+
};
|
|
1268
1328
|
|
|
1269
1329
|
// lib/mediaPlaceholders.ts
|
|
1270
1330
|
var logoPlaceholders = {
|
|
@@ -1417,14 +1477,14 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
|
|
|
1417
1477
|
),
|
|
1418
1478
|
// Navigation wrapper classes (for border and shadow)
|
|
1419
1479
|
navWrapperClasses: cn(
|
|
1420
|
-
"w-full",
|
|
1480
|
+
"w-full h-16 items-center",
|
|
1421
1481
|
isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm flex justify-center"
|
|
1422
1482
|
),
|
|
1423
1483
|
// Section container configuration for full-width navbars
|
|
1424
1484
|
sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
|
|
1425
1485
|
sectionContainerMaxWidth: "full",
|
|
1426
1486
|
// Spacing adjustment for Section component
|
|
1427
|
-
spacingOverride: isFloatingBar ? "none" :
|
|
1487
|
+
spacingOverride: isFloatingBar ? "none" : "py-0 md:py-0"
|
|
1428
1488
|
};
|
|
1429
1489
|
}
|
|
1430
1490
|
var MOBILE_BREAKPOINT = 1280;
|
|
@@ -1473,32 +1533,6 @@ var NavbarAnimatedPreview = ({
|
|
|
1473
1533
|
const handleMobileMenu = () => {
|
|
1474
1534
|
setOpen(!open);
|
|
1475
1535
|
};
|
|
1476
|
-
const renderLogo = React.useMemo(() => {
|
|
1477
|
-
if (logoSlot) return logoSlot;
|
|
1478
|
-
if (!logo) return null;
|
|
1479
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1480
|
-
Pressable,
|
|
1481
|
-
{
|
|
1482
|
-
href: logo.url || "/",
|
|
1483
|
-
className: cn(
|
|
1484
|
-
"flex max-h-8 items-center gap-2 text-lg font-semibold tracking-tighter",
|
|
1485
|
-
logoClassName
|
|
1486
|
-
),
|
|
1487
|
-
children: [
|
|
1488
|
-
logo.src && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1489
|
-
img.Img,
|
|
1490
|
-
{
|
|
1491
|
-
src: logo.src,
|
|
1492
|
-
alt: logo.alt || "Logo",
|
|
1493
|
-
className: cn("inline-block size-6", logo.className),
|
|
1494
|
-
optixFlowConfig
|
|
1495
|
-
}
|
|
1496
|
-
),
|
|
1497
|
-
logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline-block", children: logo.title }) : logo.title)
|
|
1498
|
-
]
|
|
1499
|
-
}
|
|
1500
|
-
);
|
|
1501
|
-
}, [logoSlot, logo, logoClassName, optixFlowConfig]);
|
|
1502
1536
|
const renderActions = React.useMemo(() => {
|
|
1503
1537
|
if (actionsSlot) return actionsSlot;
|
|
1504
1538
|
if (!actions || actions.length === 0) return null;
|
|
@@ -1574,7 +1608,15 @@ var NavbarAnimatedPreview = ({
|
|
|
1574
1608
|
"relative z-999 grid w-full grid-cols-2 items-center justify-between gap-8 xl:grid-cols-3"
|
|
1575
1609
|
),
|
|
1576
1610
|
children: [
|
|
1577
|
-
|
|
1611
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1612
|
+
NavbarLogo,
|
|
1613
|
+
{
|
|
1614
|
+
logo,
|
|
1615
|
+
logoSlot,
|
|
1616
|
+
logoClassName,
|
|
1617
|
+
optixFlowConfig
|
|
1618
|
+
}
|
|
1619
|
+
),
|
|
1578
1620
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("hidden xl:flex", navClassName), children: renderNavigation }),
|
|
1579
1621
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("justify-self-end", actionsClassName), children: [
|
|
1580
1622
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden xl:block", children: renderActions }),
|
|
@@ -1239,6 +1239,66 @@ function AspectRatio({
|
|
|
1239
1239
|
}) {
|
|
1240
1240
|
return /* @__PURE__ */ jsx(AspectRatioPrimitive.Root, { "data-slot": "aspect-ratio", ...props });
|
|
1241
1241
|
}
|
|
1242
|
+
var NavbarLogo = ({
|
|
1243
|
+
logo,
|
|
1244
|
+
logoSlot,
|
|
1245
|
+
logoClassName,
|
|
1246
|
+
optixFlowConfig
|
|
1247
|
+
}) => {
|
|
1248
|
+
if (logoSlot) return /* @__PURE__ */ jsx(Fragment, { children: logoSlot });
|
|
1249
|
+
if (!logo) return null;
|
|
1250
|
+
const hasResponsiveSources = logo.desktopSrc || logo.mobileSrc;
|
|
1251
|
+
return /* @__PURE__ */ jsx(
|
|
1252
|
+
Pressable,
|
|
1253
|
+
{
|
|
1254
|
+
href: logo.url || "/",
|
|
1255
|
+
className: cn("flex items-center", logoClassName),
|
|
1256
|
+
children: hasResponsiveSources ? (
|
|
1257
|
+
// Responsive logo with desktop/mobile sources
|
|
1258
|
+
/* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1259
|
+
/* @__PURE__ */ jsx(
|
|
1260
|
+
Img,
|
|
1261
|
+
{
|
|
1262
|
+
src: logo.desktopSrc || logo.src || "",
|
|
1263
|
+
className: cn(
|
|
1264
|
+
"hidden h-8 w-auto object-contain md:block",
|
|
1265
|
+
logo.className
|
|
1266
|
+
),
|
|
1267
|
+
alt: logo.alt || "Logo",
|
|
1268
|
+
optixFlowConfig
|
|
1269
|
+
}
|
|
1270
|
+
),
|
|
1271
|
+
/* @__PURE__ */ jsx(
|
|
1272
|
+
Img,
|
|
1273
|
+
{
|
|
1274
|
+
src: logo.mobileSrc || logo.src || "",
|
|
1275
|
+
className: cn(
|
|
1276
|
+
"h-8 w-auto object-contain md:hidden",
|
|
1277
|
+
logo.className
|
|
1278
|
+
),
|
|
1279
|
+
alt: logo.alt || "Logo",
|
|
1280
|
+
optixFlowConfig
|
|
1281
|
+
}
|
|
1282
|
+
)
|
|
1283
|
+
] })
|
|
1284
|
+
) : logo.src ? (
|
|
1285
|
+
// Standard single logo image
|
|
1286
|
+
/* @__PURE__ */ jsx(
|
|
1287
|
+
Img,
|
|
1288
|
+
{
|
|
1289
|
+
src: logo.src,
|
|
1290
|
+
className: cn("max-h-8 w-auto object-contain", logo.className),
|
|
1291
|
+
alt: logo.alt || "Logo",
|
|
1292
|
+
optixFlowConfig
|
|
1293
|
+
}
|
|
1294
|
+
)
|
|
1295
|
+
) : (
|
|
1296
|
+
// Text-based logo (title as string or React element)
|
|
1297
|
+
logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
|
|
1298
|
+
)
|
|
1299
|
+
}
|
|
1300
|
+
);
|
|
1301
|
+
};
|
|
1242
1302
|
|
|
1243
1303
|
// lib/mediaPlaceholders.ts
|
|
1244
1304
|
var logoPlaceholders = {
|
|
@@ -1391,14 +1451,14 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
|
|
|
1391
1451
|
),
|
|
1392
1452
|
// Navigation wrapper classes (for border and shadow)
|
|
1393
1453
|
navWrapperClasses: cn(
|
|
1394
|
-
"w-full",
|
|
1454
|
+
"w-full h-16 items-center",
|
|
1395
1455
|
isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm flex justify-center"
|
|
1396
1456
|
),
|
|
1397
1457
|
// Section container configuration for full-width navbars
|
|
1398
1458
|
sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
|
|
1399
1459
|
sectionContainerMaxWidth: "full",
|
|
1400
1460
|
// Spacing adjustment for Section component
|
|
1401
|
-
spacingOverride: isFloatingBar ? "none" :
|
|
1461
|
+
spacingOverride: isFloatingBar ? "none" : "py-0 md:py-0"
|
|
1402
1462
|
};
|
|
1403
1463
|
}
|
|
1404
1464
|
var MOBILE_BREAKPOINT = 1280;
|
|
@@ -1447,32 +1507,6 @@ var NavbarAnimatedPreview = ({
|
|
|
1447
1507
|
const handleMobileMenu = () => {
|
|
1448
1508
|
setOpen(!open);
|
|
1449
1509
|
};
|
|
1450
|
-
const renderLogo = useMemo(() => {
|
|
1451
|
-
if (logoSlot) return logoSlot;
|
|
1452
|
-
if (!logo) return null;
|
|
1453
|
-
return /* @__PURE__ */ jsxs(
|
|
1454
|
-
Pressable,
|
|
1455
|
-
{
|
|
1456
|
-
href: logo.url || "/",
|
|
1457
|
-
className: cn(
|
|
1458
|
-
"flex max-h-8 items-center gap-2 text-lg font-semibold tracking-tighter",
|
|
1459
|
-
logoClassName
|
|
1460
|
-
),
|
|
1461
|
-
children: [
|
|
1462
|
-
logo.src && /* @__PURE__ */ jsx(
|
|
1463
|
-
Img,
|
|
1464
|
-
{
|
|
1465
|
-
src: logo.src,
|
|
1466
|
-
alt: logo.alt || "Logo",
|
|
1467
|
-
className: cn("inline-block size-6", logo.className),
|
|
1468
|
-
optixFlowConfig
|
|
1469
|
-
}
|
|
1470
|
-
),
|
|
1471
|
-
logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsx("span", { className: "hidden md:inline-block", children: logo.title }) : logo.title)
|
|
1472
|
-
]
|
|
1473
|
-
}
|
|
1474
|
-
);
|
|
1475
|
-
}, [logoSlot, logo, logoClassName, optixFlowConfig]);
|
|
1476
1510
|
const renderActions = useMemo(() => {
|
|
1477
1511
|
if (actionsSlot) return actionsSlot;
|
|
1478
1512
|
if (!actions || actions.length === 0) return null;
|
|
@@ -1548,7 +1582,15 @@ var NavbarAnimatedPreview = ({
|
|
|
1548
1582
|
"relative z-999 grid w-full grid-cols-2 items-center justify-between gap-8 xl:grid-cols-3"
|
|
1549
1583
|
),
|
|
1550
1584
|
children: [
|
|
1551
|
-
|
|
1585
|
+
/* @__PURE__ */ jsx(
|
|
1586
|
+
NavbarLogo,
|
|
1587
|
+
{
|
|
1588
|
+
logo,
|
|
1589
|
+
logoSlot,
|
|
1590
|
+
logoClassName,
|
|
1591
|
+
optixFlowConfig
|
|
1592
|
+
}
|
|
1593
|
+
),
|
|
1552
1594
|
/* @__PURE__ */ jsx("div", { className: cn("hidden xl:flex", navClassName), children: renderNavigation }),
|
|
1553
1595
|
/* @__PURE__ */ jsxs("div", { className: cn("justify-self-end", actionsClassName), children: [
|
|
1554
1596
|
/* @__PURE__ */ jsx("div", { className: "hidden xl:block", children: renderActions }),
|
|
@@ -7,9 +7,9 @@ var clsx = require('clsx');
|
|
|
7
7
|
var tailwindMerge = require('tailwind-merge');
|
|
8
8
|
var classVarianceAuthority = require('class-variance-authority');
|
|
9
9
|
var jsxRuntime = require('react/jsx-runtime');
|
|
10
|
-
var img = require('@page-speed/img');
|
|
11
10
|
var AccordionPrimitive = require('@radix-ui/react-accordion');
|
|
12
11
|
var SheetPrimitive = require('@radix-ui/react-dialog');
|
|
12
|
+
var img = require('@page-speed/img');
|
|
13
13
|
|
|
14
14
|
function _interopNamespace(e) {
|
|
15
15
|
if (e && e.__esModule) return e;
|
|
@@ -1171,6 +1171,66 @@ function SheetTitle({
|
|
|
1171
1171
|
}
|
|
1172
1172
|
);
|
|
1173
1173
|
}
|
|
1174
|
+
var NavbarLogo = ({
|
|
1175
|
+
logo,
|
|
1176
|
+
logoSlot,
|
|
1177
|
+
logoClassName,
|
|
1178
|
+
optixFlowConfig
|
|
1179
|
+
}) => {
|
|
1180
|
+
if (logoSlot) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: logoSlot });
|
|
1181
|
+
if (!logo) return null;
|
|
1182
|
+
const hasResponsiveSources = logo.desktopSrc || logo.mobileSrc;
|
|
1183
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1184
|
+
Pressable,
|
|
1185
|
+
{
|
|
1186
|
+
href: logo.url || "/",
|
|
1187
|
+
className: cn("flex items-center", logoClassName),
|
|
1188
|
+
children: hasResponsiveSources ? (
|
|
1189
|
+
// Responsive logo with desktop/mobile sources
|
|
1190
|
+
/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1191
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1192
|
+
img.Img,
|
|
1193
|
+
{
|
|
1194
|
+
src: logo.desktopSrc || logo.src || "",
|
|
1195
|
+
className: cn(
|
|
1196
|
+
"hidden h-8 w-auto object-contain md:block",
|
|
1197
|
+
logo.className
|
|
1198
|
+
),
|
|
1199
|
+
alt: logo.alt || "Logo",
|
|
1200
|
+
optixFlowConfig
|
|
1201
|
+
}
|
|
1202
|
+
),
|
|
1203
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1204
|
+
img.Img,
|
|
1205
|
+
{
|
|
1206
|
+
src: logo.mobileSrc || logo.src || "",
|
|
1207
|
+
className: cn(
|
|
1208
|
+
"h-8 w-auto object-contain md:hidden",
|
|
1209
|
+
logo.className
|
|
1210
|
+
),
|
|
1211
|
+
alt: logo.alt || "Logo",
|
|
1212
|
+
optixFlowConfig
|
|
1213
|
+
}
|
|
1214
|
+
)
|
|
1215
|
+
] })
|
|
1216
|
+
) : logo.src ? (
|
|
1217
|
+
// Standard single logo image
|
|
1218
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1219
|
+
img.Img,
|
|
1220
|
+
{
|
|
1221
|
+
src: logo.src,
|
|
1222
|
+
className: cn("max-h-8 w-auto object-contain", logo.className),
|
|
1223
|
+
alt: logo.alt || "Logo",
|
|
1224
|
+
optixFlowConfig
|
|
1225
|
+
}
|
|
1226
|
+
)
|
|
1227
|
+
) : (
|
|
1228
|
+
// Text-based logo (title as string or React element)
|
|
1229
|
+
logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
|
|
1230
|
+
)
|
|
1231
|
+
}
|
|
1232
|
+
);
|
|
1233
|
+
};
|
|
1174
1234
|
|
|
1175
1235
|
// lib/mediaPlaceholders.ts
|
|
1176
1236
|
var logoPlaceholders = {
|
|
@@ -1201,14 +1261,14 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
|
|
|
1201
1261
|
),
|
|
1202
1262
|
// Navigation wrapper classes (for border and shadow)
|
|
1203
1263
|
navWrapperClasses: cn(
|
|
1204
|
-
"w-full",
|
|
1264
|
+
"w-full h-16 items-center",
|
|
1205
1265
|
isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm flex justify-center"
|
|
1206
1266
|
),
|
|
1207
1267
|
// Section container configuration for full-width navbars
|
|
1208
1268
|
sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
|
|
1209
1269
|
sectionContainerMaxWidth: "full",
|
|
1210
1270
|
// Spacing adjustment for Section component
|
|
1211
|
-
spacingOverride: isFloatingBar ? "none" :
|
|
1271
|
+
spacingOverride: isFloatingBar ? "none" : "py-0 md:py-0"
|
|
1212
1272
|
};
|
|
1213
1273
|
}
|
|
1214
1274
|
var NavigationMenuWithoutViewport = ({
|
|
@@ -1295,29 +1355,6 @@ var NavbarCenteredMenu = ({
|
|
|
1295
1355
|
patternOpacity,
|
|
1296
1356
|
optixFlowConfig
|
|
1297
1357
|
}) => {
|
|
1298
|
-
const renderLogo = React.useMemo(() => {
|
|
1299
|
-
if (logoSlot) return logoSlot;
|
|
1300
|
-
if (!logo) return null;
|
|
1301
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1302
|
-
Pressable,
|
|
1303
|
-
{
|
|
1304
|
-
href: logo.url || "/",
|
|
1305
|
-
className: cn("flex items-center gap-2", logoClassName),
|
|
1306
|
-
children: [
|
|
1307
|
-
logo.src && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1308
|
-
img.Img,
|
|
1309
|
-
{
|
|
1310
|
-
src: logo.src,
|
|
1311
|
-
className: cn("max-h-8", logo.className),
|
|
1312
|
-
alt: logo.alt || "Logo",
|
|
1313
|
-
optixFlowConfig
|
|
1314
|
-
}
|
|
1315
|
-
),
|
|
1316
|
-
logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
|
|
1317
|
-
]
|
|
1318
|
-
}
|
|
1319
|
-
);
|
|
1320
|
-
}, [logoSlot, logo, logoClassName, optixFlowConfig]);
|
|
1321
1358
|
const renderAuthActions = React.useMemo(() => {
|
|
1322
1359
|
if (authActionsSlot) return authActionsSlot;
|
|
1323
1360
|
if (!authActions || authActions.length === 0) return null;
|
|
@@ -1379,9 +1416,20 @@ var NavbarCenteredMenu = ({
|
|
|
1379
1416
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1380
1417
|
"nav",
|
|
1381
1418
|
{
|
|
1382
|
-
className: cn(
|
|
1419
|
+
className: cn(
|
|
1420
|
+
"hidden justify-between lg:flex",
|
|
1421
|
+
desktopNavClassName
|
|
1422
|
+
),
|
|
1383
1423
|
children: [
|
|
1384
|
-
|
|
1424
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1425
|
+
NavbarLogo,
|
|
1426
|
+
{
|
|
1427
|
+
logo,
|
|
1428
|
+
logoSlot,
|
|
1429
|
+
logoClassName,
|
|
1430
|
+
optixFlowConfig
|
|
1431
|
+
}
|
|
1432
|
+
),
|
|
1385
1433
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1386
1434
|
NavigationMenuWithoutViewport,
|
|
1387
1435
|
{
|
|
@@ -1394,7 +1442,15 @@ var NavbarCenteredMenu = ({
|
|
|
1394
1442
|
}
|
|
1395
1443
|
),
|
|
1396
1444
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("block lg:hidden", mobileNavClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
|
|
1397
|
-
|
|
1445
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1446
|
+
NavbarLogo,
|
|
1447
|
+
{
|
|
1448
|
+
logo,
|
|
1449
|
+
logoSlot,
|
|
1450
|
+
logoClassName,
|
|
1451
|
+
optixFlowConfig
|
|
1452
|
+
}
|
|
1453
|
+
),
|
|
1398
1454
|
/* @__PURE__ */ jsxRuntime.jsxs(Sheet, { children: [
|
|
1399
1455
|
/* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1400
1456
|
Pressable,
|
|
@@ -1408,7 +1464,15 @@ var NavbarCenteredMenu = ({
|
|
|
1408
1464
|
}
|
|
1409
1465
|
) }),
|
|
1410
1466
|
/* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { className: "overflow-y-auto", children: [
|
|
1411
|
-
/* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children:
|
|
1467
|
+
/* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1468
|
+
NavbarLogo,
|
|
1469
|
+
{
|
|
1470
|
+
logo,
|
|
1471
|
+
logoSlot,
|
|
1472
|
+
logoClassName,
|
|
1473
|
+
optixFlowConfig
|
|
1474
|
+
}
|
|
1475
|
+
) }) }),
|
|
1412
1476
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 p-4", children: [
|
|
1413
1477
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1414
1478
|
Accordion,
|
|
@@ -1419,7 +1483,13 @@ var NavbarCenteredMenu = ({
|
|
|
1419
1483
|
children: renderMobileMenu
|
|
1420
1484
|
}
|
|
1421
1485
|
),
|
|
1422
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1486
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1487
|
+
"div",
|
|
1488
|
+
{
|
|
1489
|
+
className: cn("flex flex-col gap-3", actionsClassName),
|
|
1490
|
+
children: renderAuthActions
|
|
1491
|
+
}
|
|
1492
|
+
)
|
|
1423
1493
|
] })
|
|
1424
1494
|
] })
|
|
1425
1495
|
] })
|
|
@@ -6,9 +6,9 @@ import { clsx } from 'clsx';
|
|
|
6
6
|
import { twMerge } from 'tailwind-merge';
|
|
7
7
|
import { cva } from 'class-variance-authority';
|
|
8
8
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
9
|
-
import { Img } from '@page-speed/img';
|
|
10
9
|
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
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-centered-menu.tsx
|
|
14
14
|
function cn(...inputs) {
|
|
@@ -1147,6 +1147,66 @@ function SheetTitle({
|
|
|
1147
1147
|
}
|
|
1148
1148
|
);
|
|
1149
1149
|
}
|
|
1150
|
+
var NavbarLogo = ({
|
|
1151
|
+
logo,
|
|
1152
|
+
logoSlot,
|
|
1153
|
+
logoClassName,
|
|
1154
|
+
optixFlowConfig
|
|
1155
|
+
}) => {
|
|
1156
|
+
if (logoSlot) return /* @__PURE__ */ jsx(Fragment, { children: logoSlot });
|
|
1157
|
+
if (!logo) return null;
|
|
1158
|
+
const hasResponsiveSources = logo.desktopSrc || logo.mobileSrc;
|
|
1159
|
+
return /* @__PURE__ */ jsx(
|
|
1160
|
+
Pressable,
|
|
1161
|
+
{
|
|
1162
|
+
href: logo.url || "/",
|
|
1163
|
+
className: cn("flex items-center", logoClassName),
|
|
1164
|
+
children: hasResponsiveSources ? (
|
|
1165
|
+
// Responsive logo with desktop/mobile sources
|
|
1166
|
+
/* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1167
|
+
/* @__PURE__ */ jsx(
|
|
1168
|
+
Img,
|
|
1169
|
+
{
|
|
1170
|
+
src: logo.desktopSrc || logo.src || "",
|
|
1171
|
+
className: cn(
|
|
1172
|
+
"hidden h-8 w-auto object-contain md:block",
|
|
1173
|
+
logo.className
|
|
1174
|
+
),
|
|
1175
|
+
alt: logo.alt || "Logo",
|
|
1176
|
+
optixFlowConfig
|
|
1177
|
+
}
|
|
1178
|
+
),
|
|
1179
|
+
/* @__PURE__ */ jsx(
|
|
1180
|
+
Img,
|
|
1181
|
+
{
|
|
1182
|
+
src: logo.mobileSrc || logo.src || "",
|
|
1183
|
+
className: cn(
|
|
1184
|
+
"h-8 w-auto object-contain md:hidden",
|
|
1185
|
+
logo.className
|
|
1186
|
+
),
|
|
1187
|
+
alt: logo.alt || "Logo",
|
|
1188
|
+
optixFlowConfig
|
|
1189
|
+
}
|
|
1190
|
+
)
|
|
1191
|
+
] })
|
|
1192
|
+
) : logo.src ? (
|
|
1193
|
+
// Standard single logo image
|
|
1194
|
+
/* @__PURE__ */ jsx(
|
|
1195
|
+
Img,
|
|
1196
|
+
{
|
|
1197
|
+
src: logo.src,
|
|
1198
|
+
className: cn("max-h-8 w-auto object-contain", logo.className),
|
|
1199
|
+
alt: logo.alt || "Logo",
|
|
1200
|
+
optixFlowConfig
|
|
1201
|
+
}
|
|
1202
|
+
)
|
|
1203
|
+
) : (
|
|
1204
|
+
// Text-based logo (title as string or React element)
|
|
1205
|
+
logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
|
|
1206
|
+
)
|
|
1207
|
+
}
|
|
1208
|
+
);
|
|
1209
|
+
};
|
|
1150
1210
|
|
|
1151
1211
|
// lib/mediaPlaceholders.ts
|
|
1152
1212
|
var logoPlaceholders = {
|
|
@@ -1177,14 +1237,14 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
|
|
|
1177
1237
|
),
|
|
1178
1238
|
// Navigation wrapper classes (for border and shadow)
|
|
1179
1239
|
navWrapperClasses: cn(
|
|
1180
|
-
"w-full",
|
|
1240
|
+
"w-full h-16 items-center",
|
|
1181
1241
|
isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm flex justify-center"
|
|
1182
1242
|
),
|
|
1183
1243
|
// Section container configuration for full-width navbars
|
|
1184
1244
|
sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
|
|
1185
1245
|
sectionContainerMaxWidth: "full",
|
|
1186
1246
|
// Spacing adjustment for Section component
|
|
1187
|
-
spacingOverride: isFloatingBar ? "none" :
|
|
1247
|
+
spacingOverride: isFloatingBar ? "none" : "py-0 md:py-0"
|
|
1188
1248
|
};
|
|
1189
1249
|
}
|
|
1190
1250
|
var NavigationMenuWithoutViewport = ({
|
|
@@ -1271,29 +1331,6 @@ var NavbarCenteredMenu = ({
|
|
|
1271
1331
|
patternOpacity,
|
|
1272
1332
|
optixFlowConfig
|
|
1273
1333
|
}) => {
|
|
1274
|
-
const renderLogo = useMemo(() => {
|
|
1275
|
-
if (logoSlot) return logoSlot;
|
|
1276
|
-
if (!logo) return null;
|
|
1277
|
-
return /* @__PURE__ */ jsxs(
|
|
1278
|
-
Pressable,
|
|
1279
|
-
{
|
|
1280
|
-
href: logo.url || "/",
|
|
1281
|
-
className: cn("flex items-center gap-2", logoClassName),
|
|
1282
|
-
children: [
|
|
1283
|
-
logo.src && /* @__PURE__ */ jsx(
|
|
1284
|
-
Img,
|
|
1285
|
-
{
|
|
1286
|
-
src: logo.src,
|
|
1287
|
-
className: cn("max-h-8", logo.className),
|
|
1288
|
-
alt: logo.alt || "Logo",
|
|
1289
|
-
optixFlowConfig
|
|
1290
|
-
}
|
|
1291
|
-
),
|
|
1292
|
-
logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
|
|
1293
|
-
]
|
|
1294
|
-
}
|
|
1295
|
-
);
|
|
1296
|
-
}, [logoSlot, logo, logoClassName, optixFlowConfig]);
|
|
1297
1334
|
const renderAuthActions = useMemo(() => {
|
|
1298
1335
|
if (authActionsSlot) return authActionsSlot;
|
|
1299
1336
|
if (!authActions || authActions.length === 0) return null;
|
|
@@ -1355,9 +1392,20 @@ var NavbarCenteredMenu = ({
|
|
|
1355
1392
|
/* @__PURE__ */ jsxs(
|
|
1356
1393
|
"nav",
|
|
1357
1394
|
{
|
|
1358
|
-
className: cn(
|
|
1395
|
+
className: cn(
|
|
1396
|
+
"hidden justify-between lg:flex",
|
|
1397
|
+
desktopNavClassName
|
|
1398
|
+
),
|
|
1359
1399
|
children: [
|
|
1360
|
-
|
|
1400
|
+
/* @__PURE__ */ jsx(
|
|
1401
|
+
NavbarLogo,
|
|
1402
|
+
{
|
|
1403
|
+
logo,
|
|
1404
|
+
logoSlot,
|
|
1405
|
+
logoClassName,
|
|
1406
|
+
optixFlowConfig
|
|
1407
|
+
}
|
|
1408
|
+
),
|
|
1361
1409
|
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-6", children: /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(
|
|
1362
1410
|
NavigationMenuWithoutViewport,
|
|
1363
1411
|
{
|
|
@@ -1370,7 +1418,15 @@ var NavbarCenteredMenu = ({
|
|
|
1370
1418
|
}
|
|
1371
1419
|
),
|
|
1372
1420
|
/* @__PURE__ */ jsx("div", { className: cn("block lg:hidden", mobileNavClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
1373
|
-
|
|
1421
|
+
/* @__PURE__ */ jsx(
|
|
1422
|
+
NavbarLogo,
|
|
1423
|
+
{
|
|
1424
|
+
logo,
|
|
1425
|
+
logoSlot,
|
|
1426
|
+
logoClassName,
|
|
1427
|
+
optixFlowConfig
|
|
1428
|
+
}
|
|
1429
|
+
),
|
|
1374
1430
|
/* @__PURE__ */ jsxs(Sheet, { children: [
|
|
1375
1431
|
/* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
1376
1432
|
Pressable,
|
|
@@ -1384,7 +1440,15 @@ var NavbarCenteredMenu = ({
|
|
|
1384
1440
|
}
|
|
1385
1441
|
) }),
|
|
1386
1442
|
/* @__PURE__ */ jsxs(SheetContent, { className: "overflow-y-auto", children: [
|
|
1387
|
-
/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children:
|
|
1443
|
+
/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: /* @__PURE__ */ jsx(
|
|
1444
|
+
NavbarLogo,
|
|
1445
|
+
{
|
|
1446
|
+
logo,
|
|
1447
|
+
logoSlot,
|
|
1448
|
+
logoClassName,
|
|
1449
|
+
optixFlowConfig
|
|
1450
|
+
}
|
|
1451
|
+
) }) }),
|
|
1388
1452
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-4", children: [
|
|
1389
1453
|
/* @__PURE__ */ jsx(
|
|
1390
1454
|
Accordion,
|
|
@@ -1395,7 +1459,13 @@ var NavbarCenteredMenu = ({
|
|
|
1395
1459
|
children: renderMobileMenu
|
|
1396
1460
|
}
|
|
1397
1461
|
),
|
|
1398
|
-
/* @__PURE__ */ jsx(
|
|
1462
|
+
/* @__PURE__ */ jsx(
|
|
1463
|
+
"div",
|
|
1464
|
+
{
|
|
1465
|
+
className: cn("flex flex-col gap-3", actionsClassName),
|
|
1466
|
+
children: renderAuthActions
|
|
1467
|
+
}
|
|
1468
|
+
)
|
|
1399
1469
|
] })
|
|
1400
1470
|
] })
|
|
1401
1471
|
] })
|