@butternutbox/pawprint-native 0.4.1 → 0.5.1

package/.turbo/turbo-build.log

@@ -15,16 +15,16 @@
 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.65 MB
-ESM ⚡️ Build success in 11422ms
+ESM ⚡️ Build success in 11961ms
 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 11424ms
-DTS ⚡️ Build success in 22144ms
-DTS dist/index.d.cts 87.78 KB
-DTS dist/index.d.ts  87.78 KB
+CJS ⚡️ Build success in 11962ms
+DTS ⚡️ Build success in 22770ms
+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.1
+
+### Patch Changes
+
+- 4e3a96a: fix drawer layour for mobile devices'
+
+## 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

package/dist/index.cjs

@@ -8789,6 +8789,7 @@ DrawerOverlay.displayName = "Drawer.Overlay";
 var DrawerDragContext = React60__default.default.createContext(null);
 var useDrawerDragContext = () => React60__default.default.useContext(DrawerDragContext);
 var DrawerFooterContext = React60__default.default.createContext(false);
+var useDrawerFooterContext = () => React60__default.default.useContext(DrawerFooterContext);
 var DrawerHeaderContext = React60__default.default.createContext(null);
 var useDrawerHeaderContext = () => React60__default.default.useContext(DrawerHeaderContext);
 var OPEN_DURATION = 320;
@@ -9315,12 +9316,22 @@ var DrawerDescription = React60__default.default.forwardRef(
 );
 DrawerDescription.displayName = "Drawer.Description";
 var parseTokenValue26 = (value) => parseFloat(value);
-var StyledScrollView = styled60__default.default(reactNative.ScrollView)(({ bodyPaddingHorizontal, bodyPaddingRight, bodyGap }) => ({
-  flex: 1,
-  paddingLeft: bodyPaddingHorizontal,
-  paddingRight: bodyPaddingRight,
-  gap: bodyGap
-}));
+var StyledScrollView = styled60__default.default(reactNative.ScrollView)(
+  ({
+    bodyPaddingHorizontal,
+    bodyPaddingRight,
+    bodyGap,
+    bodyMaxHeight,
+    bodyPaddingBottom
+  }) => ({
+    flex: 1,
+    paddingLeft: bodyPaddingHorizontal,
+    paddingRight: bodyPaddingRight,
+    gap: bodyGap,
+    maxHeight: bodyMaxHeight,
+    paddingBottom: bodyPaddingBottom
+  })
+);
 var DrawerBody = React60__default.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, contentContainerStyle } = _b, props = __objRest(_b, ["children", "contentContainerStyle"]);
@@ -9329,10 +9340,14 @@ var DrawerBody = React60__default.default.forwardRef(
     const { buttons } = theme2.tokens.components;
     const { content } = spacing;
     const headerContext = useDrawerHeaderContext();
+    const footerContext = useDrawerFooterContext();
+    const { height: windowHeight } = reactNative.useWindowDimensions();
     const gap = parseTokenValue26(content.slot.gap);
     const horizontalPadding = parseTokenValue26(content.slot.horizontalPadding);
     const topPadding = parseTokenValue26(content.slot.verticalPadding);
+    const bodyMaxHeight = windowHeight - 300;
     const paddingRight = headerContext === null ? parseTokenValue26(spacing.close.right.md) + parseTokenValue26(buttons.size.sm.height) : horizontalPadding;
+    const bodyPaddingBottom = !footerContext ? parseTokenValue26(theme2.tokens.semantics.dimensions.spacing["2xl"]) : 0;
     return /* @__PURE__ */ jsxRuntime.jsx(
       StyledScrollView,
       __spreadProps(__spreadValues({
@@ -9340,6 +9355,8 @@ var DrawerBody = React60__default.default.forwardRef(
         bodyPaddingHorizontal: horizontalPadding,
         bodyPaddingRight: paddingRight,
         bodyGap: gap,
+        bodyMaxHeight,
+        bodyPaddingBottom,
         contentContainerStyle: [
           {
             gap,
@@ -13683,12 +13700,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 }) => ({
@@ -13766,7 +13784,8 @@ var Countdown = React60__default.default.forwardRef(
       seconds = 0,
       showDays = true,
       showSeconds = true,
-      label
+      label,
+      labels
     } = _b, rest = __objRest(_b, [
       "layout",
       "days",
@@ -13775,23 +13794,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(
@@ -14165,36 +14194,47 @@ 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 }) => ({
+  ({
+    theme: theme2,
+    imageBackgroundColor,
+    thumbnailWidth = 100,
+    thumbnailBackgroundColor
+  }) => ({
     flexShrink: 0,
-    backgroundColor: imageBackgroundColor || theme2.tokens.semantics.colour.background.container.secondary,
+    backgroundColor: thumbnailBackgroundColor || imageBackgroundColor || theme2.tokens.semantics.colour.background.container.secondary,
     overflow: "hidden",
     aspectRatio: "1 / 1",
-    height: "100%",
+    width: thumbnailWidth,
+    height: thumbnailWidth,
     position: "relative"
   })
 );
@@ -14216,12 +14256,16 @@ var StyledQuantityBadge = styled60__default.default(reactNative.View)(({ theme:
     zIndex: 2
   };
 });
-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"
   };
@@ -14253,7 +14297,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,
@@ -14268,13 +14311,15 @@ var ProductDisplayCard = React60__default.default.forwardRef(
       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",
@@ -14289,7 +14334,10 @@ var ProductDisplayCard = React60__default.default.forwardRef(
       "decrementDisabled",
       "image",
       "imageBackgroundColor",
+      "thumbnailWidth",
+      "thumbnailBackgroundColor",
       "showImageQuantityBadge",
+      "borderless",
       "banner",
       "showBanner",
       "bannerType",
@@ -14300,20 +14348,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.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: [
+    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(