@opensite/ui 1.3.7 → 1.3.9

package/dist/registry.cjs

@@ -20615,20 +20615,32 @@ 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: [
             item.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", contentClassName), children: item.content }),
-            item.mediaComponent && /* @__PURE__ */ jsxRuntime.jsx(
+            item.mediaComponent && /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 className: cn(
-                  "w-full",
+                  "relative w-full min-h-[25dvh] h-[25dvh] max-h-[35dvh] md:min-h-[300px] md:h-[400px] md:max-h-[500px] [&>*]:h-full [&>*]:object-cover",
                   mediaWrapperClassName,
                   mediaClassName
                 ),
-                children: item.mediaComponent
+                children: [
+                  item.mediaComponent,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    CarouselPagination,
+                    {
+                      onPrevious: () => api?.scrollPrev(),
+                      onNext: () => api?.scrollNext(),
+                      canScrollPrevious,
+                      canScrollNext,
+                      className: "absolute bottom-2 right-2 md:hidden"
+                    }
+                  )
+                ]
               }
             )
           ]
@@ -20641,7 +20653,7 @@ function FeatureShowcase({
           onNext: () => api?.scrollNext(),
           canScrollPrevious,
           canScrollNext,
-          className: "absolute bottom-4 right-0 md:bottom-6"
+          className: "absolute bottom-6 right-0 hidden md:flex"
         }
       )
     ] });
@@ -21167,6 +21179,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__namespace.forwardRef(
@@ -22316,10 +22346,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 = React52.useMemo(() => (/* @__PURE__ */ new Date()).getFullYear(), []);
   const copyrightText = copyright ?? `\xA9 ${currentYear}`;
@@ -22331,9 +22362,10 @@ function FooterLinksGrid({
       pattern,
       patternOpacity,
       className: cn(className),
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("footer", { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8 lg:grid-cols-6", children: [
-          (logo || tagline) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-2 mb-8 lg:mb-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 md:gap-8 md:grid-cols-6", children: [
+          (logo || tagline) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
               FooterLogo,
               {
@@ -22346,17 +22378,10 @@ function FooterLinksGrid({
           ] }),
           menuItems && menuItems.length > 0 && menuItems.map((section, sectionIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 font-bold", children: section.title }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-4 text-muted-foreground", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx(
-              "li",
-              {
-                className: "font-medium hover:text-primary",
-                children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.url, children: link.text })
-              },
-              linkIdx
-            )) })
+            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-4", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "text-sm font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.url, children: link.text }) }, linkIdx)) })
           ] }, sectionIdx))
         ] }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 md:flex-row md:items-center md:gap-4", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { children: copyrightText }),
             attributionText && /* @__PURE__ */ jsxRuntime.jsx(
@@ -22368,7 +22393,7 @@ function FooterLinksGrid({
               }
             )
           ] }),
-          bottomLinks && bottomLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex gap-4", children: bottomLinks.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "underline hover:text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.url, children: link.text }) }, linkIdx)) })
+          bottomLinks && bottomLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex gap-4", children: bottomLinks.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "underline", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.url, children: link.text }) }, linkIdx)) })
         ] })
       ] })
     }
