@opensite/ui 0.4.2 → 0.4.4

package/dist/navbar-enterprise-mega.js

@@ -863,6 +863,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -882,7 +883,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -985,7 +986,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-1",
+        "group flex flex-1 list-none items-center justify-center gap-6",
         className
       ),
       ...props
@@ -1006,7 +1007,7 @@ function NavigationMenuItem({
   );
 }
 var navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
 );
 function NavigationMenuTrigger({
   className,
@@ -1026,7 +1027,7 @@ function NavigationMenuTrigger({
           DynamicIcon,
           {
             name: "lucide/chevron-down",
-            className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
+            className: "relative top-[1px] ml-1 size-2.5 transition duration-300 group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
         )
@@ -1084,7 +1085,7 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        "data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 data-[active=true]:text-foreground hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -1210,7 +1211,10 @@ var NavbarEnterpriseMega = ({
       Pressable,
       {
         href: logo.url || "/",
-        className: cn("flex max-h-8 items-center gap-2 text-lg font-semibold tracking-tighter", logoClassName),
+        className: cn(
+          "flex max-h-8 items-center gap-2 text-lg font-semibold tracking-tighter",
+          logoClassName
+        ),
         children: [
           logo.src && /* @__PURE__ */ jsx(
             Img,
@@ -1230,20 +1234,19 @@ var NavbarEnterpriseMega = ({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsx(Pressable, { className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        icon,
+        label,
+        iconAfter
+      ] }) }, index);
     });
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1258,46 +1261,62 @@ var NavbarEnterpriseMega = ({
         ),
         pattern,
         patternOpacity,
-        children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("flex h-16 items-center justify-between gap-8", navClassName), children: [
-          renderLogo(),
-          /* @__PURE__ */ jsx(NavigationMenu, { className: cn("hidden lg:flex", navigationMenuClassName), viewport: false, children: /* @__PURE__ */ jsx(NavigationMenuList, { children: menuLinks?.map((item, index) => /* @__PURE__ */ jsx(
-            DesktopMenuItem,
-            {
-              item,
-              index,
-              optixFlowConfig
-            },
-            `desktop-link-${index}`
-          )) }) }),
-          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", actionsClassName), children: [
-            /* @__PURE__ */ jsx("div", { className: "hidden lg:flex lg:items-center lg:gap-3", children: renderActions() }),
-            /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                className: "size-11",
-                variant: "ghost",
-                size: "icon",
-                asButton: true,
-                onClick: handleMobileMenu,
-                children: open ? /* @__PURE__ */ jsx(
-                  DynamicIcon,
-                  {
-                    name: "lucide/x",
-                    size: 22,
-                    className: "stroke-foreground"
-                  }
-                ) : /* @__PURE__ */ jsx(
-                  DynamicIcon,
+        children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex h-16 items-center justify-between gap-8",
+              navClassName
+            ),
+            children: [
+              renderLogo(),
+              /* @__PURE__ */ jsx(
+                NavigationMenu,
+                {
+                  className: cn("hidden lg:flex", navigationMenuClassName),
+                  viewport: false,
+                  children: /* @__PURE__ */ jsx(NavigationMenuList, { children: menuLinks?.map((item, index) => /* @__PURE__ */ jsx(
+                    DesktopMenuItem,
+                    {
+                      item,
+                      index,
+                      optixFlowConfig
+                    },
+                    `desktop-link-${index}`
+                  )) })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", actionsClassName), children: [
+                /* @__PURE__ */ jsx("div", { className: "hidden lg:flex lg:items-center lg:gap-3", children: renderActions() }),
+                /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(
+                  Pressable,
                   {
-                    name: "lucide/menu",
-                    size: 22,
-                    className: "stroke-foreground"
+                    className: "size-11",
+                    variant: "ghost",
+                    size: "icon",
+                    asButton: true,
+                    onClick: handleMobileMenu,
+                    children: open ? /* @__PURE__ */ jsx(
+                      DynamicIcon,
+                      {
+                        name: "lucide/x",
+                        size: 22,
+                        className: "stroke-foreground"
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      DynamicIcon,
+                      {
+                        name: "lucide/menu",
+                        size: 22,
+                        className: "stroke-foreground"
+                      }
+                    )
                   }
-                )
-              }
-            ) })
-          ] })
-        ] }) })
+                ) })
+              ] })
+            ]
+          }
+        ) })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -1319,18 +1338,22 @@ var DesktopMenuItem = ({
   optixFlowConfig
 }) => {
   const hasDropdown = Boolean(item.layout);
+  const effectiveLayout = item.layout || "solutions-with-platform";
   if (hasDropdown) {
     return /* @__PURE__ */ jsxs(NavigationMenuItem, { value: `${index}`, children: [
-      /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "bg-transparent px-0 hover:bg-transparent focus:bg-transparent data-[state=open]:bg-transparent h-fit font-normal text-foreground/60", children: item.title }),
-      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "rounded-xl! border-0! p-0!", children: /* @__PURE__ */ jsx("div", { className: "w-dvw px-8 pt-6 pb-12", children: /* @__PURE__ */ jsx("div", { className: "container", children: renderDropdownContent(item, optixFlowConfig) }) }) })
+      /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground data-[state=open]:bg-muted/50 data-[state=open]:text-foreground", children: item.label }),
+      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "rounded-xl! border-0! p-0!", children: /* @__PURE__ */ jsx("div", { className: "w-dvw px-8 pt-6 pb-12", children: /* @__PURE__ */ jsx("div", { className: "container", children: renderDropdownContent(
+        { ...item, layout: effectiveLayout },
+        optixFlowConfig
+      ) }) }) })
     ] }, `desktop-menu-item-${index}`);
   }
   return /* @__PURE__ */ jsx(NavigationMenuItem, { value: `${index}`, children: /* @__PURE__ */ jsx(
     NavigationMenuLink,
     {
-      href: item.url,
-      className: "bg-transparent px-0 hover:bg-transparent focus:bg-transparent data-[state=open]:bg-transparent h-fit font-normal text-foreground/60",
-      children: item.title
+      href: item.href,
+      className: "h-auto bg-transparent px-3 py-2 font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground",
+      children: item.label
     }
   ) }, `desktop-menu-item-${index}`);
 };
