import { MediaGalleryServiceConfig } from '../../services/media-gallery-service.js';
export interface RootProps {
    children: React.ReactNode;
    mediaGalleryServiceConfig: MediaGalleryServiceConfig;
}
/**
 * Root component that provides the MediaGallery service context to its children.
 * This component sets up the necessary services for rendering and managing media gallery functionality.
 *
 * @order 1
 * @component
 * @example
 * ```tsx
 * import { MediaGallery } from '@wix/media/components';
 *
 * function ProductMediaGallery({ productMedia }) {
 *   return (
 *     <MediaGallery.Root mediaGalleryServiceConfig={{ media: productMedia }}>
 *       <div className="media-gallery">
 *         <MediaGallery.Viewport>
 *           {({ src, alt }) => (
 *             <img
 *               src={src || '/placeholder.jpg'}
 *               alt={alt}
 *               className="main-media"
 *             />
 *           )}
 *         </MediaGallery.Viewport>
 *         <MediaGallery.ThumbnailList>
 *           {({ items }) => (
 *             <div className="thumbnail-grid">
 *               {items.map((item, index) => (
 *                 <MediaGallery.ThumbnailItem key={index} index={index}>
 *                   {({ src, isActive, onSelect, alt }) => (
 *                     <button
 *                       onClick={onSelect}
 *                       className={`thumbnail ${isActive ? 'active' : ''}`}
 *                     >
 *                       <img src={src} alt={alt} />
 *                     </button>
 *                   )}
 *                 </MediaGallery.ThumbnailItem>
 *               ))}
 *             </div>
 *           )}
 *         </MediaGallery.ThumbnailList>
 *       </div>
 *     </MediaGallery.Root>
 *   );
 * }
 * ```
 */
export declare function Root(props: RootProps): React.ReactNode;
/**
 * Props for Viewport headless component
 */
export interface ViewportProps {
    /** Render prop function that receives viewport data */
    children: (props: ViewportRenderProps) => React.ReactNode;
}
/**
 * Render props for Viewport component
 */
export interface ViewportRenderProps {
    /** Media URL */
    src: string | null;
    /** Alt text for media */
    alt: string;
}
/**
 * Headless component for displaying the main viewport media
 *
 * @component
 * @example
 * ```tsx
 * import { MediaGallery } from '@wix/media/components';
 *
 * function MediaViewer() {
 *   return (
 *     <MediaGallery.Viewport>
 *       {({ src, alt }) => (
 *         <img
 *           src={src || '/placeholder.jpg'}
 *           alt={alt}
 *           className="main-media"
 *         />
 *       )}
 *     </MediaGallery.Viewport>
 *   );
 * }
 * ```
 */
export declare const Viewport: (props: ViewportProps) => import("react").ReactNode;
/**
 * Props for ThumbnailList headless component
 */
export interface ThumbnailListProps {
    /** Render prop function that receives thumbnail list data */
    children: (props: ThumbnailListRenderProps) => React.ReactNode;
}
/**
 * Render props for ThumbnailList component
 */
export interface ThumbnailListRenderProps {
    /** Array of media items */
    items: any[];
}
/**
 * Headless component for managing a list of thumbnails
 *
 * @component
 * @example
 * ```tsx
 * import { MediaGallery } from '@wix/media/components';
 *
 * function ThumbnailGrid() {
 *   return (
 *     <MediaGallery.ThumbnailList>
 *       {({ items }) => (
 *         <div className="thumbnail-grid">
 *           {items.map((item, index) => (
 *             <MediaGallery.ThumbnailItem key={index} index={index}>
 *               {({ src, isActive, onSelect, alt }) => (
 *                 <button
 *                   onClick={onSelect}
 *                   className={`thumbnail ${isActive ? 'active' : ''}`}
 *                 >
 *                   <img src={src} alt={alt} />
 *                 </button>
 *               )}
 *             </MediaGallery.ThumbnailItem>
 *           ))}
 *         </div>
 *       )}
 *     </MediaGallery.ThumbnailList>
 *   );
 * }
 * ```
 */
export declare const ThumbnailList: (props: ThumbnailListProps) => import("react").ReactNode;
/**
 * Props for ThumbnailItem headless component
 */
