@butternutbox/pawprint-native 0.4.0 → 0.5.0

package/.turbo/turbo-build.log

@@ -14,8 +14,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.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 11263ms
 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
@@ -24,7 +24,7 @@
 CJS dist/ibm-plex-sans-condensed-700-normal-4PFYFTSO.woff2 18.90 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 11267ms
+DTS ⚡️ Build success in 22041ms
+DTS dist/index.d.cts 88.44 KB
+DTS dist/index.d.ts  88.44 KB

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @butternutbox/pawprint-native
 
+## 0.5.0
+
+### Minor Changes
+
+- 8d7fa63: Countdown unit labels are now configurable via a new `labels` prop, so consumers can pass translated strings. Each unit (`days`/`hours`/`minutes`/`seconds`) accepts either a plain string or a `{ singular, plural }` pair that resolves against the unit's value. Omitted units fall back to the English defaults.
+
+  Note: the default labels are now pluralised, so a unit value of exactly `1` renders the singular form (e.g. `hours={1}` shows "hr" instead of "hrs").
+
+### Patch Changes
+
+- a48558b: Product Display card spacing changes
+
+## 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,
@@ -13692,12 +13683,13 @@ var PictureSelector = React60__default.default.forwardRef(
   }
 );
 PictureSelector.displayName = "PictureSelector";
