@butternutbox/pawprint-native 0.19.1 → 0.20.0

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.cjs     546.41 KB
+CJS dist/index.cjs     547.43 KB
 CJS dist/index.cjs.map 1.06 MB
-CJS ⚡️ Build success in 7807ms
-ESM dist/index.js     516.34 KB
+CJS ⚡️ Build success in 7630ms
+ESM dist/index.js     517.29 KB
 ESM dist/index.js.map 1.06 MB
-ESM ⚡️ Build success in 7808ms
-DTS ⚡️ Build success in 22733ms
-DTS dist/index.d.cts 100.86 KB
-DTS dist/index.d.ts  100.86 KB
+ESM ⚡️ Build success in 7630ms
+DTS ⚡️ Build success in 22133ms
+DTS dist/index.d.cts 101.81 KB
+DTS dist/index.d.ts  101.81 KB

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @butternutbox/pawprint-native
 
+## 0.20.0
+
+### Minor Changes
+
+- 246e43e: `ProductDisplayCard`: add an optional `quantityBadge` prop.
+
+  When `quantityBadge` is `true`, a quantity badge (the pawprint `Badge`, `variant="primary" size="large"`) is overlaid on the top-right of the product image and renders the current `quantity`, matching Figma node `10864:736`. It defaults to `false`, so existing usages are unaffected. The badge and the quantity picker are mutually exclusive — when `quantityBadge` is set the picker is never rendered (only one is visible at a time). Intended for the OOB recipe and Extras cards.
+
+## 0.19.2
+
+### Patch Changes
+
+- 68b227a: `NativeSelectPicker`: fix the Android options panel being too short.
+
+  On Android the options `FlatList` was capped at a tiny fixed height (`spacing["8xl"]`), so only ~1 option was visible with a cramped scrollbar. It now sizes to a fraction of the screen height, filling the bottom-sheet dialog so all options are reachable/scrollable — matching the full-height iOS `ActionSheetIOS` picker. iOS is unaffected.
+
 ## 0.19.1
 
 ### Patch Changes

package/dist/index.cjs

@@ -9357,6 +9357,7 @@ var NativeSelectPicker = React66__default.default.forwardRef(
     var _a2;
     const [isOpen, setIsOpen] = React66.useState(false);
     const { iconAnimationStyles } = useIconAnimation();
+    const { height: windowHeight } = reactNative.useWindowDimensions();
     const hasPlaceholder = placeholder && Object.keys(placeholder).length > 0 && placeholder.label !== void 0;
     const allItems = React66.useMemo(() => {
       var _a3;
@@ -9471,7 +9472,12 @@ var NativeSelectPicker = React66__default.default.forwardRef(
                       );
                     },
                     style: {
-                      maxHeight: parseSize2(dimensions2.spacing["8xl"])
+                      // Fill the bottom-sheet dialog (sized 40-80% of the
+                      // screen) rather than a tiny fixed cap, so all options
+                      // are reachable/scrollable on Android like the iOS
+                      // ActionSheet. Previously capped at spacing["8xl"],
+                      // which showed only ~1 row.
+                      maxHeight: windowHeight * 0.7
                     }
                   }
                 )
@@ -12031,6 +12037,17 @@ var StyledImage3 = styled51__default.default(reactNative.View)(({ theme: theme2,
   minHeight: thumbnailWidth,
   position: "relative"
 }));
+var StyledBadgeOverlay = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
+  const offset = parseTokenValue9(
+    theme2.tokens.semantics.dimensions.spacing["2xs"]
+  );
+  return {
+    position: "absolute",
+    top: offset,
+    right: offset,
+    zIndex: 2
+  };
+});
 var StyledContentArea = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const { spacing } = theme2.tokens.semantics.dimensions;
   const paddingValue = parseTokenValue9(spacing.md);
@@ -12107,6 +12124,7 @@ var ProductDisplayCard = React66__default.default.forwardRef(
       quantity = 1,
       onQuantityChange,
       showQuantityPicker = false,
+      quantityBadge = false,
       disableQuantityButtons = false,
       hideQuantityButtons = false,
       incrementDisabled = false,
@@ -12127,6 +12145,7 @@ var ProductDisplayCard = React66__default.default.forwardRef(
       "quantity",
       "onQuantityChange",
       "showQuantityPicker",
+      "quantityBadge",
       "disableQuantityButtons",
       "hideQuantityButtons",
       "incrementDisabled",
@@ -12153,19 +12172,22 @@ var ProductDisplayCard = React66__default.default.forwardRef(
         showBanner: showBanner && !!banner
       }, rest), {
         children: [
-          image && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { disabled: !onImagePress, onPress: onImagePress, children: /* @__PURE__ */ jsxRuntime.jsx(
+          image && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { disabled: !onImagePress, onPress: onImagePress, children: /* @__PURE__ */ jsxRuntime.jsxs(
             StyledImage3,
             {
               imageBackgroundColor,
               thumbnailWidth,
-              children: typeof image === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                reactNative.Image,
-                {
-                  source: { uri: image },
-                  resizeMode: "cover",
-                  style: { flex: 1, width: "100%" }
-                }
-              ) : image
+              children: [
+                typeof image === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.Image,
+                  {
+                    source: { uri: image },
+                    resizeMode: "cover",
+                    style: { flex: 1, width: "100%" }
+                  }
+                ) : image,
+                quantityBadge && /* @__PURE__ */ jsxRuntime.jsx(StyledBadgeOverlay, { pointerEvents: "none", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "primary", size: "large", children: String(quantity) }) })
+              ]
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs(StyledContentArea, { children: [
@@ -12173,7 +12195,7 @@ var ProductDisplayCard = React66__default.default.forwardRef(
               /* @__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(
+            showQuantityPicker && !quantityBadge && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(
               NumberField,
               {
                 size: "sm",