@butternutbox/pawprint-native 0.8.0 → 0.9.0

package/.turbo/turbo-build.log

@@ -13,9 +13,9 @@
 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/index.cjs                                         1.79 MB
-CJS dist/index.cjs.map                                     2.68 MB
-CJS ⚡️ Build success in 10912ms
+CJS dist/index.cjs                                         1.78 MB
+CJS dist/index.cjs.map                                     2.67 MB
+CJS ⚡️ Build success in 11862ms
 ESM dist/ida-narrow-500-normal-C6I2PK4T.woff2              47.41 KB
 ESM dist/ida-narrow-700-normal-UPHPRIN6.woff2              49.90 KB
 ESM dist/ibm-plex-sans-condensed-400-normal-I2XLJNNB.woff2 19.33 KB
@@ -23,8 +23,8 @@
 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.71 MB
-ESM dist/index.js.map                                      2.68 MB
-ESM ⚡️ Build success in 10913ms
-DTS ⚡️ Build success in 21798ms
-DTS dist/index.d.cts 90.51 KB
-DTS dist/index.d.ts  90.51 KB
+ESM dist/index.js.map                                      2.67 MB
+ESM ⚡️ Build success in 11871ms
+DTS ⚡️ Build success in 22152ms
+DTS dist/index.d.cts 90.17 KB
+DTS dist/index.d.ts  90.17 KB

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @butternutbox/pawprint-native
 
+## 0.9.0
+
+### Minor Changes
+
+- 6d84559: Add a web `NumberField` molecule (stepper) mirroring the native API, and align `ProductDisplayCard` with Figma across both platforms:
+  - Use `NumberField` for the quantity stepper (web previously used the plain `NumberInput` atom).
+  - 148×148 image (`thumbnailWidth` defaults to 148) and banner styling: square top / 12px bottom radius, `md` horizontal + 27px top padding, tucked behind the card.
+  - Web `device` prop now drives title/subtext typography (desktop 20/16, mobile 16/14).
+  - Remove `showImageQuantityBadge`, `borderless`, `thumbnailBackgroundColor`, and the per-button `showIncrementButton`/`showDecrementButton` props (use `hideQuantityButtons` instead). Native is now mobile-only (no `device` prop).
+
+### Patch Changes
+
+- 6d84559: Make `ProductDisplayCard` height responsive and cap its width (web + native):
+  - Replace the fixed `maxHeight: 148` with `minHeight: 148` so the card grows instead of clipping when the title wraps to multiple lines (e.g. translations).
+  - Cap the width at the Figma frame sizes — web 520 (desktop) / 358 (mobile), native 358 — while staying fluid below that.
+  - The image stretches to fill a taller card (cover crop) instead of leaving a gap, keeping its 148px width and square shape when the content fits.
+
+- 6d84559: Align `ProductListingCard` with Figma (web + native): add the 12px image border radius, fix the pinned badge (un-double-wrap so the right radius is 4px, 8px horizontal padding, brand background), and tighten the title bottom spacing to 6px and the size→price spacing to 16px.
+
+  Web also fixes the responsive `Grid` (columns were stuck at 1 because the media queries lived in an inline `style` prop) and sizes the standalone stories to the Figma widths (232 / 192).
+
 ## 0.8.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -14275,8 +14275,8 @@ var BadgeContainer = styled51__default.default(reactNative.View)(({ theme: theme
     alignItems: "center",
     justifyContent: "center",
     height: parseTokenValue55(sizing["2xl"]),
-    paddingRight: parseTokenValue55(spacing.sm),
-    backgroundColor: colour.background.container.alt,
+    paddingRight: parseTokenValue55(spacing.xs),
+    backgroundColor: colour.background.container.brand,
     borderTopRightRadius: parseTokenValue55(borderRadius.xs),
     borderBottomRightRadius: parseTokenValue55(borderRadius.xs)
   };
@@ -14353,37 +14353,25 @@ var StyledRoot16 = styled51__default.default(reactNative.Pressable)(({ theme: th
     width: "100%"
   };
 });
