import React from 'react';
import { AsChildChildren } from '@wix/headless-utils/react';
export interface Option {
    name: string;
    key?: string;
    choices?: any[];
    hasChoices?: boolean;
    type?: string;
    mandatory?: boolean;
}
/**
 * Props for the `Option.Root` component.
 */
export interface RootProps {
    /**
     * When `true`, replaces the default `<div>` with your custom element.
     *
     * Use this when you need a different element type or custom structure.
     * See the `children` prop for usage details.
     *
     * Default: `false`
     */
    asChild?: boolean;
    /**
     * When using `asChild`, pass a React element, render function, or render object.
     *
     * **React element:**  This must be an element that can have children, such as <h1 /> or <span />. Your element receives the default element's props automatically.
     *
     * **Render function:** Your function receives:
     * - `option` (`Option`): The option data object.
     *   - `name` (`string`): The option name.
     *   - `choices` (`Choice[]`): Array of available choices.
     *     - `choiceId` (`string | null`): Unique identifier for the choice.
     *     - `name` (`string | null`): Display name for the choice.
     *     - `type` (`'color' | 'text' | 'free-text'`): The choice type.
     *     - `colorCode` (`string`): Hex color code (for color choices).
     *     - `addedPrice` (`string | null`): Additional price for this choice.
     *     - `minCharCount` (`number`): Min characters (for free-text).
     *     - `maxCharCount` (`number`): Max characters (for free-text).
     *   - `type` (`string`): The option type.
     *   - `mandatory` (`boolean`): Whether the option is required.
     * - `onValueChange` (`(value: string) => void`): Callback when a choice is selected.
     * - `allowedTypes` (`('color' | 'text' | 'free-text')[]`): Array of choice types to render.
     *
     * **Render object:** You can use a render object in the form `{ render: (props, ref) => ReactNode }` as an alternative to a render function. Receives the same props as the function.
     */
    children?: AsChildChildren<{
        option: Option;
        onValueChange?: (value: string) => void;
        allowedTypes?: ('color' | 'text' | 'free-text')[];
    }>;
    /**
     * CSS class name applied to the default element.
     *
     * The element has a `data-type` attribute with value `"color"`, `"text"`,
     * or `"free-text"` based on the option type. For conditional styling, target with `data-[type=color]:`,
     * `data-[type=text]:`, or `data-[type=free-text]:`.
     */
    className?: string;
    /**
     * The option data to display.
     *
     * Provided automatically by `Product.VariantOptionRepeater` or
     * `Product.ModifierOptionRepeater`. Only required when using
     * `Option.Root` directly for custom iteration.
     */
    option: Option;
    /**
     * Callback fired when a choice is selected.
     *
     * Receives the selected value as a string.
     */
    onValueChange?: (value: string) => void;
    /**
     * Filter which choice types to render.
     *
     * Default: `['color', 'text', 'free-text']` (all types)
     */
    allowedTypes?: ('color' | 'text' | 'free-text')[];
}
/**
 * Root component that provides context for variant options.
 * Automatically detects and sets the option type based on the option name and available choices.
 *
 * > **Note:** `Product.VariantOptionRepeater` and `Product.ModifierOptionRepeater` automatically
 * provide `Option.Root`, so you don't need to add it manually when using those repeaters.
 *
 * ### Custom iteration (advanced)
 *
 * Use `Option.Root` directly when you want to manually iterate over options instead of
 * using the built-in repeaters. Access the options array via `Product.useVariantsContext()`
 * (for variants) or `Product.useModifiersContext()` (for modifiers), then map over them.
 *
 * ### Component hierarchy
 *
 * ```tsx
 * <Option.Root option={option}>
 *   <Option.Name />
 *   <Option.MandatoryIndicator />
 *   <Option.Choices>
 *     <Option.ChoiceRepeater>  // Wraps children in Choice.Root
 *       ...  // See Choice hierarchy
 *     </Option.ChoiceRepeater>
 *   </Option.Choices>
 * </Option.Root>
 * ```
 *
 * @component
 * @example Basic usage with Product.VariantOptionRepeater (Option.Root not needed)
 * ```tsx
 * // import { Product, Option, Choice } from '@wix/stores/components';
 * //
 * // Product.VariantOptionRepeater automatically provides Option.Root
 *
 * // Default styling
 * <Product.VariantOptionRepeater>
 *   <Option.Name />
 *   <Option.Choices>
 *     <Option.ChoiceRepeater>
 *       <Choice.Text />
 *       <Choice.Color />
 *     </Option.ChoiceRepeater>
 *   </Option.Choices>
 * </Product.VariantOptionRepeater>
 * ```
 *
 * @example Basic usage with Option.Root for custom iteration
 * ```tsx
 * // import { Option, Choice } from '@wix/stores/components';
 * //
 * // You must pass an option object to the `option` prop
 *
 * // Default styling
 * <Option.Root option={yourOption}>
 *   <Option.Name />
 *   <Option.Choices>
 *     <Option.ChoiceRepeater>
 *       <Choice.Text />
 *     </Option.ChoiceRepeater>
 *   </Option.Choices>
 * </Option.Root>
 *
 * // Custom styling and data attributes
 * <Option.Root option={yourOption} className="your-option-classname data-[type=color]:your-color-style">
 *   <Option.Name />
 *   <Option.Choices>
 *     <Option.ChoiceRepeater>
 *       <Choice.Text />
 *     </Option.ChoiceRepeater>
 *   </Option.Choices>
 * </Option.Root>
 * ```
 *
 * @example With allowedTypes filter
 * ```tsx
 * // import { Option, Choice } from '@wix/stores/components';
 * //
 * // You must pass an option object to the `option` prop
 *
 * // With allowedTypes
 * <Option.Root option={yourOption} allowedTypes={['text']}>
 *   <Option.Name />
 *   <Option.Choices>
 *     <Option.ChoiceRepeater>
 *       <Choice.Text />
 *     </Option.ChoiceRepeater>
 *   </Option.Choices>
 * </Option.Root>
 * ```
 *
 * @example Custom iteration with `useVariantsContext()`
 * ```tsx
 * // import { Product, Option, Choice } from '@wix/stores/components';
 * //
 * // Must be used within Product.Variants
 *
 * // Custom component using the hook
 * function CustomVariantRenderer() {
 *   const { hasOptions, options } = Product.useVariantsContext();
 *
 *   if (!hasOptions) return null;
 *
 *   return options.map(option => (
 *     <Option.Root key={option._id} option={option}>
 *       <Option.Name />
 *       <Option.Choices>
 *         <Option.ChoiceRepeater>
 *           <Choice.Text />
 *         </Option.ChoiceRepeater>
 *       </Option.Choices>
 *     </Option.Root>
 *   ));
 * }
 *
 * // Usage within the parent component
 * <Product.Variants>
 *   <CustomVariantRenderer />
 * </Product.Variants>
 * ```
 *
 * @example Custom iteration with `useModifiersContext()`
 * ```tsx
 * // import { Product, Option, Choice } from '@wix/stores/components';
 * //
 * // Must be used within Product.Modifiers
 *
 * // Custom component using the hook
 * function CustomModifierRenderer() {
 *   const { hasModifiers, modifiers } = Product.useModifiersContext();
 *
 *   if (!hasModifiers) return null;
 *
 *   return modifiers.map(modifier => (
 *     <Option.Root key={modifier._id} option={modifier}>
 *       <Option.Name />
 *       <Option.Choices>
 *         <Option.ChoiceRepeater>
 *           <Choice.Text />
 *           <Choice.FreeText />
 *         </Option.ChoiceRepeater>
 *       </Option.Choices>
 *     </Option.Root>
 *   ));
 * }
 *
 * // Usage within the parent component
 * <Product.Modifiers>
 *   <CustomModifierRenderer />
 * </Product.Modifiers>
 * ```
 *
 * @example Custom rendering with `asChild`
 * ```tsx
 * // import { Option } from '@wix/stores/components';
 * //
 * // You must pass an option object to the `option` prop
 *
 * // asChild with React element - Syntax demonstration for alternative element type
 * <Option.Root asChild option={yourOption}>
 *   <section className="your-option-classname" />
 * </Option.Root>
 *
 * // asChild with render function - Syntax demonstration for accessing render props
 * <Option.Root asChild option={yourOption}>
 *   {React.forwardRef(({ option, onValueChange, allowedTypes, ...props }, ref) => (
 *     <section ref={ref} {...props} className="your-option-classname">
 *       <h3>{option.name}</h3>
 *       {props.children}
 *     </section>
 *   ))}
 * </Option.Root>
 *
 * // asChild with render object - Syntax demonstration for accessing render props
 * <Option.Root asChild option={yourOption}>
 *   {{
 *     render: ({ option, onValueChange, allowedTypes, ...props }, ref) => (
 *       <section ref={ref} {...props} className="your-option-classname">
 *         <h3>{option.name}</h3>
 *         {props.children}
 *       </section>
 *     )
 *   }}
 * </Option.Root>
 * ```
 */
