@opensite/ui 1.0.5 → 1.0.7

package/dist/navbar-platform-resources.cjs

@@ -1214,7 +1214,7 @@ var NavbarMobileMenu = ({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-[998] flex flex-col bg-background",
+        "fixed inset-0 z-998 flex flex-col bg-background",
         "animate-in slide-in-from-top duration-300",
         "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
         className
@@ -1313,27 +1313,30 @@ var NavbarPlatformResources = ({
   const renderDropdownContent = (link) => {
     const layout = link.layout || "simple-list";
     if (layout === "simple-list") {
-      return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "min-w-[640px] p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
-        NavigationMenuLink,
+      return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "w-[400px] p-3", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+        "li",
         {
-          href: getLinkUrl(item),
-          className: "flex flex-row items-start gap-4 rounded-lg border border-input bg-background p-4 hover:bg-accent hover:text-accent-foreground",
-          children: [
-            item.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-12 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
-              img.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__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 18 }) : null }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-foreground", children: item.label }),
-              item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-normal text-muted-foreground", children: item.description })
-            ] })
-          ]
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            NavigationMenuLink,
+            {
+              href: getLinkUrl(item),
+              className: "group/link flex-row gap-2 px-3 py-2 transition-colors duration-200",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 shrink-0 rounded-lg border duration-400 fade-in group-hover/link:bg-background", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
+                  DynamicIcon,
+                  {
+                    name: item.iconName,
+                    size: 16,
+                    className: "m-auto group-hover/link:stroke-black"
+                  }
+                ) : null }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: item.label }),
+                  item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground group-hover/link:text-foreground", children: item.description })
+                ] })
+              ]
+            }
+          )
         },
         `${typeof item.label === "string" ? item.label : "item"}-${itemIndex}`
       )) }) });
