@opensite/ui 3.3.6 → 3.3.8

package/dist/registry.cjs

@@ -12576,10 +12576,19 @@ function CtaVideoBackgroundHero({
   const [skinClasses, setSkinClasses] = React30.useState(null);
   const [skinStyle, setSkinStyle] = React30.useState(null);
   React30.useEffect(() => {
+    let isMounted = true;
     skins.loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(skins.resolveVideoClasses(skin));
       setSkinStyle(skins.getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const handleOpenModal = () => {
     setIsModalOpen(true);
@@ -49597,7 +49606,12 @@ function HeroSplitIconCards({
 }
 function HeroFloatingImages({
   sectionId = "hero-floating-images",
-  children,
+  badge,
+  badgeIcon,
+  heading,
+  description,
+  actions,
+  actionsSlot,
   images,
   imagesSlot,
   zoomIconName = "lucide/zoom-in",
@@ -49608,6 +49622,10 @@ function HeroFloatingImages({
   className,
   gridClassName,
   contentClassName,
+  badgeClassName,
+  headingClassName,
+  descriptionClassName,
+  actionsClassName,
   galleryClassName,
   featuredImageClassName,
   secondaryImageClassName,
@@ -49665,7 +49683,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-primary text-primary-foreground shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: zoomIconName, size: 20 }) })
       }
     ),
     [zoomIconName, zoomIndicatorClassName]
@@ -49783,8 +49801,10 @@ function HeroFloatingImages({
     secondaryImagesContent
   ]);
   const hasContent = React30.useMemo(() => {
-    return children !== void 0 && children !== null;
-  }, [children]);
+    return Boolean(
+      badge || badgeIcon || heading || description || actionsSlot || actions && actions.length > 0
+    );
+  }, [actions, actionsSlot, badge, badgeIcon, description, heading]);
   const hasGallery = React30.useMemo(() => {
     return imagesSlot || images && images.length > 0;
   }, [imagesSlot, images]);
@@ -49807,7 +49827,45 @@ function HeroFloatingImages({
               gridClassName
             ),
             children: [
-              hasContent ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center", contentClassName), children }) : null,
+              hasContent ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col justify-center", contentClassName), children: [
+                badge && /* @__PURE__ */ jsxRuntime.jsxs(
+                  Badge,
+                  {
+                    variant: "secondary",
+                    className: cn("mb-6 w-fit", badgeClassName),
+                    children: [
+                      badge,
+                      badgeIcon
+                    ]
+                  }
+                ),
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-6 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : heading),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn("mb-8 max-w-lg text-lg", descriptionClassName),
+                    children: description
+                  }
+                ) : description),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  BlockActions,
+                  {
+                    actions,
+                    actionsSlot,
+                    actionsClassName,
+                    verticalSpacing: description ? "mt-0" : void 0
+                  }
+                )
+              ] }) : null,
               hasGallery ? galleryContent : null
             ]
           }
