@opensite/ui 1.3.7 → 1.3.8

package/dist/registry.js

@@ -20575,7 +20575,7 @@ function FeatureShowcase({
           },
           style: equalizeOnMobile && mobileSlideHeight ? { minHeight: mobileSlideHeight } : void 0,
           className: cn(
-            "flex flex-col gap-8 md:gap-14 md:flex-row md:items-center md:justify-between",
+            "flex flex-col-reverse gap-8 md:gap-14 md:flex-row md:items-center md:justify-between",
             slideClassName
           ),
           children: [
@@ -20584,7 +20584,7 @@ function FeatureShowcase({
               "div",
               {
                 className: cn(
-                  "w-full",
+                  "relative w-full min-h-[25dvh] h-[25dvh] max-h-[35dvh] md:min-h-0 md:h-auto md:max-h-none [&>*]:h-full [&>*]:object-cover",
                   mediaWrapperClassName,
                   mediaClassName
                 ),
@@ -20601,7 +20601,7 @@ function FeatureShowcase({
           onNext: () => api?.scrollNext(),
           canScrollPrevious,
           canScrollNext,
-          className: "absolute bottom-4 right-0 md:bottom-6"
+          className: "absolute bottom-[calc(25dvh+2rem)] right-4 md:bottom-6 md:right-0"
         }
       )
     ] });
@@ -21127,6 +21127,24 @@ var platformIconMap = {
   spotify: "cib/spotify",
   apple: "cib/apple",
   x: "line-md/twitter-x",
+  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",
   unknown: "icon-park-solid/circular-connection"
 };
 var SocialLinkIcon = React52.forwardRef(
@@ -22276,10 +22294,11 @@ function FooterLinksGrid({
   attributionHref,
   bottomLinks,
   background,
-  spacing,
   pattern,
   patternOpacity,
-  optixFlowConfig
+  optixFlowConfig,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32"
 }) {
   const currentYear = useMemo(() => (/* @__PURE__ */ new Date()).getFullYear(), []);
   const copyrightText = copyright ?? `\xA9 ${currentYear}`;
@@ -22291,9 +22310,10 @@ function FooterLinksGrid({
       pattern,
       patternOpacity,
       className: cn(className),
+      containerClassName,
       children: /* @__PURE__ */ jsxs("footer", { children: [
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8 lg:grid-cols-6", children: [
-          (logo || tagline) && /* @__PURE__ */ jsxs("div", { className: "col-span-2 mb-8 lg:mb-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 md:gap-8 md:grid-cols-6", children: [
+          (logo || tagline) && /* @__PURE__ */ jsxs("div", { className: "flex space-y-2 col-span-2 flex-col mb-6 md:mb-0 pr-0 md:pr-6", children: [
             logo && /* @__PURE__ */ jsx(
               FooterLogo,
               {
@@ -22306,17 +22326,10 @@ function FooterLinksGrid({
           ] }),
           menuItems && menuItems.length > 0 && menuItems.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("h3", { className: "mb-4 font-bold", children: section.title }),
-            /* @__PURE__ */ jsx("ul", { className: "space-y-4 text-muted-foreground", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx(
-              "li",
-              {
-                className: "font-medium hover:text-primary",
-                children: /* @__PURE__ */ jsx(Pressable, { href: link.url, children: link.text })
-              },
-              linkIdx
-            )) })
+            /* @__PURE__ */ jsx("ul", { className: "space-y-4", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { className: "text-sm font-medium", children: /* @__PURE__ */ jsx(Pressable, { href: link.url, children: link.text }) }, linkIdx)) })
           ] }, sectionIdx))
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-24 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium text-muted-foreground md:flex-row md:items-center", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mt-24 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium md:flex-row md:items-center", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 md:flex-row md:items-center md:gap-4", children: [
             /* @__PURE__ */ jsx("p", { children: copyrightText }),
             attributionText && /* @__PURE__ */ jsx(
@@ -22328,7 +22341,7 @@ function FooterLinksGrid({
               }
             )
           ] }),
-          bottomLinks && bottomLinks.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex gap-4", children: bottomLinks.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { className: "underline hover:text-primary", children: /* @__PURE__ */ jsx(Pressable, { href: link.url, children: link.text }) }, linkIdx)) })
+          bottomLinks && bottomLinks.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex gap-4", children: bottomLinks.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { className: "underline", children: /* @__PURE__ */ jsx(Pressable, { href: link.url, children: link.text }) }, linkIdx)) })
         ] })
       ] })
     }