export interface ThumbnailItemProps {
    /** Index of the media item */
    index: number;
    /** Render prop function that receives thumbnail data */
    children: (props: ThumbnailItemRenderProps) => React.ReactNode;
}
/**
 * Render props for ThumbnailItem component
 */
export interface ThumbnailItemRenderProps {
    /** Media item data */
    item: any | null;
    /** Thumbnail image URL */
    src: string | null;
    /** Whether this thumbnail is currently active */
    isActive: boolean;
    /** Function to select this media */
    select: () => void;
    /** Index of this thumbnail */
    index: number;
    /** Alt text for thumbnail */
    alt: string;
}
/**
 * Headless component for individual media thumbnail
 *
 * @component
 * @example
 * ```tsx
 * import { MediaGallery } from '@wix/media/components';
 *
 * function ThumbnailButton({ index }) {
 *   return (
 *     <MediaGallery.ThumbnailItem index={index}>
 *       {({ src, isActive, select, alt }) => (
 *         <button
 *           onClick={select}
 *           className={`thumbnail-btn ${isActive ? 'active' : ''}`}
 *         >
 *           <img src={src} alt={alt} />
 *           {isActive && <div className="active-indicator" />}
 *         </button>
 *       )}
 *     </MediaGallery.ThumbnailItem>
 *   );
 * }
 * ```
 */
export declare const ThumbnailItem: (props: ThumbnailItemProps) => import("react").ReactNode;
/**
 * Props for Next headless component
 */
export interface NextProps {
    /** Render prop function that receives next navigation data */
    children: (props: NextRenderProps) => React.ReactNode;
}
/**
 * Render props for Next component
 */
export interface NextRenderProps {
    /** Function to go to next media */
    next: () => void;
    /** Whether there is a next media available */
    canGoNext: boolean;
}
/**
 * Headless component for next media navigation
 *
 * @component
 * @example
 * ```tsx
 * import { MediaGallery } from '@wix/media/components';
 *
 * function NextButton() {
 *   return (
 *     <MediaGallery.Next>
 *       {({ next, canGoNext }) => (
 *         <button
 *           onClick={next}
 *           disabled={!canGoNext}
 *           className="nav-btn next-btn"
 *         >
 *           Next →
 *         </button>
 *       )}
 *     </MediaGallery.Next>
 *   );
 * }
 * ```
 */
export declare const Next: (props: NextProps) => import("react").ReactNode;
/**
 * Props for Previous headless component
 */
export interface PreviousProps {
    /** Render prop function that receives previous navigation data */
    children: (props: PreviousRenderProps) => React.ReactNode;
}
/**
 * Render props for Previous component
 */
export interface PreviousRenderProps {
    /** Function to go to previous media */
    previous: () => void;
    /** Whether there is a previous media available */
    canGoPrevious: boolean;
}
/**
 * Headless component for previous media navigation
 *
 * @component
 * @example
 * ```tsx
 * import { MediaGallery } from '@wix/media/components';
 *
 * function PreviousButton() {
 *   return (
 *     <MediaGallery.Previous>
 *       {({ previous, canGoPrevious }) => (
 *         <button
 *           onClick={previous}
 *           disabled={!canGoPrevious}
 *           className="nav-btn prev-btn"
 *         >
 *           ← Previous
 *         </button>
 *       )}
 *     </MediaGallery.Previous>
 *   );
 * }
 * ```
 */
export declare const Previous: (props: PreviousProps) => import("react").ReactNode;
/**
 * Props for Indicator headless component
 */
export interface IndicatorProps {
    /** Render prop function that receives indicator data */
    children: (props: IndicatorRenderProps) => React.ReactNode;
}
/**
 * Render props for Indicator component
 */
export interface IndicatorRenderProps {
    /** Current media index (1-based for display) */
    current: number;
    /** Total number of media */
    total: number;
}
/**
 * Headless component for media gallery indicator/counter
 *
 * @component
 * @example
 * ```tsx
 * import { MediaGallery } from '@wix/media/components';
 *
 * function MediaCounter() {
 *   return (
 *     <MediaGallery.Indicator>
 *       {({ current, total }) => (
 *         <div className="media-indicator">
 *           {current} of {total}
 *         </div>
 *       )}
 *     </MediaGallery.Indicator>
 *   );
 * }
 * ```
 */
export declare const Indicator: (props: IndicatorProps) => import("react").ReactNode;