@opensite/ui 1.0.9 → 1.1.1

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 (41) hide show
  1. package/dist/navbar-animated-preview.cjs +30 -19
  2. package/dist/navbar-animated-preview.js +30 -19
  3. package/dist/navbar-centered-menu.cjs +21 -10
  4. package/dist/navbar-centered-menu.js +21 -10
  5. package/dist/navbar-dark-icons.cjs +21 -10
  6. package/dist/navbar-dark-icons.js +21 -10
  7. package/dist/navbar-dropdown-menu.cjs +21 -10
  8. package/dist/navbar-dropdown-menu.js +21 -10
  9. package/dist/navbar-education-platform.cjs +82 -56
  10. package/dist/navbar-education-platform.js +82 -56
  11. package/dist/navbar-enterprise-mega.cjs +22 -11
  12. package/dist/navbar-enterprise-mega.js +22 -11
  13. package/dist/navbar-feature-grid.cjs +21 -10
  14. package/dist/navbar-feature-grid.js +21 -10
  15. package/dist/navbar-icon-links.cjs +21 -10
  16. package/dist/navbar-icon-links.js +21 -10
  17. package/dist/navbar-image-preview.cjs +21 -10
  18. package/dist/navbar-image-preview.js +21 -10
  19. package/dist/navbar-mega-menu.cjs +21 -10
  20. package/dist/navbar-mega-menu.js +21 -10
  21. package/dist/navbar-multi-column-groups.cjs +53 -35
  22. package/dist/navbar-multi-column-groups.js +53 -35
  23. package/dist/navbar-platform-resources.cjs +21 -10
  24. package/dist/navbar-platform-resources.js +21 -10
  25. package/dist/navbar-search-focused.cjs +192 -103
  26. package/dist/navbar-search-focused.js +192 -103
  27. package/dist/navbar-sidebar-mobile.cjs +22 -10
  28. package/dist/navbar-sidebar-mobile.js +22 -10
  29. package/dist/navbar-simple-links.cjs +23 -12
  30. package/dist/navbar-simple-links.js +23 -12
  31. package/dist/navbar-split-cta.cjs +21 -10
  32. package/dist/navbar-split-cta.js +21 -10
  33. package/dist/navbar-sticky-compact.cjs +231 -123
  34. package/dist/navbar-sticky-compact.js +230 -123
  35. package/dist/navbar-tabbed-sections.cjs +21 -10
  36. package/dist/navbar-tabbed-sections.js +21 -10
  37. package/dist/navbar-transparent-overlay.cjs +23 -10
  38. package/dist/navbar-transparent-overlay.js +23 -10
  39. package/dist/registry.cjs +435 -302
  40. package/dist/registry.js +435 -302
  41. package/package.json +1 -1
