import React from 'react';
import * as CoreGiftCard from './core/GiftCard.js';
import type { GiftCardServiceConfig, GiftCardProduct } from '../services/gift-card-service.js';
import { AsChildChildren } from '@wix/headless-utils/react';
import { WixMediaImage } from '@wix/headless-media/react';
/**
 * Props for the GiftCard root component
 */
export interface GiftCardRootProps {
    children: React.ReactNode;
    giftCardServiceConfig: GiftCardServiceConfig;
}
/**
 * Root component that provides the GiftCard service context.
 * Supports both SSR (with product in config) and client-side auto-fetch (empty config).
 *
 * @component
 * @example
 * ```tsx
 * // With SSR config
 * <GiftCard.Root giftCardServiceConfig={{ product: myProduct }}>
 *   <GiftCard.Name className="text-2xl font-bold" />
 * </GiftCard.Root>
 *
 * // Without config (auto-fetch)
 * <GiftCard.Root giftCardServiceConfig={{}}>
 *   <GiftCard.Name className="text-2xl font-bold" />
 * </GiftCard.Root>
 * ```
 */
export declare const Root: {
    (props: GiftCardRootProps): React.ReactNode;
    displayName: string;
};
/**
 * Data exposed by the Raw component via render props
 */
export interface GiftCardRawData {
    /** The gift card product data, or null if not loaded */
    giftCard: GiftCardProduct | null;
    /** Whether the gift card is currently loading */
    isLoading: boolean;
    /** Error message if loading failed, or null */
    error: string | null;
}
/**
 * Props for the GiftCard Raw component
 */
export interface RawProps {
    /** Whether to render as a child component - must be true for Raw */
    asChild?: boolean;
    /** Render function that receives the gift card state */
    children?: AsChildChildren<GiftCardRawData>;
    /** CSS classes to apply to the element */
    className?: string;
}
/**
 * Provides direct access to the gift card data via render props.
 * Should be used only when you need full control over rendering all states.
 * For standard usage, use GiftCard.Loading and GiftCard.Error as siblings.
 *
 * @component
 * @example
 * ```tsx
 * // Full control with render props
 * <GiftCard.Raw asChild>
 *   {({ giftCard, isLoading, error }) => {
 *     if (isLoading) return <div>Loading gift card...</div>;
 *     if (error) return <div>Error: {error}</div>;
 *     return (
 *       <div className="flex flex-col gap-4">
 *         <h2>Gift Card: {giftCard.name}</h2>
 *         <p>ID: {giftCard.product_id}</p>
 *       </div>
 *     );
 *   }}
 * </GiftCard.Raw>
 * ```
 */
export declare const Raw: React.ForwardRefExoticComponent<RawProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the GiftCard Image component
 */
type ImageProps = Omit<React.ComponentProps<typeof WixMediaImage>, 'src' | 'media'>;
/**
 * Displays the gift card image using WixMediaImage
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <GiftCard.Image className="w-full h-full object-cover" />
 *
 * // asChild with primitive
 * <GiftCard.Image asChild>
 *   <img className="w-full h-full object-cover" />
 * </GiftCard.Image>
 *
 * // asChild with react component
 * <GiftCard.Image asChild>
 *   {React.forwardRef(({src, ...props}, ref) => (
 *     <img ref={ref} {...props} src={src} className="w-full h-full object-cover" />
 *   ))}
 * </GiftCard.Image>
 * ```
 */
export declare const Image: React.ForwardRefExoticComponent<Omit<ImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
/**
 * Data exposed by the GiftCard Name component
 */
export interface GiftCardNameData {
    /** Gift card product name */
    name: string;
}
/**
 * Props for GiftCard Name component
 */
export interface NameProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<GiftCardNameData>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Displays the gift card product name with customizable rendering.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <GiftCard.Name className="text-2xl font-bold" />
 *
 * // asChild with primitive
 * <GiftCard.Name asChild>
 *   <h1 className="text-4xl font-bold" />
 * </GiftCard.Name>
 *
 * // asChild with react component
 * <GiftCard.Name asChild>
 *   {React.forwardRef(({ name, ...props }, ref) => (
 *     <h1 ref={ref} {...props} className="text-4xl font-bold">
 *       {name}
 *     </h1>
 *   ))}
 * </GiftCard.Name>
 * ```
 */
export declare const Name: React.ForwardRefExoticComponent<NameProps & React.RefAttributes<HTMLElement>>;
/**
 * Data exposed by the GiftCard Description component
 */
export interface GiftCardDescriptionData {
    /** Gift card product description */
    description: string;
}
/**
 * Props for GiftCard Description component
 */
export interface DescriptionProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<GiftCardDescriptionData>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Renders the gift card product description.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <GiftCard.Description className="text-content-secondary" />
 *
 * // asChild with primitive
 * <GiftCard.Description asChild>
 *   <p className="text-sm" />
 * </GiftCard.Description>
 *
 * // asChild with react component
 * <GiftCard.Description asChild>
 *   {React.forwardRef(({ description, ...props }, ref) => (
 *     <p ref={ref} {...props}>{description}</p>
 *   ))}
 * </GiftCard.Description>
 * ```
 */
