@wix/headless-gift-voucher 0.0.1

package/cjs/dist/react/GiftCard.d.ts

@@ -0,0 +1,1318 @@
+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 validation errors should be displayed */
+    showError: 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 showError is true and amount is outside the allowed range
+ * - The showError 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, showError, 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={showError && !isValid}
+ *         />
+ *         {showError && !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 to show validation errors (e.g., after form submission attempt) */
+    showError: 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 `showError` flag is controlled by the checkout service and indicates
+ * whether validation errors should be displayed (typically set to true after
+ * a form submission attempt).
+ *
+ * @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, showError, ...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={showError && !isValid}
+ *         className="w-full p-3 border-2 rounded-lg data-[invalid]:border-status-error"
+ *       />
+ *       {showError && !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 to show validation errors (e.g., after form submission attempt) */
+    showErrors: 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,
+ *     showErrors,
+ *     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={showErrors && !email.isValid}
+ *             className="w-full p-3 border-2 rounded-lg data-[invalid]:border-status-error"
+ *           />
+ *           {showErrors && !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 (triggers showErrors), then adds the gift card to cart.
+ *
+ * Validation flow:
+ * 1. When clicked, sets showErrors 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 (triggers showErrors), then redirects to checkout.
+ *
+ * Validation flow:
+ * 1. When clicked, sets showErrors 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, 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 {};
+//# sourceMappingURL=GiftCard.d.ts.map