@opensite/ui 2.3.3 → 2.3.4

package/dist/link-tree-block.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React5 = require('react');
+var React6 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
@@ -9,6 +9,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var icon = require('@page-speed/icon');
 var reactSlot = require('@radix-ui/react-slot');
 var img = require('@page-speed/img');
+var usePlatformFromUrl = require('@opensite/hooks/usePlatformFromUrl');
 var lightbox = require('@page-speed/lightbox');
 
 function _interopNamespace(e) {
@@ -29,7 +30,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
+var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 
 // components/blocks/link-page/link-tree-block.tsx
 function cn(...inputs) {
@@ -110,7 +111,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React5__namespace.useMemo(() => {
+  const linkType = React6__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -131,7 +132,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React5__namespace.useMemo(() => {
+  const normalizedHref = React6__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -149,7 +150,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React5__namespace.useMemo(() => {
+  const target = React6__namespace.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -162,7 +163,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React5__namespace.useMemo(() => {
+  const rel = React6__namespace.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -171,7 +172,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React5__namespace.useCallback(
+  const handleClick = React6__namespace.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -355,7 +356,7 @@ var buttonVariants = classVarianceAuthority.cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React5__namespace.forwardRef(
+var Pressable = React6__namespace.forwardRef(
   ({
     children,
     className,
@@ -498,7 +499,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React5__namespace.default.forwardRef(
+var Container = React6__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -803,7 +804,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React5__namespace.default.forwardRef(
+var Section = React6__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -864,6 +865,87 @@ var Section = React5__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var platformIconMap = {
+  instagram: "cib/instagram",
+  linkedin: "cib/linkedin",
+  google: "cib/google",
+  facebook: "cib/facebook",
+  tiktok: "cib/tiktok",
+  youtube: "cib/youtube",
+  yelp: "cib/yelp",
+  spotify: "cib/spotify",
+  apple: "cib/apple",
+  x: "line-md/twitter-x-alt",
+  github: "cib/github",
+  snapchat: "cib/snapchat",
+  discord: "cib/discord",
+  dev: "simple-icons/devdotto",
+  substack: "simple-icons/substack",
+  reddit: "cib/reddit",
+  pinterest: "cib/pinterest",
+  threads: "simple-icons/threads",
+  twitch: "cib/twitch",
+  whatsapp: "cib/whatsapp",
+  telegram: "cib/telegram",
+  medium: "simple-icons/medium",
+  patreon: "cib/patreon",
+  onlyfans: "simple-icons/onlyfans",
+  eventbrite: "cib/eventbrite",
+  npmjs: "simple-icons/npm",
+  crates: "cib/rust",
+  rubygems: "cib/rubygems",
+  behance: "cib/behance",
+  dribbble: "cib/dribbble",
+  unknown: "icon-park-solid/circular-connection"
+};
+var SocialLinkIcon = React6__namespace.forwardRef(
+  ({
+    platformName,
+    label,
+    iconSize = 20,
+    iconColor,
+    href,
+    iconClassName,
+    className,
+    iconNameOverride,
+    ...pressableProps
+  }, ref) => {
+    const platform = usePlatformFromUrl.usePlatformFromUrl(href);
+    const smartPlatformName = React6__namespace.useMemo(() => {
+      return platform || platformName;
+    }, [platform, platformName]);
+    const iconName = React6__namespace.useMemo(() => {
+      return iconNameOverride || platformIconMap[smartPlatformName];
+    }, [iconNameOverride, smartPlatformName]);
+    const accessibleLabel = React6__namespace.useMemo(() => {
+      return label || platformName;
+    }, [label, platformName]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Pressable,
+      {
+        ref,
+        href,
+        "aria-label": accessibleLabel,
+        className: cn(
+          "inline-flex items-center justify-center transition-colors",
+          className
+        ),
+        ...pressableProps,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: iconName,
+            size: iconSize,
+            color: iconColor,
+            className: iconClassName,
+            alt: accessibleLabel
+          }
+        )
+      }
+    );
+  }
+);
+SocialLinkIcon.displayName = "SocialLinkIcon";
 function LinkTreeBlock({
   brandName,
   brandTagline,
@@ -920,9 +1002,9 @@ function LinkTreeBlock({
 }) {
   const resolvedBackground = background;
   const resolvedPattern = pattern ?? backgroundPattern;
-  const [lightboxOpen, setLightboxOpen] = React5__namespace.useState(false);
-  const [lightboxIndex, setLightboxIndex] = React5__namespace.useState(0);
-  const lightboxItems = React5__namespace.useMemo(() => {
+  const [lightboxOpen, setLightboxOpen] = React6__namespace.useState(false);
+  const [lightboxIndex, setLightboxIndex] = React6__namespace.useState(0);
+  const lightboxItems = React6__namespace.useMemo(() => {
     if (!mediaGallery || mediaGallery.length === 0) return [];
     return mediaGallery.slice(0, mediaGalleryLimit).map((item, index) => ({
       id: item.id ?? `media-${index}`,
@@ -934,11 +1016,11 @@ function LinkTreeBlock({
       share: true
     }));
   }, [mediaGallery, mediaGalleryLimit]);
-  const handleMediaClick = React5__namespace.useCallback((index) => {
+  const handleMediaClick = React6__namespace.useCallback((index) => {
     setLightboxIndex(index);
     setLightboxOpen(true);
   }, []);
-  const handleLightboxClose = React5__namespace.useCallback(() => {
+  const handleLightboxClose = React6__namespace.useCallback(() => {
     setLightboxOpen(false);
   }, []);
   const resolveImage = (value, fallbackAlt) => {
@@ -950,7 +1032,7 @@ function LinkTreeBlock({
   };
   const nameForAlt = typeof brandName === "string" ? brandName : "Brand avatar";
   const resolvedAvatar = resolveImage(brandAvatar || brandLogo, nameForAlt);
-  const renderBrandHeader = React5__namespace.useMemo(() => {
+  const renderBrandHeader = React6__namespace.useMemo(() => {
     if (brandSlot) return brandSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -1037,7 +1119,7 @@ function LinkTreeBlock({
     brandTagline,
     taglineClassName
   ]);
-  const renderLinks = React5__namespace.useMemo(() => {
+  const renderLinks = React6__namespace.useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-3", linksClassName), children: links.map((link, index) => {
@@ -1153,7 +1235,7 @@ function LinkTreeBlock({
     linkBadgeClassName,
     linkChevronClassName
   ]);
-  const renderMediaGallery = React5__namespace.useMemo(() => {
+  const renderMediaGallery = React6__namespace.useMemo(() => {
     if (mediaGallerySlot) return mediaGallerySlot;
     if (!mediaGallery || mediaGallery.length === 0) return null;
     const items = mediaGallery.slice(0, mediaGalleryLimit);
@@ -1266,7 +1348,7 @@ function LinkTreeBlock({
     mediaGalleryOverlayClassName,
     mediaGalleryPlayIconClassName
   ]);
-  const renderSocialLinks = React5__namespace.useMemo(() => {
+  const renderSocialLinks = React6__namespace.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1276,32 +1358,20 @@ function LinkTreeBlock({
           "flex flex-wrap items-center justify-center gap-2",
           socialLinksClassName
         ),
-        children: socialLinks.map((social, index) => {
-          const { iconName, ...socialPressableProps } = social;
-          const icon = social.icon || (iconName ? /* @__PURE__ */ jsxRuntime.jsx(
-            DynamicIcon,
-            {
-              name: iconName,
-              size: 20,
-              className: socialIconClassName
-            }
-          ) : null);
-          const ariaLabel = social["aria-label"] || (typeof social.label === "string" ? social.label : void 0) || social.platform;
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
-            {
-              ...socialPressableProps,
-              "aria-label": ariaLabel,
-              className: cn(
-                "flex h-12 w-12 items-center justify-center rounded-full p-2.5 transition-all duration-200",
-                socialLinkClassName,
-                social.className
-              ),
-              children: icon
-            },
-            social.id ?? index
-          );
-        })
+        children: socialLinks.map((social, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          SocialLinkIcon,
+          {
+            href: social.href,
+            label: social["aria-label"] || (typeof social.label === "string" ? social.label : void 0),
+            className: cn(
+              "flex h-12 w-12 items-center justify-center rounded-full p-2.5 transition-all duration-200",
+              socialLinkClassName,
+              social.className
+            ),
+            iconClassName: socialIconClassName
+          },
+          social.id ?? social.href ?? index
+        ))
       }
     );
   }, [
@@ -1311,7 +1381,7 @@ function LinkTreeBlock({
     socialIconClassName,
     socialLinkClassName
   ]);
-  const renderFooter = React5__namespace.useMemo(() => {
+  const renderFooter = React6__namespace.useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
     const resolvedFooterAction = footerAction;

package/dist/link-tree-block.js

@@ -1,6 +1,6 @@
 "use client";
-import * as React5 from 'react';
-import React5__default from 'react';
+import * as React6 from 'react';
+import React6__default from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -8,6 +8,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Icon } from '@page-speed/icon';
 import { Slot } from '@radix-ui/react-slot';
 import { Img } from '@page-speed/img';
+import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
 import { Lightbox } from '@page-speed/lightbox';
 
 // components/blocks/link-page/link-tree-block.tsx
@@ -89,7 +90,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React5.useMemo(() => {
+  const linkType = React6.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -110,7 +111,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React5.useMemo(() => {
+  const normalizedHref = React6.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -128,7 +129,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React5.useMemo(() => {
+  const target = React6.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -141,7 +142,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React5.useMemo(() => {
+  const rel = React6.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -150,7 +151,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React5.useCallback(
+  const handleClick = React6.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -334,7 +335,7 @@ var buttonVariants = cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React5.forwardRef(
+var Pressable = React6.forwardRef(
   ({
     children,
     className,
@@ -477,7 +478,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React5__default.forwardRef(
+var Container = React6__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -782,7 +783,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React5__default.forwardRef(
+var Section = React6__default.forwardRef(
   ({
     id,
     title,
@@ -843,6 +844,87 @@ var Section = React5__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var platformIconMap = {
+  instagram: "cib/instagram",
+  linkedin: "cib/linkedin",
+  google: "cib/google",
+  facebook: "cib/facebook",
+  tiktok: "cib/tiktok",
+  youtube: "cib/youtube",
+  yelp: "cib/yelp",
+  spotify: "cib/spotify",
+  apple: "cib/apple",
+  x: "line-md/twitter-x-alt",
+  github: "cib/github",
+  snapchat: "cib/snapchat",
+  discord: "cib/discord",
+  dev: "simple-icons/devdotto",
+  substack: "simple-icons/substack",
+  reddit: "cib/reddit",
+  pinterest: "cib/pinterest",
+  threads: "simple-icons/threads",
+  twitch: "cib/twitch",
+  whatsapp: "cib/whatsapp",
+  telegram: "cib/telegram",
+  medium: "simple-icons/medium",
+  patreon: "cib/patreon",
+  onlyfans: "simple-icons/onlyfans",
+  eventbrite: "cib/eventbrite",
+  npmjs: "simple-icons/npm",
+  crates: "cib/rust",
+  rubygems: "cib/rubygems",
+  behance: "cib/behance",
+  dribbble: "cib/dribbble",
+  unknown: "icon-park-solid/circular-connection"
+};
+var SocialLinkIcon = React6.forwardRef(
+  ({
+    platformName,
+    label,
+    iconSize = 20,
+    iconColor,
+    href,
+    iconClassName,
+    className,
+    iconNameOverride,
+    ...pressableProps
+  }, ref) => {
+    const platform = usePlatformFromUrl(href);
+    const smartPlatformName = React6.useMemo(() => {
+      return platform || platformName;
+    }, [platform, platformName]);
+    const iconName = React6.useMemo(() => {
+      return iconNameOverride || platformIconMap[smartPlatformName];
+    }, [iconNameOverride, smartPlatformName]);
+    const accessibleLabel = React6.useMemo(() => {
+      return label || platformName;
+    }, [label, platformName]);
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        ref,
+        href,
+        "aria-label": accessibleLabel,
+        className: cn(
+          "inline-flex items-center justify-center transition-colors",
+          className
+        ),
+        ...pressableProps,
+        children: /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: iconName,
+            size: iconSize,
+            color: iconColor,
+            className: iconClassName,
+            alt: accessibleLabel
+          }
+        )
+      }
+    );
+  }
+);
+SocialLinkIcon.displayName = "SocialLinkIcon";
 function LinkTreeBlock({
   brandName,
   brandTagline,
@@ -899,9 +981,9 @@ function LinkTreeBlock({
 }) {
   const resolvedBackground = background;
   const resolvedPattern = pattern ?? backgroundPattern;
-  const [lightboxOpen, setLightboxOpen] = React5.useState(false);
-  const [lightboxIndex, setLightboxIndex] = React5.useState(0);
-  const lightboxItems = React5.useMemo(() => {
+  const [lightboxOpen, setLightboxOpen] = React6.useState(false);
+  const [lightboxIndex, setLightboxIndex] = React6.useState(0);
+  const lightboxItems = React6.useMemo(() => {
     if (!mediaGallery || mediaGallery.length === 0) return [];
     return mediaGallery.slice(0, mediaGalleryLimit).map((item, index) => ({
       id: item.id ?? `media-${index}`,
@@ -913,11 +995,11 @@ function LinkTreeBlock({
       share: true
     }));
   }, [mediaGallery, mediaGalleryLimit]);
-  const handleMediaClick = React5.useCallback((index) => {
+  const handleMediaClick = React6.useCallback((index) => {
     setLightboxIndex(index);
     setLightboxOpen(true);
   }, []);
-  const handleLightboxClose = React5.useCallback(() => {
+  const handleLightboxClose = React6.useCallback(() => {
     setLightboxOpen(false);
   }, []);
   const resolveImage = (value, fallbackAlt) => {
@@ -929,7 +1011,7 @@ function LinkTreeBlock({
   };
   const nameForAlt = typeof brandName === "string" ? brandName : "Brand avatar";
   const resolvedAvatar = resolveImage(brandAvatar || brandLogo, nameForAlt);
-  const renderBrandHeader = React5.useMemo(() => {
+  const renderBrandHeader = React6.useMemo(() => {
     if (brandSlot) return brandSlot;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -1016,7 +1098,7 @@ function LinkTreeBlock({
     brandTagline,
     taglineClassName
   ]);
-  const renderLinks = React5.useMemo(() => {
+  const renderLinks = React6.useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("space-y-3", linksClassName), children: links.map((link, index) => {
@@ -1132,7 +1214,7 @@ function LinkTreeBlock({
     linkBadgeClassName,
     linkChevronClassName
   ]);
-  const renderMediaGallery = React5.useMemo(() => {
+  const renderMediaGallery = React6.useMemo(() => {
     if (mediaGallerySlot) return mediaGallerySlot;
     if (!mediaGallery || mediaGallery.length === 0) return null;
     const items = mediaGallery.slice(0, mediaGalleryLimit);
@@ -1245,7 +1327,7 @@ function LinkTreeBlock({
     mediaGalleryOverlayClassName,
     mediaGalleryPlayIconClassName
   ]);
-  const renderSocialLinks = React5.useMemo(() => {
+  const renderSocialLinks = React6.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
     return /* @__PURE__ */ jsx(
@@ -1255,32 +1337,20 @@ function LinkTreeBlock({
           "flex flex-wrap items-center justify-center gap-2",
           socialLinksClassName
         ),
-        children: socialLinks.map((social, index) => {
-          const { iconName, ...socialPressableProps } = social;
-          const icon = social.icon || (iconName ? /* @__PURE__ */ jsx(
-            DynamicIcon,
-            {
-              name: iconName,
-              size: 20,
-              className: socialIconClassName
-            }
-          ) : null);
-          const ariaLabel = social["aria-label"] || (typeof social.label === "string" ? social.label : void 0) || social.platform;
-          return /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              ...socialPressableProps,
-              "aria-label": ariaLabel,
-              className: cn(
-                "flex h-12 w-12 items-center justify-center rounded-full p-2.5 transition-all duration-200",
-                socialLinkClassName,
-                social.className
-              ),
-              children: icon
-            },
-            social.id ?? index
-          );
-        })
+        children: socialLinks.map((social, index) => /* @__PURE__ */ jsx(
+          SocialLinkIcon,
+          {
+            href: social.href,
+            label: social["aria-label"] || (typeof social.label === "string" ? social.label : void 0),
+            className: cn(
+              "flex h-12 w-12 items-center justify-center rounded-full p-2.5 transition-all duration-200",
+              socialLinkClassName,
+              social.className
+            ),
+            iconClassName: socialIconClassName
+          },
+          social.id ?? social.href ?? index
+        ))
       }
     );
   }, [
@@ -1290,7 +1360,7 @@ function LinkTreeBlock({
     socialIconClassName,
     socialLinkClassName
   ]);
-  const renderFooter = React5.useMemo(() => {
+  const renderFooter = React6.useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
     const resolvedFooterAction = footerAction;