package/dist/navbar-education-platform.cjs CHANGED
@@ -1220,6 +1220,8 @@ var NavbarMobileMenu = ({
1220
1220
  children,
1221
1221
  className,
1222
1222
  contentClassName,
1223
+ closeContainerClassName,
1224
+ closeIconClassName,
1223
1225
  title = "Mobile Navigation"
1224
1226
  }) => {
1225
1227
  React__namespace.useEffect(() => {
@@ -1244,18 +1246,27 @@ var NavbarMobileMenu = ({
1244
1246
  "data-state": open ? "open" : "closed",
1245
1247
  children: [
1246
1248
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
1247
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
1248
- "button",
1249
+ /* @__PURE__ */ jsxRuntime.jsx(
1250
+ "div",
1249
1251
  {
1250
- onClick: onClose,
1251
- className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1252
- "aria-label": "Close mobile menu",
1253
- children: [
1254
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1255
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1256
- ]
1252
+ className: cn(
1253
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1254
+ closeContainerClassName
1255
+ ),
1256
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1257
+ "button",
1258
+ {
1259
+ onClick: onClose,
1260
+ className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1261
+ "aria-label": "Close mobile menu",
1262
+ children: [
1263
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1264
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1265
+ ]
1266
+ }
1267
+ )
1257
1268
  }
1258
- ) }),
1269
+ ),
1259
1270
  /* @__PURE__ */ jsxRuntime.jsx(
1260
1271
  "div",
1261
1272
  {
@@ -1490,36 +1501,44 @@ var DesktopMenuItem = ({
1490
1501
  ),
1491
1502
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
1492
1503
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-[10px] text-muted-foreground uppercase", children: group.label }),
1493
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: group.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
1494
- Pressable,
1504
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: group.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
1505
+ NavigationMenuLink,
1495
1506
  {
1496
- href: link.href,
1497
- className: "group flex cursor-pointer flex-row gap-3",
1498
- children: [
1499
- link.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: link.icon, size: 20 }) }),
1500
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
1501
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 text-sm font-medium whitespace-nowrap", children: [
1502
- link.title,
1503
- /* @__PURE__ */ jsxRuntime.jsx(
1504
- DynamicIcon,
1505
- {
1506
- name: "lucide/chevron-right",
1507
- size: 16,
1508
- className: "text-primary! opacity-0 transition-all duration-200 group-hover:translate-x-0.5 group-hover:opacity-100"
1509
- }
1510
- )
1511
- ] }),
1512
- link.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs whitespace-nowrap text-muted-foreground", children: link.description })
1513
- ] })
1514
- ]
1515
- }
1516
- ) }, link.title)) }),
1507
+ asChild: true,
1508
+ className: "w-full",
1509
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1510
+ Pressable,
1511
+ {
1512
+ href: link.href,
1513
+ className: "group flex cursor-pointer flex-row gap-3",
1514
+ children: [
1515
+ link.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: link.icon, size: 20 }) }),
1516
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
1517
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 text-sm font-medium whitespace-nowrap", children: [
1518
+ link.title,
1519
+ /* @__PURE__ */ jsxRuntime.jsx(
1520
+ DynamicIcon,
1521
+ {
1522
+ name: "lucide/chevron-right",
1523
+ size: 16,
1524
+ className: "opacity-0 transition-all duration-200 group-hover:translate-x-0.5 group-hover:opacity-100"
1525
+ }
1526
+ )
1527
+ ] }),
1528
+ link.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs whitespace-nowrap text-muted-foreground", children: link.description })
1529
+ ] })
1530
+ ]
1531
+ }
1532
+ )
1533
+ },
1534
+ link.title
1535
+ )) }),
1517
1536
  group.featuredImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: group.featuredImage.href || "#", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-muted p-3", children: /* @__PURE__ */ jsxRuntime.jsx(
1518
1537
  img.Img,
1519
1538
  {
1520
1539
  src: group.featuredImage.src,
1521
1540
  alt: group.featuredImage.alt || "Featured image",
1522
- className: "aspect-video w-full max-w-[240px] rounded-md object-cover object-center",
1541
+ className: "aspect-video w-full max-w-60 rounded-md object-cover object-center",
1523
1542
  optixFlowConfig
1524
1543
  }
1525
1544
  ) }) }) }) })
@@ -1583,29 +1602,36 @@ var MobileNavigationMenu = ({
1583
1602
  className: "border-b-0",
1584
1603
  children: [
1585
1604
  /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center p-0 px-4! text-base leading-[3.75] font-normal text-muted-foreground hover:bg-muted hover:no-underline", children: item.label }),
1586
- /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
1587
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 px-4 text-[10px] text-muted-foreground uppercase", children: group.label }),
1588
- group.links.map((link) => /* @__PURE__ */ jsxRuntime.jsxs(
1589
- Pressable,
1590
- {
1591
- href: link.href,
1592
- className: "flex min-h-12 items-center gap-2 rounded-lg px-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
1593
- onClick: onClose,
1594
- children: [
1595
- link.icon && /* @__PURE__ */ jsxRuntime.jsx(
1596
- DynamicIcon,
1597
- {
1598
- name: link.icon,
1599
- size: 16,
1600
- className: "stroke-muted-foreground"
1601
- }
1602
- ),
1605
+ /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
1606
+ "div",
1607
+ {
1608
+ className: "mb-4",
1609
+ children: [
1610
+ group.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "block mt-4 mb-2 px-4 text-[10px] text-muted-foreground uppercase", children: group.label }),
1611
+ group.links.map((link) => /* @__PURE__ */ jsxRuntime.jsxs(
1612
+ Pressable,
1613
+ {
1614
+ href: link.href,
1615
+ className: "flex min-h-12 items-center gap-2 rounded-lg pl-6 pr-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
1616
+ onClick: onClose,
1617
+ children: [
1618
+ link.icon && /* @__PURE__ */ jsxRuntime.jsx(
1619
+ DynamicIcon,
1620
+ {
1621
+ name: link.icon,
1622
+ size: 16,
1623
+ className: "stroke-muted-foreground"
1624
+ }
1625
+ ),
1626
+ link.title
1627
+ ]
1628
+ },
1603
1629
  link.title
1604
- ]
1605
- },
1606
- link.title
1607
- ))
1608
- ] }, `mobile-group-${groupIndex}`)) })
1630
+ ))
1631
+ ]
1632
+ },
1633
+ `mobile-group-${groupIndex}`
1634
+ )) })
1609
1635
  ]
