@wix/headless-stores 0.0.52 → 0.0.53

package/dist/react/Product.d.ts

@@ -1,12 +1,41 @@
-import { ProductServiceConfig } from "../services/product-service.js";
-import type { V3Product, ProductMedia } from "@wix/auto_sdk_stores_products-v-3";
-export interface RootProps {
+import type { V3Product } from '@wix/auto_sdk_stores_products-v-3';
+import React from 'react';
+import { type AsChildProps } from '../utils/index.js';
+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;
+/**
+ * Props for the Product root component following the documented API
+ */
+export interface ProductRootProps {
     children: React.ReactNode;
-    productServiceConfig: ProductServiceConfig;
+    product: V3Product;
+    selectedVariant?: any;
 }
 /**
- * Root component that provides the Product service context to its children.
- * This component sets up the necessary services for rendering and managing a single product's data.
+ * 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
@@ -14,135 +43,349 @@ export interface RootProps {
  * ```tsx
  * import { Product } from '@wix/stores/components';
  *
- * function ProductPage() {
+ * function ProductPage({ product }) {
  *   return (
- *     <Product.Root productServiceConfig={{ product: myProduct }}>
- *       <div>
- *         <Product.Name>
- *           {({ name }) => (
- *             <h1
- *               className="text-4xl font-bold text-content-primary mb-4"
- *               data-testid="product-name"
- *             >
- *               {name}
- *             </h1>
- *           )}
- *         </Product.Name>
- *       </div>
+ *     <Product.Root product={product}>
+ *       <Product.Name className="text-4xl font-bold" />
  *     </Product.Root>
  *   );
  * }
  * ```
  */
-export declare function Root(props: RootProps): React.ReactNode;
+export declare function Root(props: ProductRootProps): React.ReactNode;
 /**
- * Props for ProductName headless component
+ * Props for Product Name component
  */
-export interface ProductNameProps {
-    /** Render prop function that receives product name data */
-    children: (props: ProductNameRenderProps) => React.ReactNode;
+export interface NameProps extends AsChildProps<{
+    name: string;
+}> {
 }
 /**
- * Render props for ProductName component
+ * 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 interface ProductNameRenderProps {
-    /** Product name */
-    name: string;
+export declare const Name: React.ForwardRefExoticComponent<NameProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Product Description component
+ */
+export interface DescriptionProps extends AsChildProps<{
+    description: string;
+}> {
+    /** Format of the description content */
+    as?: `${AsContent}`;
 }
 /**
- * Headless component for product name display
+ * Displays the product description with customizable rendering and format options following the documented API.
  *
  * @component
  * @example
  * ```tsx
- * import { Product } from '@wix/stores/components';
+ * // Default usage (plain text)
+ * <Product.Description className="text-content-secondary" />
  *
- * function ProductHeader() {
- *   return (
- *     <Product.Name>
- *       {({ name }) => (
- *         <h1>{name}</h1>
- *       )}
- *     </Product.Name>
- *   );
- * }
+ * // 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 function Name(props: ProductNameProps): import("react").ReactNode;
+export declare const Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLElement>>;
 /**
- * Props for ProductDescription headless component
+ * Props for Product Price component
  */
-export interface ProductDescriptionProps {
-    /** Render prop function that receives product description data */
-    children: (props: ProductDescriptionRenderProps) => React.ReactNode;
+export interface PriceProps extends AsChildProps<{
+    price: string;
+    formattedPrice: string;
+}> {
 }
 /**
- * Render props for ProductDescription component
+ * 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 interface ProductDescriptionRenderProps {
-    /** Product description using the RICOS (Rich Content Object) format. See https://dev.wix.com/docs/ricos/api-reference/ricos-document */
-    description: NonNullable<V3Product["description"]>;
-    /** Product description with plain html */
-    plainDescription: NonNullable<V3Product["plainDescription"]>;
-}
+export declare const Price: React.ForwardRefExoticComponent<PriceProps & React.RefAttributes<HTMLElement>>;
 /**
- * Render props for ProductDescription component
+ * Props for Product CompareAtPrice component
  */
-export interface ProductDescriptionRenderProps {
-    /** Product description using the RICOS (Rich Content Object) format. See https://dev.wix.com/docs/ricos/api-reference/ricos-document */
-    description: NonNullable<V3Product["description"]>;
-    /** Product description with plain html */
-    plainDescription: NonNullable<V3Product["plainDescription"]>;
+export interface CompareAtPriceProps extends AsChildProps<{
+    price: string;
+    formattedPrice: string;
+}> {
 }
 /**
- * Headless component for product description display
+ * Displays the compare-at (original) price when on sale with customizable rendering following the documented API.
  *
  * @component
  * @example
  * ```tsx
- * import { Product } from '@wix/stores/components';
+ * // Default usage (only shows when on sale)
+ * <Product.CompareAtPrice className="text-lg text-content-faded line-through hidden data-[discounted]:inline" />
  *
- * function ProductDescription() {
- *   return (
- *     <Product.Description>
- *       {({ plainDescription, description }) => (
- *         <div>
- *           {plainDescription && (
- *             <div
- *               dangerouslySetInnerHTML={{
- *                 __html: plainDescription,
- *               }}
- *             />
- *           )}
- *           {description && (
- *             <div>Rich content description available</div>
- *           )}
- *         </div>
- *       )}
- *     </Product.Description>
- *   );
- * }
+ * // 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 function Description(props: ProductDescriptionProps): import("react").ReactNode;
-export interface ProductMediaProps {
-    children: (props: ProductMediaRenderProps) => React.ReactNode;
+export declare const CompareAtPrice: React.ForwardRefExoticComponent<CompareAtPriceProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Product Variants container
+ */
+export interface VariantsProps extends AsChildProps<{
+    hasOptions: boolean;
+}> {
 }
-export interface ProductMediaRenderProps {
-    media: ProductMedia[];
+/**
+ * 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;
 }
-export declare function Media(props: ProductMediaProps): import("react").ReactNode;
-export interface ProductProps {
-    children: (props: ProductRenderProps) => 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<HTMLElement>>;
+/**
+ * Props for Product VariantOptionRepeater component
+ */
+export interface VariantOptionRepeaterProps {
+    children: React.ReactNode;
 }
-export interface ProductRenderProps {
-    product: V3Product;
+/**
+ * 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 extends AsChildProps<{
+    hasModifiers: boolean;
+}> {
 }
-export declare function Content(props: ProductProps): import("react").ReactNode;
-export interface LoadingProps {
-    children: (props: LoadingRenderProps) => React.ReactNode;
+/**
+ * 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;
 }
-export interface LoadingRenderProps {
-    isLoading: boolean;
+/**
+ * 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<HTMLElement>>;
+/**
+ * Props for Product ModifierOptionRepeater component
+ */
+export interface ModifierOptionRepeaterProps {
+    children: React.ReactNode;
+    allowedTypes?: ('color' | 'text' | 'free-text')[];
 }
-export declare function Loading(props: LoadingProps): import("react").ReactNode;
+/**
+ * Repeater component that renders children for each modifier option.
+ *
+ * @component
+ */
+export declare const ModifierOptionRepeater: React.ForwardRefExoticComponent<ModifierOptionRepeaterProps & React.RefAttributes<HTMLElement>>;
+export {};