@butternutbox/pawprint-native 0.8.0 → 0.9.0

package/dist/index.d.cts

@@ -2070,16 +2070,11 @@ type ProductDisplayCardProps = ViewProps & {
     showQuantityPicker?: boolean;
     disableQuantityButtons?: boolean;
     hideQuantityButtons?: boolean;
-    showIncrementButton?: boolean;
-    showDecrementButton?: boolean;
     incrementDisabled?: boolean;
     decrementDisabled?: boolean;
     image?: string | React.ReactNode;
     imageBackgroundColor?: string;
     thumbnailWidth?: number;
-    thumbnailBackgroundColor?: string;
-    showImageQuantityBadge?: boolean;
-    borderless?: boolean;
     banner?: React.ReactNode;
     showBanner?: boolean;
     bannerType?: "error" | "success" | "warning" | "info";
@@ -2121,16 +2116,11 @@ declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
     showQuantityPicker?: boolean;
     disableQuantityButtons?: boolean;
     hideQuantityButtons?: boolean;
-    showIncrementButton?: boolean;
-    showDecrementButton?: boolean;
     incrementDisabled?: boolean;
     decrementDisabled?: boolean;
     image?: string | React.ReactNode;
     imageBackgroundColor?: string;
     thumbnailWidth?: number;
-    thumbnailBackgroundColor?: string;
-    showImageQuantityBadge?: boolean;
-    borderless?: boolean;
     banner?: React.ReactNode;
     showBanner?: boolean;
     bannerType?: "error" | "success" | "warning" | "info";

package/dist/index.d.ts

@@ -2070,16 +2070,11 @@ type ProductDisplayCardProps = ViewProps & {
     showQuantityPicker?: boolean;
     disableQuantityButtons?: boolean;
     hideQuantityButtons?: boolean;
-    showIncrementButton?: boolean;
-    showDecrementButton?: boolean;
     incrementDisabled?: boolean;
     decrementDisabled?: boolean;
     image?: string | React.ReactNode;
     imageBackgroundColor?: string;
     thumbnailWidth?: number;
-    thumbnailBackgroundColor?: string;
-    showImageQuantityBadge?: boolean;
-    borderless?: boolean;
     banner?: React.ReactNode;
     showBanner?: boolean;
     bannerType?: "error" | "success" | "warning" | "info";
@@ -2121,16 +2116,11 @@ declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
     showQuantityPicker?: boolean;
     disableQuantityButtons?: boolean;
     hideQuantityButtons?: boolean;
-    showIncrementButton?: boolean;
-    showDecrementButton?: boolean;
     incrementDisabled?: boolean;
     decrementDisabled?: boolean;
     image?: string | React.ReactNode;
     imageBackgroundColor?: string;
     thumbnailWidth?: number;
-    thumbnailBackgroundColor?: string;
-    showImageQuantityBadge?: boolean;
-    borderless?: boolean;
     banner?: React.ReactNode;
     showBanner?: boolean;
     bannerType?: "error" | "success" | "warning" | "info";

package/dist/index.js

@@ -14242,8 +14242,8 @@ var BadgeContainer = styled51(View)(({ theme: theme2 }) => {
     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)
   };
@@ -14320,37 +14320,25 @@ var StyledRoot16 = styled51(Pressable)(({ theme: theme2 }) => {
     width: "100%"
   };
 });
-var ImageContainer = styled51(View)({
+var ImageContainer = styled51(View)(({ theme: theme2 }) => ({
   position: "relative",
   width: "100%",
   aspectRatio: 1,
-  overflow: "hidden"
-});
+  overflow: "hidden",
+  borderRadius: parseTokenValue56(
+    theme2.tokens.semantics.dimensions.borderRadius.md
+  )
+}));
 var StyledImage2 = styled51(Image)({
   width: "100%",
   height: "100%",
   resizeMode: "cover"
 });
-var BadgeContainer2 = styled51(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(View)(({ theme: theme2 }) => ({
+  position: "absolute",
+  top: parseTokenValue56(theme2.tokens.semantics.dimensions.spacing.md),
+  left: 0
+}));
 var ContentContainer = styled51(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
   return {
@@ -14373,20 +14361,12 @@ var CategoryWrapper = styled51(View)(({ theme: theme2 }) => {
     marginBottom: parseTokenValue56(spacing["3xs"])
   };
 });
-var TitleContainer = styled51(View)(({ theme: theme2 }) => {
-  const spacing = theme2.tokens.semantics.dimensions.spacing;
-  return {
-    display: "flex",
-    flexDirection: "row",
-    width: "100%",
-    marginBottom: parseTokenValue56(spacing.xs)
-  };
-});
-var SizeWrapper = styled51(View)(({ theme: theme2 }) => {
-  const spacing = theme2.tokens.semantics.dimensions.spacing;
-  return {
-    marginBottom: parseTokenValue56(spacing.md)
-  };
+var TitleContainer = styled51(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(View)(({ theme: theme2 }) => {
   const spacing = theme2.tokens.semantics.dimensions.spacing;
@@ -14447,7 +14427,7 @@ var _ProductListingCard = React60.forwardRef(
         /* @__PURE__ */ jsxs(DetailsContainer, { children: [
           showCategory && category && /* @__PURE__ */ jsx(CategoryWrapper, { children: /* @__PURE__ */ jsx(Typography, { variant: "body", size: "sm", color: "secondary", children: category }) }),
           showTitle && /* @__PURE__ */ jsx(TitleContainer, { children: /* @__PURE__ */ jsx(Typography, { variant: "heading", size: "xs", children: title }) }),
-          showSize && size && /* @__PURE__ */ jsx(SizeWrapper, { children: /* @__PURE__ */ jsx(Typography, { variant: "body", size: "md", color: "secondary", children: size }) })
+          showSize && size && /* @__PURE__ */ jsx(Typography, { variant: "body", size: "md", color: "secondary", children: size })
         ] }),
         showPrice && price && /* @__PURE__ */ jsxs(PricingContainer, { children: [
           /* @__PURE__ */ jsx(Typography, { variant: "body", size: "md", color: "secondary", children: price }),
@@ -14471,78 +14451,50 @@ var ProductListingCardWithBadgeAndGrid = Object.assign(_ProductListingCard, {
   Badge: Badge2,
   Grid
 });
-var StyledCardContainer = styled51(View)(({
-  theme: theme2,
-  borderless
-}) => {
+var StyledCardContainer = styled51(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(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(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(View)(({
-  theme: theme2,
-  borderless
-}) => {
+var StyledImage3 = styled51(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(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"
   };
@@ -14550,25 +14502,38 @@ var StyledContentArea = styled51(View)(({
 var StyledTextContainer = styled51(View)(() => ({
   gap: 2
 }));
-var StyledBannerWrapper = styled51(View)(() => ({
-  width: "100%",
-  marginTop: -48,
-  paddingTop: 24,
-  paddingBottom: 16
-}));
+var StyledBannerWrapper = styled51(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(View)(() => {
   return {
     flexDirection: "column",
     width: "100%",
-    height: "100%"
+    maxWidth: 358
   };
 });
 var StyledNotification = styled51(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.forwardRef(
@@ -14582,16 +14547,11 @@ var ProductDisplayCard = React60.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",
@@ -14605,16 +14565,11 @@ var ProductDisplayCard = React60.forwardRef(
       "showQuantityPicker",
       "disableQuantityButtons",
       "hideQuantityButtons",
-      "showIncrementButton",
-      "showDecrementButton",
       "incrementDisabled",
       "decrementDisabled",
       "image",
       "imageBackgroundColor",
       "thumbnailWidth",
-      "thumbnailBackgroundColor",
-      "showImageQuantityBadge",
-      "borderless",
       "banner",
       "showBanner",
       "bannerType",
@@ -14625,26 +14580,23 @@ var ProductDisplayCard = React60.forwardRef(
         onQuantityChange == null ? void 0 : onQuantityChange(newQuantity);
       }
     };
-    const cardContent = /* @__PURE__ */ jsxs(StyledCardContainer, __spreadProps(__spreadValues({ ref, borderless }, rest), { children: [
-      image && /* @__PURE__ */ jsxs(
+    const cardContent = /* @__PURE__ */ jsxs(StyledCardContainer, __spreadProps(__spreadValues({ ref }, rest), { children: [
+      image && /* @__PURE__ */ jsx(
         StyledImage3,
         {
           imageBackgroundColor,
           thumbnailWidth,
-          thumbnailBackgroundColor,
-          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 }) })
-          ]
+          children: typeof image === "string" ? /* @__PURE__ */ jsx(
+            Image,
+            {
+              source: { uri: image },
+              resizeMode: "cover",
+              style: { flex: 1, width: "100%" }
+            }
+          ) : image
         }
       ),
-      /* @__PURE__ */ jsxs(StyledContentArea, { borderless, children: [
+      /* @__PURE__ */ jsxs(StyledContentArea, { children: [
         /* @__PURE__ */ jsxs(StyledTextContainer, { children: [
           /* @__PURE__ */ jsx(Typography, { variant: "heading", size: "2xs", color: "primary", children: title }),
           showSubtext && subtext && /* @__PURE__ */ jsx(Typography, { variant: "body", size: "sm", color: "secondary", children: subtext })
@@ -14665,8 +14617,8 @@ var ProductDisplayCard = React60.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
           }