1610
1636
  },
1611
1637
  `nav-item-${index}`
package/dist/navbar-education-platform.js CHANGED
@@ -1196,6 +1196,8 @@ var NavbarMobileMenu = ({
1196
1196
  children,
1197
1197
  className,
1198
1198
  contentClassName,
1199
+ closeContainerClassName,
1200
+ closeIconClassName,
1199
1201
  title = "Mobile Navigation"
1200
1202
  }) => {
1201
1203
  React.useEffect(() => {
@@ -1220,18 +1222,27 @@ var NavbarMobileMenu = ({
1220
1222
  "data-state": open ? "open" : "closed",
1221
1223
  children: [
1222
1224
  /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
1223
- /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxs(
1224
- "button",
1225
+ /* @__PURE__ */ jsx(
1226
+ "div",
1225
1227
  {
1226
- onClick: onClose,
1227
- className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1228
- "aria-label": "Close mobile menu",
1229
- children: [
1230
- /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1231
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1232
- ]
1228
+ className: cn(
1229
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1230
+ closeContainerClassName
1231
+ ),
1232
+ children: /* @__PURE__ */ jsxs(
1233
+ "button",
1234
+ {
1235
+ onClick: onClose,
1236
+ className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1237
+ "aria-label": "Close mobile menu",
1238
+ children: [
1239
+ /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1240
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1241
+ ]
1242
+ }
1243
+ )
1233
1244
  }
1234
- ) }),
1245
+ ),
1235
1246
  /* @__PURE__ */ jsx(
1236
1247
  "div",
1237
1248
  {
@@ -1466,36 +1477,44 @@ var DesktopMenuItem = ({
1466
1477
  ),
1467
1478
  /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
1468
1479
  /* @__PURE__ */ jsx("p", { className: "mb-3 text-[10px] text-muted-foreground uppercase", children: group.label }),
1469
- /* @__PURE__ */ jsx("div", { className: "space-y-1", children: group.links.map((link) => /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
1470
- Pressable,
1480
+ /* @__PURE__ */ jsx("div", { className: "space-y-1", children: group.links.map((link) => /* @__PURE__ */ jsx(
1481
+ NavigationMenuLink,
1471
1482
  {
1472
- href: link.href,
1473
- className: "group flex cursor-pointer flex-row gap-3",
1474
- children: [
1475
- link.icon && /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsx(DynamicIcon, { name: link.icon, size: 20 }) }),
1476
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
1477
- /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5 text-sm font-medium whitespace-nowrap", children: [
1478
- link.title,
1479
- /* @__PURE__ */ jsx(
1480
- DynamicIcon,
1481
- {
1482
- name: "lucide/chevron-right",
1483
- size: 16,
1484
- className: "text-primary! opacity-0 transition-all duration-200 group-hover:translate-x-0.5 group-hover:opacity-100"
1485
- }
1486
- )
1487
- ] }),
1488
- link.description && /* @__PURE__ */ jsx("p", { className: "text-xs whitespace-nowrap text-muted-foreground", children: link.description })
1489
- ] })
1490
- ]
1491
- }
1492
- ) }, link.title)) }),
1483
+ asChild: true,
1484
+ className: "w-full",
1485
+ children: /* @__PURE__ */ jsxs(
1486
+ Pressable,
1487
+ {
1488
+ href: link.href,
1489
+ className: "group flex cursor-pointer flex-row gap-3",
1490
+ children: [
1491
+ link.icon && /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsx(DynamicIcon, { name: link.icon, size: 20 }) }),
1492
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
1493
+ /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5 text-sm font-medium whitespace-nowrap", children: [
1494
+ link.title,
1495
+ /* @__PURE__ */ jsx(
1496
+ DynamicIcon,
1497
+ {
1498
+ name: "lucide/chevron-right",
1499
+ size: 16,
1500
+ className: "opacity-0 transition-all duration-200 group-hover:translate-x-0.5 group-hover:opacity-100"
1501
+ }
1502
+ )
1503
+ ] }),
1504
+ link.description && /* @__PURE__ */ jsx("p", { className: "text-xs whitespace-nowrap text-muted-foreground", children: link.description })
1505
+ ] })
1506
+ ]
1507
+ }
1508
+ )
1509
+ },
1510
+ link.title
1511
+ )) }),
1493
1512
  group.featuredImage && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsx(Pressable, { href: group.featuredImage.href || "#", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted p-3", children: /* @__PURE__ */ jsx(
1494
1513
  Img,
1495
1514
  {
1496
1515
  src: group.featuredImage.src,
1497
1516
  alt: group.featuredImage.alt || "Featured image",
1498
- className: "aspect-video w-full max-w-[240px] rounded-md object-cover object-center",
1517
+ className: "aspect-video w-full max-w-60 rounded-md object-cover object-center",
1499
1518
  optixFlowConfig
1500
1519
  }
1501
1520
  ) }) }) }) })
