import React from 'react';
import * as CoreCmsItem from './core/CmsItem.js';
import type { LineItem } from '@wix/headless-ecom/services';
/**
* Props for CmsItem.Root component
*/
export interface RootProps {
className?: string;
children: (props: CoreCmsItem.RootRenderProps) => React.ReactNode;
item: {
collectionId: string;
id: string;
item?: any;
/** List of field IDs for single reference fields to include */
singleRefFieldIds?: string[];
/** List of field IDs for multi reference fields to include */
multiRefFieldIds?: string[];
};
}
/**
* Root component that provides the CMS Item service context to its children.
* This component exposes all item service properties via render props pattern.
*
* @component
* @example
* ```tsx
* import { CmsItem } from '@wix/cms/components';
*
* // Basic usage - provides item context
* function ItemPage() {
* return (
*
* Custom rendering logic here
*
* );
* }
*
* // With reference fields included
* function ItemWithReferences() {
* return (
*
* Custom rendering logic here
*
* );
* }
* ```
*/
export declare const Root: React.ForwardRefExoticComponent>;
/**
* Props for CmsItem.Action.AddToCart component
*/
export interface ActionAddToCartProps extends Omit, 'children'> {
/** When true, the component will not render its own element but forward its props to its child */
asChild?: boolean;
/**
* Content to render inside the button.
* Can be static content or a render function for custom behavior.
*/
children?: React.ReactNode | React.ForwardRefRenderFunction Promise;
/** Line items that will be processed */
lineItems: LineItem[];
/** Error message if any */
error?: string | null;
}>;
/** Text or content to display when not loading */
label?: string | React.ReactNode;
/** Text or content to display when loading */
loadingState?: string | React.ReactNode;
/** Additional disabled state (combined with loading state) */
disabled?: boolean;
/** Quantity to add (defaults to 1) */
quantity?: number;
}
/**
* Add to Cart action button component for CMS items.
* Uses CoreCmsItem.Action.AddToCart to get CMS data and wraps Commerce.Actions.AddToCart.
* Automatically uses the item ID and collection ID from the CmsItem context.
*
* @component
* @example
* ```tsx
*
* {({ item }) => (
*
*
{item.title}
*
*
* )}
*
* ```
*/
export declare const ActionAddToCart: React.ForwardRefExoticComponent>;
/**
* Props for CmsItem.Action.BuyNow component
*/
export interface ActionBuyNowProps extends Omit, 'children'> {
/** When true, the component will not render its own element but forward its props to its child */
asChild?: boolean;
/**
* Content to render inside the button.
* Can be static content or a render function for custom behavior.
*/
children?: React.ReactNode | React.ForwardRefRenderFunction Promise;
/** Line items that will be processed */
lineItem: LineItem;
/** Error message if any */
error?: string | null;
}>;
/** Text or content to display when not loading */
label?: string | React.ReactNode;
/** Text or content to display when loading */
loadingState?: string | React.ReactNode;
/** Additional disabled state (combined with loading state) */
disabled?: boolean;
/** Quantity to purchase (defaults to 1) */
quantity?: number;
}
/**
* Buy Now action button component for CMS items.
* Uses CoreCmsItem.Action.BuyNow to get CMS data and wraps Commerce.Actions.BuyNow.
* Automatically uses the item ID and collection ID from the CmsItem context.
*
* @component
* @example
* ```tsx
*
* {({ item }) => (
*
*
{item.title}
*
*
* )}
*
* ```
*/
export declare const ActionBuyNow: React.ForwardRefExoticComponent>;
/**
* Namespace containing all CMS item action components.
*/
export declare const Action: {
/** Add to Cart button for adding the item to cart */
readonly AddToCart: React.ForwardRefExoticComponent>;
/** Buy Now button for immediate purchase of the item */
readonly BuyNow: React.ForwardRefExoticComponent>;
};