@butternutbox/pawprint-native 0.4.0 → 0.4.1

package/.turbo/turbo-build.log

@@ -14,17 +14,17 @@
 ESM dist/ibm-plex-sans-condensed-600-normal-UX5ZU5T6.woff2 19.35 KB
 ESM dist/ibm-plex-sans-condensed-700-normal-4PFYFTSO.woff2 18.90 KB
 ESM dist/index.js                                          1.70 MB
-ESM dist/index.js.map                                      2.64 MB
-ESM ⚡️ Build success in 11381ms
+ESM dist/index.js.map                                      2.65 MB
+ESM ⚡️ Build success in 11422ms
 CJS dist/ida-narrow-500-normal-C6I2PK4T.woff2              47.41 KB
 CJS dist/ida-narrow-700-normal-UPHPRIN6.woff2              49.90 KB
 CJS dist/ibm-plex-sans-condensed-400-normal-I2XLJNNB.woff2 19.33 KB
-CJS dist/ibm-plex-sans-condensed-500-normal-IEQBNVGX.woff2 19.48 KB
 CJS dist/ibm-plex-sans-condensed-600-normal-UX5ZU5T6.woff2 19.35 KB
 CJS dist/ibm-plex-sans-condensed-700-normal-4PFYFTSO.woff2 18.90 KB
+CJS dist/ibm-plex-sans-condensed-500-normal-IEQBNVGX.woff2 19.48 KB
 CJS dist/index.cjs                                         1.77 MB
 CJS dist/index.cjs.map                                     2.65 MB
-CJS ⚡️ Build success in 11382ms
-DTS ⚡️ Build success in 21549ms
-DTS dist/index.d.cts 87.33 KB
-DTS dist/index.d.ts  87.33 KB
+CJS ⚡️ Build success in 11424ms
+DTS ⚡️ Build success in 22144ms
+DTS dist/index.d.cts 87.78 KB
+DTS dist/index.d.ts  87.78 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @butternutbox/pawprint-native
 
+## 0.4.1
+
+### Patch Changes
+
+- ec6f6b4: Add additional quantity within thumbnail of display card
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -10190,28 +10190,20 @@ var StyledFieldWrapper = styled60__default.default(reactNative.View)(
     overflow: "hidden"
   })
 );
-var StyledTextInput = styled60__default.default(reactNative.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__default.default(reactNative.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__default.default(reactNative.View)(({ rowGap }) => ({
   flexDirection: "row",
   alignItems: "center",
@@ -10345,7 +10337,6 @@ var NumberFieldInput = React60__default.default.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,
@@ -14197,13 +14188,34 @@ var StyledCardContainer = styled60__default.default(reactNative.View)(({ theme:
     zIndex: 1
   };
 });
-var StyledImage3 = styled60__default.default(reactNative.View)(() => ({
-  flexShrink: 0,
-  backgroundColor: "#f5f5f5",
-  overflow: "hidden",
-  aspectRatio: "1 / 1",
-  height: "100%"
-}));
+var StyledImage3 = styled60__default.default(reactNative.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__default.default(reactNative.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__default.default(reactNative.View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.semantics.dimensions;
   return {
@@ -14255,6 +14267,8 @@ var ProductDisplayCard = React60__default.default.forwardRef(
       incrementDisabled = false,
       decrementDisabled = false,
       image,
+      imageBackgroundColor,
+      showImageQuantityBadge = false,
       banner,
       showBanner = false,
       bannerType = "info",
@@ -14274,6 +14288,8 @@ var ProductDisplayCard = React60__default.default.forwardRef(
       "incrementDisabled",
       "decrementDisabled",
       "image",
+      "imageBackgroundColor",
+      "showImageQuantityBadge",
       "banner",
       "showBanner",
       "bannerType",
@@ -14285,7 +14301,16 @@ var ProductDisplayCard = React60__default.default.forwardRef(
       }
     };
     const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(StyledCardContainer, __spreadProps(__spreadValues({ ref, cardDevice: device }, rest), { children: [
-      image && /* @__PURE__ */ jsxRuntime.jsx(StyledImage3, { children: image }),
+      image && /* @__PURE__ */ jsxRuntime.jsxs(StyledImage3, { imageBackgroundColor, children: [
+        typeof image === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Image,
+          {
+            source: { uri: image },
+            style: { width: "100%", height: "100%" }
+          }
+        ) : image,
+        showImageQuantityBadge && quantity && /* @__PURE__ */ jsxRuntime.jsx(StyledQuantityBadge, { children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", size: "sm", weight: "bold", children: quantity }) })
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(StyledContentArea, { contentDevice: device, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(StyledTextContainer, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "heading", size: "xs", color: "primary", children: title }),