import React from 'react';
import { type LineItem } from '@wix/ecom/services';
import { type AsChildChildren } from '@wix/headless-utils/react';
import { ItemServiceConfig } from '../services/item-details-service.js';
import { EnhancedVariant } from '@wix/headless-restaurants-menus/services';
import { AvailabilityStatus, AvailabilityStatusMap, AddToCartButtonState } from '../services/common-types.js';
/**
 * Props for the ItemDetails Root component
 */
export interface RootProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Child components that will have access to the item context */
    children: React.ReactNode;
    /** Optional pre-loaded item details service configuration */
    itemDetailsServiceConfig?: ItemServiceConfig;
}
/**
 * Root headless component for menu item details
 * Provides service context and item data for all child components
 *
 * @example
 * ```tsx
 * <ItemDetails.Root itemDetailsServiceConfig={config}>
 *   <ItemDetails.Name />
 *   <ItemDetails.Price />
 *   <ItemDetails.Description />
 *   <ItemDetails.Variants />
 *   <ItemDetails.AddToCartButton />
 * </ItemDetails.Root>
 * ```
 */
export declare const Root: {
    ({ children, itemDetailsServiceConfig }: RootProps): import("react/jsx-runtime").JSX.Element;
    displayName: string;
};
/**
 * Props for the ItemDetails Variants component
 */
export interface ItemDetailsVariantsProps {
    /** Children render prop that receives variant data */
    children?: AsChildChildren<{
        variant: EnhancedVariant;
        variants: EnhancedVariant[];
        hasVariants: boolean;
        selectedVariantId?: string;
        onVariantChange?: (variantId: string) => void;
    }>;
    /** CSS classes to apply to the default container */
    className?: string;
    /** Whether to render as a child component */
    asChild?: boolean;
    /** CSS classes to apply to variant names */
    variantNameClassName?: string;
    /** CSS classes to apply to variant prices */
    variantPriceClassName?: string;
    /** CSS classes to apply to the RadioGroup container */
    radioGroupClassName?: string;
    /** CSS classes to apply to each RadioGroup.Item (variant radio button) */
    variantRadioItemClassName?: string;
    /** CSS classes to apply to the RadioGroup.Indicator (radio button circle) */
    variantRadioIndicatorClassName?: string;
    /** CSS classes to apply to the radio button wrapper (outer circle with border) */
    variantRadioButtonWrapperClassName?: string;
    /** CSS classes to apply to each variant item container */
    variantItemClassName?: string;
    /** CSS classes to apply to the variant name and price container */
    variantContentClassName?: string;
    /** Optional content to display when no variants are available */
    emptyState?: React.ReactNode;
}
/**
 * Headless component for item variants selection
 * Renders variants using Radix UI RadioGroup for single selection
 * Supports custom rendering via asChild or children render prop
 *
 * @example
 * ```tsx
 * <ItemDetails.Variants
 *   variantNameClassName="font-paragraph text-foreground"
 *   variantPriceClassName="font-paragraph text-secondary-foreground"
 *   emptyState={<div>No variants available</div>}
 * />
 * ```
 *
 * @example
 * Custom rendering with children prop:
 * ```tsx
 * <ItemDetails.Variants asChild>
 *   {({ variants, selectedVariantId, onVariantChange }) => (
 *     <div className="variant-grid">
 *       {variants.map((variant) => (
 *         <button
 *           key={variant._id}
 *           onClick={() => onVariantChange?.(variant._id ?? '')}
 *           data-selected={selectedVariantId === variant._id}
 *         >
 *           <span>{variant.name}</span>
 *           <span>{variant.priceInfo?.formattedPrice}</span>
 *         </button>
 *       ))}
 *     </div>
 *   )}
 * </ItemDetails.Variants>
 * ```
 */
export declare const Variants: React.ForwardRefExoticComponent<ItemDetailsVariantsProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the ItemDetails SpecialRequest component
 */
