import React from 'react';
import type { EnhancedItem } from '../services/types.js';
import type { AsChildChildren, AsChildRenderFunction } from '@wix/headless-utils/react';
import { type MoneyProps } from '@wix/headless-components/react';
export interface ItemRootProps {
    children: React.ReactNode;
    item?: EnhancedItem;
}
export interface ItemNameProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<{
        name: string;
    }>;
    /** CSS classes to apply to the default element */
    className?: string;
}
export interface ItemDescriptionProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<{
        description: string;
    }>;
    /** CSS classes to apply to the default element */
    className?: string;
}
export interface ItemPriceProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: MoneyProps['children'];
    /** CSS classes to apply to the default element */
    className?: string;
}
export interface ItemVariantsRepeaterProps {
    children: React.ReactNode;
}
export interface ItemLabelsRepeaterProps {
    children: React.ReactNode;
}
export interface ItemModifierGroupsRepeaterProps {
    children: React.ReactNode;
}
export interface ItemFeaturedProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<{
        featured: boolean;
    }>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Root component that provides item context to its children.
 *
 * @warning Do not use this component directly if it's inside a repeater.
 * Use the repeater component (e.g., Section.ItemsRepeater) instead, which will
 * automatically render this Root component for each item.
 */
export declare function Root(props: ItemRootProps): import("react/jsx-runtime").JSX.Element | null;
/**
 * Displays the item name with customizable rendering following the documented API.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Item.Name className="text-lg font-semibold" />
 *
 * // asChild with primitive
 * <Item.Name asChild>
 *   <h2 className="text-lg font-semibold" />
 * </Item.Name>
 *
 * // asChild with react component
 * <Item.Name asChild>
 *   {React.forwardRef(({name, ...props}, ref) => (
 *     <h2 ref={ref} {...props} className="text-lg font-semibold">
 *       {name}
 *     </h2>
 *   ))}
 * </Item.Name>
 * ```
 */
export declare const Name: React.ForwardRefExoticComponent<ItemNameProps & React.RefAttributes<HTMLElement>>;
/**
 * Displays the item description with customizable rendering following the documented API.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Item.Description className="text-sm text-muted-foreground" />
 *
 * // asChild with primitive
 * <Item.Description asChild>
 *   <p className="text-sm text-muted-foreground" />
 * </Item.Description>
 *
 * // asChild with react component
 * <Item.Description asChild>
 *   {React.forwardRef(({description, ...props}, ref) => (
 *     <p ref={ref} {...props} className="text-sm text-muted-foreground">
 *       {description}
 *     </p>
 *   ))}
 * </Item.Description>
 * ```
 */
export declare const Description: React.ForwardRefExoticComponent<ItemDescriptionProps & React.RefAttributes<HTMLElement>>;
/**
 * Displays the item price with customizable rendering following the documented API.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Item.Price className="text-lg font-bold text-primary" />
 *
 * // asChild with primitive
 * <Item.Price asChild>
 *   <span className="text-lg font-bold text-primary" />
 * </Item.Price>
 *
 * // asChild with react component
 * <Item.Price asChild>
 *   {React.forwardRef(({amount, currency, formattedMoney, formattedMoneyParts, ...props}, ref) => (
 *     <span ref={ref} {...props} className="text-lg font-bold text-primary">
 *       {formattedMoney}
 *     </span>
 *   ))}
 * </Item.Price>
 * ```
 */
export declare const Price: React.ForwardRefExoticComponent<ItemPriceProps & React.RefAttributes<HTMLElement>>;
export interface ItemImagesProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildRenderFunction<{
        images: string[];
        altText: string;
    }>;
    /** CSS classes to apply to the default element */
    className?: string;
    /** CSS classes to apply to the previous button */
    previousClassName?: string;
    /** CSS classes to apply to the next button */
    nextClassName?: string;
    /** CSS classes to apply to the indicator */
    indicatorClassName?: string;
    /** CSS classes to apply to the previous chevron icon */
    previousIconClassName?: string;
    /** CSS classes to apply to the next chevron icon */
    nextIconClassName?: string;
}
/**
 * Displays item images intelligently based on available images.
 * - No images: returns null
 * - Single image: renders WixMediaImage
 * - Multiple images: renders MediaGallery
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Item.Images className="w-full h-48" />
 *
 * // With custom gallery controls styling
 * <Item.Images
 *   className="w-full h-48"
 *   previousClassName="absolute left-2 top-1/2 -translate-y-1/2 bg-black/50 text-white p-2 rounded-full hover:bg-black/70"
 *   nextClassName="absolute right-2 top-1/2 -translate-y-1/2 bg-black/50 text-white p-2 rounded-full hover:bg-black/70"
 *   indicatorClassName="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1"
 *   previousIconClassName="text-white drop-shadow-sm"
 *   nextIconClassName="text-white drop-shadow-sm"
 * />
 *
 * // asChild with primitive
 * <Item.Images asChild>
 *   <div className="w-full h-48" />
 * </Item.Images>
 *
 * // asChild with custom component
 * <Item.Images asChild>
 *   {React.forwardRef(({images, altText, ...props}, ref) => (
 *     <div ref={ref} {...props} className="w-full h-48">
 *       {images.length > 0 && (
 *         images.length === 1 ? (
 *           <WixMediaImage media={{ image: images[0] }} alt={altText} />
 *         ) : (
 *           <MediaGallery.Root mediaGalleryServiceConfig={{ media: images.map(img => ({ image: img })) }}>
 *             <MediaGallery.Viewport />
 *             <MediaGallery.Previous />
 *             <MediaGallery.Next />
 *           </MediaGallery.Root>
 *         )
 *       )}
 *     </div>
 *   ))}
 * </Item.Images>
 *
 * // Custom render function
 * <Item.Images>
 *   {({ images, altText }) => (
 *     <div className="w-full h-48">
 *       {images.length > 0 && (
 *         images.length === 1 ? (
 *           <WixMediaImage media={{ image: images[0] }} alt={altText} />
 *         ) : (
 *           <MediaGallery.Root mediaGalleryServiceConfig={{ media: images.map(img => ({ image: img })) }}>
 *             <MediaGallery.Viewport />
 *             <MediaGallery.Previous />
 *             <MediaGallery.Next />
 *             <MediaGallery.Indicator />
 *           </MediaGallery.Root>
 *         )
 *       )}
 *     </div>
 *   )}
 * </Item.Images>
 * ```
 */
