@opensite/ui 0.9.8 → 1.0.0

package/dist/navbar-sidebar-mobile.cjs

@@ -936,6 +936,66 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var NavbarLogo = ({
+  logo,
+  logoSlot,
+  logoClassName,
+  optixFlowConfig
+}) => {
+  if (logoSlot) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: logoSlot });
+  if (!logo) return null;
+  const hasResponsiveSources = logo.desktopSrc || logo.mobileSrc;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Pressable,
+    {
+      href: logo.url || "/",
+      className: cn("flex items-center", logoClassName),
+      children: hasResponsiveSources ? (
+        // Responsive logo with desktop/mobile sources
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: logo.desktopSrc || logo.src || "",
+              className: cn(
+                "hidden h-8 w-auto object-contain md:block",
+                logo.className
+              ),
+              alt: logo.alt || "Logo",
+              optixFlowConfig
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: logo.mobileSrc || logo.src || "",
+              className: cn(
+                "h-8 w-auto object-contain md:hidden",
+                logo.className
+              ),
+              alt: logo.alt || "Logo",
+              optixFlowConfig
+            }
+          )
+        ] })
+      ) : logo.src ? (
+        // Standard single logo image
+        /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: logo.src,
+            className: cn("max-h-8 w-auto object-contain", logo.className),
+            alt: logo.alt || "Logo",
+            optixFlowConfig
+          }
+        )
+      ) : (
+        // Text-based logo (title as string or React element)
+        logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
+      )
+    }
+  );
+};
 function Accordion({
   ...props
 }) {
@@ -1274,29 +1334,6 @@ var NavbarSidebarMobile = ({
   optixFlowConfig
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const renderLogo = () => {
-    if (logoSlot) return logoSlot;
-    if (!logo) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
-      {
-        href: logo.url || "/",
-        className: cn("flex items-center gap-2", logoClassName),
-        children: [
-          logo.src && /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
-            {
-              src: logo.src,
-              className: cn("h-8", logo.className),
-              alt: logo.alt || "Logo",
-              optixFlowConfig
-            }
-          ),
-          logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold", children: logo.title }) : logo.title)
-        ]
-      }
-    );
-  };
   const renderAuthActions = () => {
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
@@ -1363,7 +1400,15 @@ var NavbarSidebarMobile = ({
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-8", children: [
-              renderLogo(),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                NavbarLogo,
+                {
+                  logo,
+                  logoSlot,
+                  logoClassName,
+                  optixFlowConfig
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 NavigationMenu,
                 {
@@ -1431,7 +1476,15 @@ var NavbarSidebarMobile = ({
               /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "left", className: "w-[300px] sm:w-[350px]", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between border-b pb-4", children: renderLogo() }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between border-b pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    NavbarLogo,
+                    {
+                      logo,
+                      logoSlot,
+                      logoClassName,
+                      optixFlowConfig
+                    }
+                  ) }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto py-4", children: /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: menuSlot ? menuSlot : renderMenu()?.map(
                     (item, index) => item.items ? /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: `item-${index}`, children: [
                       /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "text-base hover:no-underline", children: item.title }),

package/dist/navbar-sidebar-mobile.js

@@ -912,6 +912,66 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var NavbarLogo = ({
+  logo,
+  logoSlot,
+  logoClassName,
+  optixFlowConfig
+}) => {
+  if (logoSlot) return /* @__PURE__ */ jsx(Fragment, { children: logoSlot });
+  if (!logo) return null;
+  const hasResponsiveSources = logo.desktopSrc || logo.mobileSrc;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      href: logo.url || "/",
+      className: cn("flex items-center", logoClassName),
+      children: hasResponsiveSources ? (
+        // Responsive logo with desktop/mobile sources
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: logo.desktopSrc || logo.src || "",
+              className: cn(
+                "hidden h-8 w-auto object-contain md:block",
+                logo.className
+              ),
+              alt: logo.alt || "Logo",
+              optixFlowConfig
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: logo.mobileSrc || logo.src || "",
+              className: cn(
+                "h-8 w-auto object-contain md:hidden",
+                logo.className
+              ),
+              alt: logo.alt || "Logo",
+              optixFlowConfig
+            }
+          )
+        ] })
+      ) : logo.src ? (
+        // Standard single logo image
+        /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: logo.src,
+            className: cn("max-h-8 w-auto object-contain", logo.className),
+            alt: logo.alt || "Logo",
+            optixFlowConfig
+          }
+        )
+      ) : (
+        // Text-based logo (title as string or React element)
+        logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
+      )
+    }
+  );
+};
 function Accordion({
   ...props
 }) {
@@ -1250,29 +1310,6 @@ var NavbarSidebarMobile = ({
   optixFlowConfig
 }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const renderLogo = () => {
-    if (logoSlot) return logoSlot;
-    if (!logo) return null;
-    return /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        href: logo.url || "/",
-        className: cn("flex items-center gap-2", logoClassName),
-        children: [
-          logo.src && /* @__PURE__ */ jsx(
-            Img,
-            {
-              src: logo.src,
-              className: cn("h-8", logo.className),
-              alt: logo.alt || "Logo",
-              optixFlowConfig
-            }
-          ),
-          logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold", children: logo.title }) : logo.title)
-        ]
-      }
-    );
-  };
   const renderAuthActions = () => {
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
@@ -1339,7 +1376,15 @@ var NavbarSidebarMobile = ({
           ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-8", children: [
-              renderLogo(),
+              /* @__PURE__ */ jsx(
+                NavbarLogo,
+                {
+                  logo,
+                  logoSlot,
+                  logoClassName,
+                  optixFlowConfig
+                }
+              ),
               /* @__PURE__ */ jsx(
                 NavigationMenu,
                 {
@@ -1407,7 +1452,15 @@ var NavbarSidebarMobile = ({
               /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-[300px] sm:w-[350px]", children: [
                 /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
                 /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-b pb-4", children: renderLogo() }),
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-b pb-4", children: /* @__PURE__ */ jsx(
+                    NavbarLogo,
+                    {
+                      logo,
+                      logoSlot,
+                      logoClassName,
+                      optixFlowConfig
+                    }
+                  ) }),
                   /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto py-4", children: /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: menuSlot ? menuSlot : renderMenu()?.map(
                     (item, index) => item.items ? /* @__PURE__ */ jsxs(AccordionItem, { value: `item-${index}`, children: [
                       /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-base hover:no-underline", children: item.title }),

package/dist/navbar-split-cta.cjs

@@ -934,6 +934,66 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var NavbarLogo = ({
+  logo,
+  logoSlot,
+  logoClassName,
+  optixFlowConfig
+}) => {
+  if (logoSlot) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: logoSlot });
+  if (!logo) return null;
+  const hasResponsiveSources = logo.desktopSrc || logo.mobileSrc;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Pressable,
+    {
+      href: logo.url || "/",
+      className: cn("flex items-center", logoClassName),
+      children: hasResponsiveSources ? (
+        // Responsive logo with desktop/mobile sources
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: logo.desktopSrc || logo.src || "",
+              className: cn(
+                "hidden h-8 w-auto object-contain md:block",
+                logo.className
+              ),
+              alt: logo.alt || "Logo",
+              optixFlowConfig
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: logo.mobileSrc || logo.src || "",
+              className: cn(
+                "h-8 w-auto object-contain md:hidden",
+                logo.className
+              ),
+              alt: logo.alt || "Logo",
+              optixFlowConfig
+            }
+          )
+        ] })
+      ) : logo.src ? (
+        // Standard single logo image
+        /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: logo.src,
+            className: cn("max-h-8 w-auto object-contain", logo.className),
+            alt: logo.alt || "Logo",
+            optixFlowConfig
+          }
+        )
+      ) : (
+        // Text-based logo (title as string or React element)
+        logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
+      )
+    }
+  );
+};
 function NavigationMenu({
   className,
   children,
@@ -1238,29 +1298,6 @@ var NavbarSplitCta = ({
       }
     ] : []
   ] : []);
