@opensite/ui 2.3.3 → 2.3.4

package/dist/link-page-minimal-profile.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 LinkPageMinimalProfile({
   name,
   bio,
@@ -995,33 +1077,16 @@ function LinkPageMinimalProfile({
           "flex items-center justify-center gap-4 pt-4",
           socialLinksClassName
         ),
-        children: socialLinks.map((social, index) => {
-          const { iconName: socialIconName, ...socialRest } = social;
-          const icon = social.icon || (socialIconName ? /* @__PURE__ */ jsxRuntime.jsx(
-            DynamicIcon,
-            {
-              name: socialIconName,
-              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,
-            {
-              href: social.href,
-              "aria-label": ariaLabel,
-              className: cn(
-                "rounded-full p-2 transition-colors",
-                "hover:opacity-80",
-                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(socialLinkClassName, social.className),
+            iconClassName: socialIconClassName
+          },
+          social.href || index
+        ))
       }
     );
   }, [

package/dist/link-page-minimal-profile.d.cts

@@ -13,13 +13,6 @@ interface MinimalProfileLink extends ActionConfig {
     id?: string;
     iconName?: string;
 }
-/**
- * Social link for the minimal profile link page
- */
-interface MinimalProfileSocialLink extends SocialLinkItem {
-    id?: string;
-    iconName?: string;
-}
 /**
  * Props for the LinkPageMinimalProfile component
  */
@@ -55,7 +48,7 @@ interface LinkPageMinimalProfileProps {
     /**
      * Array of social media links
      */
-    socialLinks?: MinimalProfileSocialLink[];
+    socialLinks?: SocialLinkItem[];
     /**
      * Custom slot for rendering social links (overrides socialLinks array)
      */
@@ -179,4 +172,4 @@ interface LinkPageMinimalProfileProps {
  */
 declare function LinkPageMinimalProfile({ name, bio, avatar, avatarUrl, profileSlot, links, linksSlot, socialLinks, socialLinksSlot, footerAction, footerSlot, className, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, linksClassName, linkClassName, linkIconClassName, linkLabelClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, footerClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: LinkPageMinimalProfileProps): React.JSX.Element;
 
-export { LinkPageMinimalProfile, type LinkPageMinimalProfileProps, type MinimalProfileLink, type MinimalProfileSocialLink };
+export { LinkPageMinimalProfile, type LinkPageMinimalProfileProps, type MinimalProfileLink };

package/dist/link-page-minimal-profile.d.ts

@@ -13,13 +13,6 @@ interface MinimalProfileLink extends ActionConfig {
     id?: string;
     iconName?: string;
 }
-/**
- * Social link for the minimal profile link page
- */
-interface MinimalProfileSocialLink extends SocialLinkItem {
-    id?: string;
-    iconName?: string;
-}
 /**
  * Props for the LinkPageMinimalProfile component
  */
@@ -55,7 +48,7 @@ interface LinkPageMinimalProfileProps {
     /**
      * Array of social media links
      */
-    socialLinks?: MinimalProfileSocialLink[];
+    socialLinks?: SocialLinkItem[];
     /**
      * Custom slot for rendering social links (overrides socialLinks array)
      */
@@ -179,4 +172,4 @@ interface LinkPageMinimalProfileProps {
  */
 declare function LinkPageMinimalProfile({ name, bio, avatar, avatarUrl, profileSlot, links, linksSlot, socialLinks, socialLinksSlot, footerAction, footerSlot, className, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, linksClassName, linkClassName, linkIconClassName, linkLabelClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, footerClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: LinkPageMinimalProfileProps): React.JSX.Element;
 
-export { LinkPageMinimalProfile, type LinkPageMinimalProfileProps, type MinimalProfileLink, type MinimalProfileSocialLink };
+export { LinkPageMinimalProfile, type LinkPageMinimalProfileProps, type MinimalProfileLink };

package/dist/link-page-minimal-profile.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-minimal-profile.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 LinkPageMinimalProfile({
   name,
   bio,
@@ -974,33 +1056,16 @@ function LinkPageMinimalProfile({
           "flex items-center justify-center gap-4 pt-4",
           socialLinksClassName
         ),
-        children: socialLinks.map((social, index) => {
-          const { iconName: socialIconName, ...socialRest } = social;
-          const icon = social.icon || (socialIconName ? /* @__PURE__ */ jsx(
-            DynamicIcon,
-            {
-              name: socialIconName,
-              size: 20,
-              className: socialIconClassName
-            }
-          ) : null);
-          const ariaLabel = social["aria-label"] || (typeof social.label === "string" ? social.label : void 0) || social.platform;
-          return /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              href: social.href,
-              "aria-label": ariaLabel,
-              className: cn(
-                "rounded-full p-2 transition-colors",
-                "hover:opacity-80",
-                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(socialLinkClassName, social.className),
+            iconClassName: socialIconClassName
+          },
+          social.href || index
+        ))
       }
     );
   }, [

package/dist/link-page-newsletter-social.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');
 var integration = require('@page-speed/forms/integration');
 
 function _interopNamespace(e) {
@@ -831,6 +832,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";
 var DEFAULT_STYLE_RULES = {
   formContainer: "w-full flex flex-col gap-3 justify-center items-center",
   fieldsContainer: "",
@@ -955,34 +1037,22 @@ function LinkPageNewsletterSocial({
           "flex items-center justify-center gap-3",
           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,
-              asButton: true,
-              size: "icon-lg",
-              className: cn(
-                "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),
+            asButton: true,
+            size: "icon-lg",
+            className: cn(
+              "rounded-full p-2.5 transition-all duration-200",
+              socialLinkClassName,
+              social.className
+            ),
+            iconClassName: socialIconClassName
+          },
+          social.id ?? social.href ?? index
+        ))
       }
     );
   }, [

package/dist/link-page-newsletter-social.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';
 import { FormEngine } from '@page-speed/forms/integration';
 
 // components/blocks/link-page/link-page-newsletter-social.tsx
@@ -810,6 +811,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";
 var DEFAULT_STYLE_RULES = {
   formContainer: "w-full flex flex-col gap-3 justify-center items-center",
   fieldsContainer: "",
@@ -934,34 +1016,22 @@ function LinkPageNewsletterSocial({
           "flex items-center justify-center gap-3",
           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,
-              asButton: true,
-              size: "icon-lg",
-              className: cn(
-                "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),
+            asButton: true,
+            size: "icon-lg",
+            className: cn(
+              "rounded-full p-2.5 transition-all duration-200",
+              socialLinkClassName,
+              social.className
+            ),
+            iconClassName: socialIconClassName
+          },
+          social.id ?? social.href ?? index
+        ))
       }
     );
   }, [