-var ImageContainer = styled51__default.default(reactNative.View)({
+var ImageContainer = styled51__default.default(reactNative.View)(({ theme: theme2 }) => ({
   position: "relative",
   width: "100%",
   aspectRatio: 1,
-  overflow: "hidden"
-});
+  overflow: "hidden",
+  borderRadius: parseTokenValue56(
+    theme2.tokens.semantics.dimensions.borderRadius.md
+  )
+}));
 var StyledImage2 = styled51__default.default(reactNative.Image)({
   width: "100%",
   height: "100%",
   resizeMode: "cover"
 });
-var BadgeContainer2 = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
-  const spacing = theme2.tokens.semantics.dimensions.spacing;
-  const { sizing, borderRadius } = theme2.tokens.semantics.dimensions;
-  const { colour } = theme2.tokens.semantics;
-  return {
-    position: "absolute",
-    top: parseTokenValue56(spacing.md),
-    left: 0,
-    display: "flex",
-    flexDirection: "row",
-    gap: parseTokenValue56(spacing["2xs"]),
-    alignItems: "center",
-    justifyContent: "center",
-    height: parseTokenValue56(sizing["2xl"]),
-    paddingRight: parseTokenValue56(spacing.sm),
-    backgroundColor: colour.background.container.alt,
-    borderTopRightRadius: parseTokenValue56(borderRadius.sm),
-    borderBottomRightRadius: parseTokenValue56(borderRadius.sm)
-  };
-});
+var BadgeContainer2 = styled51__default.default(reactNative.View)(({ theme: theme2 }) => ({
+  position: "absolute",
+  top: parseTokenValue56(theme2.tokens.semantics.dimensions.spacing.md),
+  left: 0
+}));
 var ContentContainer = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
@@ -14406,20 +14394,12 @@ var CategoryWrapper = styled51__default.default(reactNative.View)(({ theme: them
     marginBottom: parseTokenValue56(spacing["3xs"])
   };
 });
-var TitleContainer = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
-  const spacing = theme2.tokens.semantics.dimensions.spacing;
-  return {
-    display: "flex",
-    flexDirection: "row",
-    width: "100%",
-    marginBottom: parseTokenValue56(spacing.xs)
-  };
-});
-var SizeWrapper = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
-  const spacing = theme2.tokens.semantics.dimensions.spacing;
-  return {
-    marginBottom: parseTokenValue56(spacing.md)
-  };
+var TitleContainer = styled51__default.default(reactNative.View)({
+  display: "flex",
+  flexDirection: "row",
+  width: "100%",
+  // 6px below the title to match Figma (4px title bottom padding + 2px gap).
+  marginBottom: 6
 });
 var PricingContainer = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
