@opensite/ui 1.0.1 → 1.0.2

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.
@@ -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-enterprise-mega.tsx
14
14
  function cn(...inputs) {
@@ -1279,255 +1279,12 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
1279
1279
  spacingOverride: isFloatingBar ? "none" : "py-0 md:py-0"
1280
1280
  };
1281
1281
  }
1282
- var MOBILE_BREAKPOINT = 1024;
1283
- var NavbarEnterpriseMega = ({
1284
- className,
1285
- containerClassName,
1286
- navClassName,
1287
- navigationMenuClassName,
1288
- actionsClassName,
1289
- logoClassName,
1290
- logo = {
1291
- url: "/",
1292
- src: logoPlaceholders.logoMark
1293
- },
1294
- logoSlot,
1295
- menuLinks,
1296
- actions,
1297
- actionsSlot,
1298
- layoutVariant = "fullScreenContainerizedLinks",
1299
- background,
1300
- spacing,
1301
- pattern,
1302
- patternOpacity,
1303
- optixFlowConfig
1304
- }) => {
1305
- const [open, setOpen] = useState(false);
1306
- useEffect(() => {
1307
- const handleResize = () => {
1308
- if (window.innerWidth > MOBILE_BREAKPOINT) {
1309
- setOpen(false);
1310
- }
1311
- };
1312
- handleResize();
1313
- window.addEventListener("resize", handleResize);
1314
- return () => window.removeEventListener("resize", handleResize);
1315
- }, []);
1316
- useEffect(() => {
1317
- document.body.style.overflow = open ? "hidden" : "auto";
1318
- }, [open]);
1319
- const handleMobileMenu = () => {
1320
- setOpen(!open);
1321
- };
1322
- const renderActions = useMemo(() => {
1323
- if (actionsSlot) return actionsSlot;
1324
- if (!actions || actions.length === 0) return null;
1325
- return actions.map((action, index) => {
1326
- const {
1327
- label,
1328
- icon,
1329
- iconAfter,
1330
- children,
1331
- className: actionClassName,
1332
- ...pressableProps
1333
- } = action;
1334
- return /* @__PURE__ */ jsx(Pressable, { className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
1335
- icon,
1336
- label,
1337
- iconAfter
1338
- ] }) }, index);
1339
- });
1340
- }, [actionsSlot, actions]);
1341
- const {
1342
- sectionClasses,
1343
- containerWrapperClasses,
1344
- innerContainerClasses,
1345
- navWrapperClasses,
1346
- sectionContainerClassName,
1347
- sectionContainerMaxWidth,
1348
- spacingOverride
1349
- } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
1350
- return /* @__PURE__ */ jsxs(Fragment$1, { children: [
1351
- /* @__PURE__ */ jsx(
1352
- Section,
1353
- {
1354
- background,
1355
- spacing: spacingOverride ?? spacing,
1356
- className: cn(
1357
- "pointer-events-auto fixed top-0 z-999 flex w-full items-center justify-center",
1358
- sectionClasses
1359
- ),
1360
- pattern,
1361
- patternOpacity,
1362
- containerClassName: sectionContainerClassName,
1363
- containerMaxWidth: sectionContainerMaxWidth,
1364
- children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
1365
- "nav",
1366
- {
1367
- className: cn(
1368
- "flex h-16 items-center justify-between gap-8",
1369
- navClassName
1370
- ),
1371
- children: [
1372
- /* @__PURE__ */ jsx(
1373
- NavbarLogo,
1374
- {
1375
- logo,
1376
- logoSlot,
1377
- logoClassName,
1378
- optixFlowConfig
1379
- }
1380
- ),
1381
- /* @__PURE__ */ jsx(
1382
- NavigationMenu,
1383
- {
1384
- className: cn(
1385
- "hidden lg:flex [&>div:last-child]:left-1/2 [&>div:last-child]:-translate-x-1/2",
1386
- navigationMenuClassName
1387
- ),
1388
- viewport: true,
1389
- children: /* @__PURE__ */ jsx(NavigationMenuList, { children: menuLinks?.map((item, index) => /* @__PURE__ */ jsx(
1390
- DesktopMenuItem,
1391
- {
1392
- item,
1393
- index,
1394
- optixFlowConfig
1395
- },
1396
- `desktop-link-${index}`
1397
- )) })
1398
- }
1399
- ),
1400
- /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", actionsClassName), children: [
1401
- /* @__PURE__ */ jsx("div", { className: "hidden lg:flex lg:items-center lg:gap-3", children: renderActions }),
1402
- /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(
1403
- Pressable,
1404
- {
1405
- className: "size-11",
1406
- variant: "ghost",
1407
- size: "icon",
1408
- asButton: true,
1409
- onClick: handleMobileMenu,
1410
- children: open ? /* @__PURE__ */ jsx(
1411
- DynamicIcon,
1412
- {
1413
- name: "lucide/x",
1414
- size: 22,
1415
- className: "stroke-foreground"
1416
- }
1417
- ) : /* @__PURE__ */ jsx(
1418
- DynamicIcon,
1419
- {
1420
- name: "lucide/menu",
1421
- size: 22,
1422
- className: "stroke-foreground"
1423
- }
1424
- )
1425
- }
1426
- ) })
1427
- ] })
1428
- ]
1429
- }
1430
- ) }) }) })
1431
- }
1432
- ),
1433
- /* @__PURE__ */ jsx(
1434
- MobileNavigationMenu,
1435
- {
1436
- open,
1437
- setOpen,
1438
- menuLinks: menuLinks ?? [],
1439
- actionsClassName,
1440
- actions,
1441
- actionsSlot,
1442
- optixFlowConfig
1443
- }
1444
- )
1445
- ] });
1446
- };
1447
- var DesktopMenuItem = ({
1448
- item,
1449
- index,
1450
- optixFlowConfig
1451
- }) => {
1452
- const hasDropdown = Boolean(item.layout);
1453
- const effectiveLayout = item.layout || "solutions-with-platform";
1454
- if (hasDropdown) {
1455
- return /* @__PURE__ */ jsxs(NavigationMenuItem, { value: `${index}`, children: [
1456
- /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal hover:bg-muted focus:bg-muted data-[state=open]:bg-muted/50", children: item.label }),
1457
- /* @__PURE__ */ jsx(NavigationMenuContent, { className: "!rounded-xl !border-0 !p-6", children: renderDropdownContent(
1458
- { ...item, layout: effectiveLayout },
1459
- optixFlowConfig
1460
- ) })
1461
- ] }, `desktop-menu-item-${index}`);
1462
- }
1463
- return /* @__PURE__ */ jsx(NavigationMenuItem, { value: `${index}`, children: /* @__PURE__ */ jsx(
1464
- NavigationMenuLink,
1465
- {
1466
- href: item.href,
1467
- className: "h-auto bg-transparent px-3 py-2 font-normal hover:bg-muted focus:bg-muted",
1468
- children: item.label
1469
- }
1470
- ) }, `desktop-menu-item-${index}`);
1471
- };
1472
- var renderDropdownContent = (item, optixFlowConfig) => {
1473
- switch (item.layout) {
1474
- case "solutions-with-platform":
1475
- return /* @__PURE__ */ jsx(
1476
- SolutionsMenu,
1477
- {
1478
- solutionCards: item.solutionCards ?? [],
1479
- platformItems: item.platformItems ?? [],
1480
- featuredHeroCard: item.featuredHeroCard,
1481
- optixFlowConfig
1482
- }
1483
- );
1484
- case "products-categorized":
1485
- return /* @__PURE__ */ jsx(
1486
- ProductsMenu,
1487
- {
1488
- productCategories: item.productCategories ?? [],
1489
- featuredHeroCard: item.featuredHeroCard,
1490
- optixFlowConfig
1491
- }
1492
- );
1493
- case "features-with-locations":
1494
- return /* @__PURE__ */ jsx(
1495
- GlobalMenu,
1496
- {
1497
- featureCategories: item.featureCategories ?? [],
1498
- regions: item.regions ?? [],
1499
- featuredHeroCard: item.featuredHeroCard,
1500
- optixFlowConfig
1501
- }
1502
- );
1503
- case "partners-promotional":
1504
- return /* @__PURE__ */ jsx(
1505
- PartnersMenu,
1506
- {
1507
- partnerCards: item.partnerCards ?? [],
1508
- featuredHeroCard: item.featuredHeroCard,
1509
- optixFlowConfig
1510
- }
1511
- );
1512
- case "resources-with-topics":
1513
- return /* @__PURE__ */ jsx(
1514
- ResourcesMenu,
1515
- {
1516
- resourceItems: item.resourceItems ?? [],
1517
- topicGroups: item.topicGroups ?? [],
1518
- featuredHeroCard: item.featuredHeroCard
1519
- }
1520
- );
1521
- default:
1522
- return null;
1523
- }
1524
- };
1525
1282
  var SolutionsMenu = ({
1526
1283
  solutionCards,
1527
1284
  platformItems,
1528
1285
  featuredHeroCard,
1529
1286
  optixFlowConfig
1530
- }) => /* @__PURE__ */ jsxs("div", { className: "grid min-w-[1100px] grid-cols-2 gap-4", children: [
1287
+ }) => /* @__PURE__ */ jsxs("div", { className: "grid w-[1200px] grid-cols-2 gap-4", children: [
1531
1288
  featuredHeroCard && /* @__PURE__ */ jsx("div", { className: "col-span-1", children: /* @__PURE__ */ jsxs(
1532
1289
  Pressable,
1533
1290
  {
@@ -1628,7 +1385,7 @@ var ProductsMenu = ({
1628
1385
  productCategories,
1629
1386
  featuredHeroCard,
1630
1387
  optixFlowConfig
1631
- }) => /* @__PURE__ */ jsxs("div", { className: "grid min-w-[1000px] grid-cols-[320px_1fr] gap-6", children: [
1388
+ }) => /* @__PURE__ */ jsxs("div", { className: "grid w-[1100px] grid-cols-[320px_1fr] gap-6", children: [
1632
1389
  featuredHeroCard && /* @__PURE__ */ jsx("div", { className: "col-span-1", children: /* @__PURE__ */ jsxs(
1633
1390
  Pressable,
1634
1391
  {
@@ -1691,18 +1448,98 @@ var ProductsMenu = ({
1691
1448
  )) })
1692
1449
  ] }, category.title)) })
1693
1450
  ] });
1694
- var GlobalMenu = ({
1695
- featureCategories,
1696
- regions,
1697
- featuredHeroCard,
1698
- optixFlowConfig
1699
- }) => /* @__PURE__ */ jsxs("div", { className: "min-w-[1000px]", children: [
1700
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[280px_1fr] gap-6", children: [
1701
- featuredHeroCard && /* @__PURE__ */ jsx("div", { className: "col-span-1", children: /* @__PURE__ */ jsxs(
1702
- Pressable,
1703
- {
1704
- href: featuredHeroCard.href,
1705
- className: cn(
1451
+ var ResourcesMenu = ({
1452
+ resourceItems,
1453
+ topicGroups,
1454
+ featuredHeroCard
1455
+ }) => /* @__PURE__ */ jsxs("div", { className: "grid w-[1100px] grid-cols-[280px_1fr_220px] gap-6", children: [
1456
+ featuredHeroCard && /* @__PURE__ */ jsx("div", { className: "col-span-1", children: /* @__PURE__ */ jsxs(
1457
+ Pressable,
1458
+ {
1459
+ href: featuredHeroCard.href,
1460
+ className: cn(
1461
+ "group flex h-full flex-col overflow-hidden rounded-lg text-primary-foreground",
1462
+ featuredHeroCard.variant === "accent" ? "bg-accent text-accent-foreground" : "bg-primary"
1463
+ ),
1464
+ children: [
1465
+ /* @__PURE__ */ jsx("div", { className: "relative aspect-[4/3] w-full overflow-hidden", children: /* @__PURE__ */ jsx(
1466
+ Img,
1467
+ {
1468
+ src: featuredHeroCard.image,
1469
+ alt: featuredHeroCard.title,
1470
+ className: "h-full w-full object-cover invert"
1471
+ }
1472
+ ) }),
1473
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-5", children: [
1474
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-base font-semibold", children: [
1475
+ featuredHeroCard.title,
1476
+ /* @__PURE__ */ jsx(
1477
+ DynamicIcon,
1478
+ {
1479
+ name: "lucide/arrow-right",
1480
+ size: 16,
1481
+ className: "transition-transform group-hover:translate-x-1"
1482
+ }
1483
+ )
1484
+ ] }),
1485
+ /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm leading-relaxed", children: featuredHeroCard.description })
1486
+ ] })
1487
+ ]
1488
+ }
1489
+ ) }),
1490
+ resourceItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "col-span-1", children: [
1491
+ /* @__PURE__ */ jsx("div", { className: "mb-3 text-left", children: /* @__PURE__ */ jsx("strong", { className: "text-xs font-medium tracking-wider text-muted-foreground uppercase", children: "Resources" }) }),
1492
+ /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: resourceItems.map((resource) => /* @__PURE__ */ jsxs(
1493
+ NavigationMenuLink,
1494
+ {
1495
+ href: resource.href,
1496
+ className: "group col-span-1 !flex !w-full items-start gap-3 rounded-lg border border-border p-3 hover:bg-muted",
1497
+ children: [
1498
+ /* @__PURE__ */ jsx(
1499
+ DynamicIcon,
1500
+ {
1501
+ name: resource.icon,
1502
+ size: 18,
1503
+ className: "mt-0.5 shrink-0"
1504
+ }
1505
+ ),
1506
+ /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
1507
+ /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: resource.title }),
1508
+ /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: resource.description })
1509
+ ] })
1510
+ ]
1511
+ },
1512
+ resource.id
1513
+ )) })
1514
+ ] }),
1515
+ topicGroups.length > 0 && /* @__PURE__ */ jsx("div", { className: "col-span-1", children: topicGroups.map((group) => /* @__PURE__ */ jsxs("div", { className: "mb-5 last:mb-0", children: [
1516
+ /* @__PURE__ */ jsx("div", { className: "mb-3 text-left", children: /* @__PURE__ */ jsx("strong", { className: "text-xs font-medium tracking-wider text-muted-foreground uppercase", children: group.title }) }),
1517
+ /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: group.topics.map((topic) => /* @__PURE__ */ jsxs(
1518
+ NavigationMenuLink,
1519
+ {
1520
+ href: topic.href,
1521
+ className: "group !flex !w-full items-center gap-2 rounded-lg p-2 hover:bg-muted",
1522
+ children: [
1523
+ /* @__PURE__ */ jsx(DynamicIcon, { name: topic.icon, size: 14, className: "shrink-0" }),
1524
+ /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-sm font-medium", children: topic.title })
1525
+ ]
1526
+ },
1527
+ topic.id
1528
+ )) })
1529
+ ] }, group.title)) })
1530
+ ] });
1531
+ var GlobalMenu = ({
1532
+ featureCategories,
1533
+ regions,
1534
+ featuredHeroCard,
1535
+ optixFlowConfig
1536
+ }) => /* @__PURE__ */ jsxs("div", { className: "w-[1100px]", children: [
1537
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[280px_1fr] gap-6", children: [
1538
+ featuredHeroCard && /* @__PURE__ */ jsx("div", { className: "col-span-1", children: /* @__PURE__ */ jsxs(
1539
+ Pressable,
1540
+ {
1541
+ href: featuredHeroCard.href,
1542
+ className: cn(
1706
1543
  "group flex h-full flex-col overflow-hidden rounded-lg text-primary-foreground",
1707
1544
  featuredHeroCard.variant === "accent" ? "bg-accent text-accent-foreground" : "bg-primary"
1708
1545
  ),
@@ -1782,7 +1619,7 @@ var PartnersMenu = ({
1782
1619
  partnerCards,
1783
1620
  featuredHeroCard,
1784
1621
  optixFlowConfig
1785
- }) => /* @__PURE__ */ jsxs("div", { className: "grid min-w-[900px] grid-cols-[2fr_1fr] gap-6", children: [
1622
+ }) => /* @__PURE__ */ jsxs("div", { className: "grid w-[1000px] grid-cols-[2fr_1fr] gap-6", children: [
1786
1623
  featuredHeroCard && /* @__PURE__ */ jsx("div", { className: "col-span-1", children: /* @__PURE__ */ jsxs(
1787
1624
  Pressable,
1788
1625
  {
@@ -1837,86 +1674,249 @@ var PartnersMenu = ({
1837
1674
  card.title
1838
1675
  )) })
1839
1676
  ] });
1840
- var ResourcesMenu = ({
1841
- resourceItems,
1842
- topicGroups,
1843
- featuredHeroCard
1844
- }) => /* @__PURE__ */ jsxs("div", { className: "grid min-w-[1000px] grid-cols-[280px_1fr_220px] gap-6", children: [
1845
- featuredHeroCard && /* @__PURE__ */ jsx("div", { className: "col-span-1", children: /* @__PURE__ */ jsxs(
1846
- Pressable,
1847
- {
1848
- href: featuredHeroCard.href,
1849
- className: cn(
1850
- "group flex h-full flex-col overflow-hidden rounded-lg text-primary-foreground",
1851
- featuredHeroCard.variant === "accent" ? "bg-accent text-accent-foreground" : "bg-primary"
1852
- ),
1853
- children: [
1854
- /* @__PURE__ */ jsx("div", { className: "relative aspect-[4/3] w-full overflow-hidden", children: /* @__PURE__ */ jsx(
1855
- Img,
1677
+ var MOBILE_BREAKPOINT = 1024;
1678
+ var NavbarEnterpriseMega = ({
1679
+ className,
1680
+ containerClassName,
1681
+ navClassName,
1682
+ navigationMenuClassName,
1683
+ actionsClassName,
1684
+ logoClassName,
1685
+ logo = {
1686
+ url: "/",
1687
+ src: logoPlaceholders.logoMark
1688
+ },
1689
+ logoSlot,
1690
+ menuLinks,
1691
+ actions,
1692
+ actionsSlot,
1693
+ layoutVariant = "fullScreenContainerizedLinks",
1694
+ background,
1695
+ spacing,
1696
+ pattern,
1697
+ patternOpacity,
1698
+ optixFlowConfig
1699
+ }) => {
1700
+ const [open, setOpen] = useState(false);
1701
+ useEffect(() => {
1702
+ const handleResize = () => {
1703
+ if (window.innerWidth > MOBILE_BREAKPOINT) {
1704
+ setOpen(false);
1705
+ }
1706
+ };
1707
+ handleResize();
1708
+ window.addEventListener("resize", handleResize);
1709
+ return () => window.removeEventListener("resize", handleResize);
1710
+ }, []);
1711
+ useEffect(() => {
1712
+ document.body.style.overflow = open ? "hidden" : "auto";
1713
+ }, [open]);
1714
+ const handleMobileMenu = () => {
1715
+ setOpen(!open);
1716
+ };
1717
+ const renderActions = useMemo(() => {
1718
+ if (actionsSlot) return actionsSlot;
1719
+ if (!actions || actions.length === 0) return null;
1720
+ return actions.map((action, index) => {
1721
+ const {
1722
+ label,
1723
+ icon,
1724
+ iconAfter,
1725
+ children,
1726
+ className: actionClassName,
1727
+ ...pressableProps
1728
+ } = action;
1729
+ return /* @__PURE__ */ jsx(Pressable, { className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
1730
+ icon,
1731
+ label,
1732
+ iconAfter
1733
+ ] }) }, index);
1734
+ });
1735
+ }, [actionsSlot, actions]);
1736
+ const {
1737
+ sectionClasses,
1738
+ containerWrapperClasses,
1739
+ innerContainerClasses,
1740
+ navWrapperClasses,
1741
+ sectionContainerClassName,
1742
+ sectionContainerMaxWidth,
1743
+ spacingOverride
1744
+ } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
1745
+ return /* @__PURE__ */ jsxs(Fragment$1, { children: [
1746
+ /* @__PURE__ */ jsx(
1747
+ Section,
1748
+ {
1749
+ background,
1750
+ spacing: spacingOverride ?? spacing,
1751
+ className: cn(
1752
+ "pointer-events-auto fixed top-0 z-999 flex w-full items-center justify-center",
1753
+ sectionClasses
1754
+ ),
1755
+ pattern,
1756
+ patternOpacity,
1757
+ containerClassName: sectionContainerClassName,
1758
+ containerMaxWidth: sectionContainerMaxWidth,
1759
+ children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
1760
+ "nav",
1856
1761
  {
1857
- src: featuredHeroCard.image,
1858
- alt: featuredHeroCard.title,
1859
- className: "h-full w-full object-cover invert"
1762
+ className: cn(
1763
+ "flex h-16 items-center justify-between gap-8",
1764
+ navClassName
1765
+ ),
1766
+ children: [
1767
+ /* @__PURE__ */ jsx(
1768
+ NavbarLogo,
1769
+ {
1770
+ logo,
1771
+ logoSlot,
1772
+ logoClassName,
1773
+ optixFlowConfig
1774
+ }
1775
+ ),
1776
+ /* @__PURE__ */ jsx(
1777
+ NavigationMenu,
1778
+ {
1779
+ className: cn(
1780
+ "hidden lg:flex [&>div:last-child]:left-1/2 [&>div:last-child]:-translate-x-1/2",
1781
+ navigationMenuClassName
1782
+ ),
1783
+ viewport: true,
1784
+ children: /* @__PURE__ */ jsx(NavigationMenuList, { children: menuLinks?.map((item, index) => /* @__PURE__ */ jsx(
1785
+ DesktopMenuItem,
1786
+ {
1787
+ item,
1788
+ index,
1789
+ optixFlowConfig
1790
+ },
1791
+ `desktop-link-${index}`
1792
+ )) })
1793
+ }
1794
+ ),
1795
+ /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", actionsClassName), children: [
1796
+ /* @__PURE__ */ jsx("div", { className: "hidden lg:flex lg:items-center lg:gap-3", children: renderActions }),
1797
+ /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(
1798
+ Pressable,
1799
+ {
1800
+ className: "size-11",
1801
+ variant: "ghost",
1802
+ size: "icon",
1803
+ asButton: true,
1804
+ onClick: handleMobileMenu,
1805
+ children: open ? /* @__PURE__ */ jsx(
1806
+ DynamicIcon,
1807
+ {
1808
+ name: "lucide/x",
1809
+ size: 22,
1810
+ className: "stroke-foreground"
1811
+ }
1812
+ ) : /* @__PURE__ */ jsx(
1813
+ DynamicIcon,
1814
+ {
1815
+ name: "lucide/menu",
1816
+ size: 22,
1817
+ className: "stroke-foreground"
1818
+ }
1819
+ )
1820
+ }
1821
+ ) })
1822
+ ] })
1823
+ ]
1860
1824
  }
1861
- ) }),
1862
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-5", children: [
1863
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-base font-semibold", children: [
1864
- featuredHeroCard.title,
1865
- /* @__PURE__ */ jsx(
1866
- DynamicIcon,
1867
- {
1868
- name: "lucide/arrow-right",
1869
- size: 16,
1870
- className: "transition-transform group-hover:translate-x-1"
1871
- }
1872
- )
1873
- ] }),
1874
- /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm leading-relaxed", children: featuredHeroCard.description })
1875
- ] })
1876
- ]
1877
- }
1878
- ) }),
1879
- resourceItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "col-span-1", children: [
1880
- /* @__PURE__ */ jsx("div", { className: "mb-3 text-left", children: /* @__PURE__ */ jsx("strong", { className: "text-xs font-medium tracking-wider text-muted-foreground uppercase", children: "Resources" }) }),
1881
- /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: resourceItems.map((resource) => /* @__PURE__ */ jsxs(
1882
- NavigationMenuLink,
1883
- {
1884
- href: resource.href,
1885
- className: "group col-span-1 !flex !w-full items-start gap-3 rounded-lg border border-border p-3 hover:bg-muted",
1886
- children: [
1887
- /* @__PURE__ */ jsx(
1888
- DynamicIcon,
1889
- {
1890
- name: resource.icon,
1891
- size: 18,
1892
- className: "mt-0.5 shrink-0"
1893
- }
1894
- ),
1895
- /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
1896
- /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: resource.title }),
1897
- /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: resource.description })
1898
- ] })
1899
- ]
1900
- },
1901
- resource.id
1902
- )) })
1903
- ] }),
1904
- topicGroups.length > 0 && /* @__PURE__ */ jsx("div", { className: "col-span-1", children: topicGroups.map((group) => /* @__PURE__ */ jsxs("div", { className: "mb-5 last:mb-0", children: [
1905
- /* @__PURE__ */ jsx("div", { className: "mb-3 text-left", children: /* @__PURE__ */ jsx("strong", { className: "text-xs font-medium tracking-wider text-muted-foreground uppercase", children: group.title }) }),
1906
- /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: group.topics.map((topic) => /* @__PURE__ */ jsxs(
1907
- NavigationMenuLink,
1825
+ ) }) }) })
1826
+ }
1827
+ ),
1828
+ /* @__PURE__ */ jsx(
1829
+ MobileNavigationMenu,
1908
1830
  {
1909
- href: topic.href,
1910
- className: "group !flex !w-full items-center gap-2 rounded-lg p-2 hover:bg-muted",
1911
- children: [
1912
- /* @__PURE__ */ jsx(DynamicIcon, { name: topic.icon, size: 14, className: "shrink-0" }),
1913
- /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-sm font-medium", children: topic.title })
1914
- ]
1915
- },
1916
- topic.id
1917
- )) })
1918
- ] }, group.title)) })
1919
- ] });
1831
+ open,
1832
+ setOpen,
1833
+ menuLinks: menuLinks ?? [],
1834
+ actionsClassName,
1835
+ actions,
1836
+ actionsSlot,
1837
+ optixFlowConfig
1838
+ }
1839
+ )
1840
+ ] });
1841
+ };
1842
+ var DesktopMenuItem = ({
1843
+ item,
1844
+ index,
1845
+ optixFlowConfig
1846
+ }) => {
1847
+ const hasDropdown = Boolean(item.layout);
1848
+ const effectiveLayout = item.layout || "solutions-with-platform";
1849
+ if (hasDropdown) {
1850
+ return /* @__PURE__ */ jsxs(NavigationMenuItem, { value: `${index}`, children: [
1851
+ /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal hover:bg-muted focus:bg-muted data-[state=open]:bg-muted/50", children: item.label }),
1852
+ /* @__PURE__ */ jsx(NavigationMenuContent, { className: "!rounded-xl !border-0 !p-6", children: renderDropdownContent(
1853
+ { ...item, layout: effectiveLayout },
1854
+ optixFlowConfig
1855
+ ) })
1856
+ ] }, `desktop-menu-item-${index}`);
1857
+ }
1858
+ return /* @__PURE__ */ jsx(NavigationMenuItem, { value: `${index}`, children: /* @__PURE__ */ jsx(
1859
+ NavigationMenuLink,
1860
+ {
1861
+ href: item.href,
1862
+ className: "h-auto bg-transparent px-3 py-2 font-normal hover:bg-muted focus:bg-muted",
1863
+ children: item.label
1864
+ }
1865
+ ) }, `desktop-menu-item-${index}`);
1866
+ };
1867
+ var renderDropdownContent = (item, optixFlowConfig) => {
1868
+ switch (item.layout) {
1869
+ case "solutions-with-platform":
1870
+ return /* @__PURE__ */ jsx(
1871
+ SolutionsMenu,
1872
+ {
1873
+ solutionCards: item.solutionCards ?? [],
1874
+ platformItems: item.platformItems ?? [],
1875
+ featuredHeroCard: item.featuredHeroCard,
1876
+ optixFlowConfig
1877
+ }
1878
+ );
1879
+ case "products-categorized":
1880
+ return /* @__PURE__ */ jsx(
1881
+ ProductsMenu,
1882
+ {
1883
+ productCategories: item.productCategories ?? [],
1884
+ featuredHeroCard: item.featuredHeroCard,
1885
+ optixFlowConfig
1886
+ }
1887
+ );
1888
+ case "features-with-locations":
1889
+ return /* @__PURE__ */ jsx(
1890
+ GlobalMenu,
1891
+ {
1892
+ featureCategories: item.featureCategories ?? [],
1893
+ regions: item.regions ?? [],
1894
+ featuredHeroCard: item.featuredHeroCard,
1895
+ optixFlowConfig
1896
+ }
1897
+ );
1898
+ case "partners-promotional":
1899
+ return /* @__PURE__ */ jsx(
1900
+ PartnersMenu,
1901
+ {
1902
+ partnerCards: item.partnerCards ?? [],
1903
+ featuredHeroCard: item.featuredHeroCard,
1904
+ optixFlowConfig
1905
+ }
1906
+ );
1907
+ case "resources-with-topics":
1908
+ return /* @__PURE__ */ jsx(
1909
+ ResourcesMenu,
1910
+ {
1911
+ resourceItems: item.resourceItems ?? [],
1912
+ topicGroups: item.topicGroups ?? [],
1913
+ featuredHeroCard: item.featuredHeroCard
1914
+ }
1915
+ );
1916
+ default:
1917
+ return null;
1918
+ }
1919
+ };
1920
1920
  var renderMobileDropdownContent = (item) => {
1921
1921
  switch (item.layout) {
1922
1922
  case "solutions-with-platform":