@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-animated-preview.cjs CHANGED
@@ -1143,6 +1143,8 @@ var NavbarMobileMenu = ({
1143
1143
  children,
1144
1144
  className,
1145
1145
  contentClassName,
1146
+ closeContainerClassName,
1147
+ closeIconClassName,
1146
1148
  title = "Mobile Navigation"
1147
1149
  }) => {
1148
1150
  React__namespace.useEffect(() => {
@@ -1167,18 +1169,27 @@ var NavbarMobileMenu = ({
1167
1169
  "data-state": open ? "open" : "closed",
1168
1170
  children: [
1169
1171
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
1170
- /* @__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(
1171
- "button",
1172
+ /* @__PURE__ */ jsxRuntime.jsx(
1173
+ "div",
1172
1174
  {
1173
- onClick: onClose,
1174
- 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",
1175
- "aria-label": "Close mobile menu",
1176
- children: [
1177
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1178
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1179
- ]
1175
+ className: cn(
1176
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1177
+ closeContainerClassName
1178
+ ),
1179
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1180
+ "button",
1181
+ {
1182
+ onClick: onClose,
1183
+ 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",
1184
+ "aria-label": "Close mobile menu",
1185
+ children: [
1186
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1187
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1188
+ ]
1189
+ }
1190
+ )
1180
1191
  }
1181
- ) }),
1192
+ ),
1182
1193
  /* @__PURE__ */ jsxRuntime.jsx(
1183
1194
  "div",
1184
1195
  {
@@ -1466,7 +1477,7 @@ var NavbarAnimatedPreview = ({
1466
1477
  "div",
1467
1478
  {
1468
1479
  className: cn(
1469
- "relative z-999 grid w-full grid-cols-2 items-center justify-between gap-8 xl:grid-cols-3"
1480
+ "relative z-999 flex w-full items-center justify-between gap-4"
1470
1481
  ),
1471
1482
  children: [
1472
1483
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -1662,7 +1673,7 @@ var GroupedLinksImageDropdown = ({
1662
1673
  imageLink,
1663
1674
  optixFlowConfig
1664
1675
  }) => {
1665
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
1676
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
1666
1677
  /* @__PURE__ */ jsxRuntime.jsx(GroupLinks, { groupLinks }),
1667
1678
  /* @__PURE__ */ jsxRuntime.jsx(FeaturedImageLink, { link: imageLink, optixFlowConfig })
1668
1679
  ] });
@@ -1683,7 +1694,7 @@ var GroupLinks = ({ groupLinks }) => {
1683
1694
  };
1684
1695
  if (!groupLinks) return null;
1685
1696
  let linkIndex = 0;
1686
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between gap-4", children: groupLinks.map((group, index1) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1697
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: groupLinks.map((group, index1) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1687
1698
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xs", children: group.label }),
1688
1699
  /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-4", children: group.links.map((link, index2) => {
1689
1700
  const idx = linkIndex++;
@@ -1741,7 +1752,7 @@ var FeaturedLink = ({ link, optixFlowConfig }) => {
1741
1752
  Pressable,
1742
1753
  {
1743
1754
  href: getLinkUrl(link),
1744
- className: "group relative flex w-full overflow-hidden rounded-xl bg-muted px-8 py-12",
1755
+ className: "group relative flex w-full overflow-hidden rounded-xl bg-muted px-4 pt-24 pb-4",
1745
1756
  children: [
1746
1757
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex w-full items-center gap-6", children: [
1747
1758
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-12 shrink-0 rounded-lg border bg-background shadow-lg", children: link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1856,11 +1867,11 @@ var renderMobileMenuItem = (item, index) => {
1856
1867
  className: "border-b-0",
1857
1868
  children: [
1858
1869
  /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-10 items-center text-base font-normal text-foreground hover:no-underline", children: item.label }),
1859
- /* @__PURE__ */ jsxRuntime.jsxs(AccordionContent, { className: "flex flex-col gap-6 p-2", children: [
1860
- item.featuredLinks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 p-2", children: item.featuredLinks.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
1861
- item.links && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 p-2", children: item.links.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
1862
- item.groupLinks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 p-2", children: item.groupLinks.map((group, groupIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8 last:mb-0", children: [
1863
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xs text-muted-foreground", children: group.label }),
1870
+ /* @__PURE__ */ jsxRuntime.jsxs(AccordionContent, { className: "flex flex-col py-6 px-4", children: [
1871
+ item.featuredLinks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: item.featuredLinks.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
1872
+ item.links && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: item.links.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
1873
+ item.groupLinks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: item.groupLinks.map((group, groupIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
1874
+ group.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xs text-muted-foreground", children: group.label }),
1864
1875
  /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-2", children: group.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(NavLink, { link }) }, `group-link-${groupIdx}-${linkIdx}`)) })
1865
1876
  ] }, `group-link-${groupIdx}`)) })
1866
1877
  ] })
package/dist/navbar-animated-preview.js CHANGED
@@ -1118,6 +1118,8 @@ var NavbarMobileMenu = ({
1118
1118
  children,
1119
1119
  className,
1120
1120
  contentClassName,
1121
+ closeContainerClassName,
1122
+ closeIconClassName,
1121
1123
  title = "Mobile Navigation"
1122
1124
  }) => {
1123
1125
  React.useEffect(() => {
@@ -1142,18 +1144,27 @@ var NavbarMobileMenu = ({
1142
1144
  "data-state": open ? "open" : "closed",
1143
1145
  children: [
1144
1146
  /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
1145
- /* @__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(
1146
- "button",
1147
+ /* @__PURE__ */ jsx(
1148
+ "div",
1147
1149
  {
1148
- onClick: onClose,
1149
- 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",
1150
- "aria-label": "Close mobile menu",
1151
- children: [
1152
- /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1153
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1154
- ]
1150
+ className: cn(
1151
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1152
+ closeContainerClassName
1153
+ ),
1154
+ children: /* @__PURE__ */ jsxs(
1155
+ "button",
1156
+ {
1157
+ onClick: onClose,
1158
+ 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",
1159
+ "aria-label": "Close mobile menu",
1160
+ children: [
1161
+ /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1162
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1163
+ ]
1164
+ }
1165
+ )
1155
1166
  }
1156
- ) }),
1167
+ ),
1157
1168
  /* @__PURE__ */ jsx(
1158
1169
  "div",
1159
1170
  {
@@ -1441,7 +1452,7 @@ var NavbarAnimatedPreview = ({
1441
1452
  "div",
1442
1453
  {
1443
1454
  className: cn(
1444
- "relative z-999 grid w-full grid-cols-2 items-center justify-between gap-8 xl:grid-cols-3"
1455
+ "relative z-999 flex w-full items-center justify-between gap-4"
1445
1456
  ),
1446
1457
  children: [
1447
1458
  /* @__PURE__ */ jsx(
@@ -1637,7 +1648,7 @@ var GroupedLinksImageDropdown = ({
1637
1648
  imageLink,
1638
1649
  optixFlowConfig
1639
1650
  }) => {
1640
- return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
1651
+ return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
1641
1652
  /* @__PURE__ */ jsx(GroupLinks, { groupLinks }),
1642
1653
  /* @__PURE__ */ jsx(FeaturedImageLink, { link: imageLink, optixFlowConfig })
1643
1654
  ] });
@@ -1658,7 +1669,7 @@ var GroupLinks = ({ groupLinks }) => {
1658
1669
  };
1659
1670
  if (!groupLinks) return null;
1660
1671
  let linkIndex = 0;
1661
- return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-4", children: groupLinks.map((group, index1) => /* @__PURE__ */ jsxs("div", { children: [
1672
+ return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: groupLinks.map((group, index1) => /* @__PURE__ */ jsxs("div", { children: [
1662
1673
  /* @__PURE__ */ jsx("div", { className: "mb-4 text-xs", children: group.label }),
1663
1674
  /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-4", children: group.links.map((link, index2) => {
1664
1675
  const idx = linkIndex++;
@@ -1716,7 +1727,7 @@ var FeaturedLink = ({ link, optixFlowConfig }) => {
1716
1727
  Pressable,
1717
1728
  {
1718
1729
  href: getLinkUrl(link),
1719
- className: "group relative flex w-full overflow-hidden rounded-xl bg-muted px-8 py-12",
1730
+ className: "group relative flex w-full overflow-hidden rounded-xl bg-muted px-4 pt-24 pb-4",
1720
1731
  children: [
1721
1732
  /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex w-full items-center gap-6", children: [
1722
1733
  /* @__PURE__ */ jsx("div", { className: "flex size-12 shrink-0 rounded-lg border bg-background shadow-lg", children: link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsx(
@@ -1831,11 +1842,11 @@ var renderMobileMenuItem = (item, index) => {
1831
1842
  className: "border-b-0",
1832
1843
  children: [
1833
1844
  /* @__PURE__ */ jsx(AccordionTrigger, { className: "h-10 items-center text-base font-normal text-foreground hover:no-underline", children: item.label }),
1834
- /* @__PURE__ */ jsxs(AccordionContent, { className: "flex flex-col gap-6 p-2", children: [
1835
- item.featuredLinks && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 p-2", children: item.featuredLinks.map((link, idx) => /* @__PURE__ */ jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
1836
- item.links && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 p-2", children: item.links.map((link, idx) => /* @__PURE__ */ jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
1837
- item.groupLinks && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 p-2", children: item.groupLinks.map((group, groupIdx) => /* @__PURE__ */ jsxs("div", { className: "mb-8 last:mb-0", children: [
1838
- /* @__PURE__ */ jsx("div", { className: "mb-4 text-xs text-muted-foreground", children: group.label }),
1845
+ /* @__PURE__ */ jsxs(AccordionContent, { className: "flex flex-col py-6 px-4", children: [
1846
+ item.featuredLinks && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: item.featuredLinks.map((link, idx) => /* @__PURE__ */ jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
1847
+ item.links && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: item.links.map((link, idx) => /* @__PURE__ */ jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
1848
+ item.groupLinks && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: item.groupLinks.map((group, groupIdx) => /* @__PURE__ */ jsxs("div", { className: "relative", children: [
1849
+ group.label && /* @__PURE__ */ jsx("div", { className: "mb-4 text-xs text-muted-foreground", children: group.label }),
1839
1850
  /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: group.links.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { link }) }, `group-link-${groupIdx}-${linkIdx}`)) })
1840
1851
  ] }, `group-link-${groupIdx}`)) })
1841
1852
  ] })
package/dist/navbar-centered-menu.cjs CHANGED
@@ -1091,6 +1091,8 @@ var NavbarMobileMenu = ({
1091
1091
  children,
1092
1092
  className,
1093
1093
  contentClassName,
1094
+ closeContainerClassName,
1095
+ closeIconClassName,
1094
1096
  title = "Mobile Navigation"
1095
1097
  }) => {
1096
1098
  React__namespace.useEffect(() => {
@@ -1115,18 +1117,27 @@ var NavbarMobileMenu = ({
1115
1117
  "data-state": open ? "open" : "closed",
1116
1118
  children: [
1117
1119
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
1118
- /* @__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(
1119
- "button",
1120
+ /* @__PURE__ */ jsxRuntime.jsx(
1121
+ "div",
1120
1122
  {
1121
- onClick: onClose,
1122
- 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",
1123
- "aria-label": "Close mobile menu",
1124
- children: [
1125
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1126
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1127
- ]
1123
+ className: cn(
1124
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1125
+ closeContainerClassName
1126
+ ),
1127
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
1128
+ "button",
1129
+ {
1130
+ onClick: onClose,
1131
+ 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",
1132
+ "aria-label": "Close mobile menu",
1133
+ children: [
1134
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1135
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
1136
+ ]
1137
+ }
1138
+ )
1128
1139
  }
1129
- ) }),
1140
+ ),
1130
1141
  /* @__PURE__ */ jsxRuntime.jsx(
1131
1142
  "div",
1132
1143
  {
package/dist/navbar-centered-menu.js CHANGED
@@ -1068,6 +1068,8 @@ var NavbarMobileMenu = ({
1068
1068
  children,
1069
1069
  className,
1070
1070
  contentClassName,
1071
+ closeContainerClassName,
1072
+ closeIconClassName,
1071
1073
  title = "Mobile Navigation"
1072
1074
  }) => {
1073
1075
  React.useEffect(() => {
@@ -1092,18 +1094,27 @@ var NavbarMobileMenu = ({
1092
1094
  "data-state": open ? "open" : "closed",
1093
1095
  children: [
1094
1096
  /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
1095
- /* @__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(
1096
- "button",
1097
+ /* @__PURE__ */ jsx(
1098
+ "div",
1097
1099
  {
1098
- onClick: onClose,
1099
- 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",
1100
- "aria-label": "Close mobile menu",
1101
- children: [
1102
- /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
1103
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1104
- ]
1100
+ className: cn(
1101
+ "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
1102
+ closeContainerClassName
1103
+ ),
1104
+ children: /* @__PURE__ */ jsxs(
1105
+ "button",
1106
+ {
1107
+ onClick: onClose,
1108
+ 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",
1109
+ "aria-label": "Close mobile menu",
1110
+ children: [
1111
+ /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
1112
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
1113
+ ]
1114
+ }
1115
+ )
1105
1116
  }
1106
- ) }),
1117
+ ),
1107
1118
  /* @__PURE__ */ jsx(
1108
1119
  "div",
1109
1120
  {
package/dist/navbar-dark-icons.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-dark-icons.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-dropdown-menu.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-dropdown-menu.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
  {