@wix/headless-stores 0.0.60 → 0.0.62

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?: React.ReactNode | React.ForwardRefRenderFunction<HTMLElement, {
+        ribbon: string | null;
+    }> | React.ForwardRefExoticComponent<any>;
+    /** 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?: React.ReactNode | React.ForwardRefRenderFunction<HTMLElement, {
+        status: 'in-stock' | 'limited-stock' | 'out-of-stock';
+        label: string;
+    }> | React.ForwardRefExoticComponent<any>;
+    /** 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;

package/cjs/dist/react/core/Product.js

@@ -155,3 +155,36 @@ export function Slug(props) {
         slug,
     });
 }
+/**
+ * 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 function Ribbon(props) {
+    const service = useService(ProductServiceDefinition);
+    const product = service.product.get();
+    const ribbon = product.ribbon?.name || null;
+    const hasRibbon = !!ribbon;
+    return props.children({
+        ribbon,
+        hasRibbon,
+    });
+}

package/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?: React.ReactNode | React.ForwardRefRenderFunction<HTMLElement, {
+        ribbon: string | null;
+    }> | React.ForwardRefExoticComponent<any>;
+    /** 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?: React.ReactNode | React.ForwardRefRenderFunction<HTMLElement, {
+        status: 'in-stock' | 'limited-stock' | 'out-of-stock';
+        label: string;
+    }> | React.ForwardRefExoticComponent<any>;
+    /** 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/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/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;

package/dist/react/core/Product.js

@@ -155,3 +155,36 @@ export function Slug(props) {
         slug,
     });
 }
+/**
+ * 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 function Ribbon(props) {
+    const service = useService(ProductServiceDefinition);
+    const product = service.product.get();
+    const ribbon = product.ribbon?.name || null;
+    const hasRibbon = !!ribbon;
+    return props.children({
+        ribbon,
+        hasRibbon,
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-stores",
-  "version": "0.0.60",
+  "version": "0.0.62",
   "type": "module",
   "scripts": {
     "prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",
@@ -62,7 +62,7 @@
     "@wix/auto_sdk_stores_read-only-variants-v-3": "^1.0.23",
     "@wix/ecom": "^1.0.1278",
     "@wix/essentials": "^0.1.24",
-    "@wix/headless-components": "0.0.2",
+    "@wix/headless-components": "0.0.3",
     "@wix/headless-ecom": "0.0.17",
     "@wix/headless-media": "^0.0.11",
     "@wix/headless-utils": "^0.0.2",