@@ -1559,29 +1578,36 @@ var MobileNavigationMenu = ({
1559
1578
  className: "border-b-0",
1560
1579
  children: [
1561
1580
  /* @__PURE__ */ jsx(AccordionTrigger, { className: "h-15 items-center p-0 px-4! text-base leading-[3.75] font-normal text-muted-foreground hover:bg-muted hover:no-underline", children: item.label }),
1562
- /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
1563
- /* @__PURE__ */ jsx("p", { className: "mb-2 px-4 text-[10px] text-muted-foreground uppercase", children: group.label }),
1564
- group.links.map((link) => /* @__PURE__ */ jsxs(
1565
- Pressable,
1566
- {
1567
- href: link.href,
1568
- className: "flex min-h-12 items-center gap-2 rounded-lg px-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
1569
- onClick: onClose,
1570
- children: [
1571
- link.icon && /* @__PURE__ */ jsx(
1572
- DynamicIcon,
1573
- {
1574
- name: link.icon,
1575
- size: 16,
1576
- className: "stroke-muted-foreground"
1577
- }
1578
- ),
1581
+ /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(
1582
+ "div",
1583
+ {
1584
+ className: "mb-4",
1585
+ children: [
1586
+ group.label && /* @__PURE__ */ jsx("p", { className: "block mt-4 mb-2 px-4 text-[10px] text-muted-foreground uppercase", children: group.label }),
1587
+ group.links.map((link) => /* @__PURE__ */ jsxs(
1588
+ Pressable,
1589
+ {
1590
+ href: link.href,
1591
+ className: "flex min-h-12 items-center gap-2 rounded-lg pl-6 pr-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
1592
+ onClick: onClose,
1593
+ children: [
1594
+ link.icon && /* @__PURE__ */ jsx(
1595
+ DynamicIcon,
1596
+ {
1597
+ name: link.icon,
1598
+ size: 16,
1599
+ className: "stroke-muted-foreground"
1600
+ }
1601
+ ),
1602
+ link.title
1603
+ ]
1604
+ },
1579
1605
  link.title
1580
- ]
1581
- },
1582
- link.title
1583
- ))
1584
- ] }, `mobile-group-${groupIndex}`)) })
1606
+ ))
1607
+ ]
1608
+ },
1609
+ `mobile-group-${groupIndex}`
1610
+ )) })
1585
1611
  ]
