@opensite/ui 0.7.0 → 0.7.2

package/dist/carousel-product-feature-showcase.d.cts

@@ -0,0 +1,161 @@
+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 { A as ActionConfig, 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';
+
+/**
+ * CarouselProductFeatureShowcase
+ *
+ * An interactive product feature carousel with mobile-responsive design,
+ * color variant selectors, and animated transitions. Features a split layout
+ * with product imagery on one side and feature descriptions with navigation
+ * on the other.
+ *
+ * Use cases:
+ * - Product landing pages with feature highlights
+ * - E-commerce product showcases with variants
+ * - SaaS feature tours with visual demonstrations
+ * - Marketing pages with interactive product exploration
+ */
+
+interface ProductColorVariant {
+    /**
+     * Color variant name
+     */
+    name: string;
+    /**
+     * Color value (hex, rgb, etc.)
+     */
+    value: string;
+    /**
+     * Optional image for this color variant
+     */
+    image?: string;
+}
+interface ProductFeature {
+    /**
+     * Unique identifier for the feature
+     */
+    id: string;
+    /**
+     * Feature title
+     */
+    title?: React.ReactNode;
+    /**
+     * Feature description
+     */
+    description?: React.ReactNode;
+    /**
+     * Image source URL
+     */
+    image: string;
+    /**
+     * Color variants for the product
+     */
+    colors?: ProductColorVariant[];
+    /**
+     * Additional CSS classes for the feature
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the image
+     */
+    imageClassName?: string;
+}
+interface CarouselProductFeatureShowcaseProps {
+    /**
+     * Main heading content
+     */
+    heading?: React.ReactNode;
+    /**
+     * Subheading/description text
+     */
+    subheading?: React.ReactNode;
+    /**
+     * Array of product features
+     */
+    features?: ProductFeature[];
+    /**
+     * Custom slot for rendering features (overrides features array)
+     */
+    featuresSlot?: React.ReactNode;
+    /**
+     * Array of action configurations for CTA buttons
+     */
+    actions?: ActionConfig[];
+    /**
+     * Custom slot for rendering actions (overrides actions array)
+     */
+    actionsSlot?: React.ReactNode;
+    /**
+     * Additional CSS classes for the section
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
+    /**
+     * Additional CSS classes for the header
+     */
+    headerClassName?: string;
+    /**
+     * Additional CSS classes for the heading
+     */
+    headingClassName?: string;
+    /**
+     * Additional CSS classes for the subheading
+     */
+    subheadingClassName?: string;
+    /**
+     * Additional CSS classes for the content grid
+     */
+    contentClassName?: string;
+    /**
+     * Additional CSS classes for the image container
+     */
+    imageClassName?: string;
+    /**
+     * Additional CSS classes for the navigation arrows
+     */
+    navigationClassName?: string;
+    /**
+     * Additional CSS classes for the color selectors
+     */
+    colorSelectorClassName?: string;
+    /**
+     * Additional CSS classes for the actions container
+     */
+    actionsClassName?: string;
+    /**
+     * Additional CSS classes for the dot indicators
+     */
+    indicatorsClassName?: 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 CarouselProductFeatureShowcase({ heading, subheading, features, featuresSlot, actions, actionsSlot, className, containerClassName, headerClassName, headingClassName, subheadingClassName, contentClassName, imageClassName, navigationClassName, colorSelectorClassName, actionsClassName, indicatorsClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselProductFeatureShowcaseProps): React.JSX.Element;
+
+export { CarouselProductFeatureShowcase, type CarouselProductFeatureShowcaseProps, type ProductFeature };

package/dist/carousel-product-feature-showcase.d.ts

@@ -0,0 +1,161 @@
+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 { A as ActionConfig, 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';
+
+/**
+ * CarouselProductFeatureShowcase
+ *
+ * An interactive product feature carousel with mobile-responsive design,
+ * color variant selectors, and animated transitions. Features a split layout
+ * with product imagery on one side and feature descriptions with navigation
+ * on the other.
+ *
+ * Use cases:
+ * - Product landing pages with feature highlights
+ * - E-commerce product showcases with variants
+ * - SaaS feature tours with visual demonstrations
+ * - Marketing pages with interactive product exploration
+ */
+
+interface ProductColorVariant {
+    /**
+     * Color variant name
+     */
+    name: string;
+    /**
+     * Color value (hex, rgb, etc.)
+     */
+    value: string;
+    /**
+     * Optional image for this color variant
+     */
+    image?: string;
+}
+interface ProductFeature {
+    /**
+     * Unique identifier for the feature
+     */
+    id: string;
+    /**
+     * Feature title
+     */
+    title?: React.ReactNode;
+    /**
+     * Feature description
+     */
+    description?: React.ReactNode;
+    /**
+     * Image source URL
+     */
+    image: string;
+    /**
+     * Color variants for the product
+     */
+    colors?: ProductColorVariant[];
+    /**
+     * Additional CSS classes for the feature
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the image
+     */
+    imageClassName?: string;
+}
+interface CarouselProductFeatureShowcaseProps {
+    /**
+     * Main heading content
+     */
+    heading?: React.ReactNode;
+    /**
+     * Subheading/description text
+     */
+    subheading?: React.ReactNode;
+    /**
+     * Array of product features
+     */
+    features?: ProductFeature[];
+    /**
+     * Custom slot for rendering features (overrides features array)
+     */
+    featuresSlot?: React.ReactNode;
+    /**
+     * Array of action configurations for CTA buttons
+     */
+    actions?: ActionConfig[];
+    /**
+     * Custom slot for rendering actions (overrides actions array)
+     */
+    actionsSlot?: React.ReactNode;
+    /**
+     * Additional CSS classes for the section
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
+    /**
+     * Additional CSS classes for the header
+     */
+    headerClassName?: string;
+    /**
+     * Additional CSS classes for the heading
+     */
+    headingClassName?: string;
+    /**
+     * Additional CSS classes for the subheading
+     */
+    subheadingClassName?: string;
+    /**
+     * Additional CSS classes for the content grid
+     */
+    contentClassName?: string;
+    /**
+     * Additional CSS classes for the image container
+     */
+    imageClassName?: string;
+    /**
+     * Additional CSS classes for the navigation arrows
+     */
+    navigationClassName?: string;
+    /**
+     * Additional CSS classes for the color selectors
+     */
+    colorSelectorClassName?: string;
+    /**
+     * Additional CSS classes for the actions container
+     */
+    actionsClassName?: string;
+    /**
+     * Additional CSS classes for the dot indicators
+     */
+    indicatorsClassName?: 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 CarouselProductFeatureShowcase({ heading, subheading, features, featuresSlot, actions, actionsSlot, className, containerClassName, headerClassName, headingClassName, subheadingClassName, contentClassName, imageClassName, navigationClassName, colorSelectorClassName, actionsClassName, indicatorsClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselProductFeatureShowcaseProps): React.JSX.Element;
+
+export { CarouselProductFeatureShowcase, type CarouselProductFeatureShowcaseProps, type ProductFeature };