@@ -14480,7 +14460,7 @@ var _ProductListingCard = React60__default.default.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsxs(DetailsContainer, { children: [
           showCategory && category && /* @__PURE__ */ jsxRuntime.jsx(CategoryWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", size: "sm", color: "secondary", children: category }) }),
           showTitle && /* @__PURE__ */ jsxRuntime.jsx(TitleContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "heading", size: "xs", children: title }) }),
-          showSize && size && /* @__PURE__ */ jsxRuntime.jsx(SizeWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", size: "md", color: "secondary", children: size }) })
+          showSize && size && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", size: "md", color: "secondary", children: size })
         ] }),
         showPrice && price && /* @__PURE__ */ jsxRuntime.jsxs(PricingContainer, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", size: "md", color: "secondary", children: price }),
@@ -14504,78 +14484,50 @@ var ProductListingCardWithBadgeAndGrid = Object.assign(_ProductListingCard, {
   Badge: Badge2,
   Grid
 });
-var StyledCardContainer = styled51__default.default(reactNative.View)(({
-  theme: theme2,
-  borderless
-}) => {
+var StyledCardContainer = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const { spacing, borderRadius } = theme2.tokens.semantics.dimensions;
   const { colour } = theme2.tokens.semantics;
   const spacingMd = parseTokenValue8(spacing.md);
   const spacingXl = parseTokenValue8(spacing.xl);
-  return __spreadProps(__spreadValues({
+  return {
     flexDirection: "row",
     width: "100%",
-    height: borderless ? void 0 : "100%",
-    maxHeight: spacingXl * 6 + spacingMd,
-    backgroundColor: colour.background.surface.default
-  }, borderless ? {} : {
+    // Cap at the Figma mobile card width (can be narrower — responsive).
+    maxWidth: 358,
+    // The 148px image sets the baseline height; the card grows if the content
+    // is taller (e.g. a long or translated title wrapping to multiple lines)
+    // so nothing is clipped.
+    minHeight: 148,
+    backgroundColor: colour.background.surface.default,
     borderWidth: 1,
     borderColor: colour.border.default,
     shadowColor: "#522a10",
     shadowOffset: { width: 0, height: spacingMd / 4 },
     shadowOpacity: 0.05,
     shadowRadius: spacingXl - 4,
-    elevation: 5
-  }), {
+    elevation: 5,
     borderRadius: parseTokenValue8(borderRadius.md),
     overflow: "hidden",
     zIndex: 1
-  });
-});
-var StyledImage3 = styled51__default.default(reactNative.View)(
-  ({
-    theme: theme2,
-    imageBackgroundColor,
-    thumbnailWidth = 100,
-    thumbnailBackgroundColor
-  }) => ({
-    flexShrink: 0,
-    backgroundColor: thumbnailBackgroundColor || imageBackgroundColor || theme2.tokens.semantics.colour.background.container.secondary,
-    overflow: "hidden",
-    aspectRatio: "1 / 1",
-    width: thumbnailWidth,
-    height: thumbnailWidth,
-    position: "relative"
-  })
-);
-var StyledQuantityBadge = styled51__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 = styled51__default.default(reactNative.View)(({
-  theme: theme2,
-  borderless
-}) => {
+var StyledImage3 = styled51__default.default(reactNative.View)(({ theme: theme2, imageBackgroundColor, thumbnailWidth = 148 }) => ({
+  flexShrink: 0,
+  backgroundColor: imageBackgroundColor || theme2.tokens.semantics.colour.background.container.secondary,
+  overflow: "hidden",
+  width: thumbnailWidth,
+  // Square (148) by default; stretches taller to fill the card when the
+  // content makes it taller than the image.
+  minHeight: thumbnailWidth,
+  position: "relative"
+}));
+var StyledContentArea = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.semantics.dimensions;
   const paddingValue = parseTokenValue8(spacing.md);
   return {
     flex: 1,
     paddingHorizontal: paddingValue,
-    paddingVertical: borderless ? 0 : paddingValue,
+    paddingVertical: paddingValue,
     gap: parseTokenValue8(spacing.xs),
     justifyContent: "space-between"
   };
@@ -14583,25 +14535,38 @@ var StyledContentArea = styled51__default.default(reactNative.View)(({
 var StyledTextContainer = styled51__default.default(reactNative.View)(() => ({
   gap: 2
 }));
-var StyledBannerWrapper = styled51__default.default(reactNative.View)(() => ({
-  width: "100%",
-  marginTop: -48,
-  paddingTop: 24,
-  paddingBottom: 16
-}));
+var StyledBannerWrapper = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
+  const { spacing, borderRadius } = theme2.tokens.semantics.dimensions;
+  return {
+    width: "100%",
+    // Tuck the banner up behind the card by the corner radius so its square top
+    // corners hide under the card's rounded bottom; the rest sits below.
+    marginTop: -parseTokenValue8(borderRadius.md),
+    paddingBottom: parseTokenValue8(spacing.md)
+  };
+});
 var StyledRootWrapper = styled51__default.default(reactNative.View)(() => {
   return {
     flexDirection: "column",
     width: "100%",
-    height: "100%"
+    maxWidth: 358
   };
 });
 var StyledNotification = styled51__default.default(Notification)(({ theme: theme2 }) => {
-  const { spacing } = theme2.tokens.semantics.dimensions;
+  const { spacing, borderRadius } = theme2.tokens.semantics.dimensions;
+  const spacingMd = parseTokenValue8(spacing.md);
+  const radiusMd = parseTokenValue8(borderRadius.md);
   return {
-    top: parseTokenValue8(spacing.md),
-    paddingHorizontal: parseTokenValue8(spacing.xl),
-    paddingVertical: parseTokenValue8(spacing.md)
+    paddingHorizontal: spacingMd,
+    // 27px top padding (Figma) leaves a small cream reveal above the text once
+    // the banner tucks behind the card.
+    paddingTop: 27,
+    paddingBottom: spacingMd,
+    // Square top corners, rounded bottom corners (banner tucks under the card).
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: radiusMd,
+    borderBottomRightRadius: radiusMd
   };
 });
 var ProductDisplayCard = React60__default.default.forwardRef(
@@ -14615,16 +14580,11 @@ var ProductDisplayCard = React60__default.default.forwardRef(
       showQuantityPicker = false,
       disableQuantityButtons = false,
       hideQuantityButtons = false,
-      showIncrementButton,
-      showDecrementButton,
       incrementDisabled = false,
       decrementDisabled = false,
       image,
       imageBackgroundColor,
       thumbnailWidth,
-      thumbnailBackgroundColor,
-      showImageQuantityBadge = false,
-      borderless = false,
       banner,
       showBanner = false,
       bannerType = "info",
@@ -14638,16 +14598,11 @@ var ProductDisplayCard = React60__default.default.forwardRef(
       "showQuantityPicker",
       "disableQuantityButtons",
       "hideQuantityButtons",
-      "showIncrementButton",
-      "showDecrementButton",
       "incrementDisabled",
       "decrementDisabled",
       "image",
       "imageBackgroundColor",
       "thumbnailWidth",
-      "thumbnailBackgroundColor",
-      "showImageQuantityBadge",
-      "borderless",
       "banner",
       "showBanner",
       "bannerType",
@@ -14658,26 +14613,23 @@ var ProductDisplayCard = React60__default.default.forwardRef(
         onQuantityChange == null ? void 0 : onQuantityChange(newQuantity);
       }
     };
-    const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(StyledCardContainer, __spreadProps(__spreadValues({ ref, borderless }, rest), { children: [
-      image && /* @__PURE__ */ jsxRuntime.jsxs(
+    const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(StyledCardContainer, __spreadProps(__spreadValues({ ref }, rest), { children: [
+      image && /* @__PURE__ */ jsxRuntime.jsx(
         StyledImage3,
         {
           imageBackgroundColor,
           thumbnailWidth,
-          thumbnailBackgroundColor,
-          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 }) })
-          ]
+          children: typeof image === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Image,
+            {
+              source: { uri: image },
+              resizeMode: "cover",
+              style: { flex: 1, width: "100%" }
+            }
+          ) : image
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs(StyledContentArea, { borderless, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(StyledContentArea, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(StyledTextContainer, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "heading", size: "2xs", color: "primary", children: title }),
           showSubtext && subtext && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", size: "sm", color: "secondary", children: subtext })
@@ -14698,8 +14650,8 @@ var ProductDisplayCard = React60__default.default.forwardRef(
             min: 1,
             accessible: true,
             accessibilityLabel: `Quantity: ${quantity}`,
-            showIncrementButton: showIncrementButton !== void 0 ? showIncrementButton : !hideQuantityButtons,
-            showDecrementButton: showDecrementButton !== void 0 ? showDecrementButton : !hideQuantityButtons,
+            showIncrementButton: !hideQuantityButtons,
+            showDecrementButton: !hideQuantityButtons,
             incrementDisabled: incrementDisabled || disableQuantityButtons,
             decrementDisabled: decrementDisabled || disableQuantityButtons
           }