@opensite/ui 0.4.6 → 0.4.8

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

@@ -1,69 +1,148 @@
 import * as React from 'react';
-import { I as ImageItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
+import { SectionBackground, SectionSpacing } from './types.cjs';
+import { O as OptixFlowConfig } from './blocks-CJYRLpXR.cjs';
+import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-DJbzb6lO.cjs';
 import 'class-variance-authority/types';
 
-interface HeroFloatingImagesItem extends ImageItem {
+/**
+ * Image configuration for the gallery section.
+ * Supports featured images that span full height and secondary images in a stacked layout.
+ */
+interface HeroFloatingImagesImage {
+    /**
+     * Image source URL
+     */
+    src: string;
+    /**
+     * Alt text for accessibility
+     */
+    alt: string;
     /**
-     * Tailwind classes for positioning and sizing (required for floating images)
+     * Whether this is a featured image (displays larger/taller in the gallery)
      */
-    className: string;
+    featured?: boolean;
+    /**
+     * Additional CSS classes for the image
+     */
+    className?: string;
 }
 interface HeroFloatingImagesProps {
     /**
-     * Main heading text
+     * 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.
      */
-    heading?: React.ReactNode;
+    children?: React.ReactNode;
     /**
-     * Supporting description
+     * Array of images for the gallery section.
+     * First image with `featured: true` (or first image if none marked) displays as the tall featured image.
+     * Remaining images display in a stacked layout beside it.
      */
-    description?: React.ReactNode;
+    images?: HeroFloatingImagesImage[];
     /**
-     * Floating images to render
+     * Custom slot for rendering the gallery (overrides images array).
+     * Use when you need complete control over the gallery layout.
      */
-    images?: HeroFloatingImagesItem[];
+    imagesSlot?: React.ReactNode;
     /**
-     * Custom slot for images (overrides images array)
+     * Icon name for the zoom indicator on gallery images.
+     * Uses DynamicIcon format: "prefix/icon-name"
+     * @default "lucide/zoom-in"
      */
-    imagesSlot?: React.ReactNode;
+    zoomIconName?: string;
     /**
-     * Whether to show decorative swirl backgrounds
+     * Whether to enable lightbox functionality for gallery images.
+     * When enabled, clicking an image opens it in a fullscreen lightbox.
+     * @default true
      */
-    showSwirls?: boolean;
+    enableLightbox?: boolean;
     /**
-     * Custom slot for background decorations (overrides showSwirls)
+     * Background style for the section
      */
-    backgroundSlot?: React.ReactNode;
+    background?: SectionBackground;
+    /**
+     * Vertical spacing for the section
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Optional background pattern name
+     */
+    pattern?: PatternName;
+    /**
+     * Pattern overlay opacity (0-1)
+     */
+    patternOpacity?: number;
     /**
      * Additional CSS classes for the section wrapper
      */
     className?: string;
     /**
-     * Additional CSS classes for the content area
+     * Additional CSS classes for the main grid container
+     */
+    gridClassName?: string;
+    /**
+     * Additional CSS classes for the content area (left side)
      */
     contentClassName?: string;
     /**
-     * Additional CSS classes for the heading
+     * Additional CSS classes for the gallery container (right side)
+     */
+    galleryClassName?: string;
+    /**
+     * Additional CSS classes for the featured image wrapper
+     */
+    featuredImageClassName?: string;
+    /**
+     * Additional CSS classes for secondary image wrappers
      */
-    headingClassName?: string;
+    secondaryImageClassName?: string;
     /**
-     * Additional CSS classes for the description
+     * Additional CSS classes for all images
      */
-    descriptionClassName?: string;
+    imageClassName?: string;
     /**
-     * Additional CSS classes for the images container
+     * Additional CSS classes for the zoom indicator overlay
      */
-    imagesClassName?: string;
+    zoomIndicatorClassName?: string;
     /**
-     * Optional Optix Flow configuration for image optimization
+     * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
 }
 /**
- * HeroFloatingImages - A centered hero with floating imagery and decorative
- * swirl backgrounds. Great for playful, lifestyle, or hospitality landing pages.
+ * 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.
+ * 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
+ *   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({ heading, description, images, imagesSlot, showSwirls, backgroundSlot, className, contentClassName, headingClassName, descriptionClassName, imagesClassName, optixFlowConfig, }: HeroFloatingImagesProps): React.JSX.Element;
+declare function HeroFloatingImages({ children, images, imagesSlot, zoomIconName, enableLightbox, background, spacing, pattern, patternOpacity, className, gridClassName, contentClassName, galleryClassName, featuredImageClassName, secondaryImageClassName, imageClassName, zoomIndicatorClassName, optixFlowConfig, }: HeroFloatingImagesProps): React.JSX.Element;
 
 export { HeroFloatingImages, type HeroFloatingImagesProps };

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

@@ -1,69 +1,148 @@
 import * as React from 'react';
-import { I as ImageItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
+import { SectionBackground, SectionSpacing } from './types.js';
+import { O as OptixFlowConfig } from './blocks-BWc_7JNA.js';
+import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-DJbzb6lO.js';
 import 'class-variance-authority/types';
 
-interface HeroFloatingImagesItem extends ImageItem {
+/**
+ * Image configuration for the gallery section.
+ * Supports featured images that span full height and secondary images in a stacked layout.
+ */
+interface HeroFloatingImagesImage {
+    /**
+     * Image source URL
+     */
+    src: string;
+    /**
+     * Alt text for accessibility
+     */
+    alt: string;
     /**
-     * Tailwind classes for positioning and sizing (required for floating images)
+     * Whether this is a featured image (displays larger/taller in the gallery)
      */
-    className: string;
+    featured?: boolean;
+    /**
+     * Additional CSS classes for the image
+     */
+    className?: string;
 }
 interface HeroFloatingImagesProps {
     /**
-     * Main heading text
+     * 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.
      */
-    heading?: React.ReactNode;
+    children?: React.ReactNode;
     /**
-     * Supporting description
+     * Array of images for the gallery section.
+     * First image with `featured: true` (or first image if none marked) displays as the tall featured image.
+     * Remaining images display in a stacked layout beside it.
      */
-    description?: React.ReactNode;
+    images?: HeroFloatingImagesImage[];
     /**
-     * Floating images to render
+     * Custom slot for rendering the gallery (overrides images array).
+     * Use when you need complete control over the gallery layout.
      */
-    images?: HeroFloatingImagesItem[];
+    imagesSlot?: React.ReactNode;
     /**
-     * Custom slot for images (overrides images array)
+     * Icon name for the zoom indicator on gallery images.
+     * Uses DynamicIcon format: "prefix/icon-name"
+     * @default "lucide/zoom-in"
      */
-    imagesSlot?: React.ReactNode;
+    zoomIconName?: string;
     /**
-     * Whether to show decorative swirl backgrounds
+     * Whether to enable lightbox functionality for gallery images.
+     * When enabled, clicking an image opens it in a fullscreen lightbox.
+     * @default true
      */
-    showSwirls?: boolean;
+    enableLightbox?: boolean;
     /**
-     * Custom slot for background decorations (overrides showSwirls)
+     * Background style for the section
      */
-    backgroundSlot?: React.ReactNode;
+    background?: SectionBackground;
+    /**
+     * Vertical spacing for the section
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Optional background pattern name
+     */
+    pattern?: PatternName;
+    /**
+     * Pattern overlay opacity (0-1)
+     */
+    patternOpacity?: number;
     /**
      * Additional CSS classes for the section wrapper
      */
     className?: string;
     /**
-     * Additional CSS classes for the content area
+     * Additional CSS classes for the main grid container
+     */
+    gridClassName?: string;
+    /**
+     * Additional CSS classes for the content area (left side)
      */
     contentClassName?: string;
     /**
-     * Additional CSS classes for the heading
+     * Additional CSS classes for the gallery container (right side)
+     */
+    galleryClassName?: string;
+    /**
+     * Additional CSS classes for the featured image wrapper
+     */
+    featuredImageClassName?: string;
+    /**
+     * Additional CSS classes for secondary image wrappers
      */
-    headingClassName?: string;
+    secondaryImageClassName?: string;
     /**
-     * Additional CSS classes for the description
+     * Additional CSS classes for all images
      */
-    descriptionClassName?: string;
+    imageClassName?: string;
     /**
-     * Additional CSS classes for the images container
+     * Additional CSS classes for the zoom indicator overlay
      */
-    imagesClassName?: string;
+    zoomIndicatorClassName?: string;
     /**
-     * Optional Optix Flow configuration for image optimization
+     * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
 }
 /**
- * HeroFloatingImages - A centered hero with floating imagery and decorative
- * swirl backgrounds. Great for playful, lifestyle, or hospitality landing pages.
+ * 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.
+ * 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
+ *   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({ heading, description, images, imagesSlot, showSwirls, backgroundSlot, className, contentClassName, headingClassName, descriptionClassName, imagesClassName, optixFlowConfig, }: HeroFloatingImagesProps): React.JSX.Element;
+declare function HeroFloatingImages({ children, images, imagesSlot, zoomIconName, enableLightbox, background, spacing, pattern, patternOpacity, className, gridClassName, contentClassName, galleryClassName, featuredImageClassName, secondaryImageClassName, imageClassName, zoomIndicatorClassName, optixFlowConfig, }: HeroFloatingImagesProps): React.JSX.Element;
 
 export { HeroFloatingImages, type HeroFloatingImagesProps };