export interface SpecialRequestProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Children render prop that receives value and onChange handler */
    children?: AsChildChildren<{
        value: string;
        onChange: (value: string) => void;
        allowSpecialRequest: boolean;
        /**
         * Owner-configured placeholder text for the special-request textarea.
         * `undefined` → consumers should use their default placeholder.
         * `""` → consumers should render NO placeholder.
         * `"..."` → consumers should use the string as-is.
         */
        specialRequestInstructions?: string;
    }>;
    /** Placeholder text for the textarea */
    placeholder?: string;
    /** Maximum number of characters allowed */
    maxLength?: number;
    /** Number of visible text lines */
    rows?: number;
    /** CSS classes to apply to the textarea */
    className?: string;
    /** CSS classes to apply to the label */
    labelClassName?: string;
    /** Label text for the input */
    label?: string;
    /** Whether to show character count */
    showCharCount?: boolean;
}
/**
 * Props for the ItemDetails AddToCartButton component
 */
export interface AddToCartButtonProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** CSS classes to apply to the button */
    className?: string;
    /** Map of button states to display text */
    addToCartLabelMap: Record<AddToCartButtonState, string>;
    /** Children render prop that receives button state and line item data */
    children?: AsChildChildren<{
        onHandleAddToCart: (onClick: (lineItem: LineItem) => void) => void;
        buttonState: AddToCartButtonState;
        addToCartButtonDisabled?: boolean;
        /** Content to display when loading */
        loadingState?: string | React.ReactNode;
        /** Text label for the button */
        label: React.ReactNode;
        formattedPrice: string;
        price: number;
    }>;
}
/**
 * Headless component for adding item to cart
 * Wraps Commerce.Actions.AddToCart and provides item-specific state
 * Displays button state, price, and handles disabled states
 *
 * @example
 * ```tsx
 * <ItemDetails.AddToCartButton
 *   className="bg-primary text-primary-foreground"
 *   addToCartLabelMap={{
 *     [AddToCartButtonState.ADD_TO_CART]: 'Add to Cart',
 *     [AddToCartButtonState.LOADING]: 'Adding...',
 *     [AddToCartButtonState.UPDATE_CART]: 'Update Cart',
 *   }}
 * />
 * ```
 *
 * @example
 * Custom rendering with children prop:
 * ```tsx
 * <ItemDetails.AddToCartButton
 *   addToCartLabelMap={labelMap}
 *   asChild
 * >
 *   {({ buttonState, formattedPrice, addToCartButtonDisabled,onHandleAddToCart }) => (
 *     <button
 *       onClick={() => onHandleAddToCart(onClickFunction)}
 *       disabled={addToCartButtonDisabled}
 *       className="bg-primary text-primary-foreground"
 *     >
 *       <span>{labelMap[buttonState]}</span>
 *       <span>{formattedPrice}</span>
 *     </button>
 *   )}
 * </ItemDetails.AddToCartButton>
 * ```
 */
export declare const AddToCartButton: React.ForwardRefExoticComponent<AddToCartButtonProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the ItemDetails Quantity component
 */
export interface ItemDetailsQuantityProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** CSS classes to apply to the container */
    className?: string;
    /** Children render prop that receives quantity state and handlers */
    children: (props: {
        quantity: number;
        increment: () => void;
        decrement: () => void;
        setQuantity: (quantity: number) => void;
        canIncrement: boolean;
        canDecrement: boolean;
        onValueChange: (value: number) => void;
    }) => React.ReactNode;
}
/**
 * Headless component for item quantity selection
 * Provides increment/decrement controls with validation
 *
 * @example
 * ```tsx
 * <ItemDetails.Quantity>
 *   {({ quantity, increment, decrement, canIncrement, canDecrement }) => (
 *     <div className="flex items-center gap-2">
 *       <button
 *         onClick={decrement}
 *         disabled={!canDecrement}
 *         className="bg-secondary text-secondary-foreground"
 *       >
 *         -
 *       </button>
 *       <span className="font-paragraph text-foreground">{quantity}</span>
 *       <button
 *         onClick={increment}
 *         disabled={!canIncrement}
 *         className="bg-secondary text-secondary-foreground"
 *       >
 *         +
 *       </button>
 *     </div>
 *   )}
 * </ItemDetails.Quantity>
 * ```
 */
