@opensite/ui 1.3.6 → 1.3.7

package/dist/footer-social-apps.cjs

@@ -4,9 +4,10 @@
 var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var img = require('@page-speed/img');
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
+var img = require('@page-speed/img');
+var usePlatformFromUrl = require('@opensite/hooks/usePlatformFromUrl');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -585,6 +586,77 @@ var Pressable = React__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
+function isThemedLogo(logo) {
+  return "light" in logo || "dark" in logo;
+}
+var FooterLogo = ({
+  logo,
+  logoSlot,
+  logoClassName,
+  logoImageClassName,
+  logoTitleClassName,
+  optixFlowConfig
+}) => {
+  if (logoSlot) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: logoSlot });
+  if (!logo) return null;
+  const hasThemedSources = isThemedLogo(logo) && (logo.light || logo.dark);
+  const hasStandardSource = !isThemedLogo(logo) && logo.src;
+  const logoContent = hasThemedSources ? (
+    // Themed logo with light/dark mode sources
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      logo.light && /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src: logo.light,
+          alt: logo.alt || "Logo",
+          className: cn(
+            "h-8 w-auto object-contain dark:hidden md:h-10",
+            logoImageClassName
+          ),
+          optixFlowConfig
+        }
+      ),
+      logo.dark && /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src: logo.dark,
+          alt: logo.alt || "Logo",
+          className: cn(
+            "hidden h-8 w-auto object-contain dark:block md:h-10",
+            logoImageClassName
+          ),
+          optixFlowConfig
+        }
+      )
+    ] })
+  ) : hasStandardSource ? (
+    // Standard single logo image
+    /* @__PURE__ */ jsxRuntime.jsx(
+      img.Img,
+      {
+        src: logo.src,
+        alt: logo.alt || "Logo",
+        className: cn("h-8 w-auto object-contain md:h-10", logoImageClassName),
+        optixFlowConfig
+      }
+    )
+  ) : logo.title ? (
+    // Text-based logo fallback
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-lg font-semibold md:text-xl", logoTitleClassName), children: logo.title })
+  ) : null;
+  if (!logoContent) return null;
+  if (logo.url) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Pressable,
+      {
+        href: logo.url,
+        className: cn("inline-flex items-center", logoClassName),
+        children: logoContent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-flex items-center", logoClassName), children: logoContent });
+};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -960,6 +1032,66 @@ 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",
+  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,
+        "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 FooterSocialApps({
   logo,
   className,
