@butternutbox/pawprint-native 0.23.2 → 0.24.1

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-ESM dist/index.js     521.48 KB
-ESM dist/index.js.map 1.07 MB
-ESM ⚡️ Build success in 7873ms
-CJS dist/index.cjs     551.89 KB
-CJS dist/index.cjs.map 1.07 MB
-CJS ⚡️ Build success in 7873ms
-DTS ⚡️ Build success in 21420ms
-DTS dist/index.d.cts 102.54 KB
-DTS dist/index.d.ts  102.54 KB
+CJS dist/index.cjs     554.55 KB
+CJS dist/index.cjs.map 1.08 MB
+CJS ⚡️ Build success in 6712ms
+ESM dist/index.js     523.91 KB
+ESM dist/index.js.map 1.08 MB
+ESM ⚡️ Build success in 6712ms
+DTS ⚡️ Build success in 18388ms
+DTS dist/index.d.cts 103.07 KB
+DTS dist/index.d.ts  103.07 KB

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @butternutbox/pawprint-native
 
+## 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
+
+- 1a54efb: Let component labels wrap to multiple lines instead of clipping/overflowing — surfaced by long translated (e.g. German) copy.
+  - **Typography**: token-mode text now sets `flexShrink`, so component-owned labels that live in flex rows (buttons, tags, tabs) can shrink and wrap instead of laying out on one line and overflowing.
+  - **Button**: the label is now a direct child of the button row (no intermediate wrapper `View`) so it actually re-wraps under the button's `minHeight`; loading state dims the label via a transparent colour instead of a wrapper opacity.
+  - **Tag**: the label can shrink so a long tag wraps within its container instead of growing past it (e.g. overflowing a card's padding).
+  - **TabNavigation**: tabs use `minHeight` (not a fixed `height`) so a tab whose label wraps to more than one line grows to fit and stays aligned with its neighbours; tab labels are now centre-aligned.
+
 ## 0.23.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -253,7 +253,14 @@ var Typography = React66__default.default.forwardRef(
         "textTransform",
         "textDecoration"
       ]);
-      const style = __spreadValues(__spreadValues(__spreadValues({}, nativeTokenToStyle(token)), color2 ? { color: color2 } : {}), getCommonStyles(align2, textTransform2, textDecoration2));
+      const style = __spreadValues(__spreadValues(__spreadValues({
+        // Token-mode text is component-owned and lives inside flex rows
+        // (buttons, tabs, tags). `flexShrink` lets it wrap to multiple lines
+        // when the row is narrower than the text, instead of laying out on one
+        // line and overflowing/clipping — a `<Text>` nested in a flex `<View>`
+        // won't re-wrap on its own after the parent's width is resolved.
+        flexShrink: 1
+      }, nativeTokenToStyle(token)), color2 ? { color: color2 } : {}), getCommonStyles(align2, textTransform2, textDecoration2));
       return /* @__PURE__ */ jsxRuntime.jsx(
         StyledText,
         __spreadValues({
@@ -1227,9 +1234,6 @@ var StyledButton = styled51__default.default(reactNative.Pressable)(
     opacity: buttonOpacity
   }, buttonBorderWidth ? { borderWidth: buttonBorderWidth, borderColor: buttonBorderColor } : {}), buttonFullWidth ? { width: "100%" } : {})
 );
-var StyledTextWrapper = styled51__default.default(reactNative.View)(({ textOpacity, fullWidth }) => __spreadValues({
-  opacity: textOpacity
-}, fullWidth ? { flexShrink: 1 } : {}));
 var StyledSpinnerWrapper = styled51__default.default(reactNative.View)({
   position: "absolute",
   alignItems: "center",
@@ -1320,7 +1324,7 @@ var Button = React66__default.default.forwardRef(
       }, rest), {
         children: [
           startIcon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { children: startIcon }),
-          /* @__PURE__ */ jsxRuntime.jsx(StyledTextWrapper, { textOpacity: loading ? 0 : 1, fullWidth, children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(
             Typography,
             {
               token: {
@@ -1330,11 +1334,11 @@ var Button = React66__default.default.forwardRef(
                 lineHeight: typography.lineHeight,
                 letterSpacing: typography.letterSpacing
               },
-              color: variantStyles.textColor,
+              color: loading ? "transparent" : variantStyles.textColor,
               align: "center",
               children
             }
-          ) }),
+          ),
           endIcon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { children: endIcon }),
           loading && /* @__PURE__ */ jsxRuntime.jsx(StyledSpinnerWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
             Spinner,
@@ -4929,6 +4933,9 @@ var StyledTag = styled51__default.default(reactNative.View)(({ theme: theme2, ta
     backgroundColor: backgroundColorMap[tagVariant]
   };
 });
+var StyledLabel = styled51__default.default(reactNative.View)({
+  flexShrink: 1
+});
 var Tag = React66__default.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "primary", size = "medium", icon, children } = _b, rest = __objRest(_b, ["variant", "size", "icon", "children"]);
@@ -4966,14 +4973,14 @@ var Tag = React66__default.default.forwardRef(
           colour: iconColourMap[variant]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(StyledLabel, { children: /* @__PURE__ */ jsxRuntime.jsx(
         Typography,
         {
           token: typography[size].default,
           color: textColorMap[variant],
           children
         }
-      )
+      ) })
     ] }));
   }
 );
