@butternutbox/pawprint-native 0.19.2 → 0.20.0

package/dist/index.d.cts

@@ -2319,6 +2319,13 @@ type ProductDisplayCardProps = ViewProps & {
     quantity?: number;
     onQuantityChange?: (quantity: number) => void;
     showQuantityPicker?: boolean;
+    /**
+     * 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.
+     */
+    quantityBadge?: boolean;
     disableQuantityButtons?: boolean;
     hideQuantityButtons?: boolean;
     incrementDisabled?: boolean;
@@ -2354,6 +2361,9 @@ 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 image - *(optional)* Image URL string or React element
  * @param banner - *(optional)* Banner content string or React element to show below card
  * @param showBanner - *(optional)* Show/hide banner
@@ -2367,6 +2377,13 @@ declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
     quantity?: number;
     onQuantityChange?: (quantity: number) => void;
     showQuantityPicker?: boolean;
+    /**
+     * 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.
+     */
+    quantityBadge?: boolean;
     disableQuantityButtons?: boolean;
     hideQuantityButtons?: boolean;
     incrementDisabled?: boolean;

package/dist/index.d.ts

@@ -2319,6 +2319,13 @@ type ProductDisplayCardProps = ViewProps & {
     quantity?: number;
     onQuantityChange?: (quantity: number) => void;
     showQuantityPicker?: boolean;
+    /**
+     * 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.
+     */
+    quantityBadge?: boolean;
     disableQuantityButtons?: boolean;
     hideQuantityButtons?: boolean;
     incrementDisabled?: boolean;
@@ -2354,6 +2361,9 @@ 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 image - *(optional)* Image URL string or React element
  * @param banner - *(optional)* Banner content string or React element to show below card
  * @param showBanner - *(optional)* Show/hide banner
@@ -2367,6 +2377,13 @@ declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
     quantity?: number;
     onQuantityChange?: (quantity: number) => void;
     showQuantityPicker?: boolean;
+    /**
+     * 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.
+     */
+    quantityBadge?: boolean;
     disableQuantityButtons?: boolean;
     hideQuantityButtons?: boolean;
     incrementDisabled?: boolean;

package/dist/index.js

@@ -11999,6 +11999,17 @@ var StyledImage3 = styled51(View)(({ theme: theme2, imageBackgroundColor, thumbn
   minHeight: thumbnailWidth,
   position: "relative"
 }));
+var StyledBadgeOverlay = styled51(View)(({ theme: theme2 }) => {
+  const offset = parseTokenValue9(
+    theme2.tokens.semantics.dimensions.spacing["2xs"]
+  );
+  return {
+    position: "absolute",
+    top: offset,
+    right: offset,
+    zIndex: 2
+  };
+});
 var StyledContentArea = styled51(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.semantics.dimensions;
   const paddingValue = parseTokenValue9(spacing.md);
@@ -12075,6 +12086,7 @@ var ProductDisplayCard = React66.forwardRef(
       quantity = 1,
       onQuantityChange,
       showQuantityPicker = false,
+      quantityBadge = false,
       disableQuantityButtons = false,
       hideQuantityButtons = false,
       incrementDisabled = false,
@@ -12095,6 +12107,7 @@ var ProductDisplayCard = React66.forwardRef(
       "quantity",
       "onQuantityChange",
       "showQuantityPicker",
+      "quantityBadge",
       "disableQuantityButtons",
       "hideQuantityButtons",
       "incrementDisabled",
@@ -12121,19 +12134,22 @@ var ProductDisplayCard = React66.forwardRef(
         showBanner: showBanner && !!banner
       }, rest), {
         children: [
-          image && /* @__PURE__ */ jsx(Pressable, { disabled: !onImagePress, onPress: onImagePress, children: /* @__PURE__ */ jsx(
+          image && /* @__PURE__ */ jsx(Pressable, { disabled: !onImagePress, onPress: onImagePress, children: /* @__PURE__ */ jsxs(
             StyledImage3,
             {
               imageBackgroundColor,
               thumbnailWidth,
-              children: typeof image === "string" ? /* @__PURE__ */ jsx(
-                Image,
-                {
-                  source: { uri: image },
-                  resizeMode: "cover",
-                  style: { flex: 1, width: "100%" }
-                }
-              ) : image
+              children: [
+                typeof image === "string" ? /* @__PURE__ */ jsx(
+                  Image,
+                  {
+                    source: { uri: image },
+                    resizeMode: "cover",
+                    style: { flex: 1, width: "100%" }
+                  }
+                ) : image,
+                quantityBadge && /* @__PURE__ */ jsx(StyledBadgeOverlay, { pointerEvents: "none", children: /* @__PURE__ */ jsx(Badge, { variant: "primary", size: "large", children: String(quantity) }) })
+              ]
             }
           ) }),
           /* @__PURE__ */ jsxs(StyledContentArea, { children: [
@@ -12141,7 +12157,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 && /* @__PURE__ */ jsx(View, { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx(
+            showQuantityPicker && !quantityBadge && /* @__PURE__ */ jsx(View, { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx(
               NumberField,
               {
                 size: "sm",