@@ -1452,49 +1475,56 @@ var SolutionsMenu = ({
       technology.id
     )) })
   ] }),
-  solutionCards.length > 0 && /* @__PURE__ */ jsx("div", { className: "col-span-full grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4 lg:gap-8", children: solutionCards.map((solution) => /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border p-5", children: [
-    /* @__PURE__ */ jsx("div", { className: "border-b border-border pb-4", children: /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        href: solution.href,
-        className: "group flex flex-col text-left",
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ jsx("strong", { className: "text-sm font-medium", children: solution.title }),
-            /* @__PURE__ */ jsx(
-              DynamicIcon,
-              {
-                name: "lucide/arrow-right",
-                size: 16,
-                className: "ml-1 transition-transform group-hover:translate-x-1"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: solution.description })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx("menu", { className: "mt-6 grid gap-y-4", children: solution.subpages.map((subpage) => /* @__PURE__ */ jsxs(
-      NavigationMenuLink,
-      {
-        href: subpage.href,
-        className: "group flex flex-row items-center space-x-4 text-left text-foreground/85 hover:text-foreground lg:space-x-4 lg:border-0",
-        children: [
-          /* @__PURE__ */ jsx(DynamicIcon, { name: subpage.icon, size: 16 }),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 text-sm font-medium", children: subpage.title }),
-          /* @__PURE__ */ jsx(
-            DynamicIcon,
-            {
-              name: "lucide/arrow-right",
-              size: 16,
-              className: "transition-transform group-hover:translate-x-1 lg:hidden"
-            }
-          )
-        ]
-      },
-      subpage.id
-    )) })
-  ] }, solution.id)) })
+  solutionCards.length > 0 && /* @__PURE__ */ jsx("div", { className: "col-span-full grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4 lg:gap-8", children: solutionCards.map((solution) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded-md border border-border p-5",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "border-b border-border pb-4", children: /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            href: solution.href,
+            className: "group flex flex-col text-left",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsx("strong", { className: "text-sm font-medium", children: solution.title }),
+                /* @__PURE__ */ jsx(
+                  DynamicIcon,
+                  {
+                    name: "lucide/arrow-right",
+                    size: 16,
+                    className: "ml-1 transition-transform group-hover:translate-x-1"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: solution.description })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx("menu", { className: "mt-6 grid gap-y-4", children: solution.subpages.map((subpage) => /* @__PURE__ */ jsxs(
+          NavigationMenuLink,
+          {
+            href: subpage.href,
+            className: "group flex flex-row items-center space-x-4 text-left text-foreground/85 hover:text-foreground lg:space-x-4 lg:border-0",
+            children: [
+              /* @__PURE__ */ jsx(DynamicIcon, { name: subpage.icon, size: 16 }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 text-sm font-medium", children: subpage.title }),
+              /* @__PURE__ */ jsx(
+                DynamicIcon,
+                {
+                  name: "lucide/arrow-right",
+                  size: 16,
+                  className: "transition-transform group-hover:translate-x-1 lg:hidden"
+                }
+              )
+            ]
+          },
+          subpage.id
+        )) })
+      ]
+    },
+    solution.id
+  )) })
 ] });
 var ProductsMenu = ({
   productCategories,
@@ -1674,7 +1704,11 @@ var GlobalMenu = ({
     )) })
   ] })
 ] });
