@butternutbox/pawprint-native 0.7.0 → 0.8.0

package/.turbo/turbo-build.log

@@ -15,7 +15,7 @@
 CJS dist/ibm-plex-sans-condensed-700-normal-4PFYFTSO.woff2 18.90 KB
 CJS dist/index.cjs                                         1.79 MB
 CJS dist/index.cjs.map                                     2.68 MB
-CJS ⚡️ Build success in 11971ms
+CJS ⚡️ Build success in 10912ms
 ESM dist/ida-narrow-500-normal-C6I2PK4T.woff2              47.41 KB
 ESM dist/ida-narrow-700-normal-UPHPRIN6.woff2              49.90 KB
 ESM dist/ibm-plex-sans-condensed-400-normal-I2XLJNNB.woff2 19.33 KB
@@ -23,8 +23,8 @@
 ESM dist/ibm-plex-sans-condensed-600-normal-UX5ZU5T6.woff2 19.35 KB
 ESM dist/ibm-plex-sans-condensed-700-normal-4PFYFTSO.woff2 18.90 KB
 ESM dist/index.js                                          1.71 MB
-ESM dist/index.js.map                                      2.67 MB
-ESM ⚡️ Build success in 11975ms
-DTS ⚡️ Build success in 23351ms
-DTS dist/index.d.cts 90.02 KB
-DTS dist/index.d.ts  90.02 KB
+ESM dist/index.js.map                                      2.68 MB
+ESM ⚡️ Build success in 10913ms
+DTS ⚡️ Build success in 21798ms
+DTS dist/index.d.cts 90.51 KB
+DTS dist/index.d.ts  90.51 KB

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @butternutbox/pawprint-native
 
+## 0.8.0
+
+### Minor Changes
+
+- 4409f6c: Add optional `icon` and `avatar` props to `TabNavigation.Tab`. The icon colour tracks the tab's label colour and the avatar is forwarded to the `Avatar` atom, matching the Figma design.
+
+### Patch Changes
+
+- 27ca8b6: Add styling to optional notification link; prevent switch label from overflowing
+
 ## 0.7.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -7880,7 +7880,9 @@ var StyledThumb = styled51__default.default(reactNative.Animated.View)(({ thumbS
   position: "absolute"
 }));
 var StyledContent = styled51__default.default(reactNative.View)(({ contentGap }) => ({
-  gap: contentGap
+  gap: contentGap,
+  flex: 1,
+  minWidth: 0
 }));
 var Switch = React60__default.default.forwardRef(
   (_a, ref) => {
@@ -12692,7 +12694,7 @@ var Notification = React60__default.default.forwardRef(
     if (variant === "system") {
       const isLarge = size === "lg";
       const sizeTokens = isLarge ? systemNotifications.notification.spacing.large : systemNotifications.notification.spacing.small;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
+      return /* @__PURE__ */ jsxRuntime.jsx(
         StyledSystemRoot,
         __spreadProps(__spreadValues({
           ref,
@@ -12705,7 +12707,7 @@ var Notification = React60__default.default.forwardRef(
           rootBgColor: bgMap[type],
           rootAlignCenter: isLarge
         }, rest), {
-          children: [
+          children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flexDirection: "column", flex: 1 }, children: [
             showIcon && /* @__PURE__ */ jsxRuntime.jsx(
               Icon,
               {
@@ -12715,27 +12717,31 @@ var Notification = React60__default.default.forwardRef(
                 "aria-label": type
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flexDirection: "column", gap: 8, flex: 1 }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Typography,
-                {
-                  token: systemNotifications.notifications.typography.default,
-                  color: systemNotifications.notification.colour.text.default,
-                  children
-                }
-              ),
-              link && /* @__PURE__ */ jsxRuntime.jsx(
-                Link,
-                {
-                  href: link.href,
-                  onPress: link.onPress,
-                  weight: "semiBold",
-                  size: "md",
-                  children: link.label
-                }
-              )
-            ] })
-          ]
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flexDirection: "column", gap: 8, flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+              Typography,
+              {
+                token: systemNotifications.notifications.typography.default,
+                color: systemNotifications.notification.colour.text.default,
+                children
+              }
+            ) }),
+            link && /* @__PURE__ */ jsxRuntime.jsx(
+              StyledLinkWrapper,
+              {
+                linkPaddingLeft: parseTokenValue49(sizeTokens.content.gap),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Link,
+                  {
+                    href: link.href,
+                    onPress: link.onPress,
+                    weight: "semiBold",
+                    size: "md",
+                    children: link.label
+                  }
+                )
+              }
+            )
+          ] })
         })
       );
     }
