@opensite/ui 2.3.3 → 2.3.4

package/dist/link-page-bento-layout.cjs

@@ -8,6 +8,7 @@ var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var icon = require('@page-speed/icon');
 var img = require('@page-speed/img');
+var usePlatformFromUrl = require('@opensite/hooks/usePlatformFromUrl');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -830,6 +831,87 @@ var Section = React__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 = React__namespace.forwardRef(
+  ({
+    platformName,
+    label,
+    iconSize = 20,
+    iconColor,
+    href,
+    iconClassName,
+    className,
+    iconNameOverride,
+    ...pressableProps
+  }, ref) => {
+    const platform = usePlatformFromUrl.usePlatformFromUrl(href);
+    const smartPlatformName = React__namespace.useMemo(() => {
+      return platform || platformName;
+    }, [platform, platformName]);
+    const iconName = React__namespace.useMemo(() => {
+      return iconNameOverride || platformIconMap[smartPlatformName];
+    }, [iconNameOverride, smartPlatformName]);
+    const accessibleLabel = React__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 LinkPageBentoLayout({
   name,
   bio,
@@ -884,34 +966,22 @@ function LinkPageBentoLayout({
   const renderSocialLinks = React.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-2 pt-1", socialLinksClassName), children: socialLinks.map((social, index) => {
-      const { iconName, ...socialPressableProps } = social;
-      const icon = social.icon || (iconName ? /* @__PURE__ */ jsxRuntime.jsx(
-        DynamicIcon,
-        {
-          name: iconName,
-          size: 18,
-          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(
-            "rounded-full p-2 transition-all duration-200",
-            "hover:scale-110 active:scale-95",
-            "hover:opacity-80",
-            socialLinkClassName,
-            social.className
-          ),
-          children: icon
-        },
-        social.id ?? index
-      );
-    }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-2 pt-1", socialLinksClassName), 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(
+          "rounded-full p-2 transition-all duration-200",
+          "hover:scale-110 active:scale-95",
+          "hover:opacity-80",
+          socialLinkClassName,
+          social.className
+        ),
+        iconClassName: socialIconClassName
+      },
+      social.id ?? social.href ?? index
+    )) });
   }, [
     socialLinksSlot,
     socialLinks,

package/dist/link-page-bento-layout.js

@@ -7,6 +7,7 @@ import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Icon } from '@page-speed/icon';
 import { Img } from '@page-speed/img';
+import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
 
 // components/blocks/link-page/link-page-bento-layout.tsx
 function cn(...inputs) {
@@ -809,6 +810,87 @@ var Section = React__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 = React.forwardRef(
+  ({
+    platformName,
+    label,
+    iconSize = 20,
+    iconColor,
+    href,
+    iconClassName,
+    className,
+    iconNameOverride,
+    ...pressableProps
+  }, ref) => {
+    const platform = usePlatformFromUrl(href);
+    const smartPlatformName = React.useMemo(() => {
+      return platform || platformName;
+    }, [platform, platformName]);
+    const iconName = React.useMemo(() => {
+      return iconNameOverride || platformIconMap[smartPlatformName];
+    }, [iconNameOverride, smartPlatformName]);
+    const accessibleLabel = React.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 LinkPageBentoLayout({
   name,
   bio,
@@ -863,34 +945,22 @@ function LinkPageBentoLayout({
   const renderSocialLinks = useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2 pt-1", socialLinksClassName), children: socialLinks.map((social, index) => {
-      const { iconName, ...socialPressableProps } = social;
-      const icon = social.icon || (iconName ? /* @__PURE__ */ jsx(
-        DynamicIcon,
-        {
-          name: iconName,
-          size: 18,
-          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(
-            "rounded-full p-2 transition-all duration-200",
-            "hover:scale-110 active:scale-95",
-            "hover:opacity-80",
-            socialLinkClassName,
-            social.className
-          ),
-          children: icon
-        },
-        social.id ?? index
-      );
-    }) });
+    return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2 pt-1", socialLinksClassName), 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(
+          "rounded-full p-2 transition-all duration-200",
+          "hover:scale-110 active:scale-95",
+          "hover:opacity-80",
+          socialLinkClassName,
+          social.className
+        ),
+        iconClassName: socialIconClassName
+      },
+      social.id ?? social.href ?? index
+    )) });
   }, [
     socialLinksSlot,
     socialLinks,

package/dist/link-page-grid-cards.cjs

@@ -8,6 +8,7 @@ var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var icon = require('@page-speed/icon');
 var img = require('@page-speed/img');
+var usePlatformFromUrl = require('@opensite/hooks/usePlatformFromUrl');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -830,6 +831,87 @@ var Section = React__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 = React__namespace.forwardRef(
+  ({
+    platformName,
+    label,
+    iconSize = 20,
+    iconColor,
+    href,
+    iconClassName,
+    className,
+    iconNameOverride,
+    ...pressableProps
+  }, ref) => {
+    const platform = usePlatformFromUrl.usePlatformFromUrl(href);
+    const smartPlatformName = React__namespace.useMemo(() => {
+      return platform || platformName;
+    }, [platform, platformName]);
+    const iconName = React__namespace.useMemo(() => {
+      return iconNameOverride || platformIconMap[smartPlatformName];
+    }, [iconNameOverride, smartPlatformName]);
+    const accessibleLabel = React__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 LinkPageGridCards({
   name,
   bio,
@@ -928,34 +1010,22 @@ function LinkPageGridCards({
           "flex 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: 18,
-              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(
-                "rounded-lg p-2 transition-all duration-200",
-                "bg-card text-card-foreground hover:opacity-80",
-                "size-12 flex items-center justify-center",
-                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(
+              "rounded-lg p-2 transition-all duration-200",
+              "bg-card text-card-foreground hover:opacity-80",
+              "size-12 flex items-center justify-center",
+              socialLinkClassName,
+              social.className
+            ),
+            iconClassName: socialIconClassName
+          },
+          social.id ?? social.href ?? index
+        ))
       }
     );
   }, [

package/dist/link-page-grid-cards.js

@@ -7,6 +7,7 @@ import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Icon } from '@page-speed/icon';
 import { Img } from '@page-speed/img';
+import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
 
 // components/blocks/link-page/link-page-grid-cards.tsx
 function cn(...inputs) {
@@ -809,6 +810,87 @@ var Section = React__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 = React.forwardRef(
+  ({
+    platformName,
+    label,
+    iconSize = 20,
+    iconColor,
+    href,
+    iconClassName,
+    className,
+    iconNameOverride,
+    ...pressableProps
+  }, ref) => {
+    const platform = usePlatformFromUrl(href);
+    const smartPlatformName = React.useMemo(() => {
+      return platform || platformName;
+    }, [platform, platformName]);
+    const iconName = React.useMemo(() => {
+      return iconNameOverride || platformIconMap[smartPlatformName];
+    }, [iconNameOverride, smartPlatformName]);
+    const accessibleLabel = React.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 LinkPageGridCards({
   name,
   bio,
@@ -907,34 +989,22 @@ function LinkPageGridCards({
           "flex 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: 18,
-              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(
-                "rounded-lg p-2 transition-all duration-200",
-                "bg-card text-card-foreground hover:opacity-80",
-                "size-12 flex items-center justify-center",
-                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(
+              "rounded-lg p-2 transition-all duration-200",
+              "bg-card text-card-foreground hover:opacity-80",
+              "size-12 flex items-center justify-center",
+              socialLinkClassName,
+              social.className
+            ),
+            iconClassName: socialIconClassName
+          },
+          social.id ?? social.href ?? index
+        ))
       }
     );
   }, [