@@ -991,12 +1123,21 @@ function FooterSocialApps({
   }, [sections]);
   const socialLinksContent = React.useMemo(() => {
     if (!socialLinks || socialLinks.length === 0) return null;
-    return socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: social.href, "aria-label": social.label, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-      "flex size-12 items-center justify-center rounded-full transition-colors hover:text-primary",
-      getNestedCardBg(background),
-      getNestedCardTextColor(background)
-    ), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: social.icon, size: 24 }) }) }) }, idx));
-  }, [socialLinks]);
+    return socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(
+      SocialLinkIcon,
+      {
+        href: social.href,
+        label: social.label,
+        iconNameOverride: social.iconNameOverride,
+        iconSize: 24,
+        className: cn(
+          "flex size-12 items-center justify-center rounded-full transition-colors hover:text-primary",
+          getNestedCardBg(background),
+          getNestedCardTextColor(background)
+        )
+      }
+    ) }, idx));
+  }, [socialLinks, background]);
   const appLinksContent = React.useMemo(() => {
     if (!appLinks || appLinks.length === 0) return null;
     return appLinks.map((app, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: app.href, "aria-label": app.label, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
@@ -1015,18 +1156,15 @@ function FooterSocialApps({
       className: cn(className),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("footer", { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between gap-10 lg:flex-row lg:gap-20", children: [
-          logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ jsxRuntime.jsxs(Pressable, { href: logo.url, className: "flex items-center gap-2", children: [
-            logo.src && /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
-              {
-                src: logo.src,
-                alt: logo.alt,
-                className: "h-10",
-                optixFlowConfig
-              }
-            ),
-            logo.title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl font-semibold", children: logo.title })
-          ] }) }),
+          logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+            FooterLogo,
+            {
+              logo,
+              logoClassName: "flex items-center gap-2",
+              logoImageClassName: "h-10",
+              optixFlowConfig
+            }
+          ) }),
           sections && sections.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid flex-1 gap-8 sm:grid-cols-2 md:grid-cols-3", children: sectionsContent }),
           (socialLinks && socialLinks.length > 0 || appLinks && appLinks.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
             socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [

package/dist/footer-social-apps.d.cts

@@ -1,22 +1,12 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { F as FooterSocialLink } from './types-Cs1jk79n.cjs';
 import 'react/jsx-runtime';
-import './blocks-tmd_MRJv.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
-/**
- * Social link configuration
- */
-interface FooterSocialAppsSocialLink {
-    /** Icon name in format: prefix/name (e.g., "simple-icons/twitter") */
-    icon: string;
-    /** Link URL */
-    href: string;
-    /** Accessible label */
-    label: string;
-}
 /**
  * App store link configuration
  */
@@ -54,7 +44,7 @@ interface FooterSocialAppsProps {
     /** Navigation sections */
     sections?: FooterSocialAppsSection[];
     /** Social media links */
-    socialLinks?: FooterSocialAppsSocialLink[];
+    socialLinks?: FooterSocialLink[];
     /** Mobile app store links */
     appLinks?: FooterSocialAppsAppLink[];
     /** Social section label */
@@ -86,4 +76,4 @@ interface FooterSocialAppsProps {
  */
 declare function FooterSocialApps({ logo, className, sections, socialLinks, appLinks, socialLabel, appLabel, copyright, background, spacing, pattern, patternOpacity, optixFlowConfig, }: FooterSocialAppsProps): React.JSX.Element;
 
-export { FooterSocialApps, type FooterSocialAppsAppLink, type FooterSocialAppsProps, type FooterSocialAppsSection, type FooterSocialAppsSocialLink };
+export { FooterSocialApps, type FooterSocialAppsAppLink, type FooterSocialAppsProps, type FooterSocialAppsSection };

package/dist/footer-social-apps.d.ts

@@ -1,22 +1,12 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { F as FooterSocialLink } from './types-Cs1jk79n.js';
 import 'react/jsx-runtime';
-import './blocks-DRE-f6cS.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
-/**
- * Social link configuration
- */
-interface FooterSocialAppsSocialLink {
-    /** Icon name in format: prefix/name (e.g., "simple-icons/twitter") */
-    icon: string;
-    /** Link URL */
-    href: string;
-    /** Accessible label */
-    label: string;
-}
 /**
  * App store link configuration
  */
@@ -54,7 +44,7 @@ interface FooterSocialAppsProps {
     /** Navigation sections */
     sections?: FooterSocialAppsSection[];
     /** Social media links */
-    socialLinks?: FooterSocialAppsSocialLink[];
+    socialLinks?: FooterSocialLink[];
     /** Mobile app store links */
     appLinks?: FooterSocialAppsAppLink[];
     /** Social section label */
@@ -86,4 +76,4 @@ interface FooterSocialAppsProps {
  */
 declare function FooterSocialApps({ logo, className, sections, socialLinks, appLinks, socialLabel, appLabel, copyright, background, spacing, pattern, patternOpacity, optixFlowConfig, }: FooterSocialAppsProps): React.JSX.Element;
 
-export { FooterSocialApps, type FooterSocialAppsAppLink, type FooterSocialAppsProps, type FooterSocialAppsSection, type FooterSocialAppsSocialLink };
+export { FooterSocialApps, type FooterSocialAppsAppLink, type FooterSocialAppsProps, type FooterSocialAppsSection };

package/dist/footer-social-apps.js

@@ -3,9 +3,10 @@ import * as React from 'react';
 import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { Img } from '@page-speed/img';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
+import { Img } from '@page-speed/img';
+import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
 
 // components/blocks/footers/footer-social-apps.tsx
 function cn(...inputs) {
@@ -564,6 +565,77 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
+function isThemedLogo(logo) {
+  return "light" in logo || "dark" in logo;
+}
+var FooterLogo = ({
+  logo,
+  logoSlot,
+  logoClassName,
+  logoImageClassName,
+  logoTitleClassName,
+  optixFlowConfig
+}) => {
+  if (logoSlot) return /* @__PURE__ */ jsx(Fragment, { children: logoSlot });
+  if (!logo) return null;
+  const hasThemedSources = isThemedLogo(logo) && (logo.light || logo.dark);
+  const hasStandardSource = !isThemedLogo(logo) && logo.src;
+  const logoContent = hasThemedSources ? (
+    // Themed logo with light/dark mode sources
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      logo.light && /* @__PURE__ */ jsx(
+        Img,
+        {
+          src: logo.light,
+          alt: logo.alt || "Logo",
+          className: cn(
+            "h-8 w-auto object-contain dark:hidden md:h-10",
+            logoImageClassName
+          ),
+          optixFlowConfig
+        }
+      ),
+      logo.dark && /* @__PURE__ */ jsx(
+        Img,
+        {
+          src: logo.dark,
+          alt: logo.alt || "Logo",
+          className: cn(
+            "hidden h-8 w-auto object-contain dark:block md:h-10",
+            logoImageClassName
+          ),
+          optixFlowConfig
+        }
+      )
+    ] })
+  ) : hasStandardSource ? (
+    // Standard single logo image
+    /* @__PURE__ */ jsx(
+      Img,
+      {
+        src: logo.src,
+        alt: logo.alt || "Logo",
+        className: cn("h-8 w-auto object-contain md:h-10", logoImageClassName),
+        optixFlowConfig
+      }
+    )
+  ) : logo.title ? (
+    // Text-based logo fallback
+    /* @__PURE__ */ jsx("span", { className: cn("text-lg font-semibold md:text-xl", logoTitleClassName), children: logo.title })
+  ) : null;
+  if (!logoContent) return null;
+  if (logo.url) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        href: logo.url,
+        className: cn("inline-flex items-center", logoClassName),
+        children: logoContent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("inline-flex items-center", logoClassName), children: logoContent });
+};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -939,6 +1011,66 @@ 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",
+  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,
+        "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 FooterSocialApps({
   logo,
   className,
@@ -970,12 +1102,21 @@ function FooterSocialApps({
   }, [sections]);
   const socialLinksContent = useMemo(() => {
     if (!socialLinks || socialLinks.length === 0) return null;
-    return socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsx(Pressable, { href: social.href, "aria-label": social.label, children: /* @__PURE__ */ jsx("span", { className: cn(
-      "flex size-12 items-center justify-center rounded-full transition-colors hover:text-primary",
-      getNestedCardBg(background),
-      getNestedCardTextColor(background)
-    ), children: /* @__PURE__ */ jsx(DynamicIcon, { name: social.icon, size: 24 }) }) }) }, idx));
-  }, [socialLinks]);
+    return socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsx(
+      SocialLinkIcon,
+      {
+        href: social.href,
+        label: social.label,
+        iconNameOverride: social.iconNameOverride,
+        iconSize: 24,
+        className: cn(
+          "flex size-12 items-center justify-center rounded-full transition-colors hover:text-primary",
+          getNestedCardBg(background),
+          getNestedCardTextColor(background)
+        )
+      }
+    ) }, idx));
+  }, [socialLinks, background]);
   const appLinksContent = useMemo(() => {
     if (!appLinks || appLinks.length === 0) return null;
     return appLinks.map((app, idx) => /* @__PURE__ */ jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsx(Pressable, { href: app.href, "aria-label": app.label, children: /* @__PURE__ */ jsx("span", { className: cn(
@@ -994,18 +1135,15 @@ function FooterSocialApps({
       className: cn(className),
       children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("footer", { children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-between gap-10 lg:flex-row lg:gap-20", children: [
-          logo && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ jsxs(Pressable, { href: logo.url, className: "flex items-center gap-2", children: [
-            logo.src && /* @__PURE__ */ jsx(
-              Img,
-              {
-                src: logo.src,
-                alt: logo.alt,
-                className: "h-10",
-                optixFlowConfig
-              }
-            ),
-            logo.title && /* @__PURE__ */ jsx("span", { className: "text-xl font-semibold", children: logo.title })
-          ] }) }),
+          logo && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ jsx(
+            FooterLogo,
+            {
+              logo,
+              logoClassName: "flex items-center gap-2",
+              logoImageClassName: "h-10",
+              optixFlowConfig
+            }
+          ) }),
           sections && sections.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid flex-1 gap-8 sm:grid-cols-2 md:grid-cols-3", children: sectionsContent }),
           (socialLinks && socialLinks.length > 0 || appLinks && appLinks.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
             socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxs("div", { children: [