@wix/headless-stores 0.0.0

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

@@ -0,0 +1,1065 @@
+import type { V3Product } from '@wix/auto_sdk_stores_products-v-3';
+import React from 'react';
+import { AsChildChildren } from '@wix/headless-utils/react';
+import { AsContent } from './types.js';
+/**
+ * Context for sharing variant options state between components
+ */
+interface VariantsContextValue {
+    hasOptions: boolean;
+    options: any[];
+}
+/**
+ * Hook to access variants context
+ */
+export declare function useVariantsContext(): VariantsContextValue;
+/**
+ * Context for sharing modifier options state between components
+ */
+interface ModifiersContextValue {
+    hasModifiers: boolean;
+    modifiers: any[];
+}
+/**
+ * Hook to access modifiers context
+ */
+export declare function useModifiersContext(): ModifiersContextValue;
+/**
+ * Basic stock status type for product availability states
+ */
+export type BasicStockStatus = 'in-stock' | 'limited-stock' | 'out-of-stock';
+/**
+ * Extended stock status type including pre-order capability
+ */
+export type StockStatus = BasicStockStatus | 'can-pre-order';
+/**
+ * Props for the Product root component following the documented API
+ */
+export interface ProductRootProps {
+    children: React.ReactNode;
+    product: V3Product;
+    selectedVariant?: any;
+}
+/**
+ * Root component that provides all necessary service contexts for a complete product experience.
+ * This composite component combines Product, ProductVariantSelector, ProductModifiers, and SelectedVariant
+ * functionality following the documented API patterns with proper data attributes.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductPage({ product }) {
+ *   return (
+ *     <Product.Root product={product}>
+ *       <Product.Name className="text-4xl font-bold" />
+ *     </Product.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare const Root: {
+    (props: ProductRootProps): React.ReactNode;
+    displayName: string;
+};
+/**
+ * Props for Product Name component
+ */
+export interface NameProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        name: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * Displays the product name with customizable rendering following the documented API.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.Name className="text-4xl font-bold" />
+ *
+ * // asChild with primitive
+ * <Product.Name asChild>
+ *   <h1 className="text-4xl font-bold" />
+ * </Product.Name>
+ *
+ * // asChild with react component
+ * <Product.Name asChild>
+ *   {React.forwardRef(({name, ...props}, ref) => (
+ *     <h1 ref={ref} {...props} className="text-4xl font-bold">
+ *       {name}
+ *     </h1>
+ *   ))}
+ * </Product.Name>
+ * ```
+ */
+export declare const Name: React.ForwardRefExoticComponent<NameProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Product Description component
+ */
+export interface DescriptionProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        description: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+    /** Format of the description content */
+    as?: `${AsContent}`;
+}
+/**
+ * Displays the product description with customizable rendering and format options following the documented API.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage (plain text)
+ * <Product.Description className="text-content-secondary" />
+ *
+ * // HTML content
+ * <Product.Description as="html" className="prose" />
+ *
+ * // asChild with custom rendering
+ * <Product.Description as="html" asChild>
+ *   {({ description }) => (
+ *     <div
+ *       className="text-content-secondary"
+ *       dangerouslySetInnerHTML={{ __html: description }}
+ *     />
+ *   )}
+ * </Product.Description>
+ * ```
+ */
+export declare const Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Product Price component
+ */
+export interface PriceProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        price: string;
+        formattedPrice: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * Displays the current product price with customizable rendering following the documented API.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.Price className="text-3xl font-bold text-content-primary data-[discounted]:text-brand-primary" />
+ *
+ * // asChild with primitive
+ * <Product.Price asChild>
+ *   <span className="text-3xl font-bold text-content-primary" />
+ * </Product.Price>
+ *
+ * // asChild with react component
+ * <Product.Price asChild>
+ *   {React.forwardRef(({price, formattedPrice, ...props}, ref) => (
+ *     <span ref={ref} {...props} className="text-3xl font-bold text-content-primary">
+ *       {formattedPrice}
+ *     </span>
+ *   ))}
+ * </Product.Price>
+ * ```
+ */
+export declare const Price: React.ForwardRefExoticComponent<PriceProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Product CompareAtPrice component
+ */
+export interface CompareAtPriceProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        price: string;
+        formattedPrice: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * Displays the compare-at (original) price when on sale with customizable rendering following the documented API.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage (only shows when on sale)
+ * <Product.CompareAtPrice className="text-lg text-content-faded line-through hidden data-[discounted]:inline" />
+ *
+ * // asChild with primitive
+ * <Product.CompareAtPrice asChild>
+ *   <span className="text-lg text-content-faded line-through" />
+ * </Product.CompareAtPrice>
+ *
+ * // asChild with react component
+ * <Product.CompareAtPrice asChild>
+ *   {React.forwardRef(({formattedPrice, ...props}, ref) => (
+ *     <span
+ *       ref={ref}
+ *       {...props}
+ *       className="hidden data-[discounted]:inline text-lg text-content-faded line-through"
+ *     >
+ *       Was: {formattedPrice}
+ *     </span>
+ *   ))}
+ * </Product.CompareAtPrice>
+ * ```
+ */
+export declare const CompareAtPrice: React.ForwardRefExoticComponent<CompareAtPriceProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Slug component
+ * @interface SlugProps
+ */
+export interface SlugProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        slug: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * Product Slug component that displays the product's slug
+ *
+ * @component
+ * @order 6
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductSlugLink() {
+ *   return (
+ *     <Product.Slug>
+ *       {({ slug }) => (
+ *         <a href={`/product/${slug}`}>
+ *           View Product Details
+ *         </a>
+ *       )}
+ *     </Product.Slug>
+ *   );
+ * }
+ * ```
+ */
+export declare const Slug: React.ForwardRefExoticComponent<SlugProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Product Raw component
+ */
+export interface RawProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        product: V3Product;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * Provides access to the raw product data for advanced use cases.
+ * Similar to Category.Raw, this should only be used when you need custom access to product data.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Custom rendering with forwardRef
+ * <Product.Raw asChild>
+ *   {React.forwardRef(({product, ...props}, ref) => (
+ *     <div ref={ref} {...props} className="product-debug">
+ *       <span>Product ID: {product._id}</span>
+ *       <span>SKU: {product.sku}</span>
+ *       <span>Inventory: {product.inventory?.quantity}</span>
+ *     </div>
+ *   ))}
+ * </Product.Raw>
+ * ```
+ */
+export declare const Raw: React.ForwardRefExoticComponent<RawProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Product Ribbon component
+ */
+export interface RibbonProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        ribbon: string | null;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * Displays the product ribbon with customizable rendering following the documented API.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.Ribbon className="absolute top-2 left-2 bg-red-500 text-white px-2 py-1 text-xs rounded" />
+ *
+ * // asChild with primitive
+ * <Product.Ribbon asChild>
+ *   <span className="ribbon-badge" />
+ * </Product.Ribbon>
+ *
+ * // asChild with react component
+ * <Product.Ribbon asChild>
+ *   {React.forwardRef(({ribbon, ...props}, ref) => (
+ *     <div ref={ref} {...props} className="ribbon-badge">
+ *       {ribbon}
+ *     </div>
+ *   ))}
+ * </Product.Ribbon>
+ * ```
+ */
+export declare const Ribbon: React.ForwardRefExoticComponent<RibbonProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Product Stock component
+ */
+export interface StockProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        status: BasicStockStatus;
+        label: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+    /** Custom labels for different stock states */
+    labels?: {
+        /** Label for in stock state */
+        inStock?: string;
+        /** Label for limited stock state (when quantity is low) */
+        limitedStock?: string;
+        /** Label for out of stock state */
+        outOfStock?: string;
+    };
+}
+/**
+ * Displays the product stock status with customizable rendering and labels following the documented API.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.Stock
+ *   className="stock-indicator"
+ *   labels={{
+ *     inStock: 'In Stock',
+ *     limitedStock: 'Limited Stock',
+ *     outOfStock: 'Out of Stock'
+ *   }}
+ * />
+ *
+ * // asChild with primitive
+ * <Product.Stock asChild>
+ *   <div className="stock-status" />
+ * </Product.Stock>
+ *
+ * // asChild with react component
+ * <Product.Stock
+ *   labels={{
+ *     inStock: 'Available',
+ *     limitedStock: 'Low Stock',
+ *     outOfStock: 'Sold Out'
+ *   }}
+ *   asChild
+ * >
+ *   {React.forwardRef(({status, label, ...props}, ref) => (
+ *     <div
+ *       ref={ref}
+ *       {...props}
+ *       className="flex items-center gap-1 data-[state='in-stock']:text-green-600 data-[state='limited-stock']:text-yellow-600 data-[state='out-of-stock']:text-red-600"
+ *     >
+ *       <div className="w-2 h-2 rounded-full data-[state='in-stock']:bg-green-500 data-[state='limited-stock']:bg-yellow-500 data-[state='out-of-stock']:bg-red-500" />
+ *       <span className="text-xs font-medium">
+ *         {label}
+ *       </span>
+ *     </div>
+ *   ))}
+ * </Product.Stock>
+ * ```
+ */
+export declare const Stock: React.ForwardRefExoticComponent<StockProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Product Variants container
+ */
+export interface VariantsProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children: React.ReactNode;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * Container for product variant selection system.
+ * Does not render when there are no variants.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.Variants>
+ *   <Product.VariantOptions>
+ *     <Product.VariantOptionRepeater>
+ *       <Option.Name className="text-lg font-medium mb-3" />
+ *       <Option.Choices>
+ *         <Option.ChoiceRepeater>
+ *           <Choice.Text className="px-4 py-2 border rounded-lg" />
+ *           <Choice.Color className="w-10 h-10 rounded-full border-4" />
+ *         </Option.ChoiceRepeater>
+ *       </Option.Choices>
+ *     </Product.VariantOptionRepeater>
+ *   </Product.VariantOptions>
+ * </Product.Variants>
+ *
+ * // asChild with primitive
+ * <Product.Variants asChild>
+ *   <section className="variant-section">
+ *     <Product.VariantOptions>
+ *       // variant options
+ *     </Product.VariantOptions>
+ *   </section>
+ * </Product.Variants>
+ *
+ * // asChild with react component
+ * <Product.Variants asChild>
+ *   {React.forwardRef(({hasOptions, ...props}, ref) => (
+ *     <section ref={ref} {...props} className="variant-section">
+ *       {hasOptions && <h3>Choose Options</h3>}
+ *       {props.children}
+ *     </section>
+ *   ))}
+ * </Product.Variants>
+ * ```
+ */
+export declare const Variants: React.ForwardRefExoticComponent<VariantsProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Product VariantOptions component
+ */
+export interface VariantOptionsProps {
+    children: React.ReactNode;
+    emptyState?: React.ReactNode;
+}
+/**
+ * Component that provides access to variant options.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.VariantOptions emptyState={<div>No options available</div>}>
+ *   <Product.VariantOptionRepeater>
+ *     <Option.Name />
+ *     <Option.Choices>
+ *       <Option.ChoiceRepeater>
+ *         <Choice.Text />
+ *       </Option.ChoiceRepeater>
+ *     </Option.Choices>
+ *   </Product.VariantOptionRepeater>
+ * </Product.VariantOptions>
+ *
+ * // Simple container usage
+ * <Product.VariantOptions emptyState={<div>No options</div>}>
+ *   <div className="options-container">
+ *     <Product.VariantOptionRepeater>
+ *       // option content
+ *     </Product.VariantOptionRepeater>
+ *   </div>
+ * </Product.VariantOptions>
+ * ```
+ */
+export declare const VariantOptions: React.ForwardRefExoticComponent<VariantOptionsProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for Product VariantOptionRepeater component
+ */
+export interface VariantOptionRepeaterProps {
+    children: React.ReactNode;
+}
+/**
+ * Repeater component that renders children for each variant option.
+ *
+ * @component
+ */
+export declare const VariantOptionRepeater: React.ForwardRefExoticComponent<VariantOptionRepeaterProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Product Modifiers container
+ */
+export interface ModifiersProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children: React.ReactNode;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * Container for product modifier system.
+ * Does not render when there are no modifiers.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.Modifiers>
+ *   <Product.ModifierOptions>
+ *     <Product.ModifierOptionRepeater>
+ *       <Option.Name className="text-lg font-medium mb-3" />
+ *       <Option.Choices>
+ *         <Option.ChoiceRepeater>
+ *           <Choice.Text className="px-4 py-2 border rounded-lg" />
+ *           <Choice.Color className="w-10 h-10 rounded-full border-4" />
+ *           <Choice.FreeText className="w-full p-3 border rounded-lg resize-none" />
+ *         </Option.ChoiceRepeater>
+ *       </Option.Choices>
+ *     </Product.ModifierOptionRepeater>
+ *   </Product.ModifierOptions>
+ * </Product.Modifiers>
+ *
+ * // asChild with primitive
+ * <Product.Modifiers asChild>
+ *   <section className="modifier-section">
+ *     <Product.ModifierOptions>
+ *       // modifier options
+ *     </Product.ModifierOptions>
+ *   </section>
+ * </Product.Modifiers>
+ *
+ * // asChild with react component
+ * <Product.Modifiers asChild>
+ *   {React.forwardRef(({hasModifiers, ...props}, ref) => (
+ *     <section ref={ref} {...props} className="modifier-section">
+ *       {hasModifiers && <h3>Customize Your Product</h3>}
+ *       {props.children}
+ *     </section>
+ *   ))}
+ * </Product.Modifiers>
+ * ```
+ */
+export declare const Modifiers: React.ForwardRefExoticComponent<ModifiersProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Product ModifierOptions component
+ */
+export interface ModifierOptionsProps {
+    children: React.ReactNode;
+    emptyState?: React.ReactNode;
+}
+/**
+ * Component that provides access to modifier options.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.ModifierOptions emptyState={<div>No options available</div>}>
+ *   <Product.ModifierOptionRepeater>
+ *     <Option.Name />
+ *     <Option.Choices>
+ *       <Option.ChoiceRepeater>
+ *         <Choice.Text />
+ *         <Choice.Color />
+ *         <Choice.FreeText />
+ *       </Option.ChoiceRepeater>
+ *     </Option.Choices>
+ *   </Product.ModifierOptionRepeater>
+ * </Product.ModifierOptions>
+ *
+ * // Simple container usage
+ * <Product.ModifierOptions emptyState={<div>No options</div>}>
+ *   <div className="options-container">
+ *     <Product.ModifierOptionRepeater>
+ *       // option content
+ *     </Product.ModifierOptionRepeater>
+ *   </div>
+ * </Product.ModifierOptions>
+ * ```
+ */
+export declare const ModifierOptions: React.ForwardRefExoticComponent<ModifierOptionsProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for Product ModifierOptionRepeater component
+ */
+export interface ModifierOptionRepeaterProps {
+    children: React.ReactNode;
+    allowedTypes?: ('color' | 'text' | 'free-text')[];
+}
+/**
+ * Repeater component that renders children for each modifier option.
+ *
+ * @component
+ */
+export declare const ModifierOptionRepeater: React.ForwardRefExoticComponent<ModifierOptionRepeaterProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Product MediaGallery component
+ */
+export interface ProductMediaGalleryProps {
+    children: React.ReactNode;
+    infinite?: boolean;
+    autoPlay?: {
+        direction?: 'forward' | 'backward';
+        intervalMs?: number;
+    };
+}
+/**
+ * Container for product media gallery.
+ * Renders a MediaGallery.Root with the product media items.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.MediaGallery
+ *   infinite={true}
+ *   autoPlay={{ direction: "forward", intervalMs: 5000 }}
+ * >
+ *   <MediaGallery.Viewport />
+ *   <MediaGallery.Previous />
+ *   <MediaGallery.Next />
+ *   <MediaGallery.Thumbnails>
+ *     <MediaGallery.ThumbnailRepeater>
+ *       <MediaGallery.ThumbnailItem />
+ *     </MediaGallery.ThumbnailRepeater>
+ *   </MediaGallery.Thumbnails>
+ * </Product.MediaGallery>
+ *
+ * // Simple usage
+ * <Product.MediaGallery>
+ *   <MediaGallery.Viewport className="rounded-lg" />
+ * </Product.MediaGallery>
+ * ```
+ */
+export declare const ProductMediaGallery: React.ForwardRefExoticComponent<ProductMediaGalleryProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Alias for ProductMediaGallery to match the documented API
+ */
+export { ProductMediaGallery as MediaGallery };
+/**
+ * Props for Product Quantity component
+ */
+export interface ProductQuantityProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        selectedQuantity: number;
+        availableQuantity: number | null;
+        inStock: boolean;
+        isPreOrderEnabled: boolean;
+        setSelectedQuantity: (quantity: number) => void;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * Props for Product Quantity sub-components
+ */
+export interface ProductQuantitySubComponentProps {
+    /** CSS classes to apply to the element */
+    className?: string;
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        disabled: boolean;
+    }>;
+    /** Whether the component is disabled */
+    disabled?: boolean;
+}
+/**
+ * Product quantity selector component that integrates with the selected variant.
+ * Provides quantity controls with stock validation and can-pre-order support.
+ * Uses a compound component pattern with Root, Decrement, Input, Increment, and Raw sub-components.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Compound component usage (recommended)
+ * <Product.Quantity.Root className="flex items-center gap-3">
+ *   <div className="flex items-center border border-brand-light rounded-lg">
+ *     <Product.Quantity.Decrement className="px-3 py-1 hover:bg-surface-primary transition-colors" />
+ *     <Product.Quantity.Input className="w-16 text-center py-1 border-x border-brand-light focus:outline-none focus:ring-2 focus:ring-brand-primary" />
+ *     <Product.Quantity.Increment className="px-3 py-1 hover:bg-surface-primary transition-colors" />
+ *   </div>
+ *   <Product.Quantity.Raw asChild>
+ *     {({ availableQuantity, inStock, isPreOrderEnabled }) => (
+ *       <div>
+ *         {!inStock && isPreOrderEnabled && availableQuantity && (
+ *           <span className="text-content-muted text-sm">
+ *             Max: {availableQuantity} Pre Order
+ *           </span>
+ *         )}
+ *         {inStock && availableQuantity && availableQuantity < 10 && (
+ *           <span className="text-content-muted text-sm">
+ *             Only {availableQuantity} left in stock
+ *           </span>
+ *         )}
+ *       </div>
+ *     )}
+ *   </Product.Quantity.Raw>
+ * </Product.Quantity.Root>
+ *
+ * // Legacy asChild usage (still supported)
+ * <Product.Quantity asChild>
+ *   {({ selectedQuantity, availableQuantity, inStock, setSelectedQuantity }) => (
+ *     <div className="flex items-center gap-3">
+ *       <div className="flex items-center border border-brand-light rounded-lg">
+ *         <button
+ *           onClick={() => setSelectedQuantity(selectedQuantity - 1)}
+ *           disabled={selectedQuantity <= 1 || (!inStock && !isPreOrderEnabled)}
+ *           className="px-3 py-2 hover:bg-surface-primary disabled:opacity-50"
+ *         >
+ *           -
+ *         </button>
+ *         <span className="px-4 py-2 border-x border-brand-light min-w-[3rem] text-center">
+ *           {selectedQuantity}
+ *         </span>
+ *         <button
+ *           onClick={() => setSelectedQuantity(selectedQuantity + 1)}
+ *           disabled={availableQuantity && selectedQuantity >= availableQuantity}
+ *           className="px-3 py-2 hover:bg-surface-primary disabled:opacity-50"
+ *         >
+ *           +
+ *         </button>
+ *       </div>
+ *     </div>
+ *   )}
+ * </Product.Quantity>
+ * ```
+ */
+export declare const ProductQuantity: React.ForwardRefExoticComponent<ProductQuantityProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Product Quantity Decrement component.
+ * Automatically handles disabled state based on stock and can-pre-order settings.
+ * Must be used within Product.Quantity.Root.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Product.Quantity.Decrement className="px-3 py-1 hover:bg-surface-primary transition-colors" />
+ * ```
+ */
+export declare const ProductQuantityDecrement: React.ForwardRefExoticComponent<ProductQuantitySubComponentProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Product Quantity Input component.
+ * Displays the current quantity value. Must be used within Product.Quantity.Root.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Product.Quantity.Input className="w-16 text-center py-1 border-x border-brand-light focus:outline-none focus:ring-2 focus:ring-brand-primary" />
+ * ```
+ */
+export declare const ProductQuantityInput: React.ForwardRefExoticComponent<ProductQuantitySubComponentProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * Product Quantity Increment component.
+ * Automatically handles disabled state based on stock availability.
+ * Must be used within Product.Quantity.Root.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Product.Quantity.Increment className="px-3 py-1 hover:bg-surface-primary transition-colors" />
+ * ```
+ */
+export declare const ProductQuantityIncrement: React.ForwardRefExoticComponent<ProductQuantitySubComponentProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Props for Product Action components following the documented API
+ */
+export interface ProductActionProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Text label for the button */
+    label: string;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        disabled: boolean;
+        isLoading: boolean;
+        onClick: () => Promise<void>;
+    }>;
+    /** CSS classes to apply to the button */
+    className?: string;
+    /** Content to display when loading */
+    loadingState?: string | React.ReactNode;
+}
+/**
+ * Props for Product Quantity Raw component
+ */
+export interface ProductQuantityRawSubComponentProps {
+    /** CSS classes to apply to the element */
+    className?: string;
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        selectedQuantity: number;
+        availableQuantity: number;
+        inStock: boolean;
+        isPreOrderEnabled: boolean;
+        setSelectedQuantity: (quantity: number) => void;
+    }>;
+}
+/**
+ * Product Quantity Raw component.
+ * Provides access to raw quantity data for custom stock messages and advanced use cases.
+ * Must be used within Product.Quantity.Root.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Product.Quantity.Raw asChild>
+ *   {({ availableQuantity, inStock, isPreOrderEnabled }) => (
+ *     <div>
+ *       {!inStock && isPreOrderEnabled && availableQuantity && (
+ *         <span className="text-content-muted text-sm">
+ *           Max: {availableQuantity} Pre Order
+ *         </span>
+ *       )}
+ *       {inStock && availableQuantity && availableQuantity < 10 && (
+ *         <span className="text-content-muted text-sm">
+ *           Only {availableQuantity} left in stock
+ *         </span>
+ *       )}
+ *     </div>
+ *   )}
+ * </Product.Quantity.Raw>
+ * ```
+ */
+export declare const ProductQuantityRaw: React.ForwardRefExoticComponent<ProductQuantityRawSubComponentProps & React.RefAttributes<HTMLElement>>;
+export interface ProductVariantSelectorResetProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        reset: () => void;
+        hasSelections: boolean;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+    /** Label for the reset button */
+    label?: string;
+}
+export declare const ProductVariantSelectorReset: React.ForwardRefExoticComponent<ProductVariantSelectorResetProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Add to cart action button component following the documented API.
+ * Automatically integrates with the selected variant and handles loading states.
+ */
+export declare const ProductActionAddToCart: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Buy Now action button component following the documented API.
+ * Bypasses the cart and redirects directly to checkout.
+ */
+export declare const ProductActionBuyNow: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Pre-Order action button component following the documented API.
+ * Handles can-pre-order functionality when products are not in stock.
+ */
+export declare const ProductActionPreOrder: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Actions namespace containing all product action components
+ * following the documented API: Product.Action.AddToCart, Product.Action.BuyNow, Product.Action.PreOrder
+ */
+export declare const Action: {
+    /** Add to cart action button */
+    readonly AddToCart: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
+    /** Buy now action button */
+    readonly BuyNow: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
+    /** Pre-order action button */
+    readonly PreOrder: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
+};
+/**
+ * Props for ProductVariantStock component
+ */
+export interface ProductVariantStockProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        status: StockStatus;
+        label: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+    /** Custom labels for different stock states */
+    labels?: {
+        /** Label for in stock state */
+        inStock?: string;
+        /** Label for limited stock state (when quantity is low) */
+        limitedStock?: string;
+        /** Label for out of stock state */
+        outOfStock?: string;
+        /** Label for can-pre-order state */
+        preOrder?: string;
+    };
+}
+/**
+ * Displays the selected variant stock status with customizable rendering and labels,
+ * including can-pre-order support. Similar to Product.Stock but for the selected variant.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.ProductVariant.Stock
+ *   className="stock-indicator"
+ *   labels={{
+ *     inStock: 'In Stock',
+ *     limitedStock: 'Limited Stock',
+ *     outOfStock: 'Out of Stock',
+ *     preOrder: 'Available for Pre-order'
+ *   }}
+ * />
+ *
+ * // asChild with primitive
+ * <Product.ProductVariant.Stock asChild>
+ *   <div className="variant-stock-status" />
+ * </Product.ProductVariant.Stock>
+ *
+ * // asChild with react component
+ * <Product.ProductVariant.Stock
+ *   labels={{
+ *     inStock: 'Available',
+ *     limitedStock: 'Low Stock',
+ *     outOfStock: 'Sold Out',
+ *     preOrder: 'Pre-order Now'
+ *   }}
+ *   asChild
+ * >
+ *   {React.forwardRef(({status, label, ...props}, ref) => (
+ *     <div
+ *       ref={ref}
+ *       {...props}
+ *       className="flex items-center gap-2 data-[state='in-stock']:text-green-600 data-[state='limited-stock']:text-yellow-600 data-[state='out-of-stock']:text-red-600 data-[state='can-pre-order']:text-blue-600"
+ *     >
+ *       <div className="w-3 h-3 rounded-full data-[state='in-stock']:bg-green-500 data-[state='limited-stock']:bg-yellow-500 data-[state='out-of-stock']:bg-red-500 data-[state='can-pre-order']:bg-blue-500" />
+ *       <span className="text-sm font-medium">
+ *         {label}
+ *       </span>
+ *     </div>
+ *   ))}
+ * </Product.ProductVariant.Stock>
+ * ```
+ */
+export declare const ProductVariantStock: React.ForwardRefExoticComponent<ProductVariantStockProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for ProductVariantSKU component
+ */
+export interface ProductVariantSKUProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        sku: string | null;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * Displays the selected variant SKU with customizable rendering following the documented API.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.ProductVariant.SKU className="text-content-secondary" />
+ *
+ * // asChild with primitive
+ * <Product.ProductVariant.SKU asChild>
+ *   <span className="sku-value" />
+ * </Product.ProductVariant.SKU>
+ *
+ * // asChild with react component
+ * <Product.ProductVariant.SKU asChild>
+ *   {React.forwardRef(({sku, ...props}, ref) => (
+ *     <span ref={ref} {...props}>
+ *       {sku}
+ *     </span>
+ *   ))}
+ * </Product.ProductVariant.SKU>
+ * ```
+ */
+export declare const ProductVariantSKU: React.ForwardRefExoticComponent<ProductVariantSKUProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for ProductVariantWeight component
+ */
+export interface ProductVariantWeightProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        weight: string | null;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * Displays the selected variant weight with customizable rendering following the documented API.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.ProductVariant.Weight className="text-content-secondary" />
+ *
+ * // asChild with primitive
+ * <Product.ProductVariant.Weight asChild>
+ *   <span className="weight-value" />
+ * </Product.ProductVariant.Weight>
+ *
+ * // asChild with react component
+ * <Product.ProductVariant.Weight asChild>
+ *   {React.forwardRef(({weight, ...props}, ref) => (
+ *     <span ref={ref} {...props}>
+ *       {weight}
+ *     </span>
+ *   ))}
+ * </Product.ProductVariant.Weight>
+ * ```
+ */
+export declare const ProductVariantWeight: React.ForwardRefExoticComponent<ProductVariantWeightProps & React.RefAttributes<HTMLElement>>;
+/**
+ * ProductVariant namespace containing product variant components
+ * following the compound component pattern: Product.ProductVariant.Stock, Product.ProductVariant.SKU, Product.ProductVariant.Weight
+ */
+export declare const ProductVariant: {
+    /** Product variant stock component */
+    readonly Stock: React.ForwardRefExoticComponent<ProductVariantStockProps & React.RefAttributes<HTMLElement>>;
+    /** Product variant SKU component */
+    readonly SKU: React.ForwardRefExoticComponent<ProductVariantSKUProps & React.RefAttributes<HTMLElement>>;
+    /** Product variant weight component */
+    readonly Weight: React.ForwardRefExoticComponent<ProductVariantWeightProps & React.RefAttributes<HTMLElement>>;
+};
+/**
+ * Quantity namespace containing all product quantity components
+ * following the compound component pattern: Product.Quantity.Root, Product.Quantity.Decrement, etc.
+ */
+export declare const Quantity: {
+    /** Product quantity selector component */
+    readonly Root: React.ForwardRefExoticComponent<ProductQuantityProps & React.RefAttributes<HTMLDivElement>>;
+    /** Product quantity decrement component */
+    readonly Decrement: React.ForwardRefExoticComponent<ProductQuantitySubComponentProps & React.RefAttributes<HTMLButtonElement>>;
+    /** Product quantity input component */
+    readonly Input: React.ForwardRefExoticComponent<ProductQuantitySubComponentProps & React.RefAttributes<HTMLInputElement>>;
+    /** Product quantity increment component */
+    readonly Increment: React.ForwardRefExoticComponent<ProductQuantitySubComponentProps & React.RefAttributes<HTMLButtonElement>>;
+    /** Product quantity raw component */
+    readonly Raw: React.ForwardRefExoticComponent<ProductQuantityRawSubComponentProps & React.RefAttributes<HTMLElement>>;
+};