export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
export declare const OptionContext: React.Context<any>;
/**
 * Props for the `Option.Name` component.
 */
export interface NameProps {
    /**
     * When `true`, replaces the default `<div>` with your custom element.
     *
     * Use this when you need a different element type or custom structure.
     * See the `children` prop for usage details.
     *
     * Default: `false`
     */
    asChild?: boolean;
    /**
     * When using `asChild`, pass a React element, render function, or render object.
     *
     * **React element:**  This must be an element that can have children, such as <h1 /> or <span />. Your element receives the default element's props automatically.
     *
     * **Render function:** Your function receives:
     * - `name` (`string`): The option name.
     *
     * **Render object:** You can use a render object in the form `{ render: (props, ref) => ReactNode }` as an alternative to a render function. Receives the same props as the function.
     */
    children?: AsChildChildren<{
        name: string;
    }>;
    /**
     * CSS class name applied to the default element.
     */
    className?: string;
}
/**
 * Displays the option name.
 *
 * By default, renders a `<div>` element containing the option name.
 *
 * @component
 * @example Basic usage
 * ```tsx
 * // import { Option } from '@wix/stores/components';
 * //
 * // Option.Name must be wrapped in Option.Root
 *
 * // Default styling
 * <Option.Name />
 *
 * // Custom styling
 * <Option.Name className="your-name-classname" />
 * ```
 *
 * @example Custom rendering with `asChild`
 * ```tsx
 * // import { Option } from '@wix/stores/components';
 * //
 * // Option.Name must be wrapped in Option.Root
 *
 * // asChild with React element - Semantic HTML improvement
 * <Option.Name asChild>
 *   <h4 className="your-name-classname" />
 * </Option.Name>
 *
 * // asChild with render function - Syntax demonstration for accessing render props
 * <Option.Name asChild>
 *   {React.forwardRef(({ name, ...props }, ref) => (
 *     <h4 ref={ref} {...props} className="your-name-classname">
 *       {name}
 *     </h4>
 *   ))}
 * </Option.Name>
 *
 * // asChild with render object - Syntax demonstration for render object pattern
 * <Option.Name asChild>
 *   {{
 *     render: ({ name, ...props }, ref) => (
 *       <h4 ref={ref} {...props} className="your-name-classname">
 *         {name}
 *       </h4>
 *     )
 *   }}
 * </Option.Name>
 * ```
 */
