@butternutbox/pawprint-native 1.0.0 → 1.1.1

package/dist/index.d.cts

@@ -2347,12 +2347,23 @@ type ProductDisplayCardProps = ViewProps & {
     onQuantityChange?: (quantity: number) => void;
     showQuantityPicker?: boolean;
     /**
+     * @deprecated Use `thumbnailBadge` instead. When both are set, `thumbnailBadge`
+     * wins. This prop will be removed in a future major release.
+     *
      * Show a quantity badge overlaid on the top-right of the image (rendering the
-     * current `quantity`) instead of the quantity picker. Defaults to `false`.
-     * The badge and the quantity picker are mutually exclusive — only one shows
-     * at a time; when `quantityBadge` is true the picker is never rendered.
+     * current `quantity`). Defaults to `false`. Independent of the quantity
+     * picker — use `showQuantityPicker` to control that separately.
      */
     quantityBadge?: boolean;
+    /**
+     * Render a `Badge` overlaid on the top-right of the image. Accepts any
+     * `BadgeProps` (variant, size, icon, children, etc.) — pass them as an object.
+     * Independent of the quantity picker: both can be shown at the same time.
+     *
+     * @example
+     * thumbnailBadge={{ variant: "primary", size: "large", children: "New" }}
+     */
+    thumbnailBadge?: BadgeProps;
     disableQuantityButtons?: boolean;
     hideQuantityButtons?: boolean;
     incrementDisabled?: boolean;
@@ -2389,9 +2400,14 @@ type ProductDisplayCardProps = ViewProps & {
  * @param quantity - *(optional)* Current quantity value
  * @param onQuantityChange - *(optional)* Callback when quantity changes
  * @param showQuantityPicker - *(optional)* Show/hide quantity picker
- * @param quantityBadge - *(optional)* Show a quantity badge over the image instead
- *   of the picker (renders the current `quantity`). Mutually exclusive with the
- *   quantity picker; defaults to `false`. Used on OOB recipe and Extras cards.
+ * @param quantityBadge - *(optional)* **@deprecated** — use `thumbnailBadge` instead.
+ *   Show a legacy quantity badge over the image (renders the current `quantity`
+ *   as a primary/large Badge). Mutually exclusive with the picker; defaults to
+ *   `false`. When both `thumbnailBadge` and `quantityBadge` are set, `thumbnailBadge`
+ *   wins.
+ * @param thumbnailBadge - *(optional)* Render a `Badge` overlaid on the top-right
+ *   of the image. Accepts any `BadgeProps` (`variant`, `size`, `icon`, `children`, …).
+ *   Mutually exclusive with the quantity picker.
  * @param quantityStep - *(optional)* Increment/decrement amount (default: 1)
  * @param image - *(optional)* Image URL string or React element
  * @param banner - *(optional)* Banner content string or React element to show below card
@@ -2407,12 +2423,23 @@ declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
     onQuantityChange?: (quantity: number) => void;
     showQuantityPicker?: boolean;
     /**
+     * @deprecated Use `thumbnailBadge` instead. When both are set, `thumbnailBadge`
+     * wins. This prop will be removed in a future major release.
+     *
      * Show a quantity badge overlaid on the top-right of the image (rendering the
-     * current `quantity`) instead of the quantity picker. Defaults to `false`.
-     * The badge and the quantity picker are mutually exclusive — only one shows
-     * at a time; when `quantityBadge` is true the picker is never rendered.
+     * current `quantity`). Defaults to `false`. Independent of the quantity
+     * picker — use `showQuantityPicker` to control that separately.
      */
     quantityBadge?: boolean;
+    /**
+     * Render a `Badge` overlaid on the top-right of the image. Accepts any
+     * `BadgeProps` (variant, size, icon, children, etc.) — pass them as an object.
+     * Independent of the quantity picker: both can be shown at the same time.
+     *
+     * @example
+     * thumbnailBadge={{ variant: "primary", size: "large", children: "New" }}
+     */
+    thumbnailBadge?: BadgeProps;
     disableQuantityButtons?: boolean;
     hideQuantityButtons?: boolean;
     incrementDisabled?: boolean;

package/dist/index.d.ts

@@ -2347,12 +2347,23 @@ type ProductDisplayCardProps = ViewProps & {
     onQuantityChange?: (quantity: number) => void;
     showQuantityPicker?: boolean;
     /**
+     * @deprecated Use `thumbnailBadge` instead. When both are set, `thumbnailBadge`
+     * wins. This prop will be removed in a future major release.
+     *
      * Show a quantity badge overlaid on the top-right of the image (rendering the
-     * current `quantity`) instead of the quantity picker. Defaults to `false`.
-     * The badge and the quantity picker are mutually exclusive — only one shows
-     * at a time; when `quantityBadge` is true the picker is never rendered.
+     * current `quantity`). Defaults to `false`. Independent of the quantity
+     * picker — use `showQuantityPicker` to control that separately.
      */
     quantityBadge?: boolean;
+    /**
+     * Render a `Badge` overlaid on the top-right of the image. Accepts any
+     * `BadgeProps` (variant, size, icon, children, etc.) — pass them as an object.
+     * Independent of the quantity picker: both can be shown at the same time.
+     *
+     * @example
+     * thumbnailBadge={{ variant: "primary", size: "large", children: "New" }}
+     */
+    thumbnailBadge?: BadgeProps;
     disableQuantityButtons?: boolean;
     hideQuantityButtons?: boolean;
     incrementDisabled?: boolean;
@@ -2389,9 +2400,14 @@ type ProductDisplayCardProps = ViewProps & {
  * @param quantity - *(optional)* Current quantity value
  * @param onQuantityChange - *(optional)* Callback when quantity changes
  * @param showQuantityPicker - *(optional)* Show/hide quantity picker
- * @param quantityBadge - *(optional)* Show a quantity badge over the image instead
- *   of the picker (renders the current `quantity`). Mutually exclusive with the
- *   quantity picker; defaults to `false`. Used on OOB recipe and Extras cards.
+ * @param quantityBadge - *(optional)* **@deprecated** — use `thumbnailBadge` instead.
+ *   Show a legacy quantity badge over the image (renders the current `quantity`
+ *   as a primary/large Badge). Mutually exclusive with the picker; defaults to
+ *   `false`. When both `thumbnailBadge` and `quantityBadge` are set, `thumbnailBadge`
+ *   wins.
+ * @param thumbnailBadge - *(optional)* Render a `Badge` overlaid on the top-right
+ *   of the image. Accepts any `BadgeProps` (`variant`, `size`, `icon`, `children`, …).
+ *   Mutually exclusive with the quantity picker.
  * @param quantityStep - *(optional)* Increment/decrement amount (default: 1)
  * @param image - *(optional)* Image URL string or React element
  * @param banner - *(optional)* Banner content string or React element to show below card
@@ -2407,12 +2423,23 @@ declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
     onQuantityChange?: (quantity: number) => void;
     showQuantityPicker?: boolean;
     /**
+     * @deprecated Use `thumbnailBadge` instead. When both are set, `thumbnailBadge`
+     * wins. This prop will be removed in a future major release.
+     *
      * Show a quantity badge overlaid on the top-right of the image (rendering the
-     * current `quantity`) instead of the quantity picker. Defaults to `false`.
-     * The badge and the quantity picker are mutually exclusive — only one shows
-     * at a time; when `quantityBadge` is true the picker is never rendered.
+     * current `quantity`). Defaults to `false`. Independent of the quantity
+     * picker — use `showQuantityPicker` to control that separately.
      */
     quantityBadge?: boolean;
+    /**
+     * Render a `Badge` overlaid on the top-right of the image. Accepts any
+     * `BadgeProps` (variant, size, icon, children, etc.) — pass them as an object.
+     * Independent of the quantity picker: both can be shown at the same time.
+     *
+     * @example
+     * thumbnailBadge={{ variant: "primary", size: "large", children: "New" }}
+     */
+    thumbnailBadge?: BadgeProps;
     disableQuantityButtons?: boolean;
     hideQuantityButtons?: boolean;
     incrementDisabled?: boolean;

package/dist/index.js

@@ -12231,6 +12231,7 @@ var ProductDisplayCard = React66.forwardRef(
       onQuantityChange,
       showQuantityPicker = false,
       quantityBadge = false,
+      thumbnailBadge,
       disableQuantityButtons = false,
       hideQuantityButtons = false,
       incrementDisabled = false,
@@ -12253,6 +12254,7 @@ var ProductDisplayCard = React66.forwardRef(
       "onQuantityChange",
       "showQuantityPicker",
       "quantityBadge",
+      "thumbnailBadge",
       "disableQuantityButtons",
       "hideQuantityButtons",
       "incrementDisabled",
@@ -12273,6 +12275,7 @@ var ProductDisplayCard = React66.forwardRef(
         onQuantityChange == null ? void 0 : onQuantityChange(newQuantity);
       }
     };
+    const resolvedBadgeProps = thumbnailBadge != null ? thumbnailBadge : quantityBadge ? { variant: "primary", size: "large", children: String(quantity) } : void 0;
     const cardContent = /* @__PURE__ */ jsxs(
       StyledCardContainer,
       __spreadProps(__spreadValues({
@@ -12294,7 +12297,7 @@ var ProductDisplayCard = React66.forwardRef(
                     style: { flex: 1, width: "100%" }
                   }
                 ) : image,
-                quantityBadge && /* @__PURE__ */ jsx(StyledBadgeOverlay, { pointerEvents: "none", children: /* @__PURE__ */ jsx(Badge, { variant: "primary", size: "large", children: String(quantity) }) })
+                resolvedBadgeProps && /* @__PURE__ */ jsx(StyledBadgeOverlay, { pointerEvents: "none", children: /* @__PURE__ */ jsx(Badge, __spreadValues({}, resolvedBadgeProps)) })
               ]
             }
           ) }),
@@ -12303,7 +12306,7 @@ var ProductDisplayCard = React66.forwardRef(
               /* @__PURE__ */ jsx(Typography, { variant: "heading", size: "2xs", color: "primary", children: title }),
               showSubtext && subtext && /* @__PURE__ */ jsx(Typography, { variant: "body", size: "sm", color: "secondary", children: subtext })
             ] }),
-            showQuantityPicker && !quantityBadge && /* @__PURE__ */ jsx(View, { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx(
+            showQuantityPicker && /* @__PURE__ */ jsx(View, { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx(
               NumberField,
               {
                 size: "sm",