import { SelectedVariantServiceConfig } from '../../services/selected-variant-service.js';
import { productsV3 } from '@wix/stores';
export interface RootProps {
    children: React.ReactNode;
    selectedVariantServiceConfig?: SelectedVariantServiceConfig;
}
/**
 * Root component that provides the ProductVariantSelector service context to its children.
 * This component sets up the necessary services for rendering and managing product variant selection.
 *
 * @order 1
 * @component
 * @example
 * ```tsx
 * import { ProductVariantSelector } from '@wix/stores/components';
 *
 * function VariantSelector() {
 *   return (
 *     <ProductVariantSelector.Root selectedVariantServiceConfig={{ fetchInventoryData: true }}>
 *       <div>
 *         <ProductVariantSelector.Options>
 *           {({ options, hasOptions, selectedChoices }) => (
 *             <div>
 *               {hasOptions && options.map(option => (
 *                 <div key={option.id}>
 *                   <label>{option.name}</label>
 *                   <select value={selectedChoices[option.id] || ''}>
 *                     {option.choices?.map(choice => (
 *                       <option key={choice.id} value={choice.id}>
 *                         {choice.description}
 *                       </option>
 *                     ))}
 *                   </select>
 *                 </div>
 *               ))}
 *             </div>
 *           )}
 *         </ProductVariantSelector.Options>
 *       </div>
 *     </ProductVariantSelector.Root>
 *   );
 * }
 * ```
 */
export declare function Root(props: RootProps): React.ReactNode;
/**
 * Props for Options headless component
 */
export interface OptionsProps {
    /** Render prop function that receives options data */
    children: (props: OptionsRenderProps) => React.ReactNode;
}
/**
 * Render props for Options component
 */
export interface OptionsRenderProps {
    /** Array of product options */
    options: productsV3.ConnectedOption[];
    /** Whether product has options */
    hasOptions: boolean;
    /** Currently selected choices */
    selectedChoices: Record<string, string>;
}
/**
 * Headless component for all product options
 *
 * @component
 * @example
 * ```tsx
 * import { ProductVariantSelector } from '@wix/stores/components';
 *
 * function VariantPicker() {
 *   return (
 *     <ProductVariantSelector.Options>
 *       {({ options, hasOptions, selectedChoices }) => (
 *         <div>
 *           {hasOptions && options.map(option => (
 *             <div key={option.id}>
 *               <label>{option.name}</label>
 *               <select value={selectedChoices[option.id] || ''}>
 *                 {option.choices?.map(choice => (
 *                   <option key={choice.id} value={choice.id}>
 *                     {choice.description}
 *                   </option>
 *                 ))}
 *               </select>
 *             </div>
 *           ))}
 *         </div>
 *       )}
 *     </ProductVariantSelector.Options>
 *   );
 * }
 * ```
 */
export declare function Options(props: OptionsProps): import("react").ReactNode;
/**
 * Props for Option headless component
 */
export interface OptionProps {
    /** Product option data */
    option: productsV3.ConnectedOption;
    /** Render prop function that receives option data */
    children: (props: OptionRenderProps) => React.ReactNode;
}
/**
 * Render props for Option component
 */
export interface OptionRenderProps {
    /** Option name (may be translated) */
    name: string;
    /** Option key (unique identifier) */
    key: string;
    /** Array of choices for this option */
    choices: productsV3.ConnectedOptionChoice[];
    /** Currently selected value for this option */
    selectedValue: string | null;
    /** Whether this option has choices */
    hasChoices: boolean;
}
/**
 * Headless component for choices within a specific product option
 *
 * @component
 * @example
 * ```tsx
 * import { ProductVariantSelector } from '@wix/stores/components';
 *
 * function OptionSelector({ option }) {
 *   return (
 *     <ProductVariantSelector.Option option={option}>
 *       {({ name, choices, selectedValue, hasChoices }) => (
 *         <div>
 *           <label>{name}</label>
 *           {hasChoices && (
 *             <select value={selectedValue || ''}>
 *               <option value="">Select {name}</option>
 *               {choices.map(choice => (
 *                 <option key={choice.id} value={choice.name}>
 *                   {choice.description}
 *                 </option>
 *               ))}
 *             </select>
 *           )}
 *         </div>
 *       )}
 *     </ProductVariantSelector.Option>
 *   );
 * }
 * ```
 */
export declare function Option(props: OptionProps): import("react").ReactNode;
/**
 * Props for Choice headless component
 */
export interface ChoiceProps {
    /** Product option data */
    option: productsV3.ConnectedOption;
    /** Choice data */
    choice: productsV3.ConnectedOptionChoice;
    /** Render prop function that receives choice data */
    children: (props: ChoiceRenderProps) => React.ReactNode;
}
/**
 * Render props for Choice component
 */
