@wix/headless-gift-voucher 0.0.1

package/cjs/dist/react/GiftCard.js

@@ -0,0 +1,1126 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import * as CoreGiftCard from './core/GiftCard.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import { WixMediaImage } from '@wix/headless-media/react';
+import { Money, Quantity as QuantityComponent, } from '@wix/headless-components/react';
+import { Commerce } from '@wix/headless-ecom/react';
+import { DEFAULT_LOADING_TEXT, TestIds } from '../enums/index.js';
+/**
+ * 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 const Root = (props) => {
+    const { children, giftCardServiceConfig, ...attrs } = props;
+    return (_jsx(CoreGiftCard.Root, { giftCardServiceConfig: giftCardServiceConfig, children: _jsx("div", { "data-testid": TestIds.giftCardRoot, ...attrs, children: children }) }));
+};
+Root.displayName = 'GiftCard.Root';
+/**
+ * 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 const Raw = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreGiftCard.Raw, { children: (rawData) => {
+            if (!asChild || !children) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.giftCardRaw, customElement: children, customElementProps: rawData }));
+        } }));
+});
+Raw.displayName = 'GiftCard.Raw';
+/**
+ * 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 const Image = React.forwardRef((props, ref) => (_jsx(CoreGiftCard.Image, { children: (renderProps) => (_jsx(WixMediaImage, { ...props, ref: ref, media: { image: renderProps.image }, "data-testid": TestIds.giftCardImage })) })));
+/**
+ * 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 const Name = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreGiftCard.Name, { children: ({ name }) => {
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.giftCardName, customElement: children, customElementProps: { name }, content: name, ...otherProps, children: _jsx("div", { children: name }) }));
+        } }));
+});
+Name.displayName = 'GiftCard.Name';
+/**
+ * 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 const Description = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreGiftCard.Description, { children: ({ description }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.giftCardDescription, customElement: children, customElementProps: { description }, content: description, ...otherProps, children: _jsx("div", { children: description }) })) }));
+});
+Description.displayName = 'GiftCard.Description';
+/**
+ * Displays loading state indicator.
+ * Only renders content when isLoading is true.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.Loading className="text-gray-500">
+ *   Loading...
+ * </GiftCard.Loading>
+ * ```
+ */
+export const Loading = React.forwardRef((props, ref) => {
+    const { className, children, ...otherProps } = props;
+    return (_jsx(CoreGiftCard.Loading, { children: ({ isLoading }) => {
+            if (!isLoading)
+                return null;
+            return (_jsx("div", { ref: ref, className: className, "data-testid": TestIds.giftCardLoading, ...otherProps, children: children ?? DEFAULT_LOADING_TEXT }));
+        } }));
+});
+Loading.displayName = 'GiftCard.Loading';
+/**
+ * Displays error state.
+ * Only renders when there's an error.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.Error className="text-red-500" />
+ * ```
+ */
+export const Error = React.forwardRef((props, ref) => {
+    const { className, ...otherProps } = props;
+    return (_jsx(CoreGiftCard.Error, { children: ({ error }) => {
+            if (!error)
+                return null;
+            return (_jsx("div", { ref: ref, className: className, "data-testid": TestIds.giftCardError, ...otherProps, children: error }));
+        } }));
+});
+Error.displayName = 'GiftCard.Error';
+/**
+ * Context for individual preset variant data
+ */
+const PresetVariantContext = React.createContext(null);
+/**
+ * Hook to access PresetVariant context
+ */
+function usePresetVariantContext() {
+    const context = React.useContext(PresetVariantContext);
+    if (!context) {
+        // Use globalThis.Error to avoid conflict with exported Error component
+        throw new globalThis.Error('PresetVariant components must be used within PresetVariantRepeater');
+    }
+    return context;
+}
+/**
+ * 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 const PresetVariants = React.forwardRef((props, ref) => {
+    const { asChild, children, className, label, emptyState, ...otherProps } = props;
+    return (_jsx(CoreGiftCard.PresetVariants, { children: (variantsData) => {
+            if (variantsData.presetVariants.length === 0 && emptyState) {
+                return _jsx(_Fragment, { children: emptyState });
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.giftCardPresetVariants, customElement: children, customElementProps: variantsData, ...otherProps, children: _jsxs("div", { children: [label && _jsx("label", { children: label }), children] }) }));
+        } }));
+});
+PresetVariants.displayName = 'GiftCard.PresetVariants';
+/**
+ * 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 const PresetVariantRepeater = (props) => {
+    const { children, className } = props;
+    return (_jsx(CoreGiftCard.PresetVariantRepeater, { children: ({ presetVariants }) => (_jsx(_Fragment, { children: presetVariants.map((variant) => (_jsx(PresetVariantContext.Provider, { value: variant, children: _jsx("div", { "data-testid": TestIds.giftCardPresetVariant, "data-variant-id": variant.id, "data-selected": variant.isSelected || undefined, "data-has-discount": variant.hasDiscount || undefined, className: className, children: children }) }, variant.id))) })) }));
+};
+PresetVariantRepeater.displayName = 'GiftCard.PresetVariantRepeater';
+/**
+ * Clickable button for selecting a preset variant amount.
+ * Default renders a button with Money-formatted value.
+ * Use asChild for custom rendering with price/value/hasDiscount for discount display.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - shows value
+ * <GiftCard.PresetVariant.Amount className="px-4 py-2 border rounded" />
+ *
+ * // asChild with primitive element - Money is passed as children
+ * <GiftCard.PresetVariant.Amount asChild>
+ *   <div className="px-4 py-2 border rounded" />
+ * </GiftCard.PresetVariant.Amount>
+ *
+ * // asChild with render function for custom discount display
+ * <GiftCard.PresetVariant.Amount asChild>
+ *   {React.forwardRef(({ price, value, hasDiscount, currencyCode, ...props }, ref) => (
+ *     <button ref={ref} {...props}>
+ *       {hasDiscount && <Money money={{ amount: value, currency: currencyCode }} className="line-through" />}
+ *       <Money money={{ amount: price, currency: currencyCode }} />
+ *     </button>
+ *   ))}
+ * </GiftCard.PresetVariant.Amount>
+ * ```
+ */
+const PresetVariantAmount = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...otherProps } = props;
+    const variant = usePresetVariantContext();
+    const amountData = {
+        id: variant.id,
+        price: variant.price,
+        value: variant.value,
+        hasDiscount: variant.hasDiscount,
+        hasImage: variant.hasImage,
+        isSelected: variant.isSelected,
+        currencyCode: variant.currencyCode,
+        locale: variant.locale,
+    };
+    const moneyContent = (_jsx(Money, { money: {
+            amount: variant.value,
+            currency: variant.currencyCode,
+            locale: variant.locale,
+            numberFormatOptions: {
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 2,
+            },
+        } }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.giftCardPresetVariantAmount, "data-selected": variant.isSelected || undefined, "data-has-discount": variant.hasDiscount || undefined, onClick: variant.select, customElement: children, customElementProps: amountData, content: moneyContent, ...otherProps, children: _jsx("button", { onClick: variant.select, children: moneyContent }) }));
+});
+PresetVariantAmount.displayName = 'GiftCard.PresetVariant.Amount';
+/**
+== * PresetVariant namespace containing preset variant sub-components
+ */
+export const PresetVariant = {
+    Amount: PresetVariantAmount,
+};
+/**
+ * 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 const CurrentPrice = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreGiftCard.CurrentPrice, { children: (priceData) => {
+            const priceContent = (_jsxs(_Fragment, { children: [priceData.hasDiscount && (_jsx("span", { style: { textDecoration: 'line-through', marginRight: '8px' }, children: _jsx(Money, { money: {
+                                amount: priceData.value,
+                                currency: priceData.currencyCode,
+                                locale: priceData.locale,
+                                numberFormatOptions: {
+                                    minimumFractionDigits: 0,
+                                    maximumFractionDigits: 2,
+                                },
+                            } }) })), _jsx("span", { children: _jsx(Money, { money: {
+                                amount: priceData.price,
+                                currency: priceData.currencyCode,
+                                locale: priceData.locale,
+                                numberFormatOptions: {
+                                    minimumFractionDigits: 0,
+                                    maximumFractionDigits: 2,
+                                },
+                            } }) })] }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.giftCardCurrentPrice, "data-has-discount": priceData.hasDiscount || undefined, customElement: children, customElementProps: priceData, content: priceContent, ...otherProps, children: _jsx("div", { children: priceContent }) }));
+        } }));
+});
+CurrentPrice.displayName = 'GiftCard.CurrentPrice';
+/**
+ * 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 const CustomVariantTrigger = React.forwardRef((props, ref) => {
+    const { label = 'Other amount', asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreGiftCard.CustomVariantTrigger, { children: ({ isSelected, onClick }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.giftCardCustomVariantTrigger, "data-selected": isSelected || undefined, customElement: children, customElementProps: { isSelected, onClick }, onClick: onClick, content: label, ...otherProps, children: _jsx("button", { onClick: onClick, children: label }) })) }));
+});
+CustomVariantTrigger.displayName = 'GiftCard.CustomVariantTrigger';
+/**
+ * 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 const CustomAmountInput = React.forwardRef((props, ref) => {
+    const { label, asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreGiftCard.CustomAmountInput, { children: (inputData) => {
+            // Don't render if not visible (not custom variant) unless using asChild
+            if (!inputData.isVisible && !asChild) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.giftCardCustomAmountInput, "data-invalid": !inputData.isValid || undefined, "data-visible": inputData.isVisible || undefined, customElement: children, customElementProps: inputData, ...otherProps, children: _jsx("div", { children: inputData.isVisible && (_jsxs("div", { children: [label && _jsx("label", { children: label }), _jsxs("div", { children: [_jsx("span", { children: inputData.currencySymbol }), _jsx("input", { prefix: inputData.currencySymbol, type: "number", value: inputData.value, onChange: (e) => inputData.setValue(parseFloat(e.target.value) || 0), min: inputData.min ?? undefined, max: inputData.max ?? undefined, className: className })] })] })) }) }));
+        } }));
+});
+CustomAmountInput.displayName = 'GiftCard.CustomAmountInput';
+/**
+ * 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 const Quantity = React.forwardRef((props, ref) => {
+    const { asChild, children, className, steps = 1, label, ...otherProps } = props;
+    return (_jsx(CoreGiftCard.Quantity, { children: ({ quantity, setQuantity }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.giftCardQuantity, customElement: children, customElementProps: { quantity, setQuantity }, ...otherProps, children: _jsxs("div", { children: [label && _jsx("label", { children: label }), _jsxs(QuantityComponent.Root, { initialValue: quantity, onValueChange: setQuantity, steps: steps, min: 1, className: className, children: [_jsx(QuantityComponent.Decrement, {}), _jsx(QuantityComponent.Input, {}), _jsx(QuantityComponent.Increment, {})] })] }) })) }));
+});
+Quantity.displayName = 'GiftCard.Quantity';
+/**
+ * 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 const GiftToggle = React.forwardRef((props, ref) => {
+    const { label, forSomeoneLabel = 'For someone else', forMyselfLabel = 'For myself', asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreGiftCard.GiftToggle, { children: ({ isGift, setIsGift }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.giftCardGiftToggle, customElement: children, customElementProps: { isGift, setIsGift }, ...otherProps, children: _jsxs("div", { children: [label && _jsx("label", { children: label }), _jsxs("div", { className: className, children: [_jsx("button", { type: "button", onClick: () => setIsGift(true), "data-selected": isGift || undefined, "data-testid": TestIds.giftCardGiftToggleSomeone, children: forSomeoneLabel }), _jsx("button", { type: "button", onClick: () => setIsGift(false), "data-selected": !isGift || undefined, "data-testid": TestIds.giftCardGiftToggleMyself, children: forMyselfLabel })] })] }) })) }));
+});
+GiftToggle.displayName = 'GiftCard.GiftToggle';
+/**
+ * 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 const RecipientEmail = React.forwardRef((props, ref) => {
+    const { label, asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreGiftCard.RecipientEmail, { children: ({ value, setValue, isValid, showError, isVisible }) => {
+            // Don't render if not visible (isGift is false) unless using asChild
+            if (!isVisible && !asChild) {
+                return null;
+            }
+            const showInvalidState = showError && !isValid;
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.giftCardRecipientEmail, "data-invalid": showInvalidState || undefined, "data-visible": isVisible || undefined, customElement: children, customElementProps: {
+                    value,
+                    setValue,
+                    isValid,
+                    showError,
+                    isVisible,
+                }, ...otherProps, children: _jsx("div", { children: isVisible && (_jsxs(_Fragment, { children: [label && _jsx("label", { children: label }), _jsx("input", { type: "email", value: value, onChange: (e) => setValue(e.target.value), className: className, "data-invalid": showInvalidState || undefined })] })) }) }));
+        } }));
+});
+RecipientEmail.displayName = 'GiftCard.RecipientEmail';
+/**
+ * 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 const RecipientName = React.forwardRef((props, ref) => {
+    const { label, asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreGiftCard.RecipientName, { children: ({ value, setValue, isVisible }) => {
+            // Don't render if not visible (isGift is false) unless using asChild
+            if (!isVisible && !asChild) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.giftCardRecipientName, "data-visible": isVisible || undefined, customElement: children, customElementProps: {
+                    value,
+                    setValue,
+                    isVisible,
+                }, ...otherProps, children: _jsx("div", { children: isVisible && (_jsxs(_Fragment, { children: [label && _jsx("label", { children: label }), _jsx("input", { type: "text", value: value, onChange: (e) => setValue(e.target.value), className: className })] })) }) }));
+        } }));
+});
+RecipientName.displayName = 'GiftCard.RecipientName';
+/**
+ * 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 const RecipientDate = React.forwardRef((props, ref) => {
+    const { label, asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreGiftCard.RecipientDate, { children: ({ value, formattedValue, inputValue, setValue, isVisible }) => {
+            // Don't render if not visible (isGift is false) unless using asChild
+            if (!isVisible && !asChild) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.giftCardRecipientDate, "data-visible": isVisible || undefined, customElement: children, customElementProps: {
+                    value,
+                    formattedValue,
+                    inputValue,
+                    setValue,
+                    isVisible,
+                }, ...otherProps, children: _jsx("div", { children: isVisible && (_jsxs(_Fragment, { children: [label && _jsx("label", { children: label }), _jsx("input", { type: "date", value: inputValue, onChange: (e) => {
+                                    if (e.target.value) {
+                                        setValue(new Date(e.target.value));
+                                    }
+                                }, className: className })] })) }) }));
+        } }));
+});
+RecipientDate.displayName = 'GiftCard.RecipientDate';
+/**
+ * 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 const RecipientMessage = React.forwardRef((props, ref) => {
+    const { label, asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreGiftCard.RecipientMessage, { children: ({ value, setValue, isVisible }) => {
+            // Don't render if not visible (isGift is false) unless using asChild
+            if (!isVisible && !asChild) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.giftCardRecipientMessage, "data-visible": isVisible || undefined, customElement: children, customElementProps: {
+                    value,
+                    setValue,
+                    isVisible,
+                }, ...otherProps, children: _jsx("div", { children: isVisible && (_jsxs(_Fragment, { children: [label && _jsx("label", { children: label }), _jsx("textarea", { value: value, onChange: (e) => setValue(e.target.value), className: className, rows: 4 })] })) }) }));
+        } }));
+});
+RecipientMessage.displayName = 'GiftCard.RecipientMessage';
+/**
+ * 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 const RecipientForm = React.forwardRef((props, ref) => {
+    const { emailLabel, nameLabel, dateLabel, messageLabel, asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreGiftCard.RecipientForm, { children: (formData) => {
+            // Don't render if not visible (isGift is false) unless using asChild
+            if (!formData.isVisible && !asChild) {
+                return null;
+            }
+            const showEmailError = formData.showErrors && !formData.email.isValid;
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.giftCardRecipientForm, "data-visible": formData.isVisible || undefined, customElement: children, customElementProps: formData, ...otherProps, children: _jsx("div", { className: className, children: formData.isVisible && (_jsxs(_Fragment, { children: [_jsxs("div", { "data-testid": TestIds.giftCardRecipientEmail, children: [emailLabel && _jsx("label", { children: emailLabel }), _jsx("input", { type: "email", value: formData.email.value, onChange: (e) => formData.email.setValue(e.target.value), "data-invalid": showEmailError || undefined })] }), _jsxs("div", { "data-testid": TestIds.giftCardRecipientName, children: [nameLabel && _jsx("label", { children: nameLabel }), _jsx("input", { type: "text", value: formData.name.value, onChange: (e) => formData.name.setValue(e.target.value) })] }), _jsxs("div", { "data-testid": TestIds.giftCardRecipientDate, children: [dateLabel && _jsx("label", { children: dateLabel }), _jsx("input", { type: "date", value: formData.deliverAt.inputValue, onChange: (e) => {
+                                            if (e.target.value) {
+                                                formData.deliverAt.setValue(new Date(e.target.value));
+                                            }
+                                        } })] }), _jsxs("div", { "data-testid": TestIds.giftCardRecipientMessage, children: [messageLabel && _jsx("label", { children: messageLabel }), _jsx("textarea", { value: formData.message.value, onChange: (e) => formData.message.setValue(e.target.value), rows: 4 })] })] })) }) }));
+        } }));
+});
+RecipientForm.displayName = 'GiftCard.RecipientForm';
+/**
+ * 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 const ActionAddToCart = React.forwardRef((props, ref) => {
+    const { label = 'Add to Cart', loadingLabel, asChild, children, className, onSuccess, ...otherProps } = props;
+    return (_jsx(CoreGiftCard.Actions, { children: ({ lineItems, validateAndShowErrors }) => {
+            // asChild
+            if (asChild && children) {
+                return (_jsx(Commerce.Actions.AddToCart, { ref: ref, lineItems: lineItems, asChild: true, onSuccess: onSuccess, children: (commerceProps, commerceRef) => {
+                        const onClick = async () => {
+                            if (!validateAndShowErrors()) {
+                                return;
+                            }
+                            await commerceProps.onClick();
+                        };
+                        return (_jsx(AsChildSlot, { ref: commerceRef, asChild: asChild, className: className, "data-testid": TestIds.giftCardAddToCart, customElement: children, customElementProps: {
+                                onClick,
+                                isLoading: commerceProps.isLoading,
+                            }, content: commerceProps.isLoading && loadingLabel
+                                ? loadingLabel
+                                : label }));
+                    } }));
+            }
+            // default rendering
+            return (_jsx(Commerce.Actions.AddToCart, { ref: ref, lineItems: lineItems, asChild: true, onSuccess: onSuccess, children: (commerceProps, commerceRef) => {
+                    const onClick = async () => {
+                        if (!validateAndShowErrors()) {
+                            return;
+                        }
+                        await commerceProps.onClick();
+                    };
+                    return (_jsx("button", { ref: commerceRef, className: className, disabled: commerceProps.isLoading, onClick: onClick, "data-testid": TestIds.giftCardAddToCart, "data-loading": commerceProps.isLoading || undefined, ...otherProps, children: commerceProps.isLoading && loadingLabel
+                            ? loadingLabel
+                            : label }));
+                } }));
+        } }));
+});
+ActionAddToCart.displayName = 'GiftCard.Action.AddToCart';
+/**
+ * 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 const ActionBuyNow = React.forwardRef((props, ref) => {
+    const { label = 'Buy Now', loadingLabel, asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreGiftCard.Actions, { children: ({ lineItems, validateAndShowErrors }) => {
+            // asChild
+            if (asChild && children) {
+                return (_jsx(Commerce.Actions.BuyNow, { ref: ref, lineItems: lineItems, asChild: true, children: (commerceProps, commerceRef) => {
+                        const onClick = async () => {
+                            if (!validateAndShowErrors()) {
+                                return;
+                            }
+                            await commerceProps.onClick();
+                        };
+                        return (_jsx(AsChildSlot, { ref: commerceRef, asChild: asChild, className: className, "data-testid": TestIds.giftCardBuyNow, customElement: children, customElementProps: {
+                                onClick,
+                                isLoading: commerceProps.isLoading,
+                            }, content: commerceProps.isLoading && loadingLabel
+                                ? loadingLabel
+                                : label }));
+                    } }));
+            }
+            // default rendering
+            return (_jsx(Commerce.Actions.BuyNow, { ref: ref, lineItems: lineItems, asChild: true, children: (commerceProps, commerceRef) => {
+                    const onClick = async () => {
+                        if (!validateAndShowErrors()) {
+                            return;
+                        }
+                        await commerceProps.onClick();
+                    };
+                    return (_jsx("button", { ref: commerceRef, className: className, disabled: commerceProps.isLoading, onClick: onClick, "data-testid": TestIds.giftCardBuyNow, "data-loading": commerceProps.isLoading || undefined, ...otherProps, children: commerceProps.isLoading && loadingLabel
+                            ? loadingLabel
+                            : label }));
+                } }));
+        } }));
+});
+ActionBuyNow.displayName = 'GiftCard.Action.BuyNow';
+/**
+ * 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 const Action = {
+    /** Add to Cart button for adding gift card to the current cart */
+    AddToCart: ActionAddToCart,
+    /** Buy Now button for immediate checkout with the gift card */
+    BuyNow: ActionBuyNow,
+};