export declare const Name: React.ForwardRefExoticComponent<NameProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the `Option.MandatoryIndicator` component.
 */
export interface MandatoryIndicatorProps {
    /**
     * When `true`, replaces the default `<span>` with your custom element.
     *
     * Use this when you need a different element type or custom structure.
     * See the `children` prop for usage details.
     *
     * Default: `false`
     */
    asChild?: boolean;
    /**
     * When using `asChild`, pass a React element, render function, or render object.
     *
     * **React element:**  This must be an element that can have children, such as <h1 /> or <span />. Your element receives the default element's props automatically.
     *
     * **Render function:** Your function receives:
     * - `mandatory` (`boolean`): Whether the option is required.
     *
     * **Render object:** You can use a render object in the form `{ render: (props, ref) => ReactNode }` as an alternative to a render function. Receives the same props as the function.
     */
    children?: AsChildChildren<{
        mandatory: boolean;
    }>;
    /**
     * CSS class name applied to the default element.
     */
    className?: string;
}
/**
 * Displays the mandatory indicator (asterisk) when the option is required.
 *
 * Only renders when the option is mandatory. By default, renders a `<span>`
 * containing an asterisk (*).
 *
 * > **Note:** Only applies to modifiers, not variants. Variants don't support
 * mandatory fields.
 *
 * @component
 * @example Basic usage
 * ```tsx
 * // import { Option } from '@wix/stores/components';
 * //
 * // Option.MandatoryIndicator must be wrapped in Option.Root
 *
 * // Default styling
 * <Option.MandatoryIndicator />
 *
 * // Custom styling
 * <Option.MandatoryIndicator className="your-indicator-classname" />
 * ```
 *
 * @example Custom rendering with `asChild`
 * ```tsx
 * // import { Option } from '@wix/stores/components';
 * //
 * // Option.MandatoryIndicator must be wrapped in Option.Root
 *
 * // asChild with React element - Syntax demonstration for alternative element type
 * <Option.MandatoryIndicator asChild>
 *   <strong className="your-indicator-classname" />
 * </Option.MandatoryIndicator>
 *
 * // asChild with render function - Syntax demonstration for accessing render props
 * <Option.MandatoryIndicator asChild>
 *   {React.forwardRef(({ mandatory, ...props }, ref) => (
 *     mandatory ? <span ref={ref} {...props} className="your-indicator-classname">*</span> : null
 *   ))}
 * </Option.MandatoryIndicator>
 *
 * // asChild with render object - Syntax demonstration for accessing render props
 * <Option.MandatoryIndicator asChild>
 *   {{
 *     render: ({ mandatory, ...props }, ref) => (
 *       mandatory ? <span ref={ref} {...props} className="your-indicator-classname">*</span> : null
 *     )
 *   }}
 * </Option.MandatoryIndicator>
 * ```
 */