export declare const Images: React.ForwardRefExoticComponent<ItemImagesProps & React.RefAttributes<HTMLElement>>;
/**
 * Displays the item featured status with customizable rendering.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Item.Featured className="w-4 h-4 text-blue-500" />
 *
 * // asChild with primitive
 * <Item.Featured asChild>
 *   <StarFilledIcon className="w-4 h-4 text-blue-500" />
 * </Item.Featured>
 *
 * // asChild with react component
 * <Item.Featured asChild>
 *   {React.forwardRef(({featured, ...props}, ref) => (
 *     <StarFilledIcon ref={ref} {...props} className="w-4 h-4 text-blue-500" />
 *   ))}
 * </Item.Featured>
 *
 * // Custom render function
 * <Item.Featured>
 *   {({ featured }) => (
 *     <StarFilledIcon className="w-4 h-4 text-blue-500" />
 *   )}
 * </Item.Featured>
 * ```
 */
export declare const Featured: React.ForwardRefExoticComponent<ItemFeaturedProps & React.RefAttributes<HTMLElement>>;
/**
 * Repeater component for rendering individual variants.
 *
 * @component
 * @example
 * ```tsx
 * <Item.VariantsRepeater>
 *   {({ variant, index }) => (
 *     <div key={variant._id} className="flex justify-between p-2 border rounded">
 *       <p className="font-medium">{variant.name}</p>
 *       <p className="text-primary">
 *         {variant.priceInfo?.formattedPrice || 'No price'}
 *       </p>
 *     </div>
 *   )}
 * </Item.VariantsRepeater>
 * ```
 */
export declare const VariantsRepeater: React.ForwardRefExoticComponent<ItemVariantsRepeaterProps & React.RefAttributes<HTMLElement>>;
export declare const LabelsRepeater: {
    (props: ItemLabelsRepeaterProps): import("react/jsx-runtime").JSX.Element | null;
    displayName: string;
};
export declare const ModifierGroupsRepeater: {
    (props: ItemModifierGroupsRepeaterProps): import("react/jsx-runtime").JSX.Element | null;
    displayName: string;
};
/**
 * Item namespace containing all item components
 * following the compound component pattern: Item.Root, Item.Name, Item.Description, etc.
 */
export declare const Item: {
    /** Item root component */
    readonly Root: typeof Root;
    /** Item name component */
    readonly Name: React.ForwardRefExoticComponent<ItemNameProps & React.RefAttributes<HTMLElement>>;
    /** Item description component */
    readonly Description: React.ForwardRefExoticComponent<ItemDescriptionProps & React.RefAttributes<HTMLElement>>;
    /** Item price component */
    readonly Price: React.ForwardRefExoticComponent<ItemPriceProps & React.RefAttributes<HTMLElement>>;
    /** Item images component (intelligent single/multiple) */
    readonly Images: React.ForwardRefExoticComponent<ItemImagesProps & React.RefAttributes<HTMLElement>>;
    /** Item featured component */
    readonly Featured: React.ForwardRefExoticComponent<ItemFeaturedProps & React.RefAttributes<HTMLElement>>;
    /** Item variants repeater component */
    readonly VariantsRepeater: React.ForwardRefExoticComponent<ItemVariantsRepeaterProps & React.RefAttributes<HTMLElement>>;
    /** Item labels repeater component */
    readonly LabelsRepeater: {
        (props: ItemLabelsRepeaterProps): import("react/jsx-runtime").JSX.Element | null;
        displayName: string;
    };
    /** Item modifier groups repeater component */
    readonly ModifierGroupsRepeater: {
        (props: ItemModifierGroupsRepeaterProps): import("react/jsx-runtime").JSX.Element | null;
        displayName: string;
    };
};