@@ -22406,7 +22431,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
@@ -22421,88 +22447,150 @@ function FooterSocialNewsletter({
       pattern,
       patternOpacity,
       className: cn(className),
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("footer", { children: [
         logo && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn(navSectionClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 font-bold", navTitleClassName), children: section.title }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("space-y-4 text-muted-foreground", navLinksClassName), children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx(
-              "li",
-              {
-                className: cn("font-medium hover:text-primary", navLinkClassName),
-                children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.href, children: link.name })
-              },
-              linkIdx
-            )) })
-          ] }, sectionIdx)),
-          (socialLinks && socialLinks.length > 0 || newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("lg:col-span-2 xl:col-span-1", socialColumnClassName), children: [
-            socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("mb-10 flex items-center gap-2 text-muted-foreground", socialLinksClassName), children: 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),
-                  socialLinkClassName
-                )
-              }
-            ) }, idx)) }),
-            (newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid w-full max-w-sm items-center gap-1.5", newsletterClassName), children: [
-              newsletterLabel && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "newsletter-email", className: "text-sm font-medium", children: newsletterLabel }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-sm items-center space-x-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
+        sections && sections.length > 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn(navSectionClassName), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 font-bold", navTitleClassName), children: section.title }),
+              /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("space-y-4", navLinksClassName), children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx(
+                "li",
+                {
+                  className: cn("font-medium", navLinkClassName),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.href, children: link.name })
+                },
+                linkIdx
+              )) })
+            ] }, sectionIdx))
+          }
+        ) : null,
+        (socialLinks && socialLinks.length > 0 || newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("lg:col-span-2 xl:col-span-1"), children: [
+          (newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "grid w-full max-w-sm items-center gap-1.5",
+                newsletterClassName
+              ),
+              children: [
+                newsletterLabel && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  Pressable,
-                  {
-                    onClick: (e) => {
-                      e.preventDefault();
-                    },
-                    variant: "default",
-                    size: "default",
-                    asButton: true,
-                    className: cn(newsletterButtonClassName),
-                    children: newsletterButtonText
-                  }
-                )
-              ] }),
-              (privacyConsentText || privacyLinkText) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("mt-1 text-xs text-muted-foreground", privacyClassName), children: [
-                privacyConsentText,
-                privacyLinkText && /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: privacyLinkUrl || "#", className: "ml-1 text-primary hover:underline", children: privacyLinkText })
-              ] })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-2 md:flex-row md:items-center md:gap-4", copyrightClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { children: copyrightText }),
-          attributionText && /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-sm items-center space-x-2", children: [
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                    Pressable,
+                    {
+                      onClick: (e) => {
+                        e.preventDefault();
+                      },
+                      variant: "default",
+                      size: "default",
+                      asButton: true,
+                      className: cn(newsletterButtonClassName),
+                      children: newsletterButtonText
+                    }
+                  )
+                ] }),
+                (privacyConsentText || privacyLinkText) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("mt-1 text-xs ", privacyClassName), children: [
+                  privacyConsentText,
+                  privacyLinkText && /* @__PURE__ */ jsxRuntime.jsx(
+                    Pressable,
+                    {
+                      href: privacyLinkUrl || "#",
+                      className: "ml-1  hover:underline",
+                      children: privacyLinkText
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("", socialColumnClassName), children: /* @__PURE__ */ jsxRuntime.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__ */ 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",
+                    socialLinkClassName
+                  )
+                }
+              ) }, idx))
             }
-          )
-        ] }) })
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col gap-2 md:flex-row md:items-center md:gap-4",
+                  copyrightClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { children: copyrightText }),
+                  attributionText && /* @__PURE__ */ jsxRuntime.jsx(
+                    Pressable,
+                    {
+                      href: attributionHref || "https://opensite.ai",
+                      className: "hover:text-primary",
+                      children: attributionText
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
       ] }) })
     }
   );
@@ -48169,7 +48257,6 @@ function HeroFloatingImages({
   zoomIconName = "lucide/zoom-in",
   enableLightbox = true,
   background,
-  spacing,
   pattern,
   patternOpacity,
   className,
@@ -48180,7 +48267,9 @@ function HeroFloatingImages({
   secondaryImageClassName,
   imageClassName,
   zoomIndicatorClassName,
-  optixFlowConfig
+  optixFlowConfig,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32"
 }) {
   const [lightboxOpen, setLightboxOpen] = React52.useState(false);
   const [lightboxIndex, setLightboxIndex] = React52.useState(0);
@@ -48230,13 +48319,7 @@ function HeroFloatingImages({
           "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
           zoomIndicatorClassName
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-background/90 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
-          DynamicIcon,
-          {
-            name: zoomIconName,
-            size: 20
-          }
-        ) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-background/90 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: zoomIconName, size: 20 }) })
       }
     ),
     [zoomIconName, zoomIndicatorClassName]
@@ -48320,13 +48403,7 @@ function HeroFloatingImages({
                   "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
                   zoomIndicatorClassName
                 ),
-                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-background/90 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  DynamicIcon,
-                  {
-                    name: zoomIconName,
-                    size: 16
-                  }
-                ) })
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-background/90 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: zoomIconName, size: 16 }) })
               }
             )
           ]
@@ -48373,11 +48450,15 @@ function HeroFloatingImages({
       pattern,
       patternOpacity,
       className: cn("relative flex items-center justify-center", className),
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: cn("grid gap-12 lg:grid-cols-2 lg:gap-16", gridClassName),
+            className: cn(
+              "grid gap-4 md:gap-12 grid-cols-1 md:grid-cols-2 lg:gap-16",
+              gridClassName
+            ),
             children: [
               hasContent ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center", contentClassName), children }) : null,
               hasGallery ? galleryContent : null