export declare const MandatoryIndicator: React.ForwardRefExoticComponent<MandatoryIndicatorProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the `Option.Choices` component.
 */
export interface ChoicesProps {
    /**
     * Child components to render within the choices container.
     *
     * Typically contains `Option.ChoiceRepeater` to iterate over choices.
     */
    children: React.ReactNode;
    /**
     * Content to display when no choices are available.
     *
     * Only rendered when the option has no choices.
     */
    emptyState?: React.ReactNode;
}
/**
 * Container for the choice list with empty state support.
 *
 * Renders a `<div>` wrapper around choices. Only renders when the option
 * has choices or is a free-text type. Use `emptyState` to display content
 * when no choices are available.
 *
 * @component
 * @example Basic usage
 * ```tsx
 * // import { Option, Choice } from '@wix/stores/components';
 * //
 * // Option.Choices must be wrapped in Option.Root
 *
 * // Default styling
 * <Option.Choices>
 *   <Option.ChoiceRepeater>
 *     <Choice.Text />
 *     <Choice.Color />
 *   </Option.ChoiceRepeater>
 * </Option.Choices>
 * ```
 *
 * @example With emptyState
 * ```tsx
 * // import { Option, Choice } from '@wix/stores/components';
 * //
 * // Option.Choices must be wrapped in Option.Root
 *
 * // With emptyState
 * <Option.Choices emptyState={<div>No choices available</div>}>
 *   <Option.ChoiceRepeater>
 *     <Choice.Text />
 *   </Option.ChoiceRepeater>
 * </Option.Choices>
 * ```
 */
export declare const Choices: React.ForwardRefExoticComponent<ChoicesProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the `Option.ChoiceRepeater` component.
 */
export interface ChoiceRepeaterProps {
    /**
     * Child components to render for each choice.
     *
     * These children are automatically wrapped in `Choice.Root`, so you can use
     * `Choice.Root` child components directly.
     */
    children: React.ReactNode;
}
/**
 * Iterates over each choice in the option, rendering children for each one.
 *
 * Maps over all choices and provides each choice through a `Choice.Root`
 * context. For variants, only renders visible choices (hidden choices are
 * filtered out).
 *
 * > **Note:** This component automatically wraps its children in `Choice.Root`,
 * so you can use `Choice.Text`, `Choice.Color`, and `Choice.FreeText`
 * directly.
 *
 * @component
 * @example Basic usage
 * ```tsx
 * // import { Option, Choice } from '@wix/stores/components';
 * //
 * // Option.ChoiceRepeater must be wrapped in Option.Choices
 *
 * // Default styling
 * <Option.ChoiceRepeater>
 *   <Choice.Text />
 *   <Choice.Color />
 *   <Choice.FreeText />
 * </Option.ChoiceRepeater>
 * ```
 *
 * @example Custom choice rendering with `useChoiceContext()`
 * ```tsx
 * // import { Option, Choice } from '@wix/stores/components';
 * //
 * // Option.ChoiceRepeater must be wrapped in Option.Choices
 *
 * // Custom component using the hook
 * function ChoiceWithPrice() {
 *   const { value, isSelected, choice, select } = Choice.useChoiceContext();
 *
 *   return (
 *     <button onClick={select} data-selected={isSelected} className="your-choice-classname">
 *       {value}
 *       {choice.addedPrice && <span> (+{choice.addedPrice})</span>}
 *     </button>
 *   );
 * }
 *
 * // Usage within the parent component
 * <Option.ChoiceRepeater>
 *   <ChoiceWithPrice />
 * </Option.ChoiceRepeater>
 * ```
 */
export declare const ChoiceRepeater: React.ForwardRefExoticComponent<ChoiceRepeaterProps & React.RefAttributes<HTMLElement>>;