1586
1612
  },
1587
1613
  `nav-item-${index}`
package/dist/navbar-enterprise-mega.cjs CHANGED
@@ -1138,6 +1138,8 @@ var NavbarMobileMenu = ({
1138
1138
  children,
1139
1139
  className,
1140
1140
  contentClassName,
1141
+ closeContainerClassName,
1142
+ closeIconClassName,
1141
1143
  title = "Mobile Navigation"
1142
1144
  }) => {
1143
1145
  React__namespace.useEffect(() => {
@@ -1162,18 +1164,27 @@ var NavbarMobileMenu = ({
1162
1164
  "data-state": open ? "open" : "closed",
1163
1165
  children: [
1164
1166
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
1165
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
1166
- "button",
1167
+ /* @__PURE__ */ jsxRuntime.jsx(
1168
+ "div",
1167
1169
  {
1168
- onClick: onClose,
1169
- className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1170
- "aria-label": "Close mobile menu",
1171
- children: [
1172
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1173
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1174
- ]
1170
+ className: cn(
1171
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1172
+ closeContainerClassName
1173
+ ),
1174
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1175
+ "button",
1176
+ {
1177
+ onClick: onClose,
1178
+ className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1179
+ "aria-label": "Close mobile menu",
1180
+ children: [
1181
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1182
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1183
+ ]
1184
+ }
1185
+ )
1175
1186
  }
1176
- ) }),
1187
+ ),
1177
1188
  /* @__PURE__ */ jsxRuntime.jsx(
1178
1189
  "div",
1179
1190
  {
@@ -1933,7 +1944,7 @@ var renderMobileDropdownContent = (item) => {
1933
1944
  Pressable,
1934
1945
  {
1935
1946
  href: solution.href,
1936
- className: "block pb-2 text-sm font-medium",
1947
+ className: "block pt-4 text-sm font-medium",
1937
1948
  children: solution.title
1938
1949
  }
1939
1950
  ),
package/dist/navbar-enterprise-mega.js CHANGED
@@ -1115,6 +1115,8 @@ var NavbarMobileMenu = ({
1115
1115
  children,
1116
1116
  className,
1117
1117
  contentClassName,
1118
+ closeContainerClassName,
1119
+ closeIconClassName,
1118
1120
  title = "Mobile Navigation"
1119
1121
  }) => {
1120
1122
  React.useEffect(() => {
@@ -1139,18 +1141,27 @@ var NavbarMobileMenu = ({
1139
1141
  "data-state": open ? "open" : "closed",
1140
1142
  children: [
1141
1143
  /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
1142
- /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxs(
1143
- "button",
1144
+ /* @__PURE__ */ jsx(
1145
+ "div",
1144
1146
  {
1145
- onClick: onClose,
1146
- className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1147
- "aria-label": "Close mobile menu",
1148
- children: [
1149
- /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1150
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1151
- ]
1147
+ className: cn(
1148
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1149
+ closeContainerClassName
1150
+ ),
1151
+ children: /* @__PURE__ */ jsxs(
1152
+ "button",
1153
+ {
1154
+ onClick: onClose,
1155
+ className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1156
+ "aria-label": "Close mobile menu",
1157
+ children: [
1158
+ /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1159
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1160
+ ]
1161
+ }
1162
+ )
1152
1163
  }
1153
- ) }),
1164
+ ),
1154
1165
  /* @__PURE__ */ jsx(
1155
1166
  "div",
1156
1167
  {
@@ -1910,7 +1921,7 @@ var renderMobileDropdownContent = (item) => {
1910
1921
  Pressable,
1911
1922
  {
1912
1923
  href: solution.href,
1913
- className: "block pb-2 text-sm font-medium",
1924
+ className: "block pt-4 text-sm font-medium",
1914
1925
  children: solution.title
1915
1926
  }
1916
1927
  ),
package/dist/navbar-feature-grid.cjs CHANGED
@@ -1138,6 +1138,8 @@ var NavbarMobileMenu = ({
1138
1138
  children,
1139
1139
  className,
1140
1140
  contentClassName,
1141
+ closeContainerClassName,
1142
+ closeIconClassName,
1141
1143
  title = "Mobile Navigation"
1142
1144
  }) => {
1143
1145
  React__namespace.useEffect(() => {
@@ -1162,18 +1164,27 @@ var NavbarMobileMenu = ({
1162
1164
  "data-state": open ? "open" : "closed",
1163
1165
  children: [
1164
1166
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
1165
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
1166
- "button",
1167
+ /* @__PURE__ */ jsxRuntime.jsx(
1168
+ "div",
1167
1169
  {
1168
- onClick: onClose,
1169
- className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1170
- "aria-label": "Close mobile menu",
1171
- children: [
1172
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1173
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1174
- ]
1170
+ className: cn(
1171
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1172
+ closeContainerClassName
1173
+ ),
1174
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1175
+ "button",
1176
+ {
1177
+ onClick: onClose,
1178
+ className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1179
+ "aria-label": "Close mobile menu",
1180
+ children: [
1181
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1182
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1183
+ ]
1184
+ }
1185
+ )
1175
1186
  }
1176
- ) }),
1187
+ ),
1177
1188
  /* @__PURE__ */ jsxRuntime.jsx(
1178
1189
  "div",
1179
1190
  {
package/dist/navbar-feature-grid.js CHANGED
@@ -1115,6 +1115,8 @@ var NavbarMobileMenu = ({
1115
1115
  children,
1116
1116
  className,
1117
1117
  contentClassName,
1118
+ closeContainerClassName,
1119
+ closeIconClassName,
1118
1120
  title = "Mobile Navigation"
1119
1121
  }) => {
1120
1122
  React.useEffect(() => {
@@ -1139,18 +1141,27 @@ var NavbarMobileMenu = ({
1139
1141
  "data-state": open ? "open" : "closed",
1140
1142
  children: [
1141
1143
  /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
1142
- /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxs(
1143
- "button",
1144
+ /* @__PURE__ */ jsx(
1145
+ "div",
1144
1146
  {
1145
- onClick: onClose,
1146
- className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1147
- "aria-label": "Close mobile menu",
1148
- children: [
1149
- /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1150
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1151
- ]
1147
+ className: cn(
1148
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1149
+ closeContainerClassName
1150
+ ),
1151
+ children: /* @__PURE__ */ jsxs(
1152
+ "button",
1153
+ {
1154
+ onClick: onClose,
1155
+ className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1156
+ "aria-label": "Close mobile menu",
1157
+ children: [
1158
+ /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1159
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1160
+ ]
1161
+ }
1162
+ )
1152
1163
  }
1153
- ) }),
1164
+ ),
1154
1165
  /* @__PURE__ */ jsx(
1155
1166
  "div",
1156
1167
  {
package/dist/navbar-icon-links.cjs CHANGED
@@ -1035,6 +1035,8 @@ var NavbarMobileMenu = ({
1035
1035
  children,
1036
1036
  className,
1037
1037
  contentClassName,
1038
+ closeContainerClassName,
1039
+ closeIconClassName,
1038
1040
  title = "Mobile Navigation"
1039
1041
  }) => {
1040
1042
  React__namespace.useEffect(() => {
@@ -1059,18 +1061,27 @@ var NavbarMobileMenu = ({
1059
1061
  "data-state": open ? "open" : "closed",
1060
1062
  children: [
1061
1063
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
1062
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
1063
- "button",
1064
+ /* @__PURE__ */ jsxRuntime.jsx(
1065
+ "div",
1064
1066
  {
1065
- onClick: onClose,
1066
- className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1067
- "aria-label": "Close mobile menu",
1068
- children: [
1069
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1070
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1071
- ]
1067
+ className: cn(
1068
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1069
+ closeContainerClassName
1070
+ ),
1071
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1072
+ "button",
1073
+ {
1074
+ onClick: onClose,
1075
+ className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
1076
+ "aria-label": "Close mobile menu",
1077
+ children: [
1078
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1079
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1080
+ ]
1081
+ }
1082
+ )
1072
1083
  }
1073
- ) }),
1084
+ ),
1074
1085
  /* @__PURE__ */ jsxRuntime.jsx(
1075
1086
  "div",
1076
1087
  {