@wix/headless-stores 0.0.61 → 0.0.64

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type AsChildProps } from '../utils/index.js';
+import { AsChildChildren } from '@wix/headless-utils/react';
 /**
  * Choice data interface
  */
@@ -67,10 +67,16 @@ export declare const Root: React.ForwardRefExoticComponent<RootProps & React.Ref
 /**
  * Props for Choice Text component
  */
-export interface TextProps extends AsChildProps<{
-    id: string;
-    value: string;
-}> {
+export interface TextProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        id: string;
+        value: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Text-based choice button.
@@ -105,11 +111,17 @@ export declare const Text: React.ForwardRefExoticComponent<TextProps & React.Ref
 /**
  * Props for Choice Color component
  */
-export interface ColorProps extends AsChildProps<{
-    colorCode: string;
-    name: string;
-    id: string;
-}> {
+export interface ColorProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        colorCode: string;
+        name: string;
+        id: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Color swatch choice.
@@ -148,14 +160,20 @@ export declare const Color: React.ForwardRefExoticComponent<ColorProps & React.R
 /**
  * Props for Choice FreeText component
  */
-export interface FreeTextProps extends AsChildProps<{
-    minCharCount?: number;
-    maxCharCount?: number;
-    defaultAddedPrice?: string | null;
-    title?: string;
-    value?: string;
-    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-}>, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
+export interface FreeTextProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        minCharCount?: number;
+        maxCharCount?: number;
+        defaultAddedPrice?: string | null;
+        title?: string;
+        value?: string;
+        onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Provides a free text input for variant selection.

package/cjs/dist/react/Choice.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { renderAsChild } from '../utils/index.js';
 import { FreeText as FreeTextPrimitive } from './core/ProductModifiers.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
 var TestIds;
 (function (TestIds) {
     TestIds["choiceRoot"] = "choice-root";
@@ -91,24 +91,7 @@ export const Text = React.forwardRef((props, ref) => {
     if (!isVisible)
         return null;
     const choiceId = choice?.choiceId || '';
-    const attributes = {
-        'data-testid': TestIds.choiceText,
-        'data-selected': isSelected ? 'true' : 'false',
-        disabled: !isInStock && !isPreOrderEnabled,
-        onClick: select,
-    };
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: { id: choiceId, value },
-            ref,
-            content: value,
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("button", { className: className, ...attributes, ref: ref, children: value }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.choiceText, "data-selected": isSelected ? 'true' : 'false', disabled: !isInStock && !isPreOrderEnabled, onClick: select, customElement: children, customElementProps: { id: choiceId, value }, content: value, children: _jsx("button", { children: value }) }));
 });
 /**
  * Color swatch choice.
@@ -157,28 +140,11 @@ export const Color = React.forwardRef((props, ref) => {
     if (!isVisible)
         return null;
     const { colorCode, choiceId } = choice;
-    const attributes = {
-        'data-testid': TestIds.choiceColor,
-        'data-selected': isSelected ? 'true' : 'false',
-        disabled: !isInStock && !isPreOrderEnabled,
-        onClick: select,
-    };
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: {
-                colorCode: colorCode || '',
-                name: value,
-                id: choiceId || '',
-            },
-            ref,
-            content: null,
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("button", { className: className, ...attributes, ref: ref, style: { backgroundColor: colorCode }, title: value }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.choiceColor, "data-selected": isSelected ? 'true' : 'false', disabled: !isInStock && !isPreOrderEnabled, onClick: select, customElement: children, customElementProps: {
+            colorCode: colorCode || '',
+            name: value,
+            id: choiceId || '',
+        }, children: _jsx("button", { style: { backgroundColor: colorCode }, title: value }) }));
 });
 /**
  * Provides a free text input for variant selection.
@@ -226,10 +192,6 @@ export const FreeText = React.forwardRef((props, ref) => {
     // Don't render if not visible (handled by ProductVariantSelector in Root)
     if (!isVisible)
         return null;
-    const attributes = {
-        'data-testid': TestIds.choiceFreetext,
-        'data-selected': isSelected ? 'true' : 'false',
-    };
     return (_jsx(FreeTextPrimitive, { modifier: choice, children: ({ value, setText, placeholder, maxChars }) => {
             const handleChange = (e) => {
                 setText(e.target.value);
@@ -237,23 +199,12 @@ export const FreeText = React.forwardRef((props, ref) => {
                     onValueChange(e.target.value);
                 }
             };
-            if (asChild) {
-                const rendered = renderAsChild({
-                    children,
-                    props: {
-                        minCharCount: choice?.minCharCount,
-                        maxCharCount: choice?.maxCharCount,
-                        defaultAddedPrice: choice?.addedPrice || undefined,
-                        title: choice?.name || undefined,
-                        onChange: handleChange,
-                    },
-                    ref,
-                    content: null,
-                    attributes,
-                });
-                if (rendered)
-                    return rendered;
-            }
-            return (_jsx("textarea", { ref: ref, className: className, placeholder: placeholder, rows: 3, value: value, maxLength: maxChars, ...attributes, onChange: handleChange }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.choiceFreetext, "data-selected": isSelected ? 'true' : 'false', customElement: children, customElementProps: {
+                    minCharCount: choice?.minCharCount,
+                    maxCharCount: choice?.maxCharCount,
+                    defaultAddedPrice: choice?.addedPrice || undefined,
+                    title: choice?.name || undefined,
+                    onChange: handleChange,
+                }, children: _jsx("textarea", { placeholder: placeholder, rows: 3, value: value, maxLength: maxChars, onChange: handleChange }) }));
         } }));
 });

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type AsChildProps } from '../utils/index.js';
+import { AsChildChildren } from '@wix/headless-utils/react';
 export interface Option {
     name: string;
     choices?: any[];
@@ -10,11 +10,17 @@ export interface Option {
 /**
  * Root props with asChild support
  */
-export interface RootProps extends AsChildProps<{
-    option: Option;
-    onValueChange?: (value: string) => void;
-    allowedTypes?: ('color' | 'text' | 'free-text')[];
-}> {
+export interface RootProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        option: Option;
+        onValueChange?: (value: string) => void;
+        allowedTypes?: ('color' | 'text' | 'free-text')[];
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
     option: Option;
     onValueChange?: (value: string) => void;
     allowedTypes?: ('color' | 'text' | 'free-text')[];
@@ -105,9 +111,15 @@ export declare const OptionContext: React.Context<any>;
 /**
  * Props for Option Name component
  */
-export interface NameProps extends AsChildProps<{
-    name: string;
-}> {
+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 option name.
@@ -136,9 +148,15 @@ export declare const Name: React.ForwardRefExoticComponent<NameProps & React.Ref
 /**
  * Props for Option MandatoryIndicator component
  */
-export interface MandatoryIndicatorProps extends AsChildProps<{
-    mandatory: boolean;
-}> {
+export interface MandatoryIndicatorProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        mandatory: boolean;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Displays the mandatory indicator (asterisk) when the option is required.

package/cjs/dist/react/Option.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import { renderAsChild } from '../utils/index.js';
 import * as Choice from './Choice.js';
 import * as ProductModifiersPrimitive from './core/ProductModifiers.js';
 import * as ProductVariantSelectorPrimitive from './core/ProductVariantSelector.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
 var TestIds;
 (function (TestIds) {
     TestIds["optionRoot"] = "option-root";
@@ -93,7 +93,7 @@ var TestIds;
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
-    const { asChild, children, option, onValueChange, allowedTypes } = props;
+    const { asChild, children, option, onValueChange, allowedTypes, className } = props;
     // Determine the option type based on the option name and available choices
     const getOptionType = () => {
         if (option.type === 'FREE_TEXT') {
@@ -113,23 +113,7 @@ export const Root = React.forwardRef((props, ref) => {
         allowedTypes,
         mandatory: option?.mandatory || false,
     };
-    const attributes = {
-        'data-testid': TestIds.optionRoot,
-        'data-type': optionType,
-    };
-    const content = (_jsx(OptionContext.Provider, { value: contextValue, children: typeof children === 'function' ? null : children }));
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: { option, onValueChange, allowedTypes },
-            ref,
-            content,
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("div", { ...attributes, ref: ref, children: content }));
+    return (_jsx(OptionContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionRoot, "data-type": optionType, customElement: children, customElementProps: { option, onValueChange, allowedTypes }, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
 });
 // Create a context to pass option data down
 export const OptionContext = React.createContext(null);
@@ -162,21 +146,7 @@ export const Name = React.forwardRef((props, ref) => {
     if (!optionData)
         return null;
     const name = optionData.name || '';
-    const attributes = {
-        'data-testid': TestIds.optionName,
-    };
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: { name },
-            ref,
-            content: name,
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("div", { className: className, ...attributes, ref: ref, children: name }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionName, customElement: children, customElementProps: { name }, content: name, children: _jsx("div", { children: name }) }));
 });
 /**
  * Displays the mandatory indicator (asterisk) when the option is required.
@@ -205,21 +175,7 @@ export const MandatoryIndicator = React.forwardRef((props, ref) => {
     // Don't render anything if not mandatory
     if (!mandatory)
         return null;
-    const attributes = {
-        'data-testid': TestIds.optionMandatoryIndicator,
-    };
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: { mandatory },
-            ref,
-            content: '*',
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("span", { className: className, ...attributes, ref: ref, children: "*" }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionMandatoryIndicator, customElement: children, customElementProps: { mandatory }, content: '*', children: _jsx("span", { children: "*" }) }));
 });
 /**
  * Container for the list items with empty state support.

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

@@ -282,6 +282,113 @@ export interface RawProps {
  * ```
  */
 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: 'in-stock' | 'limited-stock' | 'out-of-stock';
+        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
  */

package/cjs/dist/react/Product.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { InventoryAvailabilityStatus } from '@wix/auto_sdk_stores_products-v-3';
 import React from 'react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { MediaGallery } from '@wix/headless-media/react';
@@ -39,6 +40,8 @@ var TestIds;
     TestIds["productCompareAtPrice"] = "product-compare-at-price";
     TestIds["productSlug"] = "product-slug";
     TestIds["productRaw"] = "product-raw";
+    TestIds["productRibbon"] = "product-ribbon";
+    TestIds["productStock"] = "product-stock";
     TestIds["productVariants"] = "product-variants";
     TestIds["productVariantOptions"] = "product-variant-options";
     TestIds["productVariantOption"] = "product-variant-option";
@@ -68,9 +71,10 @@ var TestIds;
  * ```
  */
 export function Root(props) {
-    return (_jsx(CoreProduct.Root, { productServiceConfig: { product: props.product }, "data-testid": TestIds.productRoot, children: _jsx(MediaGallery.Root, { mediaGalleryServiceConfig: {
+    const { children, product, ...attrs } = props;
+    return (_jsx(CoreProduct.Root, { productServiceConfig: { product: props.product }, children: _jsx(MediaGallery.Root, { mediaGalleryServiceConfig: {
                 media: props.product.media?.itemsInfo?.items ?? [],
-            }, children: _jsx(ProductVariantSelector.Root, { children: _jsx(ProductModifiers.Root, { children: _jsx(SelectedVariant.Root, { children: props.children }) }) }) }) }));
+            }, children: _jsx(ProductVariantSelector.Root, { children: _jsx(ProductModifiers.Root, { children: _jsx(SelectedVariant.Root, { children: _jsx(AsChildSlot, { ...attrs, children: children }) }) }) }) }) }));
 }
 /**
  * Displays the product name with customizable rendering following the documented API.
@@ -287,6 +291,120 @@ export const Raw = React.forwardRef((props, ref) => {
             return (_jsx(AsChildSlot, { ref: ref, className: className, "data-testid": TestIds.productRaw, customElement: children, customElementProps: { product } }));
         } }));
 });
+/**
+ * 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 const Ribbon = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreProduct.Ribbon, { children: ({ ribbon, hasRibbon }) => {
+            // Don't render anything if there's no ribbon
+            if (!hasRibbon) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productRibbon, customElement: children, customElementProps: { ribbon }, content: ribbon, children: _jsx("span", { children: ribbon }) }));
+        } }));
+});
+/**
+ * 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 const Stock = React.forwardRef((props, ref) => {
+    const { asChild, children, className, labels } = props;
+    return (_jsx(CoreProduct.Content, { children: ({ product }) => {
+            const availabilityStatus = product.inventory?.availabilityStatus;
+            // Default labels
+            const defaultLabels = {
+                inStock: 'In Stock',
+                limitedStock: 'Partially Out of Stock',
+                outOfStock: 'Out of Stock',
+            };
+            const finalLabels = { ...defaultLabels, ...labels };
+            // Determine status based on availabilityStatus
+            let status;
+            let label;
+            switch (availabilityStatus) {
+                case InventoryAvailabilityStatus.IN_STOCK:
+                    status = 'in-stock';
+                    label = finalLabels.inStock;
+                    break;
+                case InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK:
+                    status = 'limited-stock';
+                    label = finalLabels.limitedStock;
+                    break;
+                case InventoryAvailabilityStatus.OUT_OF_STOCK:
+                default:
+                    status = 'out-of-stock';
+                    label = finalLabels.outOfStock;
+                    break;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productStock, "data-state": status, customElement: children, customElementProps: {
+                    status,
+                    label,
+                }, content: label, children: _jsx("span", { children: label }) }));
+        } }));
+});
 /**
  * Container for product variant selection system.
  * Does not render when there are no variants.

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

@@ -183,3 +183,43 @@ export interface ProductSlugRenderProps {
  * ```
  */
 export declare function Slug(props: ProductSlugProps): import("react").ReactNode;
+/**
+ * Props for ProductRibbon headless component
+ */
+export interface ProductRibbonProps {
+    /** Render prop function that receives product ribbon data */
+    children: (props: ProductRibbonRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for ProductRibbon component
+ */
+export interface ProductRibbonRenderProps {
+    /** Product ribbon text */
+    ribbon: string | null;
+    /** Whether the product has a ribbon */
+    hasRibbon: boolean;
+}
+/**
+ * Headless component for product ribbon display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductRibbonDisplay() {
+ *   return (
+ *     <Product.Ribbon>
+ *       {({ ribbon, hasRibbon }) => (
+ *         hasRibbon ? (
+ *           <span className="ribbon-badge">
+ *             {ribbon}
+ *           </span>
+ *         ) : null
+ *       )}
+ *     </Product.Ribbon>
+ *   );
+ * }
+ * ```
+ */
+export declare function Ribbon(props: ProductRibbonProps): import("react").ReactNode;