export interface ChoiceRenderProps {
    /** Choice value to display */
    value: string;
    /** Choice key (unique identifier) */
    valueKey: string;
    /** Whether this choice is currently selected */
    isSelected: boolean;
    /** Whether this choice is visible */
    isVisible: boolean;
    /** Whether this choice is in stock */
    isInStock: boolean;
    /** Whether this choice is available for pre-order */
    isPreOrderEnabled: boolean;
    /** Function to select this choice */
    select: () => void;
    /** Option name (may be translated) */
    optionName: string;
    /** Option key (unique identifier) */
    optionKey: string;
    /** Choice value */
    choiceValue: string;
}
/**
 * Headless component for individual choice selection
 *
 * @component
 * @example
 * ```tsx
 * import { ProductVariantSelector } from '@wix/stores/components';
 *
 * function ChoiceButton({ option, choice }) {
 *   return (
 *     <ProductVariantSelector.Choice option={option} choice={choice}>
 *       {({ value, isSelected, isVisible, isInStock, select }) => (
 *         <button
 *           onClick={select}
 *           disabled={!isVisible || !isInStock}
 *           className={`choice-btn ${isSelected ? 'selected' : ''} ${!isInStock ? 'out-of-stock' : ''}`}
 *         >
 *           {value}
 *           {!isInStock && ' (Out of Stock)'}
 *         </button>
 *       )}
 *     </ProductVariantSelector.Choice>
 *   );
 * }
 * ```
 */
export declare function Choice(props: ChoiceProps): import("react").ReactNode;
/**
 * Props for Stock headless component
 */
export interface StockProps {
    /** Render prop function that receives stock data */
    children: (props: StockRenderProps) => React.ReactNode;
}
/**
 * Render props for Stock component
 */
export interface StockRenderProps {
    /** Whether product is in stock */
    inStock: boolean;
    /** Whether pre-order is enabled */
    isPreOrderEnabled: boolean;
    /** Raw inventory availability status */
    availabilityStatus: productsV3.InventoryAvailabilityStatus | string;
    /** Whether stock tracking is enabled */
    trackInventory: boolean;
    /** Current variant id */
    currentVariantId: string | null;
    /** Available quantity */
    availableQuantity: number | null;
    /** Currently selected quantity */
    selectedQuantity: number;
    /** Function to increment quantity */
    incrementQuantity: () => void;
    /** Function to decrement quantity */
    decrementQuantity: () => void;
    /** Function to set selected quantity */
    setSelectedQuantity: (quantity: number) => void;
}
/**
 * Headless component for product stock status
 *
 * @component
 * @example
 * ```tsx
 * import { ProductVariantSelector } from '@wix/stores/components';
 *
 * function StockIndicator() {
 *   return (
 *     <ProductVariantSelector.Stock>
 *       {({ inStock, isPreOrderEnabled, selectedQuantity, availableQuantity, incrementQuantity, decrementQuantity }) => (
 *         <div>
 *           <div className={`stock-status ${inStock ? 'in-stock' : 'out-of-stock'}`}>
 *             {inStock ? 'In Stock' : isPreOrderEnabled ? 'Pre-order Available' : 'Out of Stock'}
 *           </div>
 *           {availableQuantity && (
 *             <div>Only {availableQuantity} left!</div>
 *           )}
 *           <div className="quantity-selector">
 *             <button onClick={decrementQuantity}>-</button>
 *             <span>{selectedQuantity}</span>
 *             <button onClick={incrementQuantity}>+</button>
 *           </div>
 *         </div>
 *       )}
 *     </ProductVariantSelector.Stock>
 *   );
 * }
 * ```
 */
export declare function Stock(props: StockProps): import("react").ReactNode;
/**
 * Props for Reset headless component
 */
export interface ResetProps {
    /** Render prop function that receives reset data */
    children: (props: ResetRenderProps) => React.ReactNode;
}
/**
 * Render props for Reset component
 */
export interface ResetRenderProps {
    /** Function to reset all selections */
    reset: () => void;
    /** Whether the reset button should be rendered */
    hasSelections: boolean;
}
/**
 * Headless component for resetting variant selections
 *
 * @component
 * @example
 * ```tsx
 * import { ProductVariantSelector } from '@wix/stores/components';
 *
 * function ResetButton() {
 *   return (
 *     <ProductVariantSelector.Reset>
 *       {({ reset, hasSelections }) => (
 *         hasSelections && (
 *           <button onClick={reset} className="reset-button">
 *             Clear All Selections
 *           </button>
 *         )
 *       )}
 *     </ProductVariantSelector.Reset>
 *   );
 * }
 * ```
 */
export declare function Reset(props: ResetProps): import("react").ReactNode;