@butternutbox/pawprint-native 0.23.3 → 0.24.2

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.cjs     552.50 KB
-CJS dist/index.cjs.map 1.07 MB
-CJS ⚡️ Build success in 8360ms
-ESM dist/index.js     522.10 KB
-ESM dist/index.js.map 1.07 MB
-ESM ⚡️ Build success in 8360ms
-DTS ⚡️ Build success in 23889ms
-DTS dist/index.d.cts 102.54 KB
-DTS dist/index.d.ts  102.54 KB
+CJS dist/index.cjs     554.62 KB
+CJS dist/index.cjs.map 1.08 MB
+CJS ⚡️ Build success in 7560ms
+ESM dist/index.js     523.98 KB
+ESM dist/index.js.map 1.08 MB
+ESM ⚡️ Build success in 7564ms
+DTS ⚡️ Build success in 22152ms
+DTS dist/index.d.cts 103.19 KB
+DTS dist/index.d.ts  103.19 KB

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @butternutbox/pawprint-native
 
+## 0.24.2
+
+### Patch Changes
+
+- f0bb467: add step count to product card quantity changer
+
+## 0.24.1
+
+### Patch Changes
+
+- d75e132: Fix two `StackedNotifications` animation glitches: dismissing from a deep queue would briefly show only one peek before the next popped in, and a brand-new notification would jump into place instead of sliding and fading in smoothly.
+
+## 0.24.0
+
+### Minor Changes
+
+- 85a6f8e: `Progress` now eases its indicator to the new width instead of snapping to it. Add `animate={false}` to opt out; the animation is also skipped when the OS has reduced motion enabled. The timing is exported as `PROGRESS_ANIMATION` so anything overlaid on the track can stay pinned to the leading edge of the fill.
+
 ## 0.23.3
 
 ### Patch Changes

package/dist/index.cjs

@@ -7901,6 +7901,10 @@ function usePasswordField({
     showRequirements
   });
 }