export declare const Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for GiftCard Loading component
 */
export interface LoadingProps {
    /** CSS classes to apply to the default element */
    className?: string;
    /** Content to show while loading */
    children?: React.ReactNode;
}
/**
 * Displays loading state indicator.
 * Only renders content when isLoading is true.
 *
 * @component
 * @example
 * ```tsx
 * <GiftCard.Loading className="text-gray-500">
 *   Loading...
 * </GiftCard.Loading>
 * ```
 */
export declare const Loading: React.ForwardRefExoticComponent<LoadingProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Props for GiftCard Error component
 */
export interface ErrorProps {
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Displays error state.
 * Only renders when there's an error.
 *
 * @component
 * @example
 * ```tsx
 * <GiftCard.Error className="text-red-500" />
 * ```
 */
export declare const Error: React.ForwardRefExoticComponent<ErrorProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Data exposed by the PresetVariants component via render props
 */
export interface PresetVariantsData {
    /** Array of preset variants */
    presetVariants: CoreGiftCard.PresetVariantItemData[];
}
/**
 * Props for the PresetVariants component
 */
export interface PresetVariantsProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild, or ReactNode for default rendering */
    children?: React.ReactNode | AsChildChildren<PresetVariantsData>;
    /** CSS classes to apply to the default element */
    className?: string;
    /** Label displayed above the variants */
    label?: string;
    /** Empty state to display when no variants are available */
    emptyState?: React.ReactNode;
}
/**
 * Container component for preset variant selection.
 * Provides label and empty state support.
 *
 * @component
 * @example
 * ```tsx
 * // With label and empty state
 * <GiftCard.PresetVariants label="Select Amount" emptyState={<div>No variants</div>}>
 *   <GiftCard.PresetVariantRepeater>
 *     <GiftCard.PresetVariant.Amount />
 *   </GiftCard.PresetVariantRepeater>
 *   <GiftCard.CustomVariantTrigger label="Other amount" />
 * </GiftCard.PresetVariants>
 * ```
 */
export declare const PresetVariants: React.ForwardRefExoticComponent<PresetVariantsProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Props for the PresetVariantRepeater component
 */
export interface PresetVariantRepeaterProps {
    /** Children to render for each preset variant */
    children: React.ReactNode;
    /** CSS classes to apply to each variant container */
    className?: string;
}
/**
 * Repeater component that renders children for each preset variant.
 * Creates a PresetVariant context for each variant that child components can access.
 *
 * @component
 * @example
 * ```tsx
 * <GiftCard.PresetVariantRepeater>
 *   <GiftCard.PresetVariant.Amount />
 * </GiftCard.PresetVariantRepeater>
 * ```
 */
export declare const PresetVariantRepeater: {
    (props: PresetVariantRepeaterProps): React.ReactNode;
    displayName: string;
};
/**
 * Data exposed by the PresetVariant.Amount component via render props
 */
export interface PresetVariantAmountData {
    /** Variant ID */
    id: string;
    /** Price amount as number (what the customer pays) */
    price: number;
    /** Original value as number (what the gift card is worth) */
    value: number;
    /** Whether this variant has a discount (price < value) */
    hasDiscount: boolean;
    /** Whether this variant has a custom image */
    hasImage: boolean;
    /** Whether this variant is currently selected */
    isSelected: boolean;
    /** Currency code for Money formatting */
    currencyCode: string;
    /** Locale code for Money formatting */
    locale: string;
}
/**
 * Props for the PresetVariant.Amount component
 */
export interface PresetVariantAmountProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<PresetVariantAmountData>;
    /** CSS classes to apply to the button */
    className?: string;
}
/**
== * PresetVariant namespace containing preset variant sub-components
 */
export declare const PresetVariant: {
    readonly Amount: React.ForwardRefExoticComponent<PresetVariantAmountProps & React.RefAttributes<HTMLButtonElement>>;
};
/**
 * Data exposed by the CurrentPrice component via render props.
 * Contains raw numeric amounts - use Money component for formatting.
 */
export interface GiftCardCurrentPriceData {
    /** Price amount as number (what the customer pays) */
    price: number;
    /** Original value as number (what the gift card is worth) */
    value: number;
    /** Whether current selection has a discount (price < value) */
    hasDiscount: boolean;
    /** Currency code from service config (e.g., "ILS", "USD") */
    currencyCode: string;
    /** Locale code from service config (e.g., "en-US", "he-IL") */
    locale: string;
}
/**
 * Props for the GiftCard CurrentPrice component
 */
