import React from 'react';
import { AsChildChildren } from '@wix/headless-utils/react';
/**
 * Choice data interface.
 */
export interface Choice {
    /** Hex color code for color choices. For example, "#FF0000". */
    colorCode?: string;
    /** Unique identifier for the choice. */
    choiceId?: string | null;
    /** Media linked to this choice.*/
    linkedMedia?: any[];
    /** The type of choice: `color`, `text`, or `free-text`. */
    type?: 'color' | 'text' | 'free-text';
    /** Key identifier for the choice. */
    key?: string;
    /** Display name for the choice. */
    name?: string | null;
    /** Additional price for this choice as a formatted string, for example "$5.00". */
    addedPrice?: string | null;
    /** Minimum character count for free-text choices. */
    minCharCount?: number;
    /** Maximum character count for free-text choices. */
    maxCharCount?: number;
}
/**
 * Context value interface for individual choice data and behavior.
 */
export interface ChoiceContextValue {
    /** The choice data object. */
    choice: Choice;
    /** Whether this choice should render as text. */
    shouldRenderAsText: boolean;
    /** Whether this choice should render as color swatch. */
    shouldRenderAsColor: boolean;
    /** Whether this choice should render as free text input. */
    shouldRenderAsFreeText: boolean;
    /** Display value for the choice. */
    value: string;
    /** Whether this choice is currently selected. */
    isSelected: boolean;
    /** Whether this choice is visible based on current selections. */
    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;
    /** Callback for free text value changes. */
    onValueChange?: (value: string) => void;
}
export declare const ChoiceContext: React.Context<ChoiceContextValue | null>;
/**
 * Hook to access the choice context provided by `Option.ChoiceRepeater`.
 *
 * Use this hook when you need access to choice data that isn't exposed through
 * the `asChild` pattern on `Choice.Text`, `Choice.Color`, or `Choice.FreeText`.
 *
 * The following properties are only available through `useChoiceContext()` hook, not exposed in `asChild` render props:
 * - `choice` (`Choice`): The full choice data object with:
 *   - `addedPrice` (`string | null`): Additional price for this choice as a formatted string, for example "$5.00".
 *   - `colorCode` (`string | undefined`): Hex color code for color choices. For example, "#FF0000".
 *   - `linkedMedia` (`any[] | undefined`): Media items linked to this choice.
 *   - `minCharCount` (`number | undefined`): Minimum character count for free-text choices.
 *   - `maxCharCount` (`number | undefined`): Maximum character count for free-text choices.
 * - `isSelected` (`boolean`): Whether this choice is currently selected.
 * - `isVisible` (`boolean`): Whether this choice is visible based on current selections.
 * - `isInStock` (`boolean`): Whether this choice is in stock.
 * - `isPreOrderEnabled` (`boolean`): Whether this choice is available for pre-order.
 * - `shouldRenderAsText` (`boolean`): Whether this choice should render as text.
 * - `shouldRenderAsColor` (`boolean`): Whether this choice should render as color swatch.
 * - `shouldRenderAsFreeText` (`boolean`): Whether this choice should render as free text input.
 * - `select` (`() => void`): Function to select this choice.
 * - `onValueChange` (`((value: string) => void) | undefined`): Callback for free text value changes.
 *
 * @returns {ChoiceContextValue} The current choice context value.
 * @throws {Error} If used outside of an `Option.ChoiceRepeater` component.
 *
 * @example Custom choice rendering
 * ```tsx
 * // import { Option, Choice } from '@wix/stores/components';
 * //
 * // Call from a component rendered within Option.ChoiceRepeater
 *
 * // Custom component using the hook for advanced rendering
 * function ChoiceWithPrice() {
 *   const { value, isSelected, isInStock, choice, select } = Choice.useChoiceContext();
 *
 *   return (
 *     <button
 *       onClick={select}
 *       data-selected={isSelected}
 *       disabled={!isInStock}
 *       className="your-choice-classname"
 *     >
 *       {value}
 *       {choice.addedPrice && <span> (+{choice.addedPrice})</span>}
 *       {!isInStock && <span> (Out of Stock)</span>}
 *     </button>
 *   );
 * }
 *
 * // Usage within the parent component
 * <Option.ChoiceRepeater>
 *   <ChoiceWithPrice />
 * </Option.ChoiceRepeater>
 * ```
 */
export declare function useChoiceContext(): ChoiceContextValue;
/**
 * Props for the `Choice.Root` component.
 */