-var UNIT_LABELS = {
-  days: "days",
-  hours: "hrs",
-  minutes: "min",
-  seconds: "secs"
+var DEFAULT_UNIT_LABELS = {
+  days: { singular: "day", plural: "days" },
+  hours: { singular: "hr", plural: "hrs" },
+  minutes: { singular: "min", plural: "min" },
+  seconds: { singular: "sec", plural: "secs" }
 };
+var resolveLabel = (label, value) => typeof label === "string" ? label : value === 1 ? label.singular : label.plural;
 var parseTokenValue54 = (value) => parseFloat(value);
 var pad = (value) => String(Math.max(0, Math.floor(value))).padStart(2, "0");
 var StackedRoot = styled60__default.default(reactNative.View)(({ rootGap }) => ({
@@ -13775,7 +13767,8 @@ var Countdown = React60__default.default.forwardRef(
       seconds = 0,
       showDays = true,
       showSeconds = true,
-      label
+      label,
+      labels
     } = _b, rest = __objRest(_b, [
       "layout",
       "days",
@@ -13784,23 +13777,33 @@ var Countdown = React60__default.default.forwardRef(
       "seconds",
       "showDays",
       "showSeconds",
-      "label"
+      "label",
+      "labels"
     ]);
     const theme2 = react.useTheme();
     const { countdown } = theme2.tokens.components;
     const { countdownItem } = countdown;
+    const unitLabels = __spreadValues(__spreadValues({}, DEFAULT_UNIT_LABELS), labels);
     const units = [
       showDays && {
         key: "days",
         value: days,
-        label: UNIT_LABELS.days
+        label: resolveLabel(unitLabels.days, days)
+      },
+      {
+        key: "hours",
+        value: hours,
+        label: resolveLabel(unitLabels.hours, hours)
+      },
+      {
+        key: "minutes",
+        value: minutes,
+        label: resolveLabel(unitLabels.minutes, minutes)
       },
-      { key: "hours", value: hours, label: UNIT_LABELS.hours },
-      { key: "minutes", value: minutes, label: UNIT_LABELS.minutes },
       showSeconds && {
         key: "seconds",
         value: seconds,
-        label: UNIT_LABELS.seconds
+        label: resolveLabel(unitLabels.seconds, seconds)
       }
     ].filter(Boolean);
     const colon = (key) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -14174,42 +14177,78 @@ var ProductListingCardWithBadgeAndGrid = Object.assign(_ProductListingCard, {
   Badge: Badge2,
   Grid
 });
-var StyledCardContainer = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var StyledCardContainer = styled60__default.default(reactNative.View)(({
+  theme: theme2,
+  borderless
+}) => {
   const { spacing, borderRadius } = theme2.tokens.semantics.dimensions;
   const { colour } = theme2.tokens.semantics;
   const spacingMd = parseTokenValue8(spacing.md);
   const spacingXl = parseTokenValue8(spacing.xl);
-  return {
+  return __spreadProps(__spreadValues({
     flexDirection: "row",
     width: "100%",
-    height: "100%",
+    height: borderless ? void 0 : "100%",
     maxHeight: spacingXl * 6 + spacingMd,
-    backgroundColor: colour.background.surface.default,
+    backgroundColor: colour.background.surface.default
+  }, borderless ? {} : {
     borderWidth: 1,
     borderColor: colour.border.default,
-    borderRadius: parseTokenValue8(borderRadius.md),
-    overflow: "hidden",
     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 = styled60__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 = 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 StyledImage3 = styled60__default.default(reactNative.View)(() => ({
-  flexShrink: 0,
-  backgroundColor: "#f5f5f5",
-  overflow: "hidden",
-  aspectRatio: "1 / 1",
-  height: "100%"
-}));
-var StyledContentArea = styled60__default.default(reactNative.View)(({ theme: theme2 }) => {
+var StyledContentArea = styled60__default.default(reactNative.View)(({
+  theme: theme2,
+  borderless
+}) => {
   const { spacing } = theme2.tokens.semantics.dimensions;
+  const paddingValue = parseTokenValue8(spacing.md);
   return {
     flex: 1,
-    paddingHorizontal: parseTokenValue8(spacing.md),
-    paddingVertical: parseTokenValue8(spacing.md),
+    paddingHorizontal: paddingValue,
+    paddingVertical: borderless ? 0 : paddingValue,
     gap: parseTokenValue8(spacing.xs),
     justifyContent: "space-between"
   };
@@ -14241,7 +14280,6 @@ var StyledNotification = styled60__default.default(Notification)(({ theme: theme
 var ProductDisplayCard = React60__default.default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
-      device = "mobile",
       title,
       subtext,
       showSubtext = true,
@@ -14255,12 +14293,16 @@ var ProductDisplayCard = React60__default.default.forwardRef(
       incrementDisabled = false,
       decrementDisabled = false,
       image,
+      imageBackgroundColor,
+      thumbnailWidth,
+      thumbnailBackgroundColor,
+      showImageQuantityBadge = false,
+      borderless = false,
       banner,
       showBanner = false,
       bannerType = "info",
       showBannerIcon = false
     } = _b, rest = __objRest(_b, [
-      "device",
       "title",
       "subtext",
       "showSubtext",
@@ -14274,6 +14316,11 @@ var ProductDisplayCard = React60__default.default.forwardRef(
       "incrementDisabled",
       "decrementDisabled",
       "image",
+      "imageBackgroundColor",
+      "thumbnailWidth",
+      "thumbnailBackgroundColor",
+      "showImageQuantityBadge",
+      "borderless",
       "banner",
       "showBanner",
       "bannerType",
@@ -14284,11 +14331,28 @@ var ProductDisplayCard = React60__default.default.forwardRef(
         onQuantityChange == null ? void 0 : onQuantityChange(newQuantity);
       }
     };
-    const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(StyledCardContainer, __spreadProps(__spreadValues({ ref, cardDevice: device }, rest), { children: [
-      image && /* @__PURE__ */ jsxRuntime.jsx(StyledImage3, { children: image }),
-      /* @__PURE__ */ jsxRuntime.jsxs(StyledContentArea, { contentDevice: device, children: [
+    const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(StyledCardContainer, __spreadProps(__spreadValues({ ref, borderless }, rest), { children: [
+      image && /* @__PURE__ */ jsxRuntime.jsxs(
+        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 }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(StyledContentArea, { borderless, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(StyledTextContainer, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "heading", size: "xs", color: "primary", children: title }),
+          /* @__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 })
         ] }),
         showQuantityPicker && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(