export interface CurrentPriceProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild, or ReactNode for default rendering */
    children?: AsChildChildren<GiftCardCurrentPriceData>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Displays the current price based on the selected variant (preset or custom amount).
 * Uses the Money component for formatting. Supports discount display when price differs from value.
 *
 * Price vs Value:
 * - `price` - What the customer pays (raw number)
 * - `value` - What the gift card is worth (raw number)
 * - `hasDiscount` - `true` when `price < value`, indicating a discounted variant
 *
 * @component
 * @example
 * ```tsx
 * // Default usage - shows price, with strikethrough value when discounted
 * <GiftCard.CurrentPrice className="text-3xl font-bold text-brand-primary" />
 *
 * // asChild with primitive
 * <GiftCard.CurrentPrice asChild>
 *   <span className="text-2xl font-bold" />
 * </GiftCard.CurrentPrice>
 *
 * // asChild with react component for full control
 * <GiftCard.CurrentPrice asChild>
 *   {React.forwardRef(({ price, value, hasDiscount, currencyCode, ...props }, ref) => (
 *     <div ref={ref} {...props} className="flex items-baseline gap-3">
 *       {hasDiscount && (
 *         <Money money={{ amount: value, currency: currencyCode }} className="line-through text-lg text-content-muted" />
 *       )}
 *       <Money money={{ amount: price, currency: currencyCode }} className="text-4xl font-bold text-brand-primary" />
 *     </div>
 *   ))}
 * </GiftCard.CurrentPrice>
 * ```
 */
export declare const CurrentPrice: React.ForwardRefExoticComponent<CurrentPriceProps & React.RefAttributes<HTMLElement>>;
/**
 * Data exposed by the CustomVariantTrigger component via render props
 */
export interface GiftCardCustomVariantTriggerData {
    /** Whether the custom variant is currently selected */
    isSelected: boolean;
    /** Function to select the custom variant */
    onClick: () => void;
}
/**
 * Props for the GiftCard CustomVariantTrigger component
 */
