@opensite/ui 0.7.0 → 0.7.2

package/dist/carousel-gallery-thumbnails.d.cts

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
+import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import 'react/jsx-runtime';
+import 'class-variance-authority';
+import './button-variants-lRElsmTc.cjs';
+import 'class-variance-authority/types';
+
+/**
+ * CarouselGalleryThumbnails
+ *
+ * A gallery carousel with main image display, thumbnail navigation strip,
+ * keyboard navigation support, and auto-play functionality. Features smooth
+ * slide transitions with caption overlay and responsive thumbnail grid.
+ *
+ * Use cases:
+ * - Product image galleries with multiple views
+ * - Portfolio showcases with detailed image browsing
+ * - Real estate property photo galleries
+ * - Event photography collections
+ */
+
+interface GalleryImage {
+    /**
+     * Image source URL
+     */
+    src: string;
+    /**
+     * Image alt text/caption
+     */
+    alt?: React.ReactNode;
+    /**
+     * Image width
+     */
+    width?: number;
+    /**
+     * Image height
+     */
+    height?: number;
+    /**
+     * Additional CSS classes for the image
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the image element
+     */
+    imageClassName?: string;
+}
+interface CarouselGalleryThumbnailsProps {
+    /**
+     * Array of gallery images
+     */
+    images?: GalleryImage[];
+    /**
+     * Custom slot for rendering images (overrides images array)
+     */
+    imagesSlot?: React.ReactNode;
+    /**
+     * Enable auto-play
+     */
+    autoPlay?: boolean;
+    /**
+     * Auto-play interval in milliseconds
+     */
+    autoPlayInterval?: number;
+    /**
+     * Show thumbnail navigation
+     */
+    showThumbnails?: boolean;
+    /**
+     * Additional CSS classes for the section
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the main carousel container
+     */
+    containerClassName?: string;
+    /**
+     * Additional CSS classes for the slide area
+     */
+    slideClassName?: string;
+    /**
+     * Additional CSS classes for the navigation buttons
+     */
+    navigationClassName?: string;
+    /**
+     * Additional CSS classes for the caption
+     */
+    captionClassName?: string;
+    /**
+     * Additional CSS classes for the thumbnails container
+     */
+    thumbnailsClassName?: string;
+    /**
+     * Additional CSS classes for individual thumbnails
+     */
+    thumbnailClassName?: string;
+    /**
+     * OptixFlow image optimization configuration
+     */
+    optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Background style for the section
+     */
+    background?: SectionBackground;
+    /**
+     * Vertical spacing for the section
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Optional background pattern name or URL
+     */
+    pattern?: PatternName | undefined;
+    /**
+     * Pattern overlay opacity (0-1)
+     */
+    patternOpacity?: number;
+}
+declare function CarouselGalleryThumbnails({ images, imagesSlot, autoPlay, autoPlayInterval, showThumbnails, className, containerClassName, slideClassName, navigationClassName, captionClassName, thumbnailsClassName, thumbnailClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselGalleryThumbnailsProps): React.JSX.Element;
+
+export { CarouselGalleryThumbnails, type CarouselGalleryThumbnailsProps, type GalleryImage };

package/dist/carousel-gallery-thumbnails.d.ts

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
+import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import 'react/jsx-runtime';
+import 'class-variance-authority';
+import './button-variants-lRElsmTc.js';
+import 'class-variance-authority/types';
+
+/**
+ * CarouselGalleryThumbnails
+ *
+ * A gallery carousel with main image display, thumbnail navigation strip,
+ * keyboard navigation support, and auto-play functionality. Features smooth
+ * slide transitions with caption overlay and responsive thumbnail grid.
+ *
+ * Use cases:
+ * - Product image galleries with multiple views
+ * - Portfolio showcases with detailed image browsing
+ * - Real estate property photo galleries
+ * - Event photography collections
+ */
+
+interface GalleryImage {
+    /**
+     * Image source URL
+     */
+    src: string;
+    /**
+     * Image alt text/caption
+     */
+    alt?: React.ReactNode;
+    /**
+     * Image width
+     */
+    width?: number;
+    /**
+     * Image height
+     */
+    height?: number;
+    /**
+     * Additional CSS classes for the image
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the image element
+     */
+    imageClassName?: string;
+}
+interface CarouselGalleryThumbnailsProps {
+    /**
+     * Array of gallery images
+     */
+    images?: GalleryImage[];
+    /**
+     * Custom slot for rendering images (overrides images array)
+     */
+    imagesSlot?: React.ReactNode;
+    /**
+     * Enable auto-play
+     */
+    autoPlay?: boolean;
+    /**
+     * Auto-play interval in milliseconds
+     */
+    autoPlayInterval?: number;
+    /**
+     * Show thumbnail navigation
+     */
+    showThumbnails?: boolean;
+    /**
+     * Additional CSS classes for the section
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the main carousel container
+     */
+    containerClassName?: string;
+    /**
+     * Additional CSS classes for the slide area
+     */
+    slideClassName?: string;
+    /**
+     * Additional CSS classes for the navigation buttons
+     */
+    navigationClassName?: string;
+    /**
+     * Additional CSS classes for the caption
+     */
+    captionClassName?: string;
+    /**
+     * Additional CSS classes for the thumbnails container
+     */
+    thumbnailsClassName?: string;
+    /**
+     * Additional CSS classes for individual thumbnails
+     */
+    thumbnailClassName?: string;
+    /**
+     * OptixFlow image optimization configuration
+     */
+    optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Background style for the section
+     */
+    background?: SectionBackground;
+    /**
+     * Vertical spacing for the section
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Optional background pattern name or URL
+     */
+    pattern?: PatternName | undefined;
+    /**
+     * Pattern overlay opacity (0-1)
+     */
+    patternOpacity?: number;
+}
+declare function CarouselGalleryThumbnails({ images, imagesSlot, autoPlay, autoPlayInterval, showThumbnails, className, containerClassName, slideClassName, navigationClassName, captionClassName, thumbnailsClassName, thumbnailClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselGalleryThumbnailsProps): React.JSX.Element;
+
+export { CarouselGalleryThumbnails, type CarouselGalleryThumbnailsProps, type GalleryImage };