@@ -22366,7 +22379,8 @@ function FooterSocialNewsletter({
   bottomClassName,
   copyrightClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -22381,88 +22395,150 @@ function FooterSocialNewsletter({
       pattern,
       patternOpacity,
       className: cn(className),
+      containerClassName,
       children: /* @__PURE__ */ jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsxs("footer", { children: [
         logo && /* @__PURE__ */ jsx(
           FooterLogo,
           {
             logo,
-            logoClassName: cn("flex items-center gap-2", logoWrapperClassName),
+            logoClassName: cn(
+              "flex items-center gap-2",
+              logoWrapperClassName
+            ),
             logoImageClassName: cn("h-10", logoClassName),
             optixFlowConfig
           }
         ),
-        (sections && sections.length > 0 || socialLinks && socialLinks.length > 0 || newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxs("div", { className: cn("mt-14 grid gap-8 md:grid-cols-2 lg:grid-cols-5 xl:grid-cols-4", gridClassName), children: [
-          sections && sections.length > 0 && sections.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { className: cn(navSectionClassName), children: [
-            /* @__PURE__ */ jsx("h3", { className: cn("mb-4 font-bold", navTitleClassName), children: section.title }),
-            /* @__PURE__ */ jsx("ul", { className: cn("space-y-4 text-muted-foreground", navLinksClassName), children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx(
-              "li",
-              {
-                className: cn("font-medium hover:text-primary", navLinkClassName),
-                children: /* @__PURE__ */ jsx(Pressable, { href: link.href, children: link.name })
-              },
-              linkIdx
-            )) })
-          ] }, sectionIdx)),
-          (socialLinks && socialLinks.length > 0 || newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxs("div", { className: cn("lg:col-span-2 xl:col-span-1", socialColumnClassName), children: [
-            socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx("ul", { className: cn("mb-10 flex items-center gap-2 text-muted-foreground", socialLinksClassName), children: 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),
-                  socialLinkClassName
-                )
-              }
-            ) }, idx)) }),
-            (newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxs("div", { className: cn("grid w-full max-w-sm items-center gap-1.5", newsletterClassName), children: [
-              newsletterLabel && /* @__PURE__ */ jsx("label", { htmlFor: "newsletter-email", className: "text-sm font-medium", children: newsletterLabel }),
-              /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-sm items-center space-x-2", children: [
-                /* @__PURE__ */ jsx(
-                  "input",
+        sections && sections.length > 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-14 grid gap-8 md:grid-cols-2 lg:grid-cols-5 xl:grid-cols-4",
+              gridClassName
+            ),
+            children: sections && sections.length > 0 && sections.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { className: cn(navSectionClassName), children: [
+              /* @__PURE__ */ jsx("h3", { className: cn("mb-4 font-bold", navTitleClassName), children: section.title }),
+              /* @__PURE__ */ jsx("ul", { className: cn("space-y-4", navLinksClassName), children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx(
+                "li",
+                {
+                  className: cn("font-medium", navLinkClassName),
+                  children: /* @__PURE__ */ jsx(Pressable, { href: link.href, children: link.name })
+                },
+                linkIdx
+              )) })
+            ] }, sectionIdx))
+          }
+        ) : null,
+        (socialLinks && socialLinks.length > 0 || newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxs("div", { className: cn("lg:col-span-2 xl:col-span-1"), children: [
+          (newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "grid w-full max-w-sm items-center gap-1.5",
+                newsletterClassName
+              ),
+              children: [
+                newsletterLabel && /* @__PURE__ */ jsx(
+                  "label",
                   {
-                    type: "email",
-                    id: "newsletter-email",
-                    placeholder: newsletterPlaceholder || "Email",
-                    className: cn("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", newsletterInputClassName)
+                    htmlFor: "newsletter-email",
+                    className: "text-sm font-medium",
+                    children: newsletterLabel
                   }
                 ),
-                newsletterButtonText && /* @__PURE__ */ jsx(
-                  Pressable,
-                  {
-                    onClick: (e) => {
-                      e.preventDefault();
-                    },
-                    variant: "default",
-                    size: "default",
-                    asButton: true,
-                    className: cn(newsletterButtonClassName),
-                    children: newsletterButtonText
-                  }
-                )
-              ] }),
-              (privacyConsentText || privacyLinkText) && /* @__PURE__ */ jsxs("p", { className: cn("mt-1 text-xs text-muted-foreground", privacyClassName), children: [
-                privacyConsentText,
-                privacyLinkText && /* @__PURE__ */ jsx(Pressable, { href: privacyLinkUrl || "#", className: "ml-1 text-primary hover:underline", children: privacyLinkText })
-              ] })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("mt-20 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium text-muted-foreground md:flex-row md:items-center", bottomClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2 md:flex-row md:items-center md:gap-4", copyrightClassName), children: [
-          /* @__PURE__ */ jsx("p", { children: copyrightText }),
-          attributionText && /* @__PURE__ */ jsx(
-            Pressable,
+                /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-sm items-center space-x-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "email",
+                      id: "newsletter-email",
+                      placeholder: newsletterPlaceholder || "Email",
+                      className: cn(
+                        "flex h-10 w-full rounded-md border border-input  px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                        newsletterInputClassName
+                      )
+                    }
+                  ),
+                  newsletterButtonText && /* @__PURE__ */ jsx(
+                    Pressable,
+                    {
+                      onClick: (e) => {
+                        e.preventDefault();
+                      },
+                      variant: "default",
+                      size: "default",
+                      asButton: true,
+                      className: cn(newsletterButtonClassName),
+                      children: newsletterButtonText
+                    }
+                  )
+                ] }),
+                (privacyConsentText || privacyLinkText) && /* @__PURE__ */ jsxs("p", { className: cn("mt-1 text-xs ", privacyClassName), children: [
+                  privacyConsentText,
+                  privacyLinkText && /* @__PURE__ */ jsx(
+                    Pressable,
+                    {
+                      href: privacyLinkUrl || "#",
+                      className: "ml-1  hover:underline",
+                      children: privacyLinkText
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("", socialColumnClassName), children: /* @__PURE__ */ jsx(
+            "ul",
             {
-              href: attributionHref || "https://opensite.ai",
-              className: "hover:text-primary",
-              children: attributionText
+              className: cn(
+                "mb-10 flex items-center gap-2",
+                socialLinksClassName
+              ),
+              children: 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",
+                    socialLinkClassName
+                  )
+                }
+              ) }, idx))
             }
-          )
-        ] }) })
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-20 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium  md:flex-row md:items-center",
+              bottomClassName
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col gap-2 md:flex-row md:items-center md:gap-4",
+                  copyrightClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("p", { children: copyrightText }),
+                  attributionText && /* @__PURE__ */ jsx(
+                    Pressable,
+                    {
+                      href: attributionHref || "https://opensite.ai",
+                      className: "hover:text-primary",
+                      children: attributionText
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
       ] }) })
     }
   );

package/dist/social-link-icon.cjs

@@ -565,6 +565,24 @@ var platformIconMap = {
   spotify: "cib/spotify",
   apple: "cib/apple",
   x: "line-md/twitter-x",
+  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",
   unknown: "icon-park-solid/circular-connection"
 };
 var SocialLinkIcon = React__namespace.forwardRef(

package/dist/social-link-icon.js

@@ -543,6 +543,24 @@ var platformIconMap = {
   spotify: "cib/spotify",
   apple: "cib/apple",
   x: "line-md/twitter-x",
+  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",
   unknown: "icon-park-solid/circular-connection"
 };
 var SocialLinkIcon = React.forwardRef(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",
@@ -3353,7 +3353,7 @@
     "vitest": "^4.0.10"
   },
   "dependencies": {
-    "@opensite/hooks": "2.0.4",
+    "@opensite/hooks": "2.0.5",
     "@page-speed/forms": "0.3.4",
     "@page-speed/img": "0.4.3",
     "@page-speed/lightbox": "0.2.1",