export interface CustomVariantTriggerProps {
    /** Label text for the trigger button */
    label?: string;
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild, or ReactNode for default rendering */
    children?: AsChildChildren<GiftCardCustomVariantTriggerData>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Trigger button for selecting custom amount option.
 * Use alongside PresetVariantRepeater to allow custom amounts.
 * Only renders when custom variant is enabled for the gift card.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <GiftCard.CustomVariantTrigger label="Other amount" className="px-6 py-4 border-2 border-dashed rounded-xl" />
 *
 * // asChild with primitive
 * <GiftCard.CustomVariantTrigger label="Other amount" asChild>
 *   <button className="px-6 py-4 border-2 border-dashed rounded-xl hover:border-brand-primary" />
 * </GiftCard.CustomVariantTrigger>
 *
 * // asChild with react component
 * <GiftCard.CustomVariantTrigger>
 *   {React.forwardRef(({ isSelected, onClick, ...props }, ref) => (
 *     <button
 *       ref={ref}
 *       {...props}
 *       onClick={onClick}
 *       data-selected={isSelected}
 *       className="px-6 py-4 border-2 border-dashed rounded-xl"
 *     >
 *       Custom amount
 *     </button>
 *   ))}
 * </GiftCard.CustomVariantTrigger>
 * ```
 */
export declare const CustomVariantTrigger: React.ForwardRefExoticComponent<CustomVariantTriggerProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Data exposed by the CustomAmountInput component via render props
 */
export interface GiftCardCustomAmountInputData {
    /** Current custom amount value (defaults to 0) */
    value: number;
    /** Function to update the custom amount */
    setValue: (amount: number) => void;
    /** Minimum allowed amount (null if no minimum) */
    min: number | null;
    /** Maximum allowed amount (null if no maximum) */
    max: number | null;
    /** Whether the current value is valid (within min/max range) */
    isValid: boolean;
    /** Whether the form has been submitted */
    isFormSubmitted: boolean;
    /** Whether the input should be visible (custom variant is selected) */
    isVisible: boolean;
    /** Currency code from service config (e.g., "ILS", "USD") */
    currencyCode: string;
    /** Currency symbol derived from currency code (e.g., "$", "€", "₪") */
    currencySymbol: string;
}
/**
 * Props for the GiftCard CustomAmountInput component
 */
export interface CustomAmountInputProps {
    /** Label for the input */
    label?: string;
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild, or ReactNode for default rendering */
    children?: AsChildChildren<GiftCardCustomAmountInputData>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Input for entering a custom gift card amount.
 * Only renders when custom variant is selected.
 * The custom amount changes the currentPrice value displayed by GiftCard.CurrentPrice.
 *
 * Validation:
 * - Amount must be within min/max range defined by the product's custom variant
 * - data-invalid attribute is applied when isFormSubmitted is true and amount is outside the allowed range
 * - The isFormSubmitted flag is controlled by the checkout service (set to true after form submission attempts)
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <GiftCard.CustomAmountInput
 *   label="Enter amount"
 *   className="w-full p-4 border-2 rounded-xl text-2xl font-bold text-center"
 * />
 *
 * // asChild with primitive
 * <GiftCard.CustomAmountInput label="Enter amount" asChild>
 *   <input type="number" className="w-full p-4 border-2 rounded-xl" />
 * </GiftCard.CustomAmountInput>
 *
 * // asChild with react component with validation error display
 * <GiftCard.CustomAmountInput>
 *   {React.forwardRef(({ value, setValue, min, max, isValid, isFormSubmitted, isVisible, currencyCode, ...props }, ref) =>
 *     isVisible && (
 *       <div className="space-y-2">
 *         <label>Enter amount ({currencyCode})</label>
 *         <input
 *           ref={ref}
 *           {...props}
 *           type="number"
 *           value={value || ''}
 *           onChange={(e) => setValue(parseFloat(e.target.value) || 0)}
 *           min={min ?? undefined}
 *           max={max ?? undefined}
 *           data-invalid={isFormSubmitted && !isValid}
 *         />
 *         {isFormSubmitted && !isValid && (
 *           <p className="text-red-500">
 *             {min && max
 *               ? `Amount must be between ${min} and ${max}`
 *               : min
 *               ? `Amount must be at least ${min}`
 *               : max
 *               ? `Amount must be no more than ${max}`
 *               : 'Please enter a valid amount'}
 *           </p>
 *         )}
 *       </div>
 *     )
 *   )}
 * </GiftCard.CustomAmountInput>
 * ```
 */
export declare const CustomAmountInput: React.ForwardRefExoticComponent<CustomAmountInputProps & React.RefAttributes<HTMLInputElement>>;
/**
 * Data exposed by the Quantity component via render props
 */
export interface GiftCardQuantityData {
    /** Current quantity value */
    quantity: number;
    /** Function to set quantity value */
    setQuantity: (quantity: number) => void;
}
/**
 * Props for the GiftCard Quantity component
 */
export interface QuantityProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<GiftCardQuantityData>;
    /** CSS classes to apply to the container */
    className?: string;
    /** How much to increment/decrement (default: 1) */
    steps?: number;
    /** Label displayed above the quantity input */
    label?: string;
}
/**
 * Container for quantity selection controls.
 * Renders a Quantity.Root from @wix/headless-components connected to the gift card service state.
 *
 * Use with Quantity.Decrement, Quantity.Input, Quantity.Increment components from @wix/headless-components.
 *
 * @component
 * @example
 * ```tsx
 * import { Quantity } from '@wix/headless-components/react';
 *
 * // Default usage - renders built-in Quantity components
 * <GiftCard.Quantity steps={1} />
 *
 * // With label and custom styling
 * <GiftCard.Quantity
 *   label="Quantity"
 *   className="flex items-center gap-2"
 *   steps={1}
 * />
 *
 * // asChild with custom Quantity children (use platform Quantity components)
 * <GiftCard.Quantity asChild steps={1}>
 *   {({ quantity, setQuantity }) => (
 *     <QuantityComponent.Root
 *       initialValue={quantity}
 *       onValueChange={setQuantity}
 *       steps={1}
 *       min={1}
 *     >
 *       <Quantity.Decrement className="px-4 py-2 border rounded-l-lg" />
 *       <Quantity.Input className="w-16 text-center border-y" />
 *       <Quantity.Increment className="px-4 py-2 border rounded-r-lg" />
 *     </QuantityComponent.Root>
 *   )}
 * </GiftCard.Quantity>
 *
 * // asChild with fully custom implementation
 * <GiftCard.Quantity asChild>
 *   {React.forwardRef(({ quantity, setQuantity, ...props }, ref) => (
 *     <div ref={ref} {...props} className="flex items-center gap-2">
 *       <button
 *         onClick={() => setQuantity(quantity - 1)}
 *         disabled={quantity <= 1}
 *         className="w-10 h-10 border rounded-lg"
 *       >
 *         -
 *       </button>
 *       <span className="w-16 text-center text-2xl font-bold">
 *         {quantity}
 *       </span>
 *       <button
 *         onClick={() => setQuantity(quantity + 1)}
 *         className="w-10 h-10 border rounded-lg"
 *       >
 *         +
 *       </button>
 *     </div>
 *   ))}
 * </GiftCard.Quantity>
 * ```
 */
export declare const Quantity: React.ForwardRefExoticComponent<QuantityProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Data exposed by the GiftToggle component via render props
 */
export interface GiftCardGiftToggleData {
    /** Whether this is a gift purchase (for someone else) */
    isGift: boolean;
    /** Function to set whether this is a gift purchase */
    setIsGift: (value: boolean) => void;
}
/**
 * Props for the GiftCard GiftToggle component
 */