-  const renderLogo = React.useMemo(() => {
-    if (logoSlot) return logoSlot;
-    if (!logo) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
-      {
-        href: logo.url || "/",
-        className: cn("flex items-center gap-2", logoClassName),
-        children: [
-          logo.src && /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
-            {
-              src: logo.src,
-              className: cn("h-8", logo.className),
-              alt: logo.alt || "Logo",
-              optixFlowConfig
-            }
-          ),
-          logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold", children: logo.title }) : logo.title)
-        ]
-      }
-    );
-  }, [logoSlot, logo, logoClassName, optixFlowConfig]);
   const renderAuthActions = React.useMemo(() => {
     if (authActionsSlot) return authActionsSlot;
     if (!finalAuthActions || finalAuthActions.length === 0) return null;
@@ -1322,7 +1359,15 @@ var NavbarSplitCta = ({
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-8", children: [
-              renderLogo,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                NavbarLogo,
+                {
+                  logo,
+                  logoSlot,
+                  logoClassName,
+                  optixFlowConfig
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 NavigationMenu,
                 {

package/dist/navbar-split-cta.js

@@ -911,6 +911,66 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var NavbarLogo = ({
+  logo,
+  logoSlot,
+  logoClassName,
+  optixFlowConfig
+}) => {
+  if (logoSlot) return /* @__PURE__ */ jsx(Fragment, { children: logoSlot });
+  if (!logo) return null;
+  const hasResponsiveSources = logo.desktopSrc || logo.mobileSrc;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      href: logo.url || "/",
+      className: cn("flex items-center", logoClassName),
+      children: hasResponsiveSources ? (
+        // Responsive logo with desktop/mobile sources
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: logo.desktopSrc || logo.src || "",
+              className: cn(
+                "hidden h-8 w-auto object-contain md:block",
+                logo.className
+              ),
+              alt: logo.alt || "Logo",
+              optixFlowConfig
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: logo.mobileSrc || logo.src || "",
+              className: cn(
+                "h-8 w-auto object-contain md:hidden",
+                logo.className
+              ),
+              alt: logo.alt || "Logo",
+              optixFlowConfig
+            }
+          )
+        ] })
+      ) : logo.src ? (
+        // Standard single logo image
+        /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: logo.src,
+            className: cn("max-h-8 w-auto object-contain", logo.className),
+            alt: logo.alt || "Logo",
+            optixFlowConfig
+          }
+        )
+      ) : (
+        // Text-based logo (title as string or React element)
+        logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
+      )
+    }
+  );
+};
 function NavigationMenu({
   className,
   children,
@@ -1215,29 +1275,6 @@ var NavbarSplitCta = ({
       }
     ] : []
   ] : []);