@@ -1672,7 +1675,6 @@ var NavbarPlatformResources = ({
                 open,
                 onClose: () => setOpen(false),
                 title: "Mobile Navigation",
-                contentClassName: "pt-10 pb-20",
                 children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-screen-sm mx-auto", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full", children: menuLinks?.map((link, index) => {
                     if (hasDropdownItems(link)) {
@@ -1683,7 +1685,7 @@ var NavbarPlatformResources = ({
                           className: "border-b-0",
                           children: [
                             /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center text-base font-normal text-foreground hover:no-underline", children: link.label }),
-                            /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "max-h-[60dvh] overflow-y-auto space-y-2", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+                            /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
                               Pressable,
                               {
                                 href: getLinkUrl(item),
@@ -1722,10 +1724,7 @@ var NavbarPlatformResources = ({
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: cn(
-                        "mt-6 flex flex-col gap-4",
-                        actionsClassName
-                      ),
+                      className: cn("mt-6 flex flex-col gap-4", actionsClassName),
                       children: renderActions
                     }
                   )

package/dist/navbar-platform-resources.js

@@ -1191,7 +1191,7 @@ var NavbarMobileMenu = ({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-[998] flex flex-col bg-background",
+        "fixed inset-0 z-998 flex flex-col bg-background",
         "animate-in slide-in-from-top duration-300",
         "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
         className
@@ -1290,27 +1290,30 @@ var NavbarPlatformResources = ({
   const renderDropdownContent = (link) => {
     const layout = link.layout || "simple-list";
     if (layout === "simple-list") {
-      return /* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[640px] 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(
-        NavigationMenuLink,
+      return /* @__PURE__ */ jsx(NavigationMenuContent, { className: "w-[400px] p-3", children: /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsx(
+        "li",
         {
-          href: getLinkUrl(item),
-          className: "flex flex-row items-start 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 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 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 18 }) : null }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: item.label }),
-              item.description && /* @__PURE__ */ jsx("div", { className: "text-sm font-normal text-muted-foreground", children: item.description })
-            ] })
-          ]
+          children: /* @__PURE__ */ jsxs(
+            NavigationMenuLink,
+            {
+              href: getLinkUrl(item),
+              className: "group/link flex-row gap-2 px-3 py-2 transition-colors duration-200",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 rounded-lg border duration-400 fade-in group-hover/link:bg-background", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(
+                  DynamicIcon,
+                  {
+                    name: item.iconName,
+                    size: 16,
+                    className: "m-auto group-hover/link:stroke-black"
+                  }
+                ) : null }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
+                  item.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground group-hover/link:text-foreground", children: item.description })
+                ] })
+              ]
+            }
+          )
         },
         `${typeof item.label === "string" ? item.label : "item"}-${itemIndex}`
       )) }) });
@@ -1649,7 +1652,6 @@ var NavbarPlatformResources = ({
                 open,
                 onClose: () => setOpen(false),
                 title: "Mobile Navigation",
-                contentClassName: "pt-10 pb-20",
                 children: /* @__PURE__ */ jsxs("div", { className: "max-w-screen-sm mx-auto", children: [
                   /* @__PURE__ */ jsx(Accordion, { type: "multiple", className: "w-full", children: menuLinks?.map((link, index) => {
                     if (hasDropdownItems(link)) {
@@ -1660,7 +1662,7 @@ var NavbarPlatformResources = ({
                           className: "border-b-0",
                           children: [
                             /* @__PURE__ */ jsx(AccordionTrigger, { className: "h-15 items-center text-base font-normal text-foreground hover:no-underline", children: link.label }),
-                            /* @__PURE__ */ jsx(AccordionContent, { className: "max-h-[60dvh] overflow-y-auto space-y-2", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+                            /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxs(
                               Pressable,
                               {
                                 href: getLinkUrl(item),
@@ -1699,10 +1701,7 @@ var NavbarPlatformResources = ({
                   /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: cn(
-                        "mt-6 flex flex-col gap-4",
-                        actionsClassName
-                      ),
+                      className: cn("mt-6 flex flex-col gap-4", actionsClassName),
                       children: renderActions
                     }
                   )

package/dist/navbar-search-focused.cjs

@@ -1109,7 +1109,7 @@ var NavbarMobileMenu = ({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-[998] flex flex-col bg-background",
+        "fixed inset-0 z-998 flex flex-col bg-background",
         "animate-in slide-in-from-top duration-300",
         "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
         className

package/dist/navbar-search-focused.js

@@ -1087,7 +1087,7 @@ var NavbarMobileMenu = ({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-[998] flex flex-col bg-background",
+        "fixed inset-0 z-998 flex flex-col bg-background",
         "animate-in slide-in-from-top duration-300",
         "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
         className

package/dist/navbar-sidebar-mobile.cjs

@@ -1214,7 +1214,7 @@ var NavbarMobileMenu = ({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-[998] flex flex-col bg-background",
+        "fixed inset-0 z-998 flex flex-col bg-background",
         "animate-in slide-in-from-top duration-300",
         "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
         className

package/dist/navbar-sidebar-mobile.js

@@ -1191,7 +1191,7 @@ var NavbarMobileMenu = ({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-[998] flex flex-col bg-background",
+        "fixed inset-0 z-998 flex flex-col bg-background",
         "animate-in slide-in-from-top duration-300",
         "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
         className

package/dist/navbar-split-cta.cjs

@@ -1152,7 +1152,7 @@ var NavbarMobileMenu = ({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-[998] flex flex-col bg-background",
+        "fixed inset-0 z-998 flex flex-col bg-background",
         "animate-in slide-in-from-top duration-300",
         "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
         className

package/dist/navbar-split-cta.js

@@ -1130,7 +1130,7 @@ var NavbarMobileMenu = ({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-[998] flex flex-col bg-background",
+        "fixed inset-0 z-998 flex flex-col bg-background",
         "animate-in slide-in-from-top duration-300",
         "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
         className

package/dist/navbar-sticky-compact.cjs

@@ -1152,7 +1152,7 @@ var NavbarMobileMenu = ({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-[998] flex flex-col bg-background",
+        "fixed inset-0 z-998 flex flex-col bg-background",
         "animate-in slide-in-from-top duration-300",
         "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
         className

package/dist/navbar-sticky-compact.js

@@ -1130,7 +1130,7 @@ var NavbarMobileMenu = ({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-[998] flex flex-col bg-background",
+        "fixed inset-0 z-998 flex flex-col bg-background",
         "animate-in slide-in-from-top duration-300",
         "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
         className

package/dist/navbar-tabbed-sections.cjs

@@ -1154,7 +1154,7 @@ var NavbarMobileMenu = ({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-[998] flex flex-col bg-background",
+        "fixed inset-0 z-998 flex flex-col bg-background",
         "animate-in slide-in-from-top duration-300",
         "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
         className

package/dist/navbar-tabbed-sections.js

@@ -1131,7 +1131,7 @@ var NavbarMobileMenu = ({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-[998] flex flex-col bg-background",
+        "fixed inset-0 z-998 flex flex-col bg-background",
         "animate-in slide-in-from-top duration-300",
         "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
         className