@wix/headless-stores 0.0.78 → 0.0.79

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

@@ -860,6 +860,92 @@ export declare const Action: {
     /** Pre-order action button */
     readonly PreOrder: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
 };
+/**
+ * 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.SKU, Product.ProductVariant.Weight
+ */
+export declare const ProductVariant: {
+    /** 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.

package/cjs/dist/react/Product.js

@@ -47,6 +47,9 @@ var TestIds;
     TestIds["productVariants"] = "product-variants";
     TestIds["productVariantOptions"] = "product-variant-options";
     TestIds["productVariantOption"] = "product-variant-option";
+    TestIds["productVariant"] = "product-variant";
+    TestIds["productVariantSku"] = "product-variant-sku";
+    TestIds["productVariantWeight"] = "product-variant-weight";
     TestIds["productModifiers"] = "product-modifiers";
     TestIds["productModifierOptions"] = "product-modifier-options";
     TestIds["productModifierOption"] = "product-modifier-option";
@@ -780,7 +783,7 @@ export const ProductQuantityDecrement = React.forwardRef((props, ref) => {
             if (asChild && children) {
                 return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productQuantityDecrement, customElement: children, customElementProps: { disabled } }));
             }
-            return (_jsx(QuantityComponent.Decrement, { className: className, ref: ref, "data-testid": TestIds.productQuantityDecrement, disabled: disabled }));
+            return (_jsx(QuantityComponent.Decrement, { className: className, ref: ref, "data-testid": TestIds.productQuantityDecrement, disabled }));
         } }));
 });
 /**
@@ -821,7 +824,7 @@ export const ProductQuantityIncrement = React.forwardRef((props, ref) => {
             if (asChild && children) {
                 return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productQuantityIncrement, customElement: children, customElementProps: { disabled } }));
             }
-            return (_jsx(QuantityComponent.Increment, { className: className, ref: ref, "data-testid": TestIds.productQuantityIncrement, disabled: disabled }));
+            return (_jsx(QuantityComponent.Increment, { className: className, ref: ref, "data-testid": TestIds.productQuantityIncrement, disabled }));
         } }));
 });
 /**
@@ -935,6 +938,84 @@ export const Action = {
     /** Pre-order action button */
     PreOrder: ProductActionPreOrder,
 };
+/**
+ * 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 const ProductVariantSKU = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(SelectedVariant.Details, { children: ({ sku }) => {
+            // Don't render anything if there's no SKU
+            if (!sku) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productVariantSku, customElement: children, customElementProps: { sku }, content: sku, children: _jsx("span", { children: sku }) }));
+        } }));
+});
+/**
+ * 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 const ProductVariantWeight = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(SelectedVariant.Details, { children: ({ weight }) => {
+            // Don't render anything if there's no weight
+            if (!weight) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productVariantWeight, customElement: children, customElementProps: { weight }, content: weight, children: _jsx("span", { children: weight }) }));
+        } }));
+});
+/**
+ * ProductVariant namespace containing product variant components
+ * following the compound component pattern: Product.ProductVariant.SKU, Product.ProductVariant.Weight
+ */
+export const ProductVariant = {
+    /** Product variant SKU component */
+    SKU: ProductVariantSKU,
+    /** Product variant weight component */
+    Weight: ProductVariantWeight,
+};
 /**
  * Quantity namespace containing all product quantity components
  * following the compound component pattern: Product.Quantity.Root, Product.Quantity.Decrement, etc.

package/dist/react/Product.d.ts

@@ -860,6 +860,92 @@ export declare const Action: {
     /** Pre-order action button */
     readonly PreOrder: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
 };
+/**
+ * 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.SKU, Product.ProductVariant.Weight
+ */
+export declare const ProductVariant: {
+    /** 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.

package/dist/react/Product.js

@@ -47,6 +47,9 @@ var TestIds;
     TestIds["productVariants"] = "product-variants";
     TestIds["productVariantOptions"] = "product-variant-options";
     TestIds["productVariantOption"] = "product-variant-option";
+    TestIds["productVariant"] = "product-variant";
+    TestIds["productVariantSku"] = "product-variant-sku";
+    TestIds["productVariantWeight"] = "product-variant-weight";
     TestIds["productModifiers"] = "product-modifiers";
     TestIds["productModifierOptions"] = "product-modifier-options";
     TestIds["productModifierOption"] = "product-modifier-option";
@@ -780,7 +783,7 @@ export const ProductQuantityDecrement = React.forwardRef((props, ref) => {
             if (asChild && children) {
                 return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productQuantityDecrement, customElement: children, customElementProps: { disabled } }));
             }
-            return (_jsx(QuantityComponent.Decrement, { className: className, ref: ref, "data-testid": TestIds.productQuantityDecrement, disabled: disabled }));
+            return (_jsx(QuantityComponent.Decrement, { className: className, ref: ref, "data-testid": TestIds.productQuantityDecrement, disabled }));
         } }));
 });
 /**
@@ -821,7 +824,7 @@ export const ProductQuantityIncrement = React.forwardRef((props, ref) => {
             if (asChild && children) {
                 return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productQuantityIncrement, customElement: children, customElementProps: { disabled } }));
             }
-            return (_jsx(QuantityComponent.Increment, { className: className, ref: ref, "data-testid": TestIds.productQuantityIncrement, disabled: disabled }));
+            return (_jsx(QuantityComponent.Increment, { className: className, ref: ref, "data-testid": TestIds.productQuantityIncrement, disabled }));
         } }));
 });
 /**
@@ -935,6 +938,84 @@ export const Action = {
     /** Pre-order action button */
     PreOrder: ProductActionPreOrder,
 };
+/**
+ * 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 const ProductVariantSKU = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(SelectedVariant.Details, { children: ({ sku }) => {
+            // Don't render anything if there's no SKU
+            if (!sku) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productVariantSku, customElement: children, customElementProps: { sku }, content: sku, children: _jsx("span", { children: sku }) }));
+        } }));
+});
+/**
+ * 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 const ProductVariantWeight = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(SelectedVariant.Details, { children: ({ weight }) => {
+            // Don't render anything if there's no weight
+            if (!weight) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productVariantWeight, customElement: children, customElementProps: { weight }, content: weight, children: _jsx("span", { children: weight }) }));
+        } }));
+});
+/**
+ * ProductVariant namespace containing product variant components
+ * following the compound component pattern: Product.ProductVariant.SKU, Product.ProductVariant.Weight
+ */
+export const ProductVariant = {
+    /** Product variant SKU component */
+    SKU: ProductVariantSKU,
+    /** Product variant weight component */
+    Weight: ProductVariantWeight,
+};
 /**
  * Quantity namespace containing all product quantity components
  * following the compound component pattern: Product.Quantity.Root, Product.Quantity.Decrement, etc.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-stores",
-  "version": "0.0.78",
+  "version": "0.0.79",
   "type": "module",
   "scripts": {
     "prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",