@opensite/ui 0.7.0 → 0.7.2

package/dist/carousel-progress-slider.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';
+
+/**
+ * CarouselProgressSlider
+ *
+ * A context-based slider with animated progress bar indicators for each slide.
+ * Features auto-advancing slides with visual progress feedback and smooth
+ * transitions between content panels.
+ *
+ * Use cases:
+ * - Feature walkthroughs with timed progression
+ * - Onboarding flows with step indicators
+ * - Product tours with progress tracking
+ * - Content showcases with auto-advance
+ */
+
+interface ProgressSlide {
+    /**
+     * Unique identifier for the slide
+     */
+    id: string;
+    /**
+     * Slide title
+     */
+    title?: React.ReactNode;
+    /**
+     * Slide description
+     */
+    description?: React.ReactNode;
+    /**
+     * Image source URL
+     */
+    image: string;
+    /**
+     * Additional CSS classes for the slide
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the image
+     */
+    imageClassName?: string;
+}
+interface CarouselProgressSliderProps {
+    /**
+     * Array of slides
+     */
+    slides?: ProgressSlide[];
+    /**
+     * Custom slot for rendering slides (overrides slides array)
+     */
+    slidesSlot?: React.ReactNode;
+    /**
+     * Duration for each slide in milliseconds
+     */
+    duration?: number;
+    /**
+     * Fast forward duration in milliseconds
+     */
+    fastDuration?: number;
+    /**
+     * Whether to use vertical progress bars
+     */
+    vertical?: boolean;
+    /**
+     * Additional CSS classes for the section
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
+    /**
+     * Additional CSS classes for the content grid
+     */
+    contentClassName?: string;
+    /**
+     * Additional CSS classes for the image area
+     */
+    imageClassName?: string;
+    /**
+     * Additional CSS classes for the navigation area
+     */
+    navigationClassName?: string;
+    /**
+     * Additional CSS classes for the navigation buttons
+     */
+    buttonClassName?: string;
+    /**
+     * Additional CSS classes for the progress bar
+     */
+    progressBarClassName?: 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 CarouselProgressSlider({ slides, slidesSlot, duration, fastDuration, vertical, className, containerClassName, contentClassName, imageClassName, navigationClassName, buttonClassName, progressBarClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselProgressSliderProps): React.JSX.Element;
+
+export { CarouselProgressSlider, type CarouselProgressSliderProps };

package/dist/carousel-progress-slider.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';
+
+/**
+ * CarouselProgressSlider
+ *
+ * A context-based slider with animated progress bar indicators for each slide.
+ * Features auto-advancing slides with visual progress feedback and smooth
+ * transitions between content panels.
+ *
+ * Use cases:
+ * - Feature walkthroughs with timed progression
+ * - Onboarding flows with step indicators
+ * - Product tours with progress tracking
+ * - Content showcases with auto-advance
+ */
+
+interface ProgressSlide {
+    /**
+     * Unique identifier for the slide
+     */
+    id: string;
+    /**
+     * Slide title
+     */
+    title?: React.ReactNode;
+    /**
+     * Slide description
+     */
+    description?: React.ReactNode;
+    /**
+     * Image source URL
+     */
+    image: string;
+    /**
+     * Additional CSS classes for the slide
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the image
+     */
+    imageClassName?: string;
+}
+interface CarouselProgressSliderProps {
+    /**
+     * Array of slides
+     */
+    slides?: ProgressSlide[];
+    /**
+     * Custom slot for rendering slides (overrides slides array)
+     */
+    slidesSlot?: React.ReactNode;
+    /**
+     * Duration for each slide in milliseconds
+     */
+    duration?: number;
+    /**
+     * Fast forward duration in milliseconds
+     */
+    fastDuration?: number;
+    /**
+     * Whether to use vertical progress bars
+     */
+    vertical?: boolean;
+    /**
+     * Additional CSS classes for the section
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
+    /**
+     * Additional CSS classes for the content grid
+     */
+    contentClassName?: string;
+    /**
+     * Additional CSS classes for the image area
+     */
+    imageClassName?: string;
+    /**
+     * Additional CSS classes for the navigation area
+     */
+    navigationClassName?: string;
+    /**
+     * Additional CSS classes for the navigation buttons
+     */
+    buttonClassName?: string;
+    /**
+     * Additional CSS classes for the progress bar
+     */
+    progressBarClassName?: 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 CarouselProgressSlider({ slides, slidesSlot, duration, fastDuration, vertical, className, containerClassName, contentClassName, imageClassName, navigationClassName, buttonClassName, progressBarClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselProgressSliderProps): React.JSX.Element;
+
+export { CarouselProgressSlider, type CarouselProgressSliderProps };