@@ -5222,7 +5229,7 @@ var StyledLabelWrapper = styled51__default.default(reactNative.View)({
   justifyContent: "space-between",
   width: "100%"
 });
-var StyledLabel = styled51__default.default(reactNative.View)(({ labelGap }) => ({
+var StyledLabel2 = styled51__default.default(reactNative.View)(({ labelGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelGap
@@ -5253,7 +5260,7 @@ var TextAreaLabel = React66__default.default.forwardRef(
     const showCharacterCount = maxLength !== void 0 && currentLength !== void 0;
     const isOverLimit = currentLength !== void 0 && maxLength !== void 0 && currentLength > maxLength;
     return /* @__PURE__ */ jsxRuntime.jsxs(StyledLabelWrapper, __spreadProps(__spreadValues({ ref }, rest), { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(StyledLabel, { labelGap: parseTokenValue20(spacing.label.gap), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(StyledLabel2, { labelGap: parseTokenValue20(spacing.label.gap), children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           Typography,
           {
@@ -7894,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",
@@ -7916,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
@@ -7931,7 +7942,8 @@ var Progress = React66__default.default.forwardRef(
       colour = "primary",
       label,
       description,
-      getValueLabel
+      getValueLabel,
+      animate = true
     } = _b, rest = __objRest(_b, [
       "value",
       "max",
@@ -7939,7 +7951,8 @@ var Progress = React66__default.default.forwardRef(
       "colour",
       "label",
       "description",
-      "getValueLabel"
+      "getValueLabel",
+      "animate"
     ]);
     const theme2 = react.useTheme();
     const {
@@ -7955,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);
@@ -8001,7 +8023,7 @@ var Progress = React66__default.default.forwardRef(
                 {
                   indicatorBorderRadius,
                   indicatorBgColor,
-                  style: { width: `${percent}%` }
+                  style: indicatorStyle
                 }
               ) })
             }
@@ -8968,7 +8990,7 @@ var StyledContentWrapper = styled51__default.default(reactNative.View)(({ theme:
     minWidth: 0
   };
 });
-var StyledTextWrapper2 = styled51__default.default(reactNative.View)({
+var StyledTextWrapper = styled51__default.default(reactNative.View)({
   flex: 1,
   minWidth: 0
 });
@@ -9003,7 +9025,7 @@ var SelectFieldItem = React66__default.default.forwardRef(
         children: /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { ref, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledItem3, __spreadProps(__spreadValues({ disabled, style: { backgroundColor } }, rest), { children: [
           leadingIcon && /* @__PURE__ */ jsxRuntime.jsx(StyledIconWrapper3, { children: leadingIcon }),
           /* @__PURE__ */ jsxRuntime.jsxs(StyledContentWrapper, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(StyledTextWrapper2, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledItemText, { style: { color: textColor }, children: itemText }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(StyledTextWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledItemText, { style: { color: textColor }, children: itemText }) }),
             hintText && /* @__PURE__ */ jsxRuntime.jsx(
               StyledHintText,
               {
@@ -10264,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",
@@ -10279,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 }
@@ -10299,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",
@@ -10313,7 +10355,7 @@ var StackedCard = ({
           onClose: isFront ? () => onDismiss == null ? void 0 : onDismiss(item.id) : void 0,
           children: item.message
         }
-      )
+      ) })
     }
   );
 };
@@ -10344,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);
@@ -10368,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
       )) })
@@ -12381,7 +12438,11 @@ var StyledTab = styled51__default.default(reactNative.Pressable)(
     alignItems: "center",
     justifyContent: "center",
     gap: tabGap,
-    height: tabHeight,
+    // `minHeight` (not a fixed `height`) so a tab whose label wraps to more
+    // than one line — e.g. long translated copy in `fixed` layout — grows to
+    // fit instead of clipping/overflowing. The list's `alignItems: "stretch"`
+    // then matches every tab to the tallest, keeping labels vertically aligned.
+    minHeight: tabHeight,
     minWidth: tabMinWidth,
     paddingTop: tabPaddingTop,
     paddingBottom: tabPaddingBottom,
@@ -12438,7 +12499,7 @@ var TabNavigationTab = React66__default.default.forwardRef(
         children: [
           avatar && /* @__PURE__ */ jsxRuntime.jsx(Avatar, __spreadValues({}, avatar)),
           icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, customColour: textColour, "aria-hidden": true }),
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { token, color: textColour, children })
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { token, color: textColour, align: "center", children })
         ]
       })
     ) });
@@ -12561,6 +12622,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;