+var PROGRESS_ANIMATION = {
+  duration: 450,
+  easing: Animated10.Easing.inOut(Animated10.Easing.cubic)
+};
 var parseTokenValue40 = (value) => parseFloat(value);
 var StyledRoot12 = styled51__default.default(reactNative.View)(({ rootGap }) => ({
   flexDirection: "column",
@@ -7923,7 +7927,7 @@ var StyledTrack = styled51__default.default(reactNative.View)(({ trackHeight, tr
   backgroundColor: trackBgColor,
   overflow: "hidden"
 }));
-var StyledIndicator = styled51__default.default(reactNative.View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
+var StyledIndicator = styled51__default.default(Animated10__default.default.View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
   height: "100%",
   borderRadius: indicatorBorderRadius,
   backgroundColor: indicatorBgColor
@@ -7938,7 +7942,8 @@ var Progress = React66__default.default.forwardRef(
       colour = "primary",
       label,
       description,
-      getValueLabel
+      getValueLabel,
+      animate = true
     } = _b, rest = __objRest(_b, [
       "value",
       "max",
@@ -7946,7 +7951,8 @@ var Progress = React66__default.default.forwardRef(
       "colour",
       "label",
       "description",
-      "getValueLabel"
+      "getValueLabel",
+      "animate"
     ]);
     const theme2 = react.useTheme();
     const {
@@ -7962,6 +7968,15 @@ var Progress = React66__default.default.forwardRef(
     const percent = clampedValue / safeMax * 100;
     const showHeader = Boolean(label) || Boolean(description);
     const typographyForSize = size === "lg" ? typography.large : typography.small;
+    const reducedMotion = Animated10.useReducedMotion();
+    const shouldAnimate = animate && !reducedMotion;
+    const fill = Animated10.useSharedValue(percent);
+    React66__default.default.useEffect(() => {
+      fill.value = shouldAnimate ? Animated10.withTiming(percent, PROGRESS_ANIMATION) : percent;
+    }, [fill, percent, shouldAnimate]);
+    const indicatorStyle = Animated10.useAnimatedStyle(() => ({
+      width: `${fill.value}%`
+    }));
     const trackSize = { lg: track.size.large, sm: track.size.small }[size];
     const trackHeight = parseTokenValue40(trackSize.height);
     const trackMinWidth = parseTokenValue40(trackSize.mindWidth);
@@ -8008,7 +8023,7 @@ var Progress = React66__default.default.forwardRef(
                 {
                   indicatorBorderRadius,
                   indicatorBgColor,
-                  style: { width: `${percent}%` }
+                  style: indicatorStyle
                 }
               ) })
             }
@@ -10271,8 +10286,11 @@ var CARD_BASE_STYLE = {
   position: "absolute",
   bottom: 0,
   left: 0,
-  right: 0,
-  transformOrigin: "50% 100%"
+  right: 0
+};
+var DEPTH_LAYER_STYLE = {
+  transformOrigin: "50% 100%",
+  width: "100%"
 };
 var StyledRoot15 = styled51__default.default(reactNative.View)(({ rootBottom, rootPaddingH }) => ({
   position: "absolute",
@@ -10286,17 +10304,34 @@ var StyledStack = styled51__default.default(reactNative.View)({
   position: "relative",
   width: "100%"
 });
+var computeBackfillIds = (layers, prevActiveIds, prevLayerIds) => {
+  const ids = /* @__PURE__ */ new Set();
+  layers.forEach((item) => {
+    if (prevActiveIds.has(item.id) && !prevLayerIds.has(item.id)) {
+      ids.add(item.id);
+    }
+  });
+  return ids;
+};
 var StackedCard = ({
   item,
   depth,
   revealStep,
-  onDismiss
+  onDismiss,
+  isBackfill
 }) => {
-  const depthSV = Animated10.useSharedValue(depth);
+  const isBackfillRef = React66__default.default.useRef(isBackfill);
+  const wasBackfill = isBackfillRef.current;
+  const depthSV = Animated10.useSharedValue(wasBackfill ? depth + 1 : depth);
+  const opacitySV = Animated10.useSharedValue(wasBackfill ? 0 : 1);
   React66__default.default.useEffect(() => {
     depthSV.value = Animated10.withSpring(depth, SPRING_CONFIG);
   }, [depth, depthSV]);
-  const animatedStyle = Animated10.useAnimatedStyle(() => ({
+  React66__default.default.useEffect(() => {
+    if (wasBackfill) opacitySV.value = Animated10.withSpring(1, SPRING_CONFIG);
+  }, []);
+  const depthStyle = Animated10.useAnimatedStyle(() => ({
+    opacity: opacitySV.value,
     transform: [
       { translateY: depthSV.value * revealStep },
       { scale: 1 - depthSV.value * SCALE_STEP }
@@ -10306,13 +10341,13 @@ var StackedCard = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Animated10__default.default.View,
     {
-      entering: CARD_ENTERING,
+      entering: wasBackfill ? void 0 : CARD_ENTERING,
       exiting: CARD_EXITING,
       pointerEvents: isFront ? "auto" : "none",
       accessibilityElementsHidden: !isFront,
       importantForAccessibility: isFront ? "auto" : "no-hide-descendants",
-      style: [CARD_BASE_STYLE, { zIndex: -depth }, animatedStyle],
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      style: [CARD_BASE_STYLE, { zIndex: -depth }],
+      children: /* @__PURE__ */ jsxRuntime.jsx(Animated10__default.default.View, { style: [DEPTH_LAYER_STYLE, depthStyle], children: /* @__PURE__ */ jsxRuntime.jsx(
         Notification,
         {
           variant: "toast",
@@ -10320,7 +10355,7 @@ var StackedCard = ({
           onClose: isFront ? () => onDismiss == null ? void 0 : onDismiss(item.id) : void 0,
           children: item.message
         }
-      )
+      ) })
     }
   );
 };
@@ -10351,6 +10386,20 @@ var StackedNotifications = React66__default.default.forwardRef((_a, ref) => {
     () => activeItems.slice(-3).reverse(),
     [activeItems]
   );
+  const prevActiveIdsRef = React66__default.default.useRef(/* @__PURE__ */ new Set());
+  const prevLayerIdsRef = React66__default.default.useRef(/* @__PURE__ */ new Set());
+  const backfillIds = React66__default.default.useMemo(
+    () => computeBackfillIds(
+      layers,
+      prevActiveIdsRef.current,
+      prevLayerIdsRef.current
+    ),
+    [layers]
+  );
+  React66__default.default.useEffect(() => {
+    prevActiveIdsRef.current = new Set(activeItems.map((item) => item.id));
+    prevLayerIdsRef.current = new Set(layers.map((item) => item.id));
+  }, [activeItems, layers]);
   const handleDismiss = (id) => {
     setDismissed((prev) => {
       const next = new Set(prev);
@@ -10375,7 +10424,8 @@ var StackedNotifications = React66__default.default.forwardRef((_a, ref) => {
           item,
           depth,
           revealStep: peekStep,
-          onDismiss: handleDismiss
+          onDismiss: handleDismiss,
+          isBackfill: backfillIds.has(item.id)
         },
         item.id
       )) })
@@ -12236,6 +12286,7 @@ var ProductDisplayCard = React66__default.default.forwardRef(
       incrementDisabled = false,
       decrementDisabled = false,
       minQuantity = 1,
+      quantityStep = 1,
       image,
       imageBackgroundColor,
       thumbnailWidth,
@@ -12257,6 +12308,7 @@ var ProductDisplayCard = React66__default.default.forwardRef(
       "incrementDisabled",
       "decrementDisabled",
       "minQuantity",
+      "quantityStep",
       "image",
       "imageBackgroundColor",
       "thumbnailWidth",
@@ -12312,8 +12364,8 @@ var ProductDisplayCard = React66__default.default.forwardRef(
                     handleQuantityChange(value);
                   }
                 },
-                onIncrement: () => handleQuantityChange(quantity + 1),
-                onDecrement: () => handleQuantityChange(quantity - 1),
+                onIncrement: () => handleQuantityChange(quantity + quantityStep),
+                onDecrement: () => handleQuantityChange(quantity - quantityStep),
                 min: minQuantity,
                 accessible: true,
                 accessibilityLabel: `Quantity: ${quantity}`,
@@ -12572,6 +12624,7 @@ exports.Notification = Notification;
 exports.NumberField = NumberField;
 exports.NumberInput = NumberInput;
 exports.NumberInputField = NumberInputField;
+exports.PROGRESS_ANIMATION = PROGRESS_ANIMATION;
 exports.PasswordField = PasswordField;
 exports.PasswordFieldInput = PasswordFieldInput;
 exports.PasswordFieldRequirements = PasswordFieldRequirements;