export interface RootProps {
    /**
     * Child components to render within the choice context.
     *
     * Use `Choice.Text`, `Choice.Color`, or `Choice.FreeText` to display
     * the choice based on its type.
     */
    children?: React.ReactNode;
}
/**
 * Root component that consumes ChoiceContext provided by Option.ChoiceRepeater.
 *
 * Use `Option.ChoiceRepeater` alone when rendering Choice sub-components like `Choice.Text`, `Choice.Color`, etc.
 * Use `Choice.Root` directly when you need to render a custom choice component that accesses the choice context via `useChoiceContext()`.
 *
 * ### Component hierarchy
 *
 * ```tsx
 * <Choice.Root>
 *   <Choice.Text />
 *   <Choice.Color />
 *   <Choice.FreeText />
 * </Choice.Root>
 * ```
 *
 * ### Custom choice rendering
 *
 * Use `Choice.useChoiceContext()` to access data not exposed via `asChild`.
 * See `useChoiceContext` for more information.
 *
 * @component
 * @example Basic usage with Option.ChoiceRepeater (Choice.Root not needed)
 * ```tsx
 * // import { Option, Choice } from '@wix/stores/components';
 * //
 * // Option.ChoiceRepeater automatically provides Choice.Root
 *
 * // Default styling
 * <Option.ChoiceRepeater>
 *   <Choice.Text />
 *   <Choice.Color />
 * </Option.ChoiceRepeater>
 * ```
 *
 * @example Custom choice rendering with `useChoiceContext()`
 * ```tsx
 * // import { Option, Choice } from '@wix/stores/components';
 * //
 * // Must be used within Option.ChoiceRepeater
 *
 * // Custom component using the hook for advanced rendering
 * function ChoiceWithPrice() {
 *   const { value, isSelected, isInStock, choice, select } = Choice.useChoiceContext();
 *
 *   return (
 *     <button
 *       onClick={select}
 *       data-selected={isSelected}
 *       disabled={!isInStock}
 *       className="your-choice-classname"
 *     >
 *       {value}
 *       {choice.addedPrice && <span> (+{choice.addedPrice})</span>}
 *       {!isInStock && <span> (Out of Stock)</span>}
 *     </button>
 *   );
 * }
 *
 * // Usage within the parent component
 * <Option.ChoiceRepeater>
 *   <ChoiceWithPrice />
 * </Option.ChoiceRepeater>
 * ```
 */
export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Props for the `Choice.Text` component.
 */
export interface TextProps {
    /**
     * When `true`, replaces the default `<button>` 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:
     * - `id` (`string`): The choice ID.
     * - `value` (`string`): The display value for the choice.
     *
     * **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<{
        id: string;
        value: string;
    }>;
    /**
     * CSS class name applied to the default element.
     *
     * The element has the following attributes for conditional styling:
     * - `data-selected`: `"true"` when selected, `"false"` otherwise.
     *   For conditional styling, target with `data-[selected=true]:` or `data-[selected=false]:`.
     * - `disabled`: Applied when the choice is out of stock and pre-order isn't enabled.
     *   For styling disabled state, target with `disabled:`.
     */
    className?: string;
}
/**
 * Text-based choice button for selecting options like size or material.
 *
 * Only renders when the choice type is 'text'. By default, renders a
 * `<button>` element with the choice value. The button is disabled when
 * the choice is out of stock and pre-order isn't enabled.
 *
 * @component
 * @example Basic usage
 * ```tsx
 * // import { Choice } from '@wix/stores/components';
 * //
 * // Choice.Text must be wrapped in Option.ChoiceRepeater
 *
 * // Default styling
 * <Choice.Text />
 *
 * // Custom styling with data attributes
 * <Choice.Text className="your-choice-classname data-[selected=true]:your-selected-style disabled:your-disabled-style" />
 * ```
 *
 * @example Custom rendering with `asChild`
 * ```tsx
 * // import { Choice } from '@wix/stores/components';
 * //
 * // Choice.Text must be wrapped in Option.ChoiceRepeater
 *
 * // asChild with React element - Syntax demonstration for alternative element type
 * <Choice.Text asChild>
 *   <div className="your-choice-classname" />
 * </Choice.Text>
 *
 * // asChild with render function - Syntax demonstration for accessing render props
 * <Choice.Text asChild>
 *   {React.forwardRef(({ id, value, ...props }, ref) => (
 *     <button ref={ref} {...props} className="your-choice-classname">
 *       {value}
 *     </button>
 *   ))}
 * </Choice.Text>
 *
 * // asChild with render object - Syntax demonstration for accessing render props
 * <Choice.Text asChild>
 *   {{
 *     render: ({ id, value, ...props }, ref) => (
 *       <button ref={ref} {...props} className="your-choice-classname">
 *         {value}
 *       </button>
 *     )
 *   }}
 * </Choice.Text>
 * ```
 */
export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Props for the `Choice.Color` component.
 */