@@ -12828,59 +12834,57 @@ var Notification = React60__default.default.forwardRef(
         rootBgColor: bgMap[type]
       }, rest), {
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(StyledContents, { contentsGap: parseTokenValue49(content.spacing.gap), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(StyledCopyRow, { copyGap: parseTokenValue49(content.spacing.gap), children: [
-              showIcon && /* @__PURE__ */ jsxRuntime.jsx(
-                Icon,
-                {
-                  icon: IconComponent,
-                  size: "md",
-                  colour: type,
-                  "aria-label": type
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                StyledInlineCopy,
-                {
-                  copyGap: parseTokenValue49(content.copy.spacing.gap),
-                  children: [
-                    title && /* @__PURE__ */ jsxRuntime.jsx(
-                      Typography,
-                      {
-                        token: notifications.typography.title,
-                        color: colour.text.title,
-                        children: title
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      Typography,
-                      {
-                        token: notifications.typography.body,
-                        color: colour.text.body,
-                        children
-                      }
-                    )
-                  ]
-                }
-              )
-            ] }),
-            link && /* @__PURE__ */ jsxRuntime.jsx(
-              StyledLinkWrapper,
+          /* @__PURE__ */ jsxRuntime.jsx(StyledContents, { contentsGap: parseTokenValue49(content.spacing.gap), children: /* @__PURE__ */ jsxRuntime.jsxs(StyledCopyRow, { copyGap: parseTokenValue49(content.spacing.gap), children: [
+            showIcon && /* @__PURE__ */ jsxRuntime.jsx(
+              Icon,
               {
-                linkPaddingLeft: parseTokenValue49(content.copy.spacing.gap),
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  Link,
-                  {
-                    href: link.href,
-                    onPress: link.onPress,
-                    weight: "semiBold",
-                    size: "md",
-                    children: link.label
-                  }
-                )
+                icon: IconComponent,
+                size: "md",
+                colour: type,
+                "aria-label": type
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              StyledInlineCopy,
+              {
+                copyGap: parseTokenValue49(content.copy.spacing.gap),
+                children: [
+                  title && /* @__PURE__ */ jsxRuntime.jsx(
+                    Typography,
+                    {
+                      token: notifications.typography.title,
+                      color: colour.text.title,
+                      children: title
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Typography,
+                    {
+                      token: notifications.typography.body,
+                      color: colour.text.body,
+                      children
+                    }
+                  ),
+                  link && /* @__PURE__ */ jsxRuntime.jsx(
+                    StyledLinkWrapper,
+                    {
+                      linkPaddingLeft: parseTokenValue49(content.copy.spacing.gap),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        Link,
+                        {
+                          href: link.href,
+                          onPress: link.onPress,
+                          weight: "semiBold",
+                          size: "md",
+                          children: link.label
+                        }
+                      )
+                    }
+                  )
+                ]
               }
             )
-          ] }),
+          ] }) }),
           onClose && /* @__PURE__ */ jsxRuntime.jsx(
             StyledCloseButton,
             {
@@ -14782,7 +14786,7 @@ var TabNavigationList = React60__default.default.forwardRef(
 TabNavigationList.displayName = "TabNavigation.List";
 var TabNavigationTab = React60__default.default.forwardRef(
   (_a, ref) => {
-    var _b = _a, { value, disabled = false, children } = _b, rest = __objRest(_b, ["value", "disabled", "children"]);
+    var _b = _a, { value, disabled = false, icon, avatar, children } = _b, rest = __objRest(_b, ["value", "disabled", "icon", "avatar", "children"]);
     const { layout } = useTabNavigationContext();
     const { value: selectedValue } = TabsPrimitive__namespace.useRootContext();
     const theme2 = react.useTheme();
@@ -14792,7 +14796,7 @@ var TabNavigationTab = React60__default.default.forwardRef(
     const token = selected ? typography.selected : typography.default;
     const borderColour = selected ? colour.border.default : colour.border.disabled;
     const textColour = disabled ? theme2.tokens.primitives.colour.brand.brown["5"] : colour.text.default;
-    return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, { value, disabled, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, { value, disabled, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       StyledTab,
       __spreadProps(__spreadValues({
         ref,
@@ -14806,7 +14810,11 @@ var TabNavigationTab = React60__default.default.forwardRef(
         tabBorderColor: borderColour,
         tabFlex: layout === "fixed" ? 1 : void 0
       }, rest), {
-        children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { token, color: textColour, children })
+        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 })
+        ]
       })
     ) });
   }