@opensite/ui 3.3.6 → 3.3.8

package/dist/cta-video-background-hero.cjs

@@ -453,10 +453,19 @@ function CtaVideoBackgroundHero({
   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 handleOpenModal = () => {
     setIsModalOpen(true);

package/dist/cta-video-background-hero.js

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

package/dist/hero-conversion-video-play.cjs

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

package/dist/hero-conversion-video-play.js

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

package/dist/hero-creative-studio-stacked.cjs

@@ -576,10 +576,19 @@ function HeroCreativeStudioStacked({
   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-creative-studio-stacked.js

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

package/dist/hero-floating-images.cjs

@@ -8,6 +8,9 @@ var img = require('@page-speed/img');
 var lightbox = require('@page-speed/lightbox');
 var jsxRuntime = require('react/jsx-runtime');
 var icon = require('@page-speed/icon');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var pressable = require('@page-speed/pressable');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -422,9 +425,110 @@ var DynamicIcon = React__namespace.memo(function DynamicIcon2({
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, name, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
+var badgeVariants = classVarianceAuthority.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 ? reactSlot.Slot : "span";
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    pressable.Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 function HeroFloatingImages({
   sectionId = "hero-floating-images",
-  children,
+  badge,
+  badgeIcon,
+  heading,
+  description,
+  actions,
+  actionsSlot,
   images,
   imagesSlot,
   zoomIconName = "lucide/zoom-in",
@@ -435,6 +539,10 @@ function HeroFloatingImages({
   className,
   gridClassName,
   contentClassName,
+  badgeClassName,
+  headingClassName,
+  descriptionClassName,
+  actionsClassName,
   galleryClassName,
   featuredImageClassName,
   secondaryImageClassName,
@@ -492,7 +600,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]
@@ -610,8 +718,10 @@ function HeroFloatingImages({
     secondaryImagesContent
   ]);
   const hasContent = React.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 = React.useMemo(() => {
     return imagesSlot || images && images.length > 0;
   }, [imagesSlot, images]);
@@ -634,7 +744,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
             ]
           }

package/dist/hero-floating-images.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Cgd-IXlI.cjs';
-import { O as OptixFlowConfig } from './blocks-DyouPohq.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DyouPohq.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -30,11 +30,29 @@ interface HeroFloatingImagesImage {
 }
 interface HeroFloatingImagesProps {
     /**
-     * Flexible content slot for the left side of the hero.
-     * Renders any content the application/AI builder provides (badges, headings, descriptions, actions, etc.)
-     * This allows maximum flexibility without prescribing specific content structure.
+     * Badge content displayed above the heading
      */
-    children?: React.ReactNode;
+    badge?: React.ReactNode;
+    /**
+     * Badge icon
+     */
+    badgeIcon?: React.ReactNode;
+    /**
+     * Main heading content
+     */
+    heading?: React.ReactNode;
+    /**
+     * Description text below heading
+     */
+    description?: React.ReactNode;
+    /**
+     * Array of action configurations for CTA buttons
+     */
+    actions?: ActionConfig[];
+    /**
+     * Custom slot for rendering actions (overrides actions array)
+     */
+    actionsSlot?: React.ReactNode;
     /**
      * Array of images for the gallery section.
      * First image with `featured: true` (or first image if none marked) displays as the tall featured image.
@@ -88,6 +106,22 @@ interface HeroFloatingImagesProps {
      * Additional CSS classes for the content area (left side)
      */
     contentClassName?: string;
+    /**
+     * Additional CSS classes for the badge
+     */
+    badgeClassName?: string;
+    /**
+     * Additional CSS classes for the heading
+     */
+    headingClassName?: string;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the actions container
+     */
+    actionsClassName?: string;
     /**
      * Additional CSS classes for the gallery container (right side)
      */
@@ -118,34 +152,25 @@ interface HeroFloatingImagesProps {
 /**
  * HeroFloatingImages - A split-layout hero with flexible content and an interactive image gallery.
  *
- * Features a two-column layout: content on the left (fully customizable via children prop)
- * and a gallery on the right with a featured tall image and stacked secondary images.
+ * Features a two-column layout: named hero content on the left and a gallery on the right
+ * with a featured tall image and stacked secondary images.
  * Each image has a hover effect with zoom indicator and opens in a lightbox when clicked.
  *
- * The component uses the children prop pattern for maximum flexibility - the application
- * or AI builder can render any content structure without being constrained to specific
- * heading/description/badge props.
- *
  * @example
  * ```tsx
  * <HeroFloatingImages
+ *   badge="Featured Work"
+ *   heading="Your Headline Here"
+ *   description="Your description..."
+ *   actions={[{ label: "View Portfolio", href: "/portfolio", variant: "default" }]}
  *   images={[
  *     { src: "/featured.jpg", alt: "Featured work", featured: true },
  *     { src: "/work-1.jpg", alt: "Project 1" },
  *     { src: "/work-2.jpg", alt: "Project 2" },
  *   ]}
- * >
- *   <Badge className="mb-6 w-fit" variant="secondary">Featured Work</Badge>
- *   <h1 className="mb-6 text-4xl font-bold">Your Headline Here</h1>
- *   <p className="mb-8 text-lg text-muted-foreground">Your description...</p>
- *   <div className="flex gap-4">
- *     <Pressable href="/portfolio" variant="default" size="lg" asButton>
- *       View Portfolio
- *     </Pressable>
- *   </div>
- * </HeroFloatingImages>
+ * />
  * ```
  */
-declare function HeroFloatingImages({ sectionId, children, images, imagesSlot, zoomIconName, enableLightbox, background, pattern, patternOpacity, className, gridClassName, contentClassName, galleryClassName, featuredImageClassName, secondaryImageClassName, imageClassName, zoomIndicatorClassName, optixFlowConfig, containerClassName, spacing, }: HeroFloatingImagesProps): React.JSX.Element;
+declare function HeroFloatingImages({ sectionId, badge, badgeIcon, heading, description, actions, actionsSlot, images, imagesSlot, zoomIconName, enableLightbox, background, pattern, patternOpacity, className, gridClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, actionsClassName, galleryClassName, featuredImageClassName, secondaryImageClassName, imageClassName, zoomIndicatorClassName, optixFlowConfig, containerClassName, spacing, }: HeroFloatingImagesProps): React.JSX.Element;
 
 export { HeroFloatingImages, type HeroFloatingImagesProps };

package/dist/hero-floating-images.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Dud0DKXB.js';
-import { O as OptixFlowConfig } from './blocks-DyouPohq.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DyouPohq.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -30,11 +30,29 @@ interface HeroFloatingImagesImage {
 }
 interface HeroFloatingImagesProps {
     /**
-     * Flexible content slot for the left side of the hero.
-     * Renders any content the application/AI builder provides (badges, headings, descriptions, actions, etc.)
-     * This allows maximum flexibility without prescribing specific content structure.
+     * Badge content displayed above the heading
      */
-    children?: React.ReactNode;
+    badge?: React.ReactNode;
+    /**
+     * Badge icon
+     */
+    badgeIcon?: React.ReactNode;
+    /**
+     * Main heading content
+     */
+    heading?: React.ReactNode;
+    /**
+     * Description text below heading
+     */
+    description?: React.ReactNode;
+    /**
+     * Array of action configurations for CTA buttons
+     */
+    actions?: ActionConfig[];
+    /**
+     * Custom slot for rendering actions (overrides actions array)
+     */
+    actionsSlot?: React.ReactNode;
     /**
      * Array of images for the gallery section.
      * First image with `featured: true` (or first image if none marked) displays as the tall featured image.
@@ -88,6 +106,22 @@ interface HeroFloatingImagesProps {
      * Additional CSS classes for the content area (left side)
      */
     contentClassName?: string;
+    /**
+     * Additional CSS classes for the badge
+     */
+    badgeClassName?: string;
+    /**
+     * Additional CSS classes for the heading
+     */
+    headingClassName?: string;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the actions container
+     */
+    actionsClassName?: string;
     /**
      * Additional CSS classes for the gallery container (right side)
      */
@@ -118,34 +152,25 @@ interface HeroFloatingImagesProps {
 /**
  * HeroFloatingImages - A split-layout hero with flexible content and an interactive image gallery.
  *
- * Features a two-column layout: content on the left (fully customizable via children prop)
- * and a gallery on the right with a featured tall image and stacked secondary images.
+ * Features a two-column layout: named hero content on the left and a gallery on the right
+ * with a featured tall image and stacked secondary images.
  * Each image has a hover effect with zoom indicator and opens in a lightbox when clicked.
  *
- * The component uses the children prop pattern for maximum flexibility - the application
- * or AI builder can render any content structure without being constrained to specific
- * heading/description/badge props.
- *
  * @example
  * ```tsx
  * <HeroFloatingImages
+ *   badge="Featured Work"
+ *   heading="Your Headline Here"
+ *   description="Your description..."
+ *   actions={[{ label: "View Portfolio", href: "/portfolio", variant: "default" }]}
  *   images={[
  *     { src: "/featured.jpg", alt: "Featured work", featured: true },
  *     { src: "/work-1.jpg", alt: "Project 1" },
  *     { src: "/work-2.jpg", alt: "Project 2" },
  *   ]}
- * >
- *   <Badge className="mb-6 w-fit" variant="secondary">Featured Work</Badge>
- *   <h1 className="mb-6 text-4xl font-bold">Your Headline Here</h1>
- *   <p className="mb-8 text-lg text-muted-foreground">Your description...</p>
- *   <div className="flex gap-4">
- *     <Pressable href="/portfolio" variant="default" size="lg" asButton>
- *       View Portfolio
- *     </Pressable>
- *   </div>
- * </HeroFloatingImages>
+ * />
  * ```
  */
-declare function HeroFloatingImages({ sectionId, children, images, imagesSlot, zoomIconName, enableLightbox, background, pattern, patternOpacity, className, gridClassName, contentClassName, galleryClassName, featuredImageClassName, secondaryImageClassName, imageClassName, zoomIndicatorClassName, optixFlowConfig, containerClassName, spacing, }: HeroFloatingImagesProps): React.JSX.Element;
+declare function HeroFloatingImages({ sectionId, badge, badgeIcon, heading, description, actions, actionsSlot, images, imagesSlot, zoomIconName, enableLightbox, background, pattern, patternOpacity, className, gridClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, actionsClassName, galleryClassName, featuredImageClassName, secondaryImageClassName, imageClassName, zoomIndicatorClassName, optixFlowConfig, containerClassName, spacing, }: HeroFloatingImagesProps): React.JSX.Element;
 
 export { HeroFloatingImages, type HeroFloatingImagesProps };