export declare const Quantity: React.FC<ItemDetailsQuantityProps>;
/**
 * Headless component for special requests or custom instructions
 * Provides a textarea for customers to add notes or modifications
 * Supports character count and validation
 *
 * @example
 * ```tsx
 * <ItemDetails.SpecialRequest
 *   placeholder="Any special requests?"
 *   maxLength={200}
 *   rows={3}
 *   label="Special Requests"
 *   className="border-foreground text-foreground"
 *   labelClassName="font-paragraph text-foreground"
 * />
 * ```
 *
 * @example
 * Custom rendering with children prop:
 * ```tsx
 * <ItemDetails.SpecialRequest asChild>
 *   {({ value, onChange }) => (
 *     <div>
 *       <label>Custom Instructions</label>
 *       <textarea
 *         value={value}
 *         onChange={(e) => onChange(e.target.value)}
 *         className="border-foreground text-foreground"
 *       />
 *       <span className="text-secondary-foreground">
 *         {value.length}/200
 *       </span>
 *     </div>
 *   )}
 * </ItemDetails.SpecialRequest>
 * ```
 */
export declare const SpecialRequest: React.ForwardRefExoticComponent<SpecialRequestProps & React.RefAttributes<never>>;
/**
 * Props for the ItemDetails Availability component
 */
export interface ItemDetailsAvailabilityProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** CSS classes to apply to the availability text */
    textClassName?: string;
    /** CSS classes to apply to the action button */
    buttonClassName?: string;
    /** Map of availability statuses to display text and actions */
    availabilityStatusMap: AvailabilityStatusMap;
    /** Children render prop that receives availability state and handlers */
    children: (props: {
        availabilityStatus: AvailabilityStatus;
        availabilityStatusText?: string;
        availabilityStatusButtonText?: string;
        availabilityAction?: () => void;
    }) => React.ReactNode;
}
/**
 * Headless component for item availability status display
 * Shows availability messages and optional action buttons
 * Does not render when item is available
 *
 * @example
 * ```tsx
 * <ItemDetails.AvailabilityComponent
 *   availabilityStatusMap={{
 *     [AvailabilityStatus.OUT_OF_STOCK]: {
 *       text: 'Currently unavailable',
 *       buttonText: 'Notify me',
 *       action: () => handleNotify(),
 *     },
 *     [AvailabilityStatus.LIMITED_STOCK]: {
 *       text: 'Limited availability',
 *     },
 *   }}
 *   textClassName="text-destructive"
 *   buttonClassName="bg-primary text-primary-foreground"
 * >
 *   {({ availabilityStatus, availabilityStatusText }) => (
 *     <div>{availabilityStatusText}</div>
 *   )}
 * </ItemDetails.AvailabilityComponent>
 * ```
 *
 * @example
 * Custom rendering with action button:
 * ```tsx
 * <ItemDetails.AvailabilityComponent
 *   availabilityStatusMap={statusMap}
 *   asChild
 * >
 *   {({ availabilityStatus, availabilityStatusText, availabilityStatusButtonText, availabilityAction }) => (
 *     <div className="bg-destructive/10 p-4">
 *       <p className="text-destructive">{availabilityStatusText}</p>
 *       {availabilityStatusButtonText && availabilityAction && (
 *         <button
 *           onClick={availabilityAction}
 *           className="bg-primary text-primary-foreground"
 *         >
 *           {availabilityStatusButtonText}
 *         </button>
 *       )}
 *     </div>
 *   )}
 * </ItemDetails.AvailabilityComponent>
 * ```
 */
export declare const AvailabilityComponent: React.ForwardRefExoticComponent<ItemDetailsAvailabilityProps & React.RefAttributes<HTMLElement>>;