export interface ColorProps {
    /**
     * When `true`, replaces the default `<button>` 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:
     * - `colorCode` (`string`): The hex color code. For example, "#FF0000".
     * - `name` (`string`): The display name for the color.
     * - `id` (`string`): The choice ID.
     *
     * **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<{
        colorCode: string;
        name: string;
        id: string;
    }>;
    /**
     * CSS class name applied to the default element.
     *
     * The element has the following attributes for conditional styling:
     * - `data-selected`: `"true"` when selected, `"false"` otherwise.
     *   For conditional styling, target with `data-[selected=true]:` or `data-[selected=false]:`.
     * - `disabled`: Applied when the choice is out of stock and pre-order isn't enabled.
     *   For styling disabled state, target with `disabled:`.
     */
    className?: string;
}
/**
 * Color swatch choice button for selecting color options.
 *
 * Only renders when the choice type is 'color'. By default, renders a
 * `<button>` element with the background color set to the choice's color
 * code. The button is disabled when the choice is out of stock and
 * pre-order isn't enabled.
 *
 * @component
 * @example Basic usage
 * ```tsx
 * // import { Choice } from '@wix/stores/components';
 * //
 * // Choice.Color must be wrapped in Option.ChoiceRepeater
 *
 * // Default styling
 * <Choice.Color />
 *
 * // Custom styling with data attributes
 * <Choice.Color className="your-color-classname data-[selected=true]:your-selected-style disabled:your-disabled-style" />
 * ```
 *
 * @example Custom rendering with `asChild`
 * ```tsx
 * // import { Choice } from '@wix/stores/components';
 * //
 * // Choice.Color must be wrapped in Option.ChoiceRepeater
 *
 * // asChild with React element - Syntax demonstration for alternative element type
 * <Choice.Color asChild>
 *   <div className="your-color-classname" />
 * </Choice.Color>
 *
 * // asChild with render function - Syntax demonstration for accessing render props
 * <Choice.Color asChild>
 *   {React.forwardRef(({ colorCode, name, id, ...props }, ref) => (
 *     <button ref={ref} {...props} className="your-color-classname" style={{ backgroundColor: colorCode }} title={name} />
 *   ))}
 * </Choice.Color>
 *
 * // asChild with render object - Syntax demonstration for accessing render props
 * <Choice.Color asChild>
 *   {{
 *     render: ({ colorCode, name, id, ...props }, ref) => (
 *       <button ref={ref} {...props} className="your-color-classname" style={{ backgroundColor: colorCode }} title={name} />
 *     )
 *   }}
 * </Choice.Color>
 * ```
 */
export declare const Color: React.ForwardRefExoticComponent<ColorProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Props for the `Choice.FreeText` component.
 */
export interface FreeTextProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
    /**
     * When `true`, replaces the default `<textarea>` 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:
     * - `minCharCount` (`number | undefined`): Minimum character count required.
     * - `maxCharCount` (`number | undefined`): Maximum character count allowed.
     * - `defaultAddedPrice` (`string | null | undefined`): Additional price for this modifier.
     * - `title` (`string | undefined`): The modifier name.
     * - `value` (`string | undefined`): The current text value.
     * - `onChange` (`(e: React.ChangeEvent<HTMLTextAreaElement>) => void`): Handler for text changes.
     *
     * **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<{
        minCharCount?: number;
        maxCharCount?: number;
        defaultAddedPrice?: string | null;
        title?: string;
        value?: string;
        onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
    }>;
    /**
     * CSS class name applied to the default element.
     *
     * The element has the following attributes for conditional styling:
     * - `data-selected`: `"true"` when selected, `"false"` otherwise.
     *   Target with `data-[selected=true]:` or `data-[selected=false]:`.
     */
    className?: string;
}
/**
 * Free text input for custom text modifiers like engravings or gift messages.
 *
 * Only renders when the choice type is 'free-text'. By default, renders a
 * `<textarea>` element. This component is only available for modifiers,
 * not variants.
 *
 * > **Note:** Free text is only supported for modifiers, not variants.
 *
 * @component
 * @example Basic usage
 * ```tsx
 * // import { Choice } from '@wix/stores/components';
 * //
 * // Choice.FreeText must be wrapped in Option.ChoiceRepeater (modifiers only)
 *
 * // Default styling
 * <Choice.FreeText />
 *
 * // Custom styling and data attributes
 * <Choice.FreeText className="your-freetext-classname data-[selected=true]:your-selected-style" />
 * ```
 *
 * @example Custom rendering with `asChild`
 * ```tsx
 * // import { Choice } from '@wix/stores/components';
 * //
 * // Choice.FreeText must be wrapped in Option.ChoiceRepeater (modifiers only)
 *
 * // asChild with React element - Syntax demonstration for alternative element type
 * <Choice.FreeText asChild>
 *   <input type="text" className="your-freetext-classname" />
 * </Choice.FreeText>
 *
 * // asChild with render function - Adds custom placeholder
 * <Choice.FreeText asChild>
 *   {React.forwardRef(({ value, onChange, title, ...props }, ref) => (
 *     <textarea
 *       ref={ref}
 *       {...props}
 *       className="your-freetext-classname"
 *       placeholder={`Enter custom ${title}...`}
 *       value={value}
 *       onChange={onChange}
 *     />
 *   ))}
 * </Choice.FreeText>
 *
 * // asChild with render object - Adds custom placeholder
 * <Choice.FreeText asChild>
 *   {{
 *     render: ({ value, onChange, title, ...props }, ref) => (
 *       <textarea
 *         ref={ref}
 *         {...props}
 *         className="your-freetext-classname"
 *         placeholder={`Enter custom ${title}...`}
 *         value={value}
 *         onChange={onChange}
 *       />
 *     )
 *   }}
 * </Choice.FreeText>
 * ```
 */
export declare const FreeText: React.ForwardRefExoticComponent<FreeTextProps & React.RefAttributes<HTMLTextAreaElement>>;