@butternutbox/pawprint-native 0.4.0 → 0.4.1

package/dist/index.d.cts

@@ -1984,7 +1984,7 @@ type ProductDisplayCardDevice = "desktop" | "mobile";
 type ProductDisplayCardProps = ViewProps & {
     device?: ProductDisplayCardDevice;
     title: string;
-    subtext?: string;
+    subtext?: string | React.ReactNode;
     showSubtext?: boolean;
     quantity?: number;
     onQuantityChange?: (quantity: number) => void;
@@ -1995,7 +1995,9 @@ type ProductDisplayCardProps = ViewProps & {
     showDecrementButton?: boolean;
     incrementDisabled?: boolean;
     decrementDisabled?: boolean;
-    image?: React.ReactNode;
+    image?: string | React.ReactNode;
+    imageBackgroundColor?: string;
+    showImageQuantityBadge?: boolean;
     banner?: React.ReactNode;
     showBanner?: boolean;
     bannerType?: "error" | "success" | "warning" | "info";
@@ -2019,12 +2021,14 @@ type ProductDisplayCardProps = ViewProps & {
  *
  * @param device - *(optional)* Device variant: "desktop" or "mobile" (default)
  * @param title - Product title
- * @param subtext - *(optional)* Subtitle text (e.g. price)
+ * @param subtext - *(optional)* Subtitle text or JSX element (e.g. price)
  * @param showSubtext - *(optional)* Show/hide subtext
  * @param quantity - *(optional)* Current quantity value
  * @param onQuantityChange - *(optional)* Callback when quantity changes
  * @param showQuantityPicker - *(optional)* Show/hide quantity picker
- * @param image - *(optional)* Image element or content
+ * @param image - *(optional)* Image URL string or React element/JSX content
+ * @param imageBackgroundColor - *(optional)* Background color for image container (default: theme background.container.secondary)
+ * @param showImageQuantityBadge - *(optional)* Show/hide quantity badge overlay on image
  * @param banner - *(optional)* Banner content to show below card
  * @param showBanner - *(optional)* Show/hide banner
  * @param bannerType - *(optional)* Banner notification type: "error", "success", "warning", or "info" (default)
@@ -2033,7 +2037,7 @@ type ProductDisplayCardProps = ViewProps & {
 declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
     device?: ProductDisplayCardDevice;
     title: string;
-    subtext?: string;
+    subtext?: string | React.ReactNode;
     showSubtext?: boolean;
     quantity?: number;
     onQuantityChange?: (quantity: number) => void;
@@ -2044,7 +2048,9 @@ declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
     showDecrementButton?: boolean;
     incrementDisabled?: boolean;
     decrementDisabled?: boolean;
-    image?: React.ReactNode;
+    image?: string | React.ReactNode;
+    imageBackgroundColor?: string;
+    showImageQuantityBadge?: boolean;
     banner?: React.ReactNode;
     showBanner?: boolean;
     bannerType?: "error" | "success" | "warning" | "info";

package/dist/index.d.ts

@@ -1984,7 +1984,7 @@ type ProductDisplayCardDevice = "desktop" | "mobile";
 type ProductDisplayCardProps = ViewProps & {
     device?: ProductDisplayCardDevice;
     title: string;
-    subtext?: string;
+    subtext?: string | React.ReactNode;
     showSubtext?: boolean;
     quantity?: number;
     onQuantityChange?: (quantity: number) => void;
@@ -1995,7 +1995,9 @@ type ProductDisplayCardProps = ViewProps & {
     showDecrementButton?: boolean;
     incrementDisabled?: boolean;
     decrementDisabled?: boolean;
-    image?: React.ReactNode;
+    image?: string | React.ReactNode;
+    imageBackgroundColor?: string;
+    showImageQuantityBadge?: boolean;
     banner?: React.ReactNode;
     showBanner?: boolean;
     bannerType?: "error" | "success" | "warning" | "info";
@@ -2019,12 +2021,14 @@ type ProductDisplayCardProps = ViewProps & {
  *
  * @param device - *(optional)* Device variant: "desktop" or "mobile" (default)
  * @param title - Product title
- * @param subtext - *(optional)* Subtitle text (e.g. price)
+ * @param subtext - *(optional)* Subtitle text or JSX element (e.g. price)
  * @param showSubtext - *(optional)* Show/hide subtext
  * @param quantity - *(optional)* Current quantity value
  * @param onQuantityChange - *(optional)* Callback when quantity changes
  * @param showQuantityPicker - *(optional)* Show/hide quantity picker
- * @param image - *(optional)* Image element or content
+ * @param image - *(optional)* Image URL string or React element/JSX content
+ * @param imageBackgroundColor - *(optional)* Background color for image container (default: theme background.container.secondary)
+ * @param showImageQuantityBadge - *(optional)* Show/hide quantity badge overlay on image
  * @param banner - *(optional)* Banner content to show below card
  * @param showBanner - *(optional)* Show/hide banner
  * @param bannerType - *(optional)* Banner notification type: "error", "success", "warning", or "info" (default)
@@ -2033,7 +2037,7 @@ type ProductDisplayCardProps = ViewProps & {
 declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
     device?: ProductDisplayCardDevice;
     title: string;
-    subtext?: string;
+    subtext?: string | React.ReactNode;
     showSubtext?: boolean;
     quantity?: number;
     onQuantityChange?: (quantity: number) => void;
@@ -2044,7 +2048,9 @@ declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
     showDecrementButton?: boolean;
     incrementDisabled?: boolean;
     decrementDisabled?: boolean;
-    image?: React.ReactNode;
+    image?: string | React.ReactNode;
+    imageBackgroundColor?: string;
+    showImageQuantityBadge?: boolean;
     banner?: React.ReactNode;
     showBanner?: boolean;
     bannerType?: "error" | "success" | "warning" | "info";

package/dist/index.js

@@ -10157,28 +10157,20 @@ var StyledFieldWrapper = styled60(View)(
     overflow: "hidden"
   })
 );
-var StyledTextInput = styled60(TextInput)(
-  ({
-    inputColor,
-    inputFontFamily,
-    inputFontWeight,
-    inputFontSize,
-    inputLineHeight
-  }) => __spreadProps(__spreadValues({
-    textAlign: "center",
-    outlineStyle: "none",
-    padding: 0,
-    minWidth: 0,
-    minHeight: 0,
-    width: "100%",
-    height: "100%",
-    color: inputColor,
-    fontFamily: inputFontFamily
-  }, inputFontWeight ? { fontWeight: inputFontWeight } : {}), {
-    fontSize: inputFontSize,
-    lineHeight: inputLineHeight
-  })
-);
+var StyledTextInput = styled60(TextInput)(({ inputColor, inputFontFamily, inputFontWeight, inputFontSize }) => __spreadProps(__spreadValues({
+  textAlign: "center",
+  outlineStyle: "none",
+  padding: 0,
+  minWidth: 0,
+  minHeight: 0,
+  width: "100%",
+  height: "100%",
+  color: inputColor,
+  fontFamily: inputFontFamily
+}, inputFontWeight ? { fontWeight: inputFontWeight } : {}), {
+  fontSize: inputFontSize,
+  lineHeight: 0
+}));
 var StyledRow = styled60(View)(({ rowGap }) => ({
   flexDirection: "row",
   alignItems: "center",
@@ -10312,7 +10304,6 @@ var NumberFieldInput = React60.forwardRef(
               inputFontFamily: resolvedInputFontFamily,
               inputFontWeight: resolvedInputFontFamily === typographyToken.fontFamily ? typographyToken.fontWeight : void 0,
               inputFontSize: parseTokenValue34(typographyToken.fontSize),
-              inputLineHeight: parseTokenValue34(typographyToken.lineHeight),
               keyboardType: "numeric",
               editable: !disabled,
               onFocus: handleFocus,
@@ -14164,13 +14155,34 @@ var StyledCardContainer = styled60(View)(({ theme: theme2 }) => {
     zIndex: 1
   };
 });
-var StyledImage3 = styled60(View)(() => ({
-  flexShrink: 0,
-  backgroundColor: "#f5f5f5",
-  overflow: "hidden",
-  aspectRatio: "1 / 1",
-  height: "100%"
-}));
+var StyledImage3 = styled60(View)(
+  ({ theme: theme2, imageBackgroundColor }) => ({
+    flexShrink: 0,
+    backgroundColor: imageBackgroundColor || theme2.tokens.semantics.colour.background.container.secondary,
+    overflow: "hidden",
+    aspectRatio: "1 / 1",
+    height: "100%",
+    position: "relative"
+  })
+);
+var StyledQuantityBadge = styled60(View)(({ theme: theme2 }) => {
+  const spacing = theme2.tokens.semantics.dimensions.spacing;
+  const borderRadius = theme2.tokens.semantics.dimensions.borderRadius;
+  const { colour } = theme2.tokens.semantics;
+  return {
+    position: "absolute",
+    top: parseTokenValue8(spacing["2xs"]),
+    right: parseTokenValue8(spacing["2xs"]),
+    backgroundColor: colour.background.container.brand,
+    borderRadius: parseTokenValue8(borderRadius.xs),
+    paddingHorizontal: parseTokenValue8(spacing.sm),
+    height: parseTokenValue8(spacing["2xl"]),
+    minWidth: parseTokenValue8(spacing["2xl"]),
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 2
+  };
+});
 var StyledContentArea = styled60(View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.semantics.dimensions;
   return {
@@ -14222,6 +14234,8 @@ var ProductDisplayCard = React60.forwardRef(
       incrementDisabled = false,
       decrementDisabled = false,
       image,
+      imageBackgroundColor,
+      showImageQuantityBadge = false,
       banner,
       showBanner = false,
       bannerType = "info",
@@ -14241,6 +14255,8 @@ var ProductDisplayCard = React60.forwardRef(
       "incrementDisabled",
       "decrementDisabled",
       "image",
+      "imageBackgroundColor",
+      "showImageQuantityBadge",
       "banner",
       "showBanner",
       "bannerType",
@@ -14252,7 +14268,16 @@ var ProductDisplayCard = React60.forwardRef(
       }
     };
     const cardContent = /* @__PURE__ */ jsxs(StyledCardContainer, __spreadProps(__spreadValues({ ref, cardDevice: device }, rest), { children: [
-      image && /* @__PURE__ */ jsx(StyledImage3, { children: image }),
+      image && /* @__PURE__ */ jsxs(StyledImage3, { imageBackgroundColor, children: [
+        typeof image === "string" ? /* @__PURE__ */ jsx(
+          Image,
+          {
+            source: { uri: image },
+            style: { width: "100%", height: "100%" }
+          }
+        ) : image,
+        showImageQuantityBadge && quantity && /* @__PURE__ */ jsx(StyledQuantityBadge, { children: /* @__PURE__ */ jsx(Typography, { variant: "body", size: "sm", weight: "bold", children: quantity }) })
+      ] }),
       /* @__PURE__ */ jsxs(StyledContentArea, { contentDevice: device, children: [
         /* @__PURE__ */ jsxs(StyledTextContainer, { children: [
           /* @__PURE__ */ jsx(Typography, { variant: "heading", size: "xs", color: "primary", children: title }),