@opensite/ui 1.3.5 → 1.3.7

package/dist/footer-newsletter-minimal.d.ts

@@ -1,21 +1,13 @@
 import * as React from 'react';
 import { P as PageSpeedFormConfig } from './forms-BCcwNFhk.js';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-SXMu6Qj2.js';
-import { N as NavLinkItem, O as OptixFlowConfig } from './blocks-BoTnHIZ4.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { N as NavLinkItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { F as FooterSocialLink } from './types-Cs1jk79n.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-Dk2BrJ5f.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
-/**
- * Social link configuration
- */
-interface FooterNewsletterMinimalSocialLink {
-    /** Link label */
-    label: string;
-    /** Link URL */
-    href: string;
-}
 /**
  * Footer link configuration
  */
@@ -38,7 +30,7 @@ interface FooterNewsletterMinimalProps {
     /** Navigation links */
     navLinks?: NavLinkItem[];
     /** Social links */
-    socialLinks?: FooterNewsletterMinimalSocialLink[];
+    socialLinks?: FooterSocialLink[];
     /** Footer links (privacy, terms) */
     footerLinks?: FooterNewsletterMinimalFooterLink[];
     /** Newsletter label */
@@ -172,4 +164,4 @@ interface FooterNewsletterMinimalProps {
  */
 declare function FooterNewsletterMinimal({ heading, supportLabel, supportEmail, navLinks, socialLinks, footerLinks, newsletterLabel, newsletterPlaceholder, brandText, copyright, attributionText, attributionHref, location, className, contentClassName, topSectionClassName, headingClassName, supportClassName, navGridClassName, navLinksClassName, navLinkClassName, socialLinksClassName, socialLinkClassName, newsletterSectionClassName, newsletterFormClassName, newsletterInputClassName, newsletterButtonClassName, bottomGridClassName, locationClassName, footerLinksClassName, footerLinkClassName, brandSectionClassName, brandTextClassName, copyrightClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: FooterNewsletterMinimalProps): React.JSX.Element;
 
-export { FooterNewsletterMinimal, type FooterNewsletterMinimalFooterLink, type FooterNewsletterMinimalProps, type FooterNewsletterMinimalSocialLink };
+export { FooterNewsletterMinimal, type FooterNewsletterMinimalFooterLink, type FooterNewsletterMinimalProps };

package/dist/footer-newsletter-minimal.js

@@ -8,6 +8,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
+import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
 import { serializeForRails, deserializeErrors } from '@page-speed/forms/integration';
 
 // components/blocks/footers/footer-newsletter-minimal.tsx
@@ -538,6 +539,66 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
+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";
 var PageSpeedFormSubmissionError = class extends Error {
   constructor(message, options = {}) {
     super(message);
@@ -1089,25 +1150,16 @@ function FooterNewsletterMinimal({
   }, [navLinks, navLinkClassName]);
   const socialLinksContent = useMemo(() => {
     if (!socialLinks || socialLinks.length === 0) return null;
-    return socialLinks.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-      Pressable,
+    return socialLinks.map((item, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      SocialLinkIcon,
       {
         href: item.href,
-        className: cn("group flex items-center gap-1 tracking-tight hover:text-muted-foreground", socialLinkClassName),
-        children: [
-          item.label,
-          " ",
-          /* @__PURE__ */ jsx(
-            DynamicIcon,
-            {
-              name: "lucide/arrow-up-right",
-              size: 14,
-              className: "group-hover:text-muted-foreground/50"
-            }
-          )
-        ]
+        label: item.label,
+        iconNameOverride: item.iconNameOverride,
+        iconSize: 14,
+        className: cn("group flex items-center gap-1 tracking-tight hover:text-muted-foreground", socialLinkClassName)
       }
-    ) }, item.label));
+    ) }, idx));
   }, [socialLinks, socialLinkClassName]);
   const footerLinksContent = useMemo(() => {
     if (!footerLinks || footerLinks.length === 0) return null;

package/dist/footer-simple-centered.cjs

@@ -4,9 +4,9 @@
 var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var img = require('@page-speed/img');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
+var img = require('@page-speed/img');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -32,36 +32,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -480,6 +450,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",
@@ -869,7 +910,6 @@ function FooterSimpleCentered({
   brandClassName,
   logoWrapperClassName,
   logoClassName,
-  logoTitleClassName,
   taglineClassName,
   sitemapWrapperClassName,
   sitemapSectionClassName,
@@ -938,32 +978,21 @@ function FooterSimpleCentered({
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-96", brandClassName), children: [
-                (logo?.src || logo?.title) && /* @__PURE__ */ jsxRuntime.jsxs(
+                (logo?.src || logo?.title) && /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
                     className: cn(
                       "mb-6 flex items-center gap-3",
                       logoWrapperClassName
                     ),
-                    children: [
-                      logo?.src && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-                        "flex size-12 items-center justify-center rounded-lg border border-border p-2",
-                        getNestedCardBg(background, "accent"),
-                        getNestedCardTextColor(background)
-                      ), children: /* @__PURE__ */ jsxRuntime.jsx(
-                        img.Img,
-                        {
-                          src: logo.src,
-                          alt: logo?.alt,
-                          className: cn(
-                            "size-12 h-full w-full object-contain object-center",
-                            logoClassName
-                          ),
-                          optixFlowConfig
-                        }
-                      ) }),
-                      logo?.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-xl font-bold", logoTitleClassName), children: logo.title })
-                    ]
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      FooterLogo,
+                      {
+                        logo,
+                        logoClassName,
+                        optixFlowConfig
+                      }
+                    )
                   }
                 ),
                 tagline && /* @__PURE__ */ jsxRuntime.jsx(

package/dist/footer-simple-centered.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-ChOWQaTt.cjs';
-import { N as NavLinkItem, O as OptixFlowConfig } from './blocks-ez1YunjX.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { N as NavLinkItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-Dk2BrJ5f.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -67,8 +67,6 @@ interface FooterSimpleCenteredProps {
     logoWrapperClassName?: string;
     /** Additional CSS classes for the logo image */
     logoClassName?: string;
-    /** Additional CSS classes for the logo title */
-    logoTitleClassName?: string;
     /** Additional CSS classes for the tagline */
     taglineClassName?: string;
     /** Additional CSS classes for the sitemap wrapper */
@@ -107,6 +105,6 @@ interface FooterSimpleCenteredProps {
  * Ideal for corporate websites, landing pages, and products that prefer a clean,
  * uncluttered footer design without social media or newsletter elements.
  */
-declare function FooterSimpleCentered({ logo, tagline, sitemap, copyright, bottomLinks, attributionText, attributionHref, className, footerClassName, contentClassName, brandClassName, logoWrapperClassName, logoClassName, logoTitleClassName, taglineClassName, sitemapWrapperClassName, sitemapSectionClassName, sitemapTitleClassName, sitemapLinksClassName, sitemapLinkClassName, bottomBarClassName, copyrightClassName, bottomLinksClassName, bottomLinkClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: FooterSimpleCenteredProps): React.JSX.Element;
+declare function FooterSimpleCentered({ logo, tagline, sitemap, copyright, bottomLinks, attributionText, attributionHref, className, footerClassName, contentClassName, brandClassName, logoWrapperClassName, logoClassName, taglineClassName, sitemapWrapperClassName, sitemapSectionClassName, sitemapTitleClassName, sitemapLinksClassName, sitemapLinkClassName, bottomBarClassName, copyrightClassName, bottomLinksClassName, bottomLinkClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: FooterSimpleCenteredProps): React.JSX.Element;
 
 export { FooterSimpleCentered, type FooterSimpleCenteredProps, type FooterSimpleCenteredSection };

package/dist/footer-simple-centered.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-SXMu6Qj2.js';
-import { N as NavLinkItem, O as OptixFlowConfig } from './blocks-BoTnHIZ4.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { N as NavLinkItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-Dk2BrJ5f.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**
@@ -67,8 +67,6 @@ interface FooterSimpleCenteredProps {
     logoWrapperClassName?: string;
     /** Additional CSS classes for the logo image */
     logoClassName?: string;
-    /** Additional CSS classes for the logo title */
-    logoTitleClassName?: string;
     /** Additional CSS classes for the tagline */
     taglineClassName?: string;
     /** Additional CSS classes for the sitemap wrapper */
@@ -107,6 +105,6 @@ interface FooterSimpleCenteredProps {
  * Ideal for corporate websites, landing pages, and products that prefer a clean,
  * uncluttered footer design without social media or newsletter elements.
  */
-declare function FooterSimpleCentered({ logo, tagline, sitemap, copyright, bottomLinks, attributionText, attributionHref, className, footerClassName, contentClassName, brandClassName, logoWrapperClassName, logoClassName, logoTitleClassName, taglineClassName, sitemapWrapperClassName, sitemapSectionClassName, sitemapTitleClassName, sitemapLinksClassName, sitemapLinkClassName, bottomBarClassName, copyrightClassName, bottomLinksClassName, bottomLinkClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: FooterSimpleCenteredProps): React.JSX.Element;
+declare function FooterSimpleCentered({ logo, tagline, sitemap, copyright, bottomLinks, attributionText, attributionHref, className, footerClassName, contentClassName, brandClassName, logoWrapperClassName, logoClassName, taglineClassName, sitemapWrapperClassName, sitemapSectionClassName, sitemapTitleClassName, sitemapLinksClassName, sitemapLinkClassName, bottomBarClassName, copyrightClassName, bottomLinksClassName, bottomLinkClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: FooterSimpleCenteredProps): React.JSX.Element;
 
 export { FooterSimpleCentered, type FooterSimpleCenteredProps, type FooterSimpleCenteredSection };

package/dist/footer-simple-centered.js

@@ -3,44 +3,14 @@ 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 { cva } from 'class-variance-authority';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Img } from '@page-speed/img';
 
 // components/blocks/footers/footer-simple-centered.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -459,6 +429,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",
@@ -848,7 +889,6 @@ function FooterSimpleCentered({
   brandClassName,
   logoWrapperClassName,
   logoClassName,
-  logoTitleClassName,
   taglineClassName,
   sitemapWrapperClassName,
   sitemapSectionClassName,
@@ -917,32 +957,21 @@ function FooterSimpleCentered({
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: cn("max-w-96", brandClassName), children: [
-                (logo?.src || logo?.title) && /* @__PURE__ */ jsxs(
+                (logo?.src || logo?.title) && /* @__PURE__ */ jsx(
                   "div",
                   {
                     className: cn(
                       "mb-6 flex items-center gap-3",
                       logoWrapperClassName
                     ),
-                    children: [
-                      logo?.src && /* @__PURE__ */ jsx("div", { className: cn(
-                        "flex size-12 items-center justify-center rounded-lg border border-border p-2",
-                        getNestedCardBg(background, "accent"),
-                        getNestedCardTextColor(background)
-                      ), children: /* @__PURE__ */ jsx(
-                        Img,
-                        {
-                          src: logo.src,
-                          alt: logo?.alt,
-                          className: cn(
-                            "size-12 h-full w-full object-contain object-center",
-                            logoClassName
-                          ),
-                          optixFlowConfig
-                        }
-                      ) }),
-                      logo?.title && /* @__PURE__ */ jsx("h3", { className: cn("text-xl font-bold", logoTitleClassName), children: logo.title })
-                    ]
+                    children: /* @__PURE__ */ jsx(
+                      FooterLogo,
+                      {
+                        logo,
+                        logoClassName,
+                        optixFlowConfig
+                      }
+                    )
                   }
                 ),
                 tagline && /* @__PURE__ */ jsx(