@@ -55086,10 +55144,19 @@ function HeroSoftwareGrowthVideoDialog({
   const [skinClasses, setSkinClasses] = React30.useState(null);
   const [skinStyle, setSkinStyle] = React30.useState(null);
   React30.useEffect(() => {
+    let isMounted = true;
     skins.loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(skins.resolveVideoClasses(skin));
       setSkinStyle(skins.getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const handleVideoClick = () => {
     if (onVideoClick) {
@@ -55268,10 +55335,19 @@ function HeroConversionVideoPlay({
   const [skinClasses, setSkinClasses] = React30.useState(null);
   const [skinStyle, setSkinStyle] = React30.useState(null);
   React30.useEffect(() => {
+    let isMounted = true;
     skins.loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(skins.resolveVideoClasses(skin));
       setSkinStyle(skins.getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const renderActions = React30.useMemo(() => {
     if (actionsSlot) return actionsSlot;
@@ -57075,10 +57151,19 @@ function HeroVideoDialogGradient({
   const [skinClasses, setSkinClasses] = React30.useState(null);
   const [skinStyle, setSkinStyle] = React30.useState(null);
   React30.useEffect(() => {
+    let isMounted = true;
     skins.loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(skins.resolveVideoClasses(skin));
       setSkinStyle(skins.getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const handleVideoClick = () => {
     if (onVideoClick) {
@@ -58078,10 +58163,19 @@ function HeroMentorshipVideoSplit({
   const [skinClasses, setSkinClasses] = React30.useState(null);
   const [skinStyle, setSkinStyle] = React30.useState(null);
   React30.useEffect(() => {
+    let isMounted = true;
     skins.loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(skins.resolveVideoClasses(skin));
       setSkinStyle(skins.getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const renderAction = React30.useMemo(() => {
     if (actionSlot) return actionSlot;
@@ -58979,10 +59073,19 @@ function HeroCreativeStudioStacked({
   const [skinClasses, setSkinClasses] = React30.useState(null);
   const [skinStyle, setSkinStyle] = React30.useState(null);
   React30.useEffect(() => {
+    let isMounted = true;
     skins.loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(skins.resolveVideoClasses(skin));
       setSkinStyle(skins.getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const handleVideoClick = () => {
     if (onVideoClick) {
@@ -101283,7 +101386,7 @@ function LinkTreeBlock({
               "div",
               {
                 className: cn(
-                  "h-24 w-24 overflow-hidden rounded-full border-4 border-background bg-muted shadow-xl",
+                  "flex h-24 w-full max-w-72 items-center justify-center",
                   avatarClassName
                 ),
                 children: resolvedAvatar && /* @__PURE__ */ jsxRuntime.jsx(
@@ -101291,7 +101394,7 @@ function LinkTreeBlock({
                   {
                     src: resolvedAvatar.src,
                     alt: resolvedAvatar.alt,
-                    className: "h-full w-full object-cover",
+                    className: "h-auto max-h-24 w-auto max-w-full object-contain",
                     optixFlowConfig
                   }
                 )
@@ -101744,7 +101847,7 @@ function LinkPageMinimalProfile({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-full",
+                "flex h-20 w-full max-w-56 items-center justify-center sm:h-24 sm:max-w-72",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -101752,7 +101855,7 @@ function LinkPageMinimalProfile({
                 {
                   src: resolvedAvatar.src,
                   alt: resolvedAvatar.alt,
-                  className: "h-full w-full object-cover",
+                  className: "h-auto max-h-20 w-auto max-w-full object-contain sm:max-h-24",
                   optixFlowConfig
                 }
               )
@@ -102016,7 +102119,7 @@ function LinkPageNewsletterSocial({
             "div",
             {
               className: cn(
-                "h-24 w-24 overflow-hidden rounded-full bg-muted ring-4 ring-background shadow-lg",
+                "flex h-24 w-full max-w-72 items-center justify-center",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -102024,7 +102127,7 @@ function LinkPageNewsletterSocial({
                 {
                   src: resolvedAvatar.src,
                   alt: resolvedAvatar.alt,
-                  className: "h-full w-full object-cover",
+                  className: "h-auto max-h-24 w-auto max-w-full object-contain",
                   optixFlowConfig
                 }
               )
@@ -102340,7 +102443,7 @@ function LinkPageGridCards({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-2xl shadow-lg ring-2 ring-primary",
+                "flex h-20 w-full max-w-56 items-center justify-center sm:h-24 sm:max-w-72",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -102348,7 +102451,7 @@ function LinkPageGridCards({
                 {
                   src: resolvedAvatar.src,
                   alt: resolvedAvatar.alt,
-                  className: "h-full w-full object-cover",
+                  className: "h-auto max-h-20 w-auto max-w-full object-contain sm:max-h-24",
                   optixFlowConfig
                 }
               )
@@ -102902,7 +103005,7 @@ function LinkPageBentoLayout({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-full ring-2 ring-neutral-200",
+                "flex h-20 w-full max-w-56 items-center justify-center sm:h-24 sm:max-w-72",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -102910,7 +103013,7 @@ function LinkPageBentoLayout({
                 {
                   src: resolvedAvatar.src,
                   alt: resolvedAvatar.alt,
-                  className: "h-full w-full object-cover",
+                  className: "h-auto max-h-20 w-auto max-w-full object-contain sm:max-h-24",
                   optixFlowConfig
                 }
               )

package/dist/registry.js

@@ -12536,10 +12536,19 @@ function CtaVideoBackgroundHero({
   const [skinClasses, setSkinClasses] = useState(null);
   const [skinStyle, setSkinStyle] = useState(null);
   useEffect(() => {
+    let isMounted = true;
     loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(resolveVideoClasses(skin));
       setSkinStyle(getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const handleOpenModal = () => {
     setIsModalOpen(true);
@@ -49557,7 +49566,12 @@ function HeroSplitIconCards({
 }
 function HeroFloatingImages({
   sectionId = "hero-floating-images",
-  children,
+  badge,
+  badgeIcon,
+  heading,
+  description,
+  actions,
+  actionsSlot,
   images,
   imagesSlot,
   zoomIconName = "lucide/zoom-in",
@@ -49568,6 +49582,10 @@ function HeroFloatingImages({
   className,
   gridClassName,
   contentClassName,
+  badgeClassName,
+  headingClassName,
+  descriptionClassName,
+  actionsClassName,
   galleryClassName,
   featuredImageClassName,
   secondaryImageClassName,
@@ -49625,7 +49643,7 @@ function HeroFloatingImages({
           "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
           zoomIndicatorClassName
         ),
-        children: /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-background/90 shadow-lg", children: /* @__PURE__ */ jsx(DynamicIcon, { name: zoomIconName, size: 20 }) })
+        children: /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg", children: /* @__PURE__ */ jsx(DynamicIcon, { name: zoomIconName, size: 20 }) })
       }
     ),
     [zoomIconName, zoomIndicatorClassName]
@@ -49743,8 +49761,10 @@ function HeroFloatingImages({
     secondaryImagesContent
   ]);
   const hasContent = useMemo(() => {
-    return children !== void 0 && children !== null;
-  }, [children]);
+    return Boolean(
+      badge || badgeIcon || heading || description || actionsSlot || actions && actions.length > 0
+    );
+  }, [actions, actionsSlot, badge, badgeIcon, description, heading]);
   const hasGallery = useMemo(() => {
     return imagesSlot || images && images.length > 0;
   }, [imagesSlot, images]);
@@ -49767,7 +49787,45 @@ function HeroFloatingImages({
               gridClassName
             ),
             children: [
-              hasContent ? /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-center", contentClassName), children }) : null,
+              hasContent ? /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col justify-center", contentClassName), children: [
+                badge && /* @__PURE__ */ jsxs(
+                  Badge,
+                  {
+                    variant: "secondary",
+                    className: cn("mb-6 w-fit", badgeClassName),
+                    children: [
+                      badge,
+                      badgeIcon
+                    ]
+                  }
+                ),
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-6 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : heading),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn("mb-8 max-w-lg text-lg", descriptionClassName),
+                    children: description
+                  }
+                ) : description),
+                /* @__PURE__ */ jsx(
+                  BlockActions,
+                  {
+                    actions,
+                    actionsSlot,
+                    actionsClassName,
+                    verticalSpacing: description ? "mt-0" : void 0
+                  }
+                )
+              ] }) : null,
               hasGallery ? galleryContent : null
             ]
           }
@@ -55046,10 +55104,19 @@ function HeroSoftwareGrowthVideoDialog({
   const [skinClasses, setSkinClasses] = useState(null);
   const [skinStyle, setSkinStyle] = useState(null);
   useEffect(() => {
+    let isMounted = true;
     loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(resolveVideoClasses(skin));
       setSkinStyle(getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const handleVideoClick = () => {
     if (onVideoClick) {
@@ -55228,10 +55295,19 @@ function HeroConversionVideoPlay({
   const [skinClasses, setSkinClasses] = useState(null);
   const [skinStyle, setSkinStyle] = useState(null);
   useEffect(() => {
+    let isMounted = true;
     loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(resolveVideoClasses(skin));
       setSkinStyle(getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
@@ -57035,10 +57111,19 @@ function HeroVideoDialogGradient({
   const [skinClasses, setSkinClasses] = useState(null);
   const [skinStyle, setSkinStyle] = useState(null);
   useEffect(() => {
+    let isMounted = true;
     loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(resolveVideoClasses(skin));
       setSkinStyle(getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const handleVideoClick = () => {
     if (onVideoClick) {
@@ -58038,10 +58123,19 @@ function HeroMentorshipVideoSplit({
   const [skinClasses, setSkinClasses] = useState(null);
   const [skinStyle, setSkinStyle] = useState(null);
   useEffect(() => {
+    let isMounted = true;
     loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(resolveVideoClasses(skin));
       setSkinStyle(getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const renderAction = useMemo(() => {
     if (actionSlot) return actionSlot;
@@ -58939,10 +59033,19 @@ function HeroCreativeStudioStacked({
   const [skinClasses, setSkinClasses] = useState(null);
   const [skinStyle, setSkinStyle] = useState(null);
   useEffect(() => {
+    let isMounted = true;
     loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      if (!isMounted) return;
       setSkinClasses(resolveVideoClasses(skin));
       setSkinStyle(getSkinStyleObject(skin));
+    }).catch(() => {
+      if (!isMounted) return;
+      setSkinClasses(null);
+      setSkinStyle(null);
     });
+    return () => {
+      isMounted = false;
+    };
   }, []);
   const handleVideoClick = () => {
     if (onVideoClick) {
@@ -101243,7 +101346,7 @@ function LinkTreeBlock({
               "div",
               {
                 className: cn(
-                  "h-24 w-24 overflow-hidden rounded-full border-4 border-background bg-muted shadow-xl",
+                  "flex h-24 w-full max-w-72 items-center justify-center",
                   avatarClassName
                 ),
                 children: resolvedAvatar && /* @__PURE__ */ jsx(
@@ -101251,7 +101354,7 @@ function LinkTreeBlock({
                   {
                     src: resolvedAvatar.src,
                     alt: resolvedAvatar.alt,
-                    className: "h-full w-full object-cover",
+                    className: "h-auto max-h-24 w-auto max-w-full object-contain",
                     optixFlowConfig
                   }
                 )
@@ -101704,7 +101807,7 @@ function LinkPageMinimalProfile({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-full",
+                "flex h-20 w-full max-w-56 items-center justify-center sm:h-24 sm:max-w-72",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsx(
@@ -101712,7 +101815,7 @@ function LinkPageMinimalProfile({
                 {
                   src: resolvedAvatar.src,
                   alt: resolvedAvatar.alt,
-                  className: "h-full w-full object-cover",
+                  className: "h-auto max-h-20 w-auto max-w-full object-contain sm:max-h-24",
                   optixFlowConfig
                 }
               )
@@ -101976,7 +102079,7 @@ function LinkPageNewsletterSocial({
             "div",
             {
               className: cn(
-                "h-24 w-24 overflow-hidden rounded-full bg-muted ring-4 ring-background shadow-lg",
+                "flex h-24 w-full max-w-72 items-center justify-center",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsx(
@@ -101984,7 +102087,7 @@ function LinkPageNewsletterSocial({
                 {
                   src: resolvedAvatar.src,
                   alt: resolvedAvatar.alt,
-                  className: "h-full w-full object-cover",
+                  className: "h-auto max-h-24 w-auto max-w-full object-contain",
                   optixFlowConfig
                 }
               )
@@ -102300,7 +102403,7 @@ function LinkPageGridCards({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-2xl shadow-lg ring-2 ring-primary",
+                "flex h-20 w-full max-w-56 items-center justify-center sm:h-24 sm:max-w-72",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsx(
@@ -102308,7 +102411,7 @@ function LinkPageGridCards({
                 {
                   src: resolvedAvatar.src,
                   alt: resolvedAvatar.alt,
-                  className: "h-full w-full object-cover",
+                  className: "h-auto max-h-20 w-auto max-w-full object-contain sm:max-h-24",
                   optixFlowConfig
                 }
               )
@@ -102862,7 +102965,7 @@ function LinkPageBentoLayout({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-full ring-2 ring-neutral-200",
+                "flex h-20 w-full max-w-56 items-center justify-center sm:h-24 sm:max-w-72",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsx(
@@ -102870,7 +102973,7 @@ function LinkPageBentoLayout({
                 {
                   src: resolvedAvatar.src,
                   alt: resolvedAvatar.alt,
-                  className: "h-full w-full object-cover",
+                  className: "h-auto max-h-20 w-auto max-w-full object-contain sm:max-h-24",
                   optixFlowConfig
                 }
               )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "3.3.6",
+  "version": "3.3.8",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",