-  const renderLogo = useMemo(() => {
-    if (logoSlot) return logoSlot;
-    if (!logo) return null;
-    return /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        href: logo.url || "/",
-        className: cn("flex items-center gap-2", logoClassName),
-        children: [
-          logo.src && /* @__PURE__ */ jsx(
-            Img,
-            {
-              src: logo.src,
-              className: cn("h-8", logo.className),
-              alt: logo.alt || "Logo",
-              optixFlowConfig
-            }
-          ),
-          logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold", children: logo.title }) : logo.title)
-        ]
-      }
-    );
-  }, [logoSlot, logo, logoClassName, optixFlowConfig]);
   const renderAuthActions = useMemo(() => {
     if (authActionsSlot) return authActionsSlot;
     if (!finalAuthActions || finalAuthActions.length === 0) return null;
@@ -1299,7 +1336,15 @@ var NavbarSplitCta = ({
           ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-8", children: [
-              renderLogo,
+              /* @__PURE__ */ jsx(
+                NavbarLogo,
+                {
+                  logo,
+                  logoSlot,
+                  logoClassName,
+                  optixFlowConfig
+                }
+              ),
               /* @__PURE__ */ jsx(
                 NavigationMenu,
                 {

package/dist/navbar-sticky-compact.cjs

@@ -934,6 +934,66 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var NavbarLogo = ({
+  logo,
+  logoSlot,
+  logoClassName,
+  optixFlowConfig
+}) => {
+  if (logoSlot) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: logoSlot });
+  if (!logo) return null;
+  const hasResponsiveSources = logo.desktopSrc || logo.mobileSrc;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Pressable,
+    {
+      href: logo.url || "/",
+      className: cn("flex items-center", logoClassName),
+      children: hasResponsiveSources ? (
+        // Responsive logo with desktop/mobile sources
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: logo.desktopSrc || logo.src || "",
+              className: cn(
+                "hidden h-8 w-auto object-contain md:block",
+                logo.className
+              ),
+              alt: logo.alt || "Logo",
+              optixFlowConfig
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: logo.mobileSrc || logo.src || "",
+              className: cn(
+                "h-8 w-auto object-contain md:hidden",
+                logo.className
+              ),
+              alt: logo.alt || "Logo",
+              optixFlowConfig
+            }
+          )
+        ] })
+      ) : logo.src ? (
+        // Standard single logo image
+        /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: logo.src,
+            className: cn("max-h-8 w-auto object-contain", logo.className),
+            alt: logo.alt || "Logo",
+            optixFlowConfig
+          }
+        )
+      ) : (
+        // Text-based logo (title as string or React element)
+        logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
+      )
+    }
+  );
+};
 function NavigationMenu({
   className,
   children,
@@ -1218,42 +1278,6 @@ var NavbarStickyCompact = ({
     window.addEventListener("scroll", handleScroll);
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
-  const renderLogo = React.useMemo(() => {
-    if (logoSlot) return logoSlot;
-    if (!logo) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
-      {
-        href: logo.url || "/",
-        className: cn("flex items-center gap-2", logoClassName),
-        children: [
-          logo.src && /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
-            {
-              src: logo.src,
-              className: cn(
-                "transition-all duration-300",
-                isScrolled ? "h-6" : "h-8",
-                logo.className
-              ),
-              alt: logo.alt || "Logo",
-              optixFlowConfig
-            }
-          ),
-          logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                "font-semibold transition-all duration-300",
-                isScrolled ? "text-base" : "text-lg"
-              ),
-              children: logo.title
-            }
-          ) : logo.title)
-        ]
-      }
-    );
-  }, [logoSlot, logo, logoClassName, isScrolled, optixFlowConfig]);
   const renderAuthActions = React.useMemo(() => {
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
@@ -1387,7 +1411,19 @@ var NavbarStickyCompact = ({
             navClassName
           ),
           children: [
-            renderLogo,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              NavbarLogo,
+              {
+                logo,
+                logoSlot,
+                logoClassName: cn(
+                  isScrolled ? "[&_img]:h-6 [&_span]:text-base" : "[&_img]:h-8 [&_span]:text-lg",
+                  "[&_img]:transition-all [&_img]:duration-300 [&_span]:transition-all [&_span]:duration-300",
+                  logoClassName
+                ),
+                optixFlowConfig
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu, { className: "hidden lg:flex", children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuList, { children: renderMenu }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",