export interface GiftToggleProps {
    /** Label displayed above the toggle (optional) */
    label?: string;
    /** Label for "For someone else" option */
    forSomeoneLabel?: string;
    /** Label for "For myself" option */
    forMyselfLabel?: string;
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<GiftCardGiftToggleData>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Toggle between "For someone else" (gift) and "For myself" purchase modes.
 * When isGift is true, the recipient form should be shown.
 * When isGift is false, the recipient form should be hidden.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <GiftCard.GiftToggle
 *   label="Who is the gift card for?"
 *   forSomeoneLabel="For someone else"
 *   forMyselfLabel="For myself"
 *   className="flex gap-2"
 * />
 *
 * // asChild with primitive
 * <GiftCard.GiftToggle
 *   label="Who is the gift card for?"
 *   forSomeoneLabel="For someone else"
 *   forMyselfLabel="For myself"
 *   asChild
 * >
 *   <div className="space-y-3" />
 * </GiftCard.GiftToggle>
 *
 * // asChild with react component
 * <GiftCard.GiftToggle>
 *   {React.forwardRef(({ isGift, setIsGift, ...props }, ref) => (
 *     <div ref={ref} {...props} className="space-y-3">
 *       <h3>Who is the gift card for?</h3>
 *       <div className="flex rounded-xl overflow-hidden border-2">
 *         <button
 *           onClick={() => setIsGift(true)}
 *           data-selected={isGift}
 *           className="flex-1 px-6 py-3 data-[selected]:bg-brand-primary data-[selected]:text-white"
 *         >
 *           For someone else
 *         </button>
 *         <button
 *           onClick={() => setIsGift(false)}
 *           data-selected={!isGift}
 *           className="flex-1 px-6 py-3 data-[selected]:bg-brand-primary data-[selected]:text-white"
 *         >
 *           For myself
 *         </button>
 *       </div>
 *     </div>
 *   ))}
 * </GiftCard.GiftToggle>
 * ```
 */
export declare const GiftToggle: React.ForwardRefExoticComponent<GiftToggleProps & React.RefAttributes<HTMLElement>>;
/**
 * Data exposed by the RecipientEmail component via render props
 */
export interface GiftCardRecipientEmailData {
    /** Current email value */
    value: string;
    /** Function to update the email value */
    setValue: (value: string) => void;
    /** Whether the email is valid */
    isValid: boolean;
    /** Whether the form has been submitted */
    isFormSubmitted: boolean;
    /** Whether the input should be visible (isGift is true) */
    isVisible: boolean;
}
/**
 * Props for the GiftCard RecipientEmail component
 */
export interface RecipientEmailProps {
    /** Label for the email input */
    label?: string;
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<GiftCardRecipientEmailData>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Input for entering recipient email address.
 * Provides email state, validation, and error display control.
 *
 * The `isFormSubmitted` flag is controlled by the checkout service and indicates
 * whether the form has been submitted
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <GiftCard.RecipientEmail label="Recipient email" className="w-full p-3 border rounded-lg" />
 *
 * // asChild with primitive
 * <GiftCard.RecipientEmail label="Recipient email" asChild>
 *   <input type="email" className="w-full p-3 border-2 rounded-lg" />
 * </GiftCard.RecipientEmail>
 *
 * // asChild with react component
 * <GiftCard.RecipientEmail>
 *   {React.forwardRef(({ value, setValue, isValid, isFormSubmitted, ...props }, ref) => (
 *     <div className="space-y-2">
 *       <label className="text-sm font-medium">
 *         Email <span className="text-status-error">*</span>
 *       </label>
 *       <input
 *         ref={ref}
 *         {...props}
 *         type="email"
 *         value={value}
 *         onChange={(e) => setValue(e.target.value)}
 *         data-invalid={isFormSubmitted && !isValid}
 *         className="w-full p-3 border-2 rounded-lg data-[invalid]:border-status-error"
 *       />
 *       {isFormSubmitted && !isValid && (
 *         <p className="text-sm text-status-error">Please enter a valid email</p>
 *       )}
 *     </div>
 *   ))}
 * </GiftCard.RecipientEmail>
 * ```
 */
export declare const RecipientEmail: React.ForwardRefExoticComponent<RecipientEmailProps & React.RefAttributes<HTMLInputElement>>;
/**
 * Data exposed by the RecipientName component via render props
 */
export interface GiftCardRecipientNameData {
    /** Current name value */
    value: string;
    /** Function to update the name value */
    setValue: (value: string) => void;
    /** Whether the input should be visible (isGift is true) */
    isVisible: boolean;
}
/**
 * Props for the GiftCard RecipientName component
 */
export interface RecipientNameProps {
    /** Label for the name input */
    label?: string;
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<GiftCardRecipientNameData>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Input for entering recipient name.
 * Only renders when isGift is true (purchasing for someone else).
 * This field is optional - no validation is required.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <GiftCard.RecipientName label="Recipient name" className="w-full p-3 border rounded-lg" />
 *
 * // asChild with primitive
 * <GiftCard.RecipientName label="Recipient name" asChild>
 *   <input type="text" className="w-full p-3 border-2 rounded-lg" />
 * </GiftCard.RecipientName>
 *
 * // asChild with react component
 * <GiftCard.RecipientName>
 *   {React.forwardRef(({ value, setValue, isVisible, ...props }, ref) =>
 *     isVisible && (
 *       <div className="space-y-2">
 *         <label className="text-sm font-medium">Name (optional)</label>
 *         <input
 *           ref={ref}
 *           {...props}
 *           type="text"
 *           value={value}
 *           onChange={(e) => setValue(e.target.value)}
 *           className="w-full p-3 border-2 rounded-lg"
 *         />
 *       </div>
 *     )
 *   )}
 * </GiftCard.RecipientName>
 * ```
 */
export declare const RecipientName: React.ForwardRefExoticComponent<RecipientNameProps & React.RefAttributes<HTMLInputElement>>;
/**
 * Data exposed by the RecipientDate component via render props
 */
export interface GiftCardRecipientDateData {
    /** Current delivery date value */
    value: Date;
    /** Formatted date string according to locale (e.g., "Dec 25, 2025") */
    formattedValue: string;
    /** Date value formatted for HTML date input (YYYY-MM-DD) */
    inputValue: string;
    /** Function to update the delivery date */
    setValue: (date: Date) => void;
    /** Whether the input should be visible (isGift is true) */
    isVisible: boolean;
}
/**
 * Props for the GiftCard RecipientDate component
 */
export interface RecipientDateProps {
    /** Label for the date input */
    label?: string;
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<GiftCardRecipientDateData>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Input for selecting gift card delivery date.
 * Only renders when isGift is true (purchasing for someone else).
 * Provides both raw Date value and locale-formatted string.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <GiftCard.RecipientDate label="Delivery date" className="w-full p-3 border rounded-lg" />
 *
 * // asChild with primitive
 * <GiftCard.RecipientDate label="Delivery date" asChild>
 *   <input type="date" className="w-full p-3 border-2 rounded-lg" />
 * </GiftCard.RecipientDate>
 *
 * // asChild with react component - using inputValue for date input and formattedValue for display
 * <GiftCard.RecipientDate>
 *   {React.forwardRef(({ value, formattedValue, inputValue, setValue, isVisible, ...props }, ref) =>
 *     isVisible && (
 *       <div className="space-y-2">
 *         <label className="text-sm font-medium">Delivery date</label>
 *         <input
 *           ref={ref}
 *           {...props}
 *           type="date"
 *           value={inputValue}
 *           onChange={(e) => setValue(new Date(e.target.value))}
 *           className="w-full p-3 border-2 rounded-lg"
 *         />
 *         <p className="text-xs text-muted">Selected: {formattedValue}</p>
 *       </div>
 *     )
 *   )}
 * </GiftCard.RecipientDate>
 * ```
 */
export declare const RecipientDate: React.ForwardRefExoticComponent<RecipientDateProps & React.RefAttributes<HTMLInputElement>>;
/**
 * Data exposed by the RecipientMessage component via render props
 */
export interface GiftCardRecipientMessageData {
    /** Current message value */
    value: string;
    /** Function to update the message value */
    setValue: (value: string) => void;
    /** Whether the input should be visible (isGift is true) */
    isVisible: boolean;
}
/**
 * Props for the GiftCard RecipientMessage component
 */
export interface RecipientMessageProps {
    /** Label for the message textarea */
    label?: string;
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<GiftCardRecipientMessageData>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Textarea for entering a personal message to include with the gift card.
 * Only renders when isGift is true (purchasing for someone else).
 * This field is optional - no validation is required.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <GiftCard.RecipientMessage label="Message" className="w-full p-3 border rounded-lg" />
 *
 * // asChild with primitive
 * <GiftCard.RecipientMessage label="Message" asChild>
 *   <textarea className="w-full p-3 border-2 rounded-lg resize-none" rows={4} />
 * </GiftCard.RecipientMessage>
 *
 * // asChild with react component
 * <GiftCard.RecipientMessage>
 *   {React.forwardRef(({ value, setValue, isVisible, ...props }, ref) =>
 *     isVisible && (
 *       <div className="space-y-2">
 *         <label className="text-sm font-medium">Message (optional)</label>
 *         <textarea
 *           ref={ref}
 *           {...props}
 *           value={value}
 *           onChange={(e) => setValue(e.target.value)}
 *           className="w-full p-3 border-2 rounded-lg resize-none"
 *           rows={4}
 *         />
 *       </div>
 *     )
 *   )}
 * </GiftCard.RecipientMessage>
 * ```
 */
export declare const RecipientMessage: React.ForwardRefExoticComponent<RecipientMessageProps & React.RefAttributes<HTMLTextAreaElement>>;
/**
 * Data exposed by the RecipientForm component via render props
 */
export interface GiftCardRecipientFormData {
    /** Whether the form should be visible (isGift is true) */
    isVisible: boolean;
    /** Whether the form has been submitted */
    isFormSubmitted: boolean;
    /** Email field data */
    email: {
        /** Current email value */
        value: string;
        /** Function to update the email value */
        setValue: (value: string) => void;
        /** Whether the email is valid */
        isValid: boolean;
    };
    /** Name field data */
    name: {
        /** Current name value */
        value: string;
        /** Function to update the name value */
        setValue: (value: string) => void;
    };
    /** Delivery date field data */
    deliverAt: {
        /** Current delivery date value */
        value: Date;
        /** Formatted date string according to locale (e.g., "Dec 25, 2025") */
        formattedValue: string;
        /** Date value formatted for HTML date input (YYYY-MM-DD) */
        inputValue: string;
        /** Function to update the delivery date */
        setValue: (date: Date) => void;
    };
    /** Message field data */
    message: {
        /** Current message value */
        value: string;
        /** Function to update the message value */
        setValue: (value: string) => void;
    };
}
/**
 * Props for the GiftCard RecipientForm component
 */
export interface RecipientFormProps {
    /** Label for the email input */
    emailLabel?: string;
    /** Label for the name input */
    nameLabel?: string;
    /** Label for the date input */
    dateLabel?: string;
    /** Label for the message textarea */
    messageLabel?: string;
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<GiftCardRecipientFormData>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Form for entering recipient details when purchasing a gift card for someone else.
 * Only renders when isGift is true (purchasing for someone else).
 *
 * This is a convenience component that combines all recipient fields (email, name, date, message).
 * For granular control over layout and styling, use the individual components:
 * `GiftCard.RecipientEmail`, `GiftCard.RecipientName`, `GiftCard.RecipientDate`, `GiftCard.RecipientMessage`.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <GiftCard.RecipientForm
 *   emailLabel="Recipient email"
 *   nameLabel="Recipient name"
 *   dateLabel="Delivery date"
 *   messageLabel="Message"
 *   className="space-y-4"
 * />
 *
 * // asChild with primitive
 * <GiftCard.RecipientForm
 *   emailLabel="Recipient email"
 *   nameLabel="Recipient name"
 *   dateLabel="Delivery date"
 *   messageLabel="Message"
 *   asChild
 * >
 *   <div className="space-y-6 p-6 bg-surface-secondary rounded-xl" />
 * </GiftCard.RecipientForm>
 *
 * // asChild with react component
 * <GiftCard.RecipientForm>
 *   {React.forwardRef(({
 *     isVisible,
 *     isFormSubmitted,
 *     email,
 *     name,
 *     deliverAt,
 *     message,
 *     ...props
 *   }, ref) =>
 *     isVisible && (
 *       <div ref={ref} {...props} className="space-y-6 p-6 bg-surface-secondary rounded-xl">
 *         <h3 className="text-lg font-semibold">Recipient Details</h3>
 *
 *         <div className="space-y-2">
 *           <label className="text-sm font-medium">
 *             Recipient email <span className="text-status-error">*</span>
 *           </label>
 *           <input
 *             type="email"
 *             value={email.value}
 *             onChange={(e) => email.setValue(e.target.value)}
 *             data-invalid={isFormSubmitted && !email.isValid}
 *             className="w-full p-3 border-2 rounded-lg data-[invalid]:border-status-error"
 *           />
 *           {isFormSubmitted && !email.isValid && (
 *             <p className="text-sm text-status-error">Please enter a valid email</p>
 *           )}
 *         </div>
 *
 *         <div className="space-y-2">
 *           <label className="text-sm font-medium">Recipient name (optional)</label>
 *           <input
 *             type="text"
 *             value={name.value}
 *             onChange={(e) => name.setValue(e.target.value)}
 *             className="w-full p-3 border-2 rounded-lg"
 *           />
 *         </div>
 *
 *         <div className="space-y-2">
 *           <label className="text-sm font-medium">Delivery date</label>
 *           <input
 *             type="date"
 *             value={deliverAt.inputValue}
 *             onChange={(e) => deliverAt.setValue(new Date(e.target.value))}
 *             className="w-full p-3 border-2 rounded-lg"
 *           />
 *           <p className="text-xs text-content-muted">
 *             Scheduled for: {deliverAt.formattedValue}
 *           </p>
 *         </div>
 *
 *         <div className="space-y-2">
 *           <label className="text-sm font-medium">Message (optional)</label>
 *           <textarea
 *             value={message.value}
 *             onChange={(e) => message.setValue(e.target.value)}
 *             className="w-full p-3 border-2 rounded-lg resize-none"
 *             rows={4}
 *           />
 *         </div>
 *       </div>
 *     )
 *   )}
 * </GiftCard.RecipientForm>
 * ```
 */
export declare const RecipientForm: React.ForwardRefExoticComponent<RecipientFormProps & React.RefAttributes<HTMLElement>>;
/**
 * Data exposed by the GiftCard.Action.AddToCart component via render props
 */
export interface GiftCardActionAddToCartData {
    /** Function to execute add to cart (validates first, then adds) */
    onClick: () => Promise<void>;
    /** Whether the add to cart action is currently loading */
    isLoading: boolean;
}
/**
 * Props for the GiftCard Action.AddToCart component
 */
export interface ActionAddToCartProps {
    /** Label for the button */
    label?: string;
    /** Label to show while loading */
    loadingLabel?: string;
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<GiftCardActionAddToCartData>;
    /** CSS classes to apply to the default element */
    className?: string;
    /** Callback fired after successful add to cart */
    onSuccess?: () => void | Promise<void>;
}
/**
 * Add to cart button for gift cards.
 * Validates the form and adds the gift card to cart.
 *
 * Validation flow:
 * 1. When clicked, sets isFormSubmitted to true (makes validation errors visible)
 * 2. Checks if form is valid (variant selected, valid custom amount, valid email if gift)
 * 3. If invalid, exits early (user sees validation errors)
 * 4. If valid, adds the gift card line items to cart
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <GiftCard.Action.AddToCart
 *   label="Add to Cart"
 *   loadingLabel="Adding..."
 *   className="w-full py-4 bg-brand-primary text-white rounded-xl font-semibold"
 * />
 *
 * // asChild with primitive
 * <GiftCard.Action.AddToCart asChild>
 *   <button className="w-full py-4 bg-brand-primary text-white rounded-xl font-semibold" />
 * </GiftCard.Action.AddToCart>
 *
 * // asChild with react component (full control)
 * <GiftCard.Action.AddToCart asChild>
 *   {React.forwardRef(({ onClick, isLoading, ...props }, ref) => (
 *     <button
 *       ref={ref}
 *       {...props}
 *       onClick={onClick}
 *       disabled={isLoading}
 *       className="w-full py-4 bg-brand-primary text-white rounded-xl font-semibold disabled:opacity-50"
 *     >
 *       {isLoading ? (
 *         <span className="flex items-center justify-center gap-2">
 *           <Spinner className="w-5 h-5" />
 *           Adding to cart...
 *         </span>
 *       ) : (
 *         'Add to Cart'
 *       )}
 *     </button>
 *   ))}
 * </GiftCard.Action.AddToCart>
 *
 * // With success callback
 * <GiftCard.Action.AddToCart
 *   label="Add to Cart"
 *   onSuccess={() => {
 *     toast.success('Added to cart!');
 *   }}
 * />
 * ```
 */
export declare const ActionAddToCart: React.ForwardRefExoticComponent<ActionAddToCartProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Data exposed by the GiftCard.Action.BuyNow component via render props
 */
export interface GiftCardActionBuyNowData {
    /** Function to execute buy now (validates first, then redirects to checkout) */
    onClick: () => Promise<void>;
    /** Whether the buy now action is currently loading */
    isLoading: boolean;
}
/**
 * Props for the GiftCard Action.BuyNow component
 */
export interface ActionBuyNowProps {
    /** Label for the button */
    label?: string;
    /** Label to show while loading */
    loadingLabel?: string;
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<GiftCardActionBuyNowData>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Buy now button for gift cards.
 * Validates the form and redirects to checkout.
 *
 * Validation flow:
 * 1. When clicked, sets isFormSubmitted to true
 * 2. Checks if form is valid (variant selected, valid custom amount, valid email if gift)
 * 3. If invalid, exits early (user sees validation errors)
 * 4. If valid, redirects to checkout with the gift card line items
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <GiftCard.Action.BuyNow
 *   label="Buy Now"
 *   loadingLabel="Processing..."
 *   className="w-full py-4 bg-brand-primary text-white rounded-xl font-semibold"
 * />
 *
 * // asChild with primitive
 * <GiftCard.Action.BuyNow asChild>
 *   <button className="w-full py-4 bg-brand-primary text-white rounded-xl font-semibold" />
 * </GiftCard.Action.BuyNow>
 *
 * // asChild with react component (full control)
 * <GiftCard.Action.BuyNow asChild>
 *   {React.forwardRef(({ onClick, isLoading, ...props }, ref) => (
 *     <button
 *       ref={ref}
 *       {...props}
 *       onClick={onClick}
 *       disabled={isLoading}
 *       className="w-full py-4 bg-brand-primary text-white rounded-xl font-semibold disabled:opacity-50"
 *     >
 *       {isLoading ? (
 *         <span className="flex items-center justify-center gap-2">
 *           <Spinner className="w-5 h-5" />
 *           Processing...
 *         </span>
 *       ) : (
 *         'Buy Now'
 *       )}
 *     </button>
 *   ))}
 * </GiftCard.Action.BuyNow>
 * ```
 */
export declare const ActionBuyNow: React.ForwardRefExoticComponent<ActionBuyNowProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Namespace containing all gift card action components.
 * These components provide consistent interfaces for gift card purchase actions.
 *
 * @namespace
 * @example
 * ```tsx
 * // Add to cart with validation
 * <GiftCard.Action.AddToCart
 *   label="Add to Cart"
 *   loadingLabel="Adding..."
 *   className="btn-primary"
 * />
 *
 * // Buy now with validation
 * <GiftCard.Action.BuyNow
 *   label="Buy Now"
 *   loadingLabel="Processing..."
 *   className="btn-primary"
 * />
 * ```
 */
export declare const Action: {
    /** Add to Cart button for adding gift card to the current cart */
    readonly AddToCart: React.ForwardRefExoticComponent<ActionAddToCartProps & React.RefAttributes<HTMLButtonElement>>;
    /** Buy Now button for immediate checkout with the gift card */
    readonly BuyNow: React.ForwardRefExoticComponent<ActionBuyNowProps & React.RefAttributes<HTMLButtonElement>>;
};
export {};