import { type MoneyProps } from '@wix/headless-components/react';
import { type AsChildChildren } from '@wix/headless-utils/react';
import React from 'react';
import { PricingOption } from '../services/pricing-option-service.js';
/**
 * Props for the PricingOption Root component.
 */
export interface RootProps {
    /** Pricing option */
    pricingOption: PricingOption;
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Child components that will have access to the pricing option */
    children: React.ReactNode;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Root container that provides pricing option context to all child components.
 * Must be used as the top-level PricingOption component.
 *
 * @order 1
 * @component
 * @example
 * ```tsx
 * import { PricingOption } from '@wix/events/components';
 *
 * function PricingOptionComponent({ pricingOption }) {
 *   return (
 *     <PricingOption.Root pricingOption={pricingOption}>
 *       <PricingOption.Name />
 *       <PricingOption.Pricing />
 *       <PricingOption.Quantity />
 *     </PricingOption.Root>
 *   );
 * }
 * ```
 */
export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the PricingOption Name component.
 */
export interface NameProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<{
        /** Pricing option name */
        name: string;
    }>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Displays the pricing option name.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <PricingOption.Name className="text-xl font-bold" />
 *
 * // asChild with primitive
 * <PricingOption.Name asChild>
 *   <h2 className="text-xl font-bold" />
 * </PricingOption.Name>
 *
 * // asChild with react component
 * <PricingOption.Name asChild>
 *   {React.forwardRef(({ name, ...props }, ref) => (
 *     <h2 ref={ref} {...props} className="text-xl font-bold">
 *       {name}
 *     </h2>
 *   ))}
 * </PricingOption.Name>
 * ```
 */
export declare const Name: React.ForwardRefExoticComponent<NameProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the PricingOption Pricing component.
 */
export interface PricingProps extends Omit<MoneyProps, 'money'> {
}
/**
 * Displays the pricing option price.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <PricingOption.Pricing className="text-lg font-semibold" />
 *
 * // asChild with primitive
 * <PricingOption.Pricing asChild>
 *   <span className="text-lg font-semibold" />
 * </PricingOption.Pricing>
 *
 * // asChild with react component
 * <PricingOption.Pricing asChild>
 *   {React.forwardRef(({ formattedMoney, formattedMoneyParts, ...props }, ref) => (
 *     <span ref={ref} {...props} className="text-lg font-semibold">
 *       {formattedMoney}
 *     </span>
 *   ))}
 * </PricingOption.Pricing>
 * ```
 */
export declare const Pricing: React.ForwardRefExoticComponent<PricingProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the PricingOption Tax component.
 */
export interface TaxProps extends Omit<MoneyProps, 'money' | 'children'> {
    children?: React.ReactNode | AsChildChildren<{
        /** Tax name */
        name: string;
        /** Tax rate */
        rate: number;
        /** Whether tax is included in price */
        included: boolean;
        /** Taxable value */
        taxableValue: number;
        /** Tax value */
        taxValue: number;
        formattedTaxableMoney: string;
        /** Formatted taxable value parts */
        formattedTaxableMoneyParts: Intl.NumberFormatPart[];
        formattedTaxMoney: string;
        /** Formatted tax value parts */
        formattedTaxMoneyParts: Intl.NumberFormatPart[];
    }>;
}
/**
 * Displays the tax for the pricing option. Only renders when event has tax settings.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <PricingOption.Tax className="text-sm text-gray-500" />
 *
 * // asChild with primitive
 * <PricingOption.Tax asChild>
 *   <span className="text-sm text-gray-500" />
 * </PricingOption.Tax>
 *
 * // asChild with react component
 * <PricingOption.Tax asChild>
 *   {React.forwardRef(({ name, rate, included, taxableValue, taxValue, formattedTaxMoney, formattedTaxMoneyParts, formattedTaxableMoney, formattedTaxableMoneyParts, ...props }, ref) => (
 *     <span ref={ref} {...props} className="text-sm text-gray-500">
 *       {included ? `${name} included` : `+${formattedTaxMoney} ${name}`}
 *     </span>
 *   ))}
 * </PricingOption.Tax>
 * ```
 */
export declare const Tax: React.ForwardRefExoticComponent<TaxProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the PricingOption Fee component.
 */
export interface FeeProps extends Omit<MoneyProps, 'money' | 'children'> {
    children?: React.ReactNode | AsChildChildren<{
        /** Fee rate */
        rate: number;
        /** Fee value */
        value: number;
        /** Formatted fee value */
        formattedMoney: string;
        /** Formatted fee value parts */
        formattedMoneyParts: Intl.NumberFormatPart[];
    }>;
}
/**
 * Displays the fee for the pricing option. Only renders when ticket definition has fee enabled.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <PricingOption.Fee className="text-sm text-gray-500" />
 *
 * // asChild with primitive
 * <PricingOption.Fee asChild>
 *   <span className="text-sm text-gray-500" />
 * </PricingOption.Fee>
 *
 * // asChild with react component
 * <PricingOption.Fee asChild>
 *   {React.forwardRef(({ rate, value, formattedMoney, formattedMoneyParts, ...props }, ref) => (
 *     <span ref={ref} {...props} className="text-sm text-gray-500">
 *       +{formattedMoney} service fee
 *     </span>
 *   ))}
 * </PricingOption.Fee>
 * ```
 */
export declare const Fee: React.ForwardRefExoticComponent<FeeProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the PricingOption Quantity component.
 */
export interface QuantityProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<{
        /** Array of quantity options */
        options: number[];
        /** Current quantity */
        quantity: number;
        /** Maximum quantity allowed */
        maxQuantity: number;
        /** Function to increment quantity */
        increment: () => void;
        /** Function to decrement quantity */
        decrement: () => void;
        /** Function to set specific quantity */
        setQuantity: (quantity: number) => void;
    }>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Displays a quantity selector for the pricing option. Only renders when the sale has started and the ticket definition is not sold out.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <PricingOption.Quantity className="border rounded px-3 py-2" />
 *
 * // asChild with primitive
 * <PricingOption.Quantity asChild>
 *   <select className="border rounded px-3 py-2" />
 * </PricingOption.Quantity>
 *
 * // asChild with react component
 * <PricingOption.Quantity asChild>
 *   {React.forwardRef(({ options, quantity, maxQuantity, increment, decrement, setQuantity, ...props }, ref) => (
 *     <div ref={ref} {...props} className="flex items-center space-x-2">
 *       <button disabled={quantity === 0} onClick={decrement}>-</button>
 *       <span>{quantity}</span>
 *       <button disabled={quantity >= maxQuantity} onClick={increment}>+</button>
 *     </div>
 *   ))}
 * </PricingOption.Quantity>
 * ```
 */
export declare const Quantity: React.ForwardRefExoticComponent<QuantityProps & React.RefAttributes<HTMLElement>>;