-var PartnersMenu = ({ partnerCards, featuredHeroCard, optixFlowConfig }) => /* @__PURE__ */ jsxs("div", { className: "grid gap-y-6 md:grid-cols-2 md:gap-x-6 lg:grid-cols-4", children: [
+var PartnersMenu = ({
+  partnerCards,
+  featuredHeroCard,
+  optixFlowConfig
+}) => /* @__PURE__ */ jsxs("div", { className: "grid gap-y-6 md:grid-cols-2 md:gap-x-6 lg:grid-cols-4", children: [
   featuredHeroCard && /* @__PURE__ */ jsx("div", { className: "md:col-span-2", children: /* @__PURE__ */ jsx(
     Pressable,
     {
@@ -1698,18 +1732,24 @@ var PartnersMenu = ({ partnerCards, featuredHeroCard, optixFlowConfig }) => /* @
           ] }),
           /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs", children: featuredHeroCard.description })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn(
-          "absolute inset-0 top-[32%] md:top-0",
-          featuredHeroCard.imagePosition === "background" && "bg-accent invert"
-        ), children: /* @__PURE__ */ jsx(
-          Img,
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            src: featuredHeroCard.image,
-            alt: featuredHeroCard.title,
-            className: "object-fit h-full w-full object-top-right opacity-100 md:h-2/3 md:object-top",
-            optixFlowConfig
+            className: cn(
+              "absolute inset-0 top-[32%] md:top-0",
+              featuredHeroCard.imagePosition === "background" && "bg-accent invert"
+            ),
+            children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: featuredHeroCard.image,
+                alt: featuredHeroCard.title,
+                className: "object-fit h-full w-full object-top-right opacity-100 md:h-2/3 md:object-top",
+                optixFlowConfig
+              }
+            )
           }
-        ) })
+        )
       ] })
     }
   ) }),
@@ -1729,7 +1769,11 @@ var PartnersMenu = ({ partnerCards, featuredHeroCard, optixFlowConfig }) => /* @
     card.title
   )) })
 ] });
-var ResourcesMenu = ({ resourceItems, topicGroups, featuredHeroCard }) => /* @__PURE__ */ jsxs("div", { className: "grid gap-8 lg:grid-cols-3", children: [
+var ResourcesMenu = ({
+  resourceItems,
+  topicGroups,
+  featuredHeroCard
+}) => /* @__PURE__ */ jsxs("div", { className: "grid gap-8 lg:grid-cols-3", children: [
   featuredHeroCard && /* @__PURE__ */ jsx("div", { className: "lg:col-span-1", children: /* @__PURE__ */ jsx(
     Pressable,
     {
@@ -1810,14 +1854,7 @@ var renderMobileDropdownContent = (item) => {
   switch (item.layout) {
     case "solutions-with-platform":
       return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: item.solutionCards?.map((solution) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            href: solution.href,
-            className: "text-sm font-medium",
-            children: solution.title
-          }
-        ),
+        /* @__PURE__ */ jsx(Pressable, { href: solution.href, className: "text-sm font-medium", children: solution.title }),
         solution.subpages.map((subpage) => /* @__PURE__ */ jsxs(
           Pressable,
           {
@@ -1859,8 +1896,9 @@ var renderMobileDropdownContent = (item) => {
     case "features-with-locations":
     case "partners-promotional":
       return /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ jsxs(Pressable, { href: "#", children: [
-        "View all ",
-        item.title.toLowerCase()
+        "View all",
+        " ",
+        typeof item.label === "string" ? item.label.toLowerCase() : "items"
       ] }) });
     default:
       return null;
@@ -1878,7 +1916,14 @@ var MobileNavigationMenu = ({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -1913,21 +1958,21 @@ var MobileNavigationMenu = ({
                 value: `nav-${index}`,
                 className: "border-b-0",
                 children: [
-                  /* @__PURE__ */ jsx(AccordionTrigger, { className: "h-15 items-center text-base font-normal text-foreground hover:no-underline", children: item.title }),
+                  /* @__PURE__ */ jsx(AccordionTrigger, { className: "h-15 items-center text-base font-normal text-foreground hover:no-underline", children: item.label }),
                   /* @__PURE__ */ jsx(AccordionContent, { className: "max-h-[60dvh] overflow-y-auto", children: renderMobileDropdownContent(item) })
                 ]
               },
-              item.title
+              typeof item.label === "string" ? item.label : `nav-${index}`
             );
           }
           return /* @__PURE__ */ jsx(
             Pressable,
             {
-              href: item.url,
+              href: item.href,
               className: "flex h-15 items-center text-base font-normal text-foreground",
-              children: item.title
+              children: item.label
             },
-            item.title
+            typeof item.label === "string" ? item.label : `nav-${index}`
           );
         }) })
       ] }) })