@opensite/ui 1.3.6 → 1.3.7

package/dist/footer-accordion-social.js

@@ -1,15 +1,15 @@
 "use client";
-import * as React from 'react';
-import React__default, { useMemo } from 'react';
 import { useForm, Form, Field } from '@page-speed/forms';
 import { TextInput as TextInput$1 } from '@page-speed/forms/inputs';
-import { Img } from '@page-speed/img';
+import * as React from 'react';
+import React__default from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { Img } from '@page-speed/img';
 import { serializeForRails, deserializeErrors } from '@page-speed/forms/integration';
+import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
 
 // components/blocks/footers/footer-accordion-social.tsx
 var TextInput = TextInput$1;
@@ -434,6 +434,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 svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -539,66 +610,6 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-function Accordion({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
-}
-function AccordionItem({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    AccordionPrimitive.Item,
-    {
-      "data-slot": "accordion-item",
-      className: cn("border-b ", className),
-      ...props
-    }
-  );
-}
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
-    AccordionPrimitive.Trigger,
-    {
-      "data-slot": "accordion-trigger",
-      className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(
-          DynamicIcon,
-          {
-            name: "lucide/chevron-down",
-            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
-          }
-        )
-      ]
-    }
-  ) });
-}
-function AccordionContent({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    AccordionPrimitive.Content,
-    {
-      "data-slot": "accordion-content",
-      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
-      ...props,
-      children: /* @__PURE__ */ jsx("div", { className: cn("pt-0 pb-4", className), children })
-    }
-  );
-}
 var PageSpeedFormSubmissionError = class extends Error {
   constructor(message, options = {}) {
     super(message);
@@ -1093,6 +1104,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 FooterAccordionSocial({
   newsletterTitle,
   newsletterDescription,
@@ -1112,8 +1183,6 @@ function FooterAccordionSocial({
   patternOpacity,
   patternClassName
 }) {
-  const [isDesktop, setIsDesktop] = React.useState(false);
-  const [accordionValue, setAccordionValue] = React.useState("");
   const form = useForm({
     initialValues: {
       email: ""
@@ -1154,16 +1223,6 @@ function FooterAccordionSocial({
     }
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
-  React.useEffect(() => {
-    const checkDesktop = () => setIsDesktop(window.innerWidth >= 1024);
-    checkDesktop();
-    window.addEventListener("resize", checkDesktop);
-    return () => window.removeEventListener("resize", checkDesktop);
-  }, []);
-  const allAccordionIds = useMemo(() => {
-    if (!footerLinks || footerLinks.length === 0) return [];
-    return footerLinks.map(({ id }) => id);
-  }, [footerLinks]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1176,26 +1235,14 @@ function FooterAccordionSocial({
       children: /* @__PURE__ */ jsxs("div", { className: "space-y-10", children: [
         /* @__PURE__ */ jsxs("div", { className: "grid gap-10 lg:grid-cols-2 lg:gap-20", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-            logo?.url && /* @__PURE__ */ jsxs(Pressable, { href: logo.url, className: "inline-block max-w-48", children: [
-              logo.light && /* @__PURE__ */ jsx(
-                Img,
-                {
-                  src: logo.light,
-                  alt: "Logo",
-                  className: "w-full dark:hidden",
-                  optixFlowConfig
-                }
-              ),
-              logo.dark && /* @__PURE__ */ jsx(
-                Img,
-                {
-                  src: logo.dark,
-                  alt: "Logo",
-                  className: "hidden w-full dark:block",
-                  optixFlowConfig
-                }
-              )
-            ] }),
+            logo && /* @__PURE__ */ jsx(
+              FooterLogo,
+              {
+                logo,
+                logoClassName: "inline-block max-w-48",
+                optixFlowConfig
+              }
+            ),
             /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
               /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold", children: newsletterTitle }),
               /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: newsletterDescription })
@@ -1234,83 +1281,30 @@ function FooterAccordionSocial({
               }
             )
           ] }),
-          isDesktop ? /* @__PURE__ */ jsx(
-            Accordion,
-            {
-              value: allAccordionIds,
-              type: "multiple",
-              className: "grid grid-cols-2 gap-x-16 gap-y-4 lg:grid-cols-3",
-              children: footerLinks && footerLinks.length > 0 && footerLinks.map((section) => /* @__PURE__ */ jsxs(
-                AccordionItem,
-                {
-                  value: section.id,
-                  className: "border-none",
-                  children: [
-                    /* @__PURE__ */ jsx(AccordionTrigger, { className: "cursor-auto rounded-none pb-4 pt-0 text-lg font-bold leading-none hover:no-underline [&>svg]:hidden", children: section.title }),
-                    /* @__PURE__ */ jsx(AccordionContent, { className: "pb-0", children: /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: section.items.map((item, idx) => /* @__PURE__ */ jsx("li", { className: "text-sm font-light leading-tight", children: item.type === "email" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx("p", { className: "mb-1.5", children: item.text }),
-                      /* @__PURE__ */ jsx(
-                        Pressable,
-                        {
-                          href: `mailto:${item.email}`,
-                          className: "underline underline-offset-2",
-                          children: item.email
-                        }
-                      )
-                    ] }) : /* @__PURE__ */ jsx(Pressable, { href: item.link, children: item.text }) }, idx)) }) })
-                  ]
-                },
-                section.id
-              ))
-            }
-          ) : /* @__PURE__ */ jsx(
-            Accordion,
-            {
-              value: accordionValue,
-              type: "single",
-              collapsible: true,
-              onValueChange: setAccordionValue,
-              className: "space-y-0",
-              children: footerLinks && footerLinks.length > 0 && footerLinks.map((section) => /* @__PURE__ */ jsxs(
-                AccordionItem,
-                {
-                  value: section.id,
-                  className: "border-b",
-                  children: [
-                    /* @__PURE__ */ jsxs(AccordionTrigger, { className: "py-4 text-lg font-bold leading-none hover:no-underline [&>svg]:hidden", children: [
-                      section.title,
-                      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/plus", size: 20, className: "lg:hidden" })
-                    ] }),
-                    /* @__PURE__ */ jsx(AccordionContent, { className: "pb-4", children: /* @__PURE__ */ jsx("ul", { className: "space-y-2 pl-4", children: section.items.map((item, idx) => /* @__PURE__ */ jsx("li", { className: "text-sm font-light leading-tight", children: item.type === "email" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx("p", { className: "mb-1.5", children: item.text }),
-                      /* @__PURE__ */ jsx(
-                        Pressable,
-                        {
-                          href: `mailto:${item.email}`,
-                          className: "underline underline-offset-2",
-                          children: item.email
-                        }
-                      )
-                    ] }) : /* @__PURE__ */ jsx(Pressable, { href: item.link, children: item.text }) }, idx)) }) })
-                  ]
-                },
-                section.id
-              ))
-            }
-          )
+          footerLinks && footerLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-x-16 gap-y-8 lg:grid-cols-3", children: footerLinks.map((section) => /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "mb-4 text-lg font-bold", children: section.title }),
+            /* @__PURE__ */ jsx("ul", { className: "space-y-2 text-sm text-muted-foreground", children: section.items.map((item, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                href: item.href,
+                className: "hover:text-primary",
+                children: item.text
+              }
+            ) }, idx)) })
+          ] }, section.id)) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-6 border-t pt-8", children: [
           /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: copyright }),
           socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-4", children: socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            Pressable,
+            SocialLinkIcon,
             {
-              href: social.link,
+              href: social.href,
+              label: social.label,
+              iconNameOverride: social.iconNameOverride,
               variant: "outline",
               size: "icon",
               asButton: true,
-              className: "rounded-full",
-              "aria-label": social.label,
-              children: /* @__PURE__ */ jsx(DynamicIcon, { name: social.icon, size: 20 })
+              className: "rounded-full"
             }
           ) }, idx)) })
         ] })