@opensite/ui 3.7.2 → 3.7.4

package/dist/link-tree-block.d.cts

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Cgd-IXlI.cjs';
+import { L as LogoConfig } from './types-mWZcgKth.cjs';
 import { I as ImageItem, A as ActionConfig, j as SocialLinkItem, O as OptixFlowConfig } from './blocks-DyouPohq.cjs';
 import 'react/jsx-runtime';
+import './dynamic-icon.cjs';
+import '@page-speed/icon';
 import 'class-variance-authority';
 import '@page-speed/pressable';
 import '@opensite/hooks/usePlatformFromUrl';
@@ -69,6 +72,18 @@ interface LinkTreeBlockProps {
      * Custom slot for rendering brand header
      */
     brandSlot?: React.ReactNode;
+    /**
+     * Optional LogoConfig for BrandLogo rendering (takes priority over avatar)
+     */
+    logo?: LogoConfig;
+    /**
+     * Custom slot for the logo/avatar (takes priority over logo and avatar)
+     */
+    logoSlot?: React.ReactNode;
+    /**
+     * Additional CSS classes for the logo image
+     */
+    logoClassName?: string;
     /**
      * Array of links to display
      */
@@ -288,6 +303,6 @@ interface LinkTreeBlockProps {
  * />
  * ```
  */
-declare function LinkTreeBlock({ sectionId, brandName, brandTagline, brandLogo, brandAvatar, brandVerified, verifiedIcon, brandSlot, links, linksSlot, socialLinks, socialLinksSlot, mediaGallery, mediaGallerySlot, mediaGalleryTitle, mediaGalleryLimit, footerAction, footerSlot, className, contentClassName, headerClassName, avatarClassName, nameClassName, taglineClassName, verifiedBadgeClassName, verifiedIconClassName, linksClassName, linkClassName, featuredLinkClassName, linkIconClassName, linkLabelClassName, linkDescriptionClassName, linkBadgeClassName, linkChevronClassName, mediaGalleryClassName, mediaGalleryTitleClassName, mediaGalleryGridClassName, mediaGalleryItemClassName, mediaGalleryMediaClassName, mediaGalleryOverlayClassName, mediaGalleryPlayIconClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, footerClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, backgroundPattern, optixFlowConfig, }: LinkTreeBlockProps): React.JSX.Element;
+declare function LinkTreeBlock({ sectionId, brandName, brandTagline, brandLogo, brandAvatar, brandVerified, verifiedIcon, brandSlot, logo, logoSlot, logoClassName, links, linksSlot, socialLinks, socialLinksSlot, mediaGallery, mediaGallerySlot, mediaGalleryTitle, mediaGalleryLimit, footerAction, footerSlot, className, contentClassName, headerClassName, avatarClassName, nameClassName, taglineClassName, verifiedBadgeClassName, verifiedIconClassName, linksClassName, linkClassName, featuredLinkClassName, linkIconClassName, linkLabelClassName, linkDescriptionClassName, linkBadgeClassName, linkChevronClassName, mediaGalleryClassName, mediaGalleryTitleClassName, mediaGalleryGridClassName, mediaGalleryItemClassName, mediaGalleryMediaClassName, mediaGalleryOverlayClassName, mediaGalleryPlayIconClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, footerClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, backgroundPattern, optixFlowConfig, }: LinkTreeBlockProps): React.JSX.Element;
 
 export { LinkTreeBlock, type LinkTreeBlockProps, type LinkTreeLink, type MediaGalleryItem, type SocialLink };

package/dist/link-tree-block.d.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Dud0DKXB.js';
+import { L as LogoConfig } from './types-hJ2R0GoH.js';
 import { I as ImageItem, A as ActionConfig, j as SocialLinkItem, O as OptixFlowConfig } from './blocks-DyouPohq.js';
 import 'react/jsx-runtime';
+import './dynamic-icon.js';
+import '@page-speed/icon';
 import 'class-variance-authority';
 import '@page-speed/pressable';
 import '@opensite/hooks/usePlatformFromUrl';
@@ -69,6 +72,18 @@ interface LinkTreeBlockProps {
      * Custom slot for rendering brand header
      */
     brandSlot?: React.ReactNode;
+    /**
+     * Optional LogoConfig for BrandLogo rendering (takes priority over avatar)
+     */
+    logo?: LogoConfig;
+    /**
+     * Custom slot for the logo/avatar (takes priority over logo and avatar)
+     */
+    logoSlot?: React.ReactNode;
+    /**
+     * Additional CSS classes for the logo image
+     */
+    logoClassName?: string;
     /**
      * Array of links to display
      */
@@ -288,6 +303,6 @@ interface LinkTreeBlockProps {
  * />
  * ```
  */
-declare function LinkTreeBlock({ sectionId, brandName, brandTagline, brandLogo, brandAvatar, brandVerified, verifiedIcon, brandSlot, links, linksSlot, socialLinks, socialLinksSlot, mediaGallery, mediaGallerySlot, mediaGalleryTitle, mediaGalleryLimit, footerAction, footerSlot, className, contentClassName, headerClassName, avatarClassName, nameClassName, taglineClassName, verifiedBadgeClassName, verifiedIconClassName, linksClassName, linkClassName, featuredLinkClassName, linkIconClassName, linkLabelClassName, linkDescriptionClassName, linkBadgeClassName, linkChevronClassName, mediaGalleryClassName, mediaGalleryTitleClassName, mediaGalleryGridClassName, mediaGalleryItemClassName, mediaGalleryMediaClassName, mediaGalleryOverlayClassName, mediaGalleryPlayIconClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, footerClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, backgroundPattern, optixFlowConfig, }: LinkTreeBlockProps): React.JSX.Element;
+declare function LinkTreeBlock({ sectionId, brandName, brandTagline, brandLogo, brandAvatar, brandVerified, verifiedIcon, brandSlot, logo, logoSlot, logoClassName, links, linksSlot, socialLinks, socialLinksSlot, mediaGallery, mediaGallerySlot, mediaGalleryTitle, mediaGalleryLimit, footerAction, footerSlot, className, contentClassName, headerClassName, avatarClassName, nameClassName, taglineClassName, verifiedBadgeClassName, verifiedIconClassName, linksClassName, linkClassName, featuredLinkClassName, linkIconClassName, linkLabelClassName, linkDescriptionClassName, linkBadgeClassName, linkChevronClassName, mediaGalleryClassName, mediaGalleryTitleClassName, mediaGalleryGridClassName, mediaGalleryItemClassName, mediaGalleryMediaClassName, mediaGalleryOverlayClassName, mediaGalleryPlayIconClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, footerClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, backgroundPattern, optixFlowConfig, }: LinkTreeBlockProps): React.JSX.Element;
 
 export { LinkTreeBlock, type LinkTreeBlockProps, type LinkTreeLink, type MediaGalleryItem, type SocialLink };

package/dist/link-tree-block.js

@@ -526,6 +526,47 @@ var SocialLinkIcon = React5.forwardRef(
   }
 );
 SocialLinkIcon.displayName = "SocialLinkIcon";
+var SIZE_CLASSES = {
+  sm: "max-h-6 sm:max-h-7",
+  md: "max-h-8 sm:max-h-9 lg:max-h-10",
+  lg: "max-h-10 sm:max-h-12 lg:max-h-14",
+  xl: "max-h-12 sm:max-h-14 lg:max-h-16"
+};
+var BrandLogo = ({
+  logo,
+  logoSlot,
+  logoClassName,
+  size = "md",
+  optixFlowConfig
+}) => {
+  if (logoSlot) return /* @__PURE__ */ jsx(Fragment, { children: logoSlot });
+  if (!logo || !logo.src) return null;
+  const imgElement = /* @__PURE__ */ jsx(
+    Img,
+    {
+      src: logo.src,
+      className: cn(
+        "w-auto object-contain",
+        SIZE_CLASSES[size],
+        logo.className
+      ),
+      alt: logo.alt || "Logo",
+      optixFlowConfig,
+      loading: "eager"
+    }
+  );
+  if (logo.url) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        href: logo.url,
+        className: cn("flex items-center", logoClassName),
+        children: imgElement
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center", logoClassName), children: imgElement });
+};
 function LinkTreeBlock({
   sectionId = "link-tree-block",
   brandName,
@@ -535,6 +576,9 @@ function LinkTreeBlock({
   brandVerified = false,
   verifiedIcon,
   brandSlot,
+  logo,
+  logoSlot,
+  logoClassName,
   links,
   linksSlot,
   socialLinks,
@@ -631,7 +675,16 @@ function LinkTreeBlock({
                   "flex h-24 w-full max-w-72 items-center justify-center",
                   avatarClassName
                 ),
-                children: resolvedAvatar && /* @__PURE__ */ jsx(
+                children: logo ? /* @__PURE__ */ jsx(
+                  BrandLogo,
+                  {
+                    logo,
+                    logoSlot,
+                    size: "xl",
+                    logoClassName: cn("mb-2", logoClassName),
+                    optixFlowConfig
+                  }
+                ) : logoSlot ? logoSlot : resolvedAvatar ? /* @__PURE__ */ jsx(
                   Img,
                   {
                     src: resolvedAvatar.src,
@@ -639,7 +692,7 @@ function LinkTreeBlock({
                     className: "h-auto max-h-24 w-auto max-w-full object-contain",
                     optixFlowConfig
                   }
-                )
+                ) : null
               }
             ),
             brandVerified && /* @__PURE__ */ jsx(
@@ -689,6 +742,9 @@ function LinkTreeBlock({
     brandSlot,
     headerClassName,
     avatarClassName,
+    logo,
+    logoSlot,
+    logoClassName,
     resolvedAvatar,
     optixFlowConfig,
     brandVerified,