@opensite/ui 3.4.9 → 3.5.0

package/dist/registry.js

@@ -4189,6 +4189,7 @@ function FooterLinksGrid({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: "footer-links-grid",
       background,
       spacing,
       pattern,
@@ -4307,6 +4308,7 @@ function FooterSocialNewsletter({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: "footer-social-newsletter",
       background,
       spacing,
       pattern,
@@ -4464,6 +4466,7 @@ function FooterSocialApps({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: "footer-social-apps",
       background,
       spacing,
       pattern,
@@ -4579,7 +4582,7 @@ function FooterSimpleCentered({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-simple-centered",
       background,
       spacing,
       pattern,
@@ -4709,6 +4712,7 @@ function FooterBrandDescription({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: "footer-brand-description",
       background,
       spacing,
       pattern,
@@ -4920,6 +4924,7 @@ function FooterNewsletterGrid({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: "footer-newsletter-grid",
       background,
       spacing,
       pattern,
@@ -5036,7 +5041,7 @@ function FooterCtaBanner({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-cta-banner",
       background,
       spacing,
       pattern,
@@ -5257,7 +5262,7 @@ function FooterContactCard({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-contact-card",
       background,
       spacing,
       pattern,
@@ -5442,7 +5447,7 @@ function FooterBackgroundCard({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-background-card",
       background,
       spacing,
       pattern,
@@ -5742,7 +5747,7 @@ function FooterAnimatedSocial({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-animated-social",
       background,
       spacing,
       pattern,
@@ -6010,7 +6015,7 @@ function FooterNewsletterMinimal({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-newsletter-minimal",
       background,
       spacing,
       pattern,
@@ -6227,7 +6232,7 @@ function FooterCtaSocial({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-cta-social",
       background,
       spacing,
       pattern,
@@ -6362,6 +6367,7 @@ function FooterNavSocial({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: "footer-nav-social",
       background,
       spacing,
       pattern,
@@ -27692,7 +27698,7 @@ function FooterBrandLinksContact({
   return /* @__PURE__ */ jsxs(
     Section,
     {
-      id: sectionId,
+      id: "footer-brand-links-contact",
       background,
       spacing,
       pattern,
@@ -27837,7 +27843,7 @@ function FooterComprehensiveLinks({
   return /* @__PURE__ */ jsxs(
     Section,
     {
-      id: sectionId,
+      id: "footer-comprehensive-links",
       background,
       spacing,
       pattern,
@@ -42842,7 +42848,7 @@ function FooterNewsletterContact({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-newsletter-contact",
       background,
       spacing,
       pattern,
@@ -42989,7 +42995,7 @@ function FooterSplitImageAccordion({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-split-image-accordion",
       background,
       spacing,
       pattern,
@@ -43247,7 +43253,7 @@ function FooterAccordionSocial({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-accordion-social",
       background,
       spacing,
       pattern,
@@ -43369,7 +43375,7 @@ function FooterInfoCardsAccordion({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "footer-info-cards-accordion",
       background,
       spacing,
       pattern,
@@ -56393,7 +56399,7 @@ function HeroStatsSocialProof({
           "pr-4 md:pr-6 shadow-2xl bg-card text-card-foreground"
         ),
         children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          statusCard.icon && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg", children: statusCard.icon }),
+          statusCard.icon ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg", children: /* @__PURE__ */ jsx(DynamicIcon, { name: statusCard.icon }) }) : null,
           /* @__PURE__ */ jsxs("div", { className: "text-balance", children: [
             statusCard.title && /* @__PURE__ */ jsx("div", { className: "font-semibold text-sm md:text-md leading-snug", children: statusCard.title }),
             statusCard.subtitle && /* @__PURE__ */ jsx("div", { className: "text-sm leading-snug tracking-tight", children: statusCard.subtitle })
@@ -63167,7 +63173,7 @@ var NavbarDropdownMenu = ({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-dropdown-menu",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -63395,7 +63401,7 @@ var NavbarCenteredMenu = ({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-centered-menu",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -63772,7 +63778,7 @@ var NavbarMegaMenu = ({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-mega-menu",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -64449,7 +64455,7 @@ var NavbarEnterpriseMega = ({
   actions,
   actionsSlot,
   layoutVariant = "fullScreenContainerizedLinks",
-  background,
+  background = "white",
   spacing,
   pattern,
   patternOpacity,
@@ -64504,6 +64510,7 @@ var NavbarEnterpriseMega = ({
     /* @__PURE__ */ jsx(
       Section,
       {
+        id: "navbar-enterprise-mega",
         background,
         spacing: spacingOverride ?? spacing,
         className: cn(
@@ -64870,7 +64877,7 @@ var NavbarFeatureGrid = ({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-feature-grid",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -65061,7 +65068,7 @@ var NavbarFloatingPill = ({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-floating-pill",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -65279,8 +65286,41 @@ var NavbarPlatformResources = ({
   const hasDropdownItems = (link) => Boolean(link.links?.length || link.dropdownGroups?.length);
   const renderDropdownContent3 = (link) => {
     const layout = link.layout || "simple-list";
+    if (layout === "list-with-icons") {
+      return /* @__PURE__ */ jsx(NavigationMenuContent, { className: "md:left-1/2 md:-translate-x-1/2 !w-[900px] max-w-[calc(100vw-2rem)] overflow-y-auto p-4 md:!w-[900px]", children: /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-3 gap-4", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+        NavigationMenuLink,
+        {
+          href: getLinkUrl(item),
+          className: "!flex h-full min-h-20 !w-full min-w-0 flex-row items-center gap-4 rounded-lg border border-input bg-background p-4 hover:bg-accent hover:text-accent-foreground",
+          children: [
+            item.image && /* @__PURE__ */ jsx("div", { className: "h-12 w-12 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: item.image,
+                alt: typeof item.label === "string" ? item.label : "Menu item",
+                className: "h-full w-full object-cover object-center",
+                optixFlowConfig
+              }
+            ) }),
+            !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: /* @__PURE__ */ jsx(
+              DynamicIcon,
+              {
+                name: item.icon || item.iconName,
+                size: 18,
+                className: "shrink-0"
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 overflow-hidden", children: [
+              /* @__PURE__ */ jsx("div", { className: "break-words text-sm font-medium text-foreground", children: item.label }),
+              item.description && /* @__PURE__ */ jsx("div", { className: "break-words text-sm font-normal text-muted-foreground", children: item.description })
+            ] })
+          ]
+        },
+        `${typeof item.label === "string" ? item.label : "item"}-${itemIndex}`
+      )) }) });
+    }
     if (layout === "simple-list") {
-      return /* @__PURE__ */ jsx(NavigationMenuContent, { className: "w-[400px] max-w-[calc(100vw-2rem)] p-3", children: /* @__PURE__ */ jsx("ul", { className: "w-full space-y-1", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(NavigationMenuContent, { className: "md:left-1/2 md:-translate-x-1/2 !w-[400px] max-w-[calc(100vw-2rem)] p-3 md:!w-[400px]", children: /* @__PURE__ */ jsx("ul", { className: "w-full space-y-1", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsx(
         "li",
         {
           className: "w-full",
@@ -65312,7 +65352,7 @@ var NavbarPlatformResources = ({
     if (layout === "featured-grid" && link.links && link.links.length > 0) {
       const featuredItem = link.links[0];
       const gridItems = link.links.slice(1);
-      return /* @__PURE__ */ jsx(NavigationMenuContent, { className: "w-[900px] max-w-[calc(100vw-2rem)] p-6", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(260px,0.8fr)_minmax(0,1.2fr)] gap-8", children: [
+      return /* @__PURE__ */ jsx(NavigationMenuContent, { className: "md:left-1/2 md:-translate-x-1/2 !w-[900px] max-w-[calc(100vw-2rem)] p-6 md:!w-[900px]", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(260px,0.8fr)_minmax(0,1.2fr)] gap-8", children: [
         /* @__PURE__ */ jsx(
           NavigationMenuLink,
           {
@@ -65361,7 +65401,7 @@ var NavbarPlatformResources = ({
     }
     if (layout === "two-column-cta" && link.dropdownGroups && link.dropdownGroups.length > 0) {
       const ctaItem = link.links && link.links.length > 0 ? link.links[link.links.length - 1] : null;
-      return /* @__PURE__ */ jsx(NavigationMenuContent, { className: "w-[900px] max-w-[calc(100vw-2rem)] p-6", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-4", children: [
+      return /* @__PURE__ */ jsx(NavigationMenuContent, { className: "md:left-1/2 md:-translate-x-1/2 !w-[900px] max-w-[calc(100vw-2rem)] p-6 md:!w-[900px]", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-4", children: [
         /* @__PURE__ */ jsx("div", { className: "min-w-0", children: link.dropdownGroups[0] && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("div", { className: "mb-6 text-xs tracking-widest text-muted-foreground uppercase", children: link.dropdownGroups[0].label }),
           /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4", children: link.dropdownGroups[0].links.map((item, itemIndex) => /* @__PURE__ */ jsxs(
@@ -65413,7 +65453,7 @@ var NavbarPlatformResources = ({
     if (layout === "list-showcase" && link.dropdownGroups && link.dropdownGroups.length > 0) {
       const listItems = link.dropdownGroups[0].links;
       const showcaseItems = link.links || [];
-      return /* @__PURE__ */ jsx(NavigationMenuContent, { className: "w-[900px] max-w-[calc(100vw-2rem)] p-6", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(260px,0.7fr)_minmax(0,1.3fr)] gap-8", children: [
+      return /* @__PURE__ */ jsx(NavigationMenuContent, { className: "md:left-1/2 md:-translate-x-1/2 !w-[900px] max-w-[calc(100vw-2rem)] p-6 md:!w-[900px]", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(260px,0.7fr)_minmax(0,1.3fr)] gap-8", children: [
         /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("div", { className: "mb-4 text-xs tracking-widest text-muted-foreground uppercase", children: link.dropdownGroups[0].label }),
           link.dropdownGroups[0].description && /* @__PURE__ */ jsx("div", { className: "mb-6 text-sm font-normal text-muted-foreground", children: link.dropdownGroups[0].description }),
@@ -65463,7 +65503,7 @@ var NavbarPlatformResources = ({
     }
     if (layout === "multi-section" && link.dropdownGroups) {
       const ctaItem = link.links && link.links.length > 0 ? link.links[link.links.length - 1] : null;
-      return /* @__PURE__ */ jsx(NavigationMenuContent, { className: "w-[900px] max-w-[calc(100vw-2rem)] p-8", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
+      return /* @__PURE__ */ jsx(NavigationMenuContent, { className: "md:left-1/2 md:-translate-x-1/2 !w-[900px] max-w-[calc(100vw-2rem)] p-8 md:!w-[900px]", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
         link.dropdownGroups.map((group, groupIndex) => /* @__PURE__ */ jsxs(
           "div",
           {
@@ -65516,7 +65556,7 @@ var NavbarPlatformResources = ({
         ] })
       ] }) });
     }
-    return /* @__PURE__ */ jsx(NavigationMenuContent, { className: "w-[900px] max-w-[calc(100vw-2rem)] p-4", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(NavigationMenuContent, { className: "md:left-1/2 md:-translate-x-1/2 !w-[900px] max-w-[calc(100vw-2rem)] p-4 md:!w-[900px]", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxs(
       NavigationMenuLink,
       {
         href: getLinkUrl(item),
@@ -65571,7 +65611,7 @@ var NavbarPlatformResources = ({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-platform-resources",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -65839,7 +65879,7 @@ var NavbarImagePreview = ({
   return /* @__PURE__ */ jsxs(
     Section,
     {
-      id: sectionId,
+      id: "navbar-image-preview",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -66222,7 +66262,7 @@ var NavbarDarkIcons = ({
   return /* @__PURE__ */ jsxs(
     Section,
     {
-      id: sectionId,
+      id: "navbar-dark-icons",
       background,
       spacing: spacingOverride ?? spacing,
       className: cn("dark pointer-events-auto relative z-999", sectionClasses),
@@ -66572,6 +66612,7 @@ var NavbarAnimatedPreview = ({
     /* @__PURE__ */ jsx(
       Section,
       {
+        id: "navbar-animated-preview",
         background,
         spacing: spacingOverride ?? spacing,
         className: cn(
@@ -67097,6 +67138,7 @@ var NavbarMultiColumnGroups = ({
     /* @__PURE__ */ jsx(
       Section,
       {
+        id: "navbar-multi-column-groups",
         background,
         spacing: spacingOverride ?? spacing,
         className: sectionClasses,
@@ -67410,6 +67452,7 @@ var NavbarSidebarMobile = ({
     /* @__PURE__ */ jsx(
       Section,
       {
+        id: "navbar-sidebar-mobile",
         background,
         spacing: spacingOverride ?? spacing,
         className: sectionClasses,
@@ -67732,6 +67775,7 @@ var NavbarTransparentOverlay = ({
     /* @__PURE__ */ jsx(
       Section,
       {
+        id: "navbar-transparent-overlay",
         background,
         spacing: spacingOverride ?? spacing,
         className: sectionClasses,
@@ -67994,6 +68038,7 @@ var NavbarEducationPlatform = ({
     /* @__PURE__ */ jsx(
       Section,
       {
+        id: "navbar-education-platform",
         background,
         spacing: spacingOverride ?? spacing,
         className: sectionClasses,
@@ -68358,6 +68403,7 @@ var NavbarStickyCompact = ({
     /* @__PURE__ */ jsx(
       Section,
       {
+        id: "navbar-sticky-compact",
         background,
         spacing: spacingOverride ?? spacing,
         className: cn(
@@ -68629,6 +68675,7 @@ var NavbarSearchFocused = ({
     /* @__PURE__ */ jsx(
       Section,
       {
+        id: "navbar-search-focused",
         background,
         spacing: spacingOverride ?? spacing,
         className: sectionClasses,
@@ -68896,6 +68943,7 @@ var NavbarSimpleLinks = ({
     /* @__PURE__ */ jsx(
       Section,
       {
+        id: "navbar-simple-links",
         background,
         spacing: spacingOverride ?? spacing,
         className: sectionClasses,
@@ -69117,7 +69165,7 @@ var NavbarSplitCta = ({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-split-cta",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -69336,7 +69384,7 @@ var NavbarIconLinks = ({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-icon-links",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -69659,7 +69707,7 @@ var NavbarTabbedSections = ({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-tabbed-sections",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,
@@ -69807,6 +69855,7 @@ var NavbarFullscreenMenu = ({
     /* @__PURE__ */ jsx(
       Section,
       {
+        id: "navbar-fullscreen-menu",
         background,
         spacing: spacingOverride ?? spacing,
         className: sectionClasses,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "3.4.9",
+  "version": "3.5.0",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",