@butternutbox/pawprint-native 0.23.2 → 0.23.3

package/dist/index.js

@@ -215,7 +215,14 @@ var Typography = React66.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__ */ jsx(
         StyledText,
         __spreadValues({
@@ -1189,9 +1196,6 @@ var StyledButton = styled51(Pressable)(
     opacity: buttonOpacity
   }, buttonBorderWidth ? { borderWidth: buttonBorderWidth, borderColor: buttonBorderColor } : {}), buttonFullWidth ? { width: "100%" } : {})
 );
-var StyledTextWrapper = styled51(View)(({ textOpacity, fullWidth }) => __spreadValues({
-  opacity: textOpacity
-}, fullWidth ? { flexShrink: 1 } : {}));
 var StyledSpinnerWrapper = styled51(View)({
   position: "absolute",
   alignItems: "center",
@@ -1282,7 +1286,7 @@ var Button = React66.forwardRef(
       }, rest), {
         children: [
           startIcon && /* @__PURE__ */ jsx(IconWrapper, { children: startIcon }),
-          /* @__PURE__ */ jsx(StyledTextWrapper, { textOpacity: loading ? 0 : 1, fullWidth, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(
             Typography,
             {
               token: {
@@ -1292,11 +1296,11 @@ var Button = React66.forwardRef(
                 lineHeight: typography.lineHeight,
                 letterSpacing: typography.letterSpacing
               },
-              color: variantStyles.textColor,
+              color: loading ? "transparent" : variantStyles.textColor,
               align: "center",
               children
             }
-          ) }),
+          ),
           endIcon && /* @__PURE__ */ jsx(IconWrapper, { children: endIcon }),
           loading && /* @__PURE__ */ jsx(StyledSpinnerWrapper, { children: /* @__PURE__ */ jsx(
             Spinner,
@@ -4891,6 +4895,9 @@ var StyledTag = styled51(View)(({ theme: theme2, tagVariant, tagSize }) => {
     backgroundColor: backgroundColorMap[tagVariant]
   };
 });
+var StyledLabel = styled51(View)({
+  flexShrink: 1
+});
 var Tag = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, { variant = "primary", size = "medium", icon, children } = _b, rest = __objRest(_b, ["variant", "size", "icon", "children"]);
@@ -4928,14 +4935,14 @@ var Tag = React66.forwardRef(
           colour: iconColourMap[variant]
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(StyledLabel, { children: /* @__PURE__ */ jsx(
         Typography,
         {
           token: typography[size].default,
           color: textColorMap[variant],
           children
         }
-      )
+      ) })
     ] }));
   }
 );
@@ -5184,7 +5191,7 @@ var StyledLabelWrapper = styled51(View)({
   justifyContent: "space-between",
   width: "100%"
 });
-var StyledLabel = styled51(View)(({ labelGap }) => ({
+var StyledLabel2 = styled51(View)(({ labelGap }) => ({
   flexDirection: "row",
   alignItems: "center",
   gap: labelGap
@@ -5215,7 +5222,7 @@ var TextAreaLabel = React66.forwardRef(
     const showCharacterCount = maxLength !== void 0 && currentLength !== void 0;
     const isOverLimit = currentLength !== void 0 && maxLength !== void 0 && currentLength > maxLength;
     return /* @__PURE__ */ jsxs(StyledLabelWrapper, __spreadProps(__spreadValues({ ref }, rest), { children: [
-      /* @__PURE__ */ jsxs(StyledLabel, { labelGap: parseTokenValue20(spacing.label.gap), children: [
+      /* @__PURE__ */ jsxs(StyledLabel2, { labelGap: parseTokenValue20(spacing.label.gap), children: [
         /* @__PURE__ */ jsx(
           Typography,
           {
@@ -8930,7 +8937,7 @@ var StyledContentWrapper = styled51(View)(({ theme: theme2 }) => {
     minWidth: 0
   };
 });
-var StyledTextWrapper2 = styled51(View)({
+var StyledTextWrapper = styled51(View)({
   flex: 1,
   minWidth: 0
 });
@@ -8965,7 +8972,7 @@ var SelectFieldItem = React66.forwardRef(
         children: /* @__PURE__ */ jsx(Slot, { ref, children: /* @__PURE__ */ jsxs(StyledItem3, __spreadProps(__spreadValues({ disabled, style: { backgroundColor } }, rest), { children: [
           leadingIcon && /* @__PURE__ */ jsx(StyledIconWrapper3, { children: leadingIcon }),
           /* @__PURE__ */ jsxs(StyledContentWrapper, { children: [
-            /* @__PURE__ */ jsx(StyledTextWrapper2, { children: /* @__PURE__ */ jsx(StyledItemText, { style: { color: textColor }, children: itemText }) }),
+            /* @__PURE__ */ jsx(StyledTextWrapper, { children: /* @__PURE__ */ jsx(StyledItemText, { style: { color: textColor }, children: itemText }) }),
             hintText && /* @__PURE__ */ jsx(
               StyledHintText,
               {
@@ -12343,7 +12350,11 @@ var StyledTab = styled51(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,
@@ -12400,7 +12411,7 @@ var TabNavigationTab = React66.forwardRef(
         children: [
           avatar && /* @__PURE__ */ jsx(Avatar, __spreadValues({}, avatar)),
           icon && /* @__PURE__ */ jsx(Icon, { icon, customColour: textColour, "aria-hidden": true }),
-          /* @__PURE__ */ jsx(Typography, { token, color: textColour, children })
+          /* @__PURE__ */ jsx(Typography, { token, color: textColour, align: "center", children })
         ]
       })
     ) });