@wix/headless-gift-voucher 0.0.1

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

@@ -0,0 +1,863 @@
+import { GiftCardServiceConfig, GiftCardProduct } from '../../services/gift-card-service.js';
+import { type LineItem } from '../../services/gift-card-checkout-service.js';
+export interface RootProps {
+    children: React.ReactNode;
+    giftCardServiceConfig: GiftCardServiceConfig;
+}
+/**
+ * Root component that provides the GiftCard service context to its children.
+ * 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 />
+ * </GiftCard.Root>
+ *
+ * // Without config (auto-fetch)
+ * <GiftCard.Root giftCardServiceConfig={{}}>
+ *   <GiftCard.Name />
+ * </GiftCard.Root>
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;
+/**
+ * Props for GiftCardName headless component
+ */
+export interface GiftCardNameProps {
+    /** Render prop function that receives the gift card name */
+    children: (props: GiftCardNameRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for GiftCardName component
+ */
+export interface GiftCardNameRenderProps {
+    /** Gift card product name */
+    name: string;
+}
+/**
+ * Headless component for displaying the gift card product name
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.Name>
+ *   {({ name }) => (
+ *     <h1>{name}</h1>
+ *   )}
+ * </GiftCard.Name>
+ * ```
+ */
+export declare function Name(props: GiftCardNameProps): import("react").ReactNode;
+/**
+ * Props for GiftCardLoading headless component
+ */
+export interface GiftCardLoadingProps {
+    /** Render prop function that receives loading state */
+    children: (props: GiftCardLoadingRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for GiftCardLoading component
+ */
+export interface GiftCardLoadingRenderProps {
+    /** Whether the gift card is currently loading */
+    isLoading: boolean;
+}
+/**
+ * Headless component for handling loading state
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.Loading>
+ *   {({ isLoading }) => isLoading ? <Spinner /> : null}
+ * </GiftCard.Loading>
+ * ```
+ */
+export declare function Loading(props: GiftCardLoadingProps): import("react").ReactNode;
+/**
+ * Props for GiftCardError headless component
+ */
+export interface GiftCardErrorProps {
+    /** Render prop function that receives error state */
+    children: (props: GiftCardErrorRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for GiftCardError component
+ */
+export interface GiftCardErrorRenderProps {
+    /** Error message, or null if no error */
+    error: string | null;
+}
+/**
+ * Headless component for handling error state
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.Error>
+ *   {({ error }) => error ? <div className="error">{error}</div> : null}
+ * </GiftCard.Error>
+ * ```
+ */
+export declare function Error(props: GiftCardErrorProps): import("react").ReactNode;
+/**
+ * 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 GiftCardRaw headless component
+ */
+export interface GiftCardRawProps {
+    /** Render prop function that receives the gift card state */
+    children: (props: GiftCardRawData) => React.ReactNode;
+}
+/**
+ * Headless component that exposes the gift card data via render props.
+ * Provides access to the gift card product, loading state, and error state.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.Raw>
+ *   {({ giftCard, isLoading, error }) => {
+ *     if (isLoading) return <div>Loading...</div>;
+ *     if (error) return <div>Error: {error}</div>;
+ *     return <div>{giftCard.name}</div>;
+ *   }}
+ * </GiftCard.Raw>
+ * ```
+ */
+export declare function Raw(props: GiftCardRawProps): import("react").ReactNode;
+/**
+ * Render props for GiftCardImage component
+ */
+export interface GiftCardImageRenderProps {
+    /** Gift card image URL (Wix media ID string) - changes based on selected variant */
+    image: string;
+}
+/**
+ * Props for GiftCardImage headless component
+ */
+export interface GiftCardImageProps {
+    /** Render prop function that receives the gift card image */
+    children: (props: GiftCardImageRenderProps) => React.ReactNode;
+}
+/**
+ * Headless component for displaying the gift card image.
+ * The image automatically updates when selecting a variant that has its own image defined.
+ * Returns null if no image is available.
+ *
+ * Behavior:
+ * - Shows the selected preset variant's image if one is defined
+ * - Falls back to the default product image otherwise (including when custom amount is selected)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.Image>
+ *   {({ image }) => (
+ *     <img src={image} alt="Gift Card" />
+ *   )}
+ * </GiftCard.Image>
+ * ```
+ */
+export declare function Image(props: GiftCardImageProps): import("react").ReactNode;
+/**
+ * Render props for GiftCardDescription component
+ */
+export interface GiftCardDescriptionRenderProps {
+    /** Gift card product description */
+    description: string;
+}
+/**
+ * Props for GiftCardDescription headless component
+ */
+export interface GiftCardDescriptionProps {
+    /** Render prop function that receives the gift card description */
+    children: (props: GiftCardDescriptionRenderProps) => React.ReactNode;
+}
+/**
+ * Headless component for displaying the gift card product description.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.Description>
+ *   {({ description }) => (
+ *     <p>{description}</p>
+ *   )}
+ * </GiftCard.Description>
+ * ```
+ */
+export declare function Description(props: GiftCardDescriptionProps): import("react").ReactNode;
+/**
+ * Individual preset variant item data for the repeater context.
+ * Contains all data needed to render and interact with a single preset variant.
+ */
+export interface PresetVariantItemData {
+    /** Preset 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;
+    /** Function to select this variant */
+    select: () => void;
+    /** Currency code from service config (e.g., "ILS", "USD") */
+    currencyCode: string;
+    /** Locale code from service config (e.g., "en-US", "he-IL") */
+    locale: string;
+}
+/**
+ * Render props for PresetVariants component
+ */
+export interface PresetVariantsRenderProps {
+    /** Array of preset variants with computed data */
+    presetVariants: PresetVariantItemData[];
+}
+/**
+ * Props for PresetVariants headless component
+ */
+export interface PresetVariantsProps {
+    /** Render prop function that receives preset variants data */
+    children: (props: PresetVariantsRenderProps) => React.ReactNode;
+}
+/**
+ * Headless component that provides the list of preset variants.
+ * Use this as a container to check for empty state before rendering the repeater.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.PresetVariants>
+ *   {({ presetVariants }) => (
+ *     presetVariants.length > 0 ? (
+ *       <div className="flex gap-2">
+ *         {presetVariants.map(variant => (
+ *           <button key={variant.id} onClick={variant.select}>
+ *             <Money money={{ amount: variant.value, currency: variant.currencyCode }} />
+ *           </button>
+ *         ))}
+ *       </div>
+ *     ) : (
+ *       <div>No variants available</div>
+ *     )
+ *   )}
+ * </GiftCard.PresetVariants>
+ * ```
+ */
+export declare function PresetVariants(props: PresetVariantsProps): import("react").ReactNode;
+/**
+ * Render props for PresetVariantRepeater component
+ */
+export interface PresetVariantRepeaterRenderProps {
+    /** Array of preset variants to iterate over */
+    presetVariants: PresetVariantItemData[];
+}
+/**
+ * Props for PresetVariantRepeater headless component
+ */
+export interface PresetVariantRepeaterProps {
+    /** Render prop function that receives preset variants array for iteration */
+    children: (props: PresetVariantRepeaterRenderProps) => React.ReactNode;
+}
+/**
+ * Headless component that provides preset variants for iteration.
+ * Used by the UI layer to create PresetVariant.Root contexts for each variant.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.PresetVariantRepeater>
+ *   {({ presetVariants }) =>
+ *     presetVariants.map(variant => (
+ *       <PresetVariant.Root key={variant.id} variant={variant}>
+ *         <PresetVariant.Amount />
+ *       </PresetVariant.Root>
+ *     ))
+ *   }
+ * </GiftCard.PresetVariantRepeater>
+ * ```
+ */
+export declare function PresetVariantRepeater(props: PresetVariantRepeaterProps): import("react").ReactNode;
+/**
+ * Render props for GiftCardCurrentPrice component.
+ * Contains raw numeric amounts - use Money component for formatting.
+ */
+export interface GiftCardCurrentPriceRenderProps {
+    /** 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 GiftCardCurrentPrice headless component
+ */
+export interface GiftCardCurrentPriceProps {
+    /** Render prop function that receives the current price data */
+    children: (props: GiftCardCurrentPriceRenderProps) => React.ReactNode;
+}
+/**
+ * Headless component for displaying the current gift card price based on selected variant.
+ * The price automatically updates when the variant selection changes.
+ * Use the Money component for formatting the price and value amounts.
+ *
+ * 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
+ * <GiftCard.CurrentPrice>
+ *   {({ price, value, hasDiscount, currencyCode }) => (
+ *     <div className="flex items-baseline gap-3">
+ *       {hasDiscount && (
+ *         <Money money={{ amount: value, currency: currencyCode }} className="line-through text-muted" />
+ *       )}
+ *       <Money money={{ amount: price, currency: currencyCode }} className="text-4xl font-bold" />
+ *     </div>
+ *   )}
+ * </GiftCard.CurrentPrice>
+ * ```
+ */
+export declare function CurrentPrice(props: GiftCardCurrentPriceProps): import("react").ReactNode;
+/**
+ * Render props for GiftCardCustomVariantTrigger component
+ */
+export interface GiftCardCustomVariantTriggerRenderProps {
+    /** Whether the custom variant is currently selected */
+    isSelected: boolean;
+    /** Function to select the custom variant */
+    onClick: () => void;
+}
+/**
+ * Props for GiftCardCustomVariantTrigger headless component
+ */
+export interface GiftCardCustomVariantTriggerProps {
+    /** Render prop function that receives the custom variant trigger data */
+    children: (props: GiftCardCustomVariantTriggerRenderProps) => React.ReactNode;
+}
+/**
+ * Headless component for triggering custom amount selection.
+ * Only renders when custom variant is enabled for the gift card product.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.CustomVariantTrigger>
+ *   {({ isSelected, onClick }) => (
+ *     <button
+ *       onClick={onClick}
+ *       data-selected={isSelected}
+ *       className="px-4 py-2 border-2 border-dashed rounded-xl"
+ *     >
+ *       Other amount
+ *     </button>
+ *   )}
+ * </GiftCard.CustomVariantTrigger>
+ * ```
+ */
+export declare function CustomVariantTrigger(props: GiftCardCustomVariantTriggerProps): import("react").ReactNode;
+/**
+ * Render props for GiftCardCustomAmountInput component
+ */
+export interface GiftCardCustomAmountInputRenderProps {
+    /** 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 GiftCardCustomAmountInput headless component
+ */
+export interface GiftCardCustomAmountInputProps {
+    /** Render prop function that receives the custom amount input data */
+    children: (props: GiftCardCustomAmountInputRenderProps) => React.ReactNode;
+}
+/**
+ * Headless component for custom gift card amount input.
+ * Only renders when custom variant is selected.
+ * The custom amount affects the currentPrice value displayed by GiftCard.CurrentPrice.
+ *
+ * Validation:
+ * - Amount must be within min/max range defined by the product's custom variant
+ * - isValid will be false if amount is outside the allowed range
+ * - showError flag indicates whether validation errors should be displayed (set to true after form submission)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.CustomAmountInput>
+ *   {({ value, setValue, min, max, isValid, showError, isVisible, currencyCode }) =>
+ *     isVisible && (
+ *       <div className="space-y-2">
+ *         <label>Enter amount ({currencyCode})</label>
+ *         <input
+ *           type="number"
+ *           value={value || ''}
+ *           onChange={(e) => setValue(parseFloat(e.target.value) || 0)}
+ *           min={min ?? undefined}
+ *           max={max ?? undefined}
+ *           data-invalid={showError && !isValid}
+ *         />
+ *         {showError && !isValid && min && max && (
+ *           <p className="text-red-500">
+ *             Enter an amount between {min} and {max}
+ *           </p>
+ *         )}
+ *       </div>
+ *     )
+ *   }
+ * </GiftCard.CustomAmountInput>
+ * ```
+ */
+export declare function CustomAmountInput(props: GiftCardCustomAmountInputProps): import("react").ReactNode;
+/**
+ * Render props for GiftCardQuantity component
+ */
+export interface GiftCardQuantityRenderProps {
+    /** Current quantity value */
+    quantity: number;
+    /** Function to set quantity value */
+    setQuantity: (quantity: number) => void;
+}
+/**
+ * Props for GiftCardQuantity headless component
+ */
+export interface GiftCardQuantityProps {
+    /** Render prop function that receives quantity data */
+    children: (props: GiftCardQuantityRenderProps) => React.ReactNode;
+}
+/**
+ * Headless component for gift card quantity selection.
+ * Exposes quantity state and setter to allow building custom quantity UIs.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.Quantity>
+ *   {({ quantity, setQuantity }) => (
+ *     <div className="flex items-center gap-2">
+ *       <button onClick={() => setQuantity(quantity - 1)} disabled={quantity <= 1}>-</button>
+ *       <span>{quantity}</span>
+ *       <button onClick={() => setQuantity(quantity + 1)}>+</button>
+ *     </div>
+ *   )}
+ * </GiftCard.Quantity>
+ * ```
+ */
+export declare function Quantity(props: GiftCardQuantityProps): import("react").ReactNode;
+/**
+ * Render props for GiftCardGiftToggle component
+ */
+export interface GiftCardGiftToggleRenderProps {
+    /** 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 GiftCardGiftToggle headless component
+ */
+export interface GiftCardGiftToggleProps {
+    /** Render prop function that receives gift toggle data */
+    children: (props: GiftCardGiftToggleRenderProps) => React.ReactNode;
+}
+/**
+ * Headless component for toggling between gift and self-purchase modes.
+ * When isGift is true, the purchase is "for someone else" (shows recipient form).
+ * When isGift is false, the purchase is "for myself" (hides recipient form).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.GiftToggle>
+ *   {({ isGift, setIsGift }) => (
+ *     <div className="flex gap-2">
+ *       <button
+ *         onClick={() => setIsGift(true)}
+ *         data-selected={isGift}
+ *       >
+ *         For someone else
+ *       </button>
+ *       <button
+ *         onClick={() => setIsGift(false)}
+ *         data-selected={!isGift}
+ *       >
+ *         For myself
+ *       </button>
+ *     </div>
+ *   )}
+ * </GiftCard.GiftToggle>
+ * ```
+ */
+export declare function GiftToggle(props: GiftCardGiftToggleProps): import("react").ReactNode;
+/**
+ * Render props for GiftCardRecipientEmail component
+ */
+export interface GiftCardRecipientEmailRenderProps {
+    /** 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 GiftCardRecipientEmail headless component
+ */
+export interface GiftCardRecipientEmailProps {
+    /** Render prop function that receives recipient email data */
+    children: (props: GiftCardRecipientEmailRenderProps) => React.ReactNode;
+}
+/**
+ * Headless component for recipient email input.
+ * Exposes email state, setter, validation state, and error display flag.
+ *
+ * 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
+ * <GiftCard.RecipientEmail>
+ *   {({ value, setValue, isValid, showError }) => (
+ *     <div className="space-y-2">
+ *       <label>Recipient email</label>
+ *       <input
+ *         type="email"
+ *         value={value}
+ *         onChange={(e) => setValue(e.target.value)}
+ *         data-invalid={showError && !isValid}
+ *       />
+ *       {showError && !isValid && (
+ *         <p className="text-red-500">Please enter a valid email</p>
+ *       )}
+ *     </div>
+ *   )}
+ * </GiftCard.RecipientEmail>
+ * ```
+ */
+export declare function RecipientEmail(props: GiftCardRecipientEmailProps): import("react").ReactNode;
+/**
+ * Render props for GiftCardRecipientName component
+ */
+export interface GiftCardRecipientNameRenderProps {
+    /** 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 GiftCardRecipientName headless component
+ */
+export interface GiftCardRecipientNameProps {
+    /** Render prop function that receives recipient name data */
+    children: (props: GiftCardRecipientNameRenderProps) => React.ReactNode;
+}
+/**
+ * Headless component for recipient name input.
+ * Exposes name state and setter.
+ * Only visible when isGift is true (purchasing for someone else).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.RecipientName>
+ *   {({ value, setValue, isVisible }) =>
+ *     isVisible && (
+ *       <div className="space-y-2">
+ *         <label>Recipient name (optional)</label>
+ *         <input
+ *           type="text"
+ *           value={value}
+ *           onChange={(e) => setValue(e.target.value)}
+ *         />
+ *       </div>
+ *     )
+ *   }
+ * </GiftCard.RecipientName>
+ * ```
+ */
+export declare function RecipientName(props: GiftCardRecipientNameProps): import("react").ReactNode;
+/**
+ * Render props for GiftCardRecipientDate component
+ */
+export interface GiftCardRecipientDateRenderProps {
+    /** 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 GiftCardRecipientDate headless component
+ */
+export interface GiftCardRecipientDateProps {
+    /** Render prop function that receives recipient date data */
+    children: (props: GiftCardRecipientDateRenderProps) => React.ReactNode;
+}
+/**
+ * Headless component for recipient delivery date input.
+ * Exposes date state, setter, and formatted values.
+ * Only visible when isGift is true (purchasing for someone else).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.RecipientDate>
+ *   {({ value, formattedValue, inputValue, setValue, isVisible }) =>
+ *     isVisible && (
+ *       <div className="space-y-2">
+ *         <label>Delivery date</label>
+ *         <input
+ *           type="date"
+ *           value={inputValue}
+ *           onChange={(e) => setValue(new Date(e.target.value))}
+ *         />
+ *         <p>Selected: {formattedValue}</p>
+ *       </div>
+ *     )
+ *   }
+ * </GiftCard.RecipientDate>
+ * ```
+ */
+export declare function RecipientDate(props: GiftCardRecipientDateProps): import("react").ReactNode;
+/**
+ * Render props for GiftCardRecipientMessage component
+ */
+export interface GiftCardRecipientMessageRenderProps {
+    /** 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 GiftCardRecipientMessage headless component
+ */
+export interface GiftCardRecipientMessageProps {
+    /** Render prop function that receives recipient message data */
+    children: (props: GiftCardRecipientMessageRenderProps) => React.ReactNode;
+}
+/**
+ * Headless component for recipient message textarea.
+ * Exposes message state and setter.
+ * Only visible when isGift is true (purchasing for someone else).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.RecipientMessage>
+ *   {({ value, setValue, isVisible }) =>
+ *     isVisible && (
+ *       <div className="space-y-2">
+ *         <label>Personal message (optional)</label>
+ *         <textarea
+ *           value={value}
+ *           onChange={(e) => setValue(e.target.value)}
+ *           rows={4}
+ *         />
+ *       </div>
+ *     )
+ *   }
+ * </GiftCard.RecipientMessage>
+ * ```
+ */
+export declare function RecipientMessage(props: GiftCardRecipientMessageProps): import("react").ReactNode;
+/**
+ * Render props for GiftCardRecipientForm component
+ */
+export interface GiftCardRecipientFormRenderProps {
+    /** 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 GiftCardRecipientForm headless component
+ */
+export interface GiftCardRecipientFormProps {
+    /** Render prop function that receives recipient form data */
+    children: (props: GiftCardRecipientFormRenderProps) => React.ReactNode;
+}
+/**
+ * Headless component for recipient form that combines all recipient fields.
+ * Provides consolidated access to email, name, date, and message fields.
+ * Only visible when isGift is true (purchasing for someone else).
+ *
+ * This is a convenience component that aggregates all recipient field data.
+ * For granular control, use the individual RecipientEmail, RecipientName,
+ * RecipientDate, and RecipientMessage components.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.RecipientForm>
+ *   {({ isVisible, showErrors, email, name, deliverAt, message }) =>
+ *     isVisible && (
+ *       <div className="space-y-4">
+ *         <div>
+ *           <label>Recipient email</label>
+ *           <input
+ *             type="email"
+ *             value={email.value}
+ *             onChange={(e) => email.setValue(e.target.value)}
+ *             data-invalid={showErrors && !email.isValid}
+ *           />
+ *           {showErrors && !email.isValid && <p>Please enter a valid email</p>}
+ *         </div>
+ *         <div>
+ *           <label>Recipient name</label>
+ *           <input
+ *             type="text"
+ *             value={name.value}
+ *             onChange={(e) => name.setValue(e.target.value)}
+ *           />
+ *         </div>
+ *         <div>
+ *           <label>Delivery date</label>
+ *           <input
+ *             type="date"
+ *             value={deliverAt.inputValue}
+ *             onChange={(e) => deliverAt.setValue(new Date(e.target.value))}
+ *           />
+ *         </div>
+ *         <div>
+ *           <label>Message</label>
+ *           <textarea
+ *             value={message.value}
+ *             onChange={(e) => message.setValue(e.target.value)}
+ *           />
+ *         </div>
+ *       </div>
+ *     )
+ *   }
+ * </GiftCard.RecipientForm>
+ * ```
+ */
+export declare function RecipientForm(props: GiftCardRecipientFormProps): import("react").ReactNode;
+/**
+ * Render props for the Actions component
+ */
+export interface ActionsRenderProps {
+    /** Computed line items for cart API */
+    lineItems: LineItem[];
+    /** Validates form and triggers showErrors - call before adding to cart */
+    validateAndShowErrors: () => boolean;
+}
+/**
+ * Props for the Actions component
+ */
+export interface ActionsProps {
+    /** Render prop function that receives action data */
+    children: (props: ActionsRenderProps) => React.ReactNode;
+}
+/**
+ * Headless component that exposes cart action data via render props.
+ * Provides lineItems, validation state, and validateAndShowErrors function.
+ *
+ * The loading state is handled by Commerce.Actions.AddToCart / CurrentCartService.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreGiftCard.Actions>
+ *   {({ lineItems, validateAndShowErrors }) => (
+ *     <Commerce.Actions.AddToCart
+ *       lineItems={lineItems}
+ *       onClick={() => {
+ *         if (!validateAndShowErrors()) return; // Validation failed, errors shown
+ *       }}
+ *     />
+ *   )}
+ * </CoreGiftCard.Actions>
+ * ```
+ */
+export declare function Actions(props: ActionsProps): import("react").ReactNode;
+//# sourceMappingURL=GiftCard.d.ts.map