@butternutbox/pawprint-native 0.23.2 → 0.23.3

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     552.50 KB
 CJS dist/index.cjs.map 1.07 MB
-CJS ⚡️ Build success in 7873ms
-DTS ⚡️ Build success in 21420ms
+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

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @butternutbox/pawprint-native
 
+## 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,
           {
@@ -8968,7 +8975,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 +9010,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,
               {
@@ -12381,7 +12388,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 +12449,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 })
         ]
       })
     ) });