@opensite/ui 3.3.6 → 3.3.8

package/dist/hero-floating-images.js

@@ -7,6 +7,9 @@ import { Img } from '@page-speed/img';
 import { Lightbox } from '@page-speed/lightbox';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Icon } from '@page-speed/icon';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { Pressable } from '@page-speed/pressable';
 
 // components/blocks/hero/hero-floating-images.tsx
 function cn(...inputs) {
@@ -401,9 +404,110 @@ var DynamicIcon = React.memo(function DynamicIcon2({
   return /* @__PURE__ */ jsx(Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
+var badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 function HeroFloatingImages({
   sectionId = "hero-floating-images",
-  children,
+  badge,
+  badgeIcon,
+  heading,
+  description,
+  actions,
+  actionsSlot,
   images,
   imagesSlot,
   zoomIconName = "lucide/zoom-in",
@@ -414,6 +518,10 @@ function HeroFloatingImages({
   className,
   gridClassName,
   contentClassName,
+  badgeClassName,
+  headingClassName,
+  descriptionClassName,
+  actionsClassName,
   galleryClassName,
   featuredImageClassName,
   secondaryImageClassName,
@@ -471,7 +579,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]
@@ -589,8 +697,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]);
@@ -613,7 +723,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
             ]
           }

package/dist/hero-mentorship-video-split.cjs

@@ -547,10 +547,19 @@ function HeroMentorshipVideoSplit({
   const [skinClasses, setSkinClasses] = React.useState(null);
   const [skinStyle, setSkinStyle] = React.useState(null);
   React.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 = React.useMemo(() => {
     if (actionSlot) return actionSlot;

package/dist/hero-mentorship-video-split.js

@@ -524,10 +524,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;

package/dist/hero-software-growth-video-dialog.cjs

@@ -571,10 +571,19 @@ function HeroSoftwareGrowthVideoDialog({
   const [skinClasses, setSkinClasses] = React.useState(null);
   const [skinStyle, setSkinStyle] = React.useState(null);
   React.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) {

package/dist/hero-software-growth-video-dialog.js

@@ -548,10 +548,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) {

package/dist/hero-video-dialog-gradient.cjs

@@ -572,10 +572,19 @@ function HeroVideoDialogGradient({
   const [skinClasses, setSkinClasses] = React.useState(null);
   const [skinStyle, setSkinStyle] = React.useState(null);
   React.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) {

package/dist/hero-video-dialog-gradient.js

@@ -549,10 +549,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) {

package/dist/link-page-bento-layout.cjs

@@ -835,7 +835,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(
@@ -843,7 +843,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/link-page-bento-layout.js

@@ -814,7 +814,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(
@@ -822,7 +822,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/link-page-grid-cards.cjs

@@ -567,7 +567,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(
@@ -575,7 +575,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
                 }
               )

package/dist/link-page-grid-cards.js

@@ -546,7 +546,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(
@@ -554,7 +554,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
                 }
               )

package/dist/link-page-minimal-profile.cjs

@@ -564,7 +564,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(
@@ -572,7 +572,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
                 }
               )

package/dist/link-page-minimal-profile.js

@@ -543,7 +543,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(
@@ -551,7 +551,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
                 }
               )

package/dist/link-page-newsletter-social.cjs

@@ -594,7 +594,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(
@@ -602,7 +602,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
                 }
               )

package/dist/link-page-newsletter-social.js

@@ -573,7 +573,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(
@@ -581,7 +581,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
                 }
               )

package/dist/link-tree-block.cjs

@@ -649,7 +649,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(
@@ -657,7 +657,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
                   }
                 )

package/dist/link-tree-block.js

@@ -628,7 +628,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(
@@ -636,7 +636,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
                   }
                 )