@butternutbox/pawprint-native 0.7.0 → 0.8.0

package/dist/index.d.cts

@@ -2154,6 +2154,8 @@ type TabNavigationListProps = TabNavigationListOwnProps & Omit<ViewProps, keyof
 type TabNavigationTabOwnProps = {
     value: string;
     disabled?: boolean;
+    icon?: PawprintIcon;
+    avatar?: AvatarProps;
     children: React.ReactNode;
 };
 type TabNavigationTabProps = TabNavigationTabOwnProps & Omit<ViewProps, keyof TabNavigationTabOwnProps>;
@@ -2179,8 +2181,14 @@ declare const TabNavigationList: React.ForwardRefExoticComponent<TabNavigationLi
  * disabled state). Unlike the web version there are no hover or focus-visible
  * states (not applicable on mobile).
  *
+ * Optionally renders a leading `Avatar` and/or `Icon` before the label, matching
+ * the Figma design. The icon colour tracks the tab's label colour (brand when
+ * active/idle, muted when disabled); the avatar is rendered as-is from its props.
+ *
  * @param {string} value - Unique identifier; matches the `value` of a `TabNavigation.Panel`.
  * @param {boolean} [disabled=false] - Whether this tab is disabled.
+ * @param {PawprintIcon} [icon] - Optional leading icon from `@butternutbox/pawprint-icons`.
+ * @param {AvatarProps} [avatar] - Optional leading `Avatar`; props are forwarded to the `Avatar` atom.
  * @param {React.ReactNode} children - Tab label (and optional leading content).
  */
 declare const TabNavigationTab: React.ForwardRefExoticComponent<TabNavigationTabOwnProps & Omit<ViewProps, keyof TabNavigationTabOwnProps> & React.RefAttributes<View>>;

package/dist/index.d.ts

@@ -2154,6 +2154,8 @@ type TabNavigationListProps = TabNavigationListOwnProps & Omit<ViewProps, keyof
 type TabNavigationTabOwnProps = {
     value: string;
     disabled?: boolean;
+    icon?: PawprintIcon;
+    avatar?: AvatarProps;
     children: React.ReactNode;
 };
 type TabNavigationTabProps = TabNavigationTabOwnProps & Omit<ViewProps, keyof TabNavigationTabOwnProps>;
@@ -2179,8 +2181,14 @@ declare const TabNavigationList: React.ForwardRefExoticComponent<TabNavigationLi
  * disabled state). Unlike the web version there are no hover or focus-visible
  * states (not applicable on mobile).
  *
+ * Optionally renders a leading `Avatar` and/or `Icon` before the label, matching
+ * the Figma design. The icon colour tracks the tab's label colour (brand when
+ * active/idle, muted when disabled); the avatar is rendered as-is from its props.
+ *
  * @param {string} value - Unique identifier; matches the `value` of a `TabNavigation.Panel`.
  * @param {boolean} [disabled=false] - Whether this tab is disabled.
+ * @param {PawprintIcon} [icon] - Optional leading icon from `@butternutbox/pawprint-icons`.
+ * @param {AvatarProps} [avatar] - Optional leading `Avatar`; props are forwarded to the `Avatar` atom.
  * @param {React.ReactNode} children - Tab label (and optional leading content).
  */
 declare const TabNavigationTab: React.ForwardRefExoticComponent<TabNavigationTabOwnProps & Omit<ViewProps, keyof TabNavigationTabOwnProps> & React.RefAttributes<View>>;

package/dist/index.js

@@ -7847,7 +7847,9 @@ var StyledThumb = styled51(Animated.View)(({ thumbSize, thumbBgColor }) => ({
   position: "absolute"
 }));
 var StyledContent = styled51(View)(({ contentGap }) => ({
-  gap: contentGap
+  gap: contentGap,
+  flex: 1,
+  minWidth: 0
 }));
 var Switch = React60.forwardRef(
   (_a, ref) => {
@@ -12659,7 +12661,7 @@ var Notification = React60.forwardRef(
     if (variant === "system") {
       const isLarge = size === "lg";
       const sizeTokens = isLarge ? systemNotifications.notification.spacing.large : systemNotifications.notification.spacing.small;
-      return /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsx(
         StyledSystemRoot,
         __spreadProps(__spreadValues({
           ref,
@@ -12672,7 +12674,7 @@ var Notification = React60.forwardRef(
           rootBgColor: bgMap[type],
           rootAlignCenter: isLarge
         }, rest), {
-          children: [
+          children: /* @__PURE__ */ jsxs(View, { style: { flexDirection: "column", flex: 1 }, children: [
             showIcon && /* @__PURE__ */ jsx(
               Icon,
               {
@@ -12682,27 +12684,31 @@ var Notification = React60.forwardRef(
                 "aria-label": type
               }
             ),
-            /* @__PURE__ */ jsxs(View, { style: { flexDirection: "column", gap: 8, flex: 1 }, children: [
-              /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  token: systemNotifications.notifications.typography.default,
-                  color: systemNotifications.notification.colour.text.default,
-                  children
-                }
-              ),
-              link && /* @__PURE__ */ jsx(
-                Link,
-                {
-                  href: link.href,
-                  onPress: link.onPress,
-                  weight: "semiBold",
-                  size: "md",
-                  children: link.label
-                }
-              )
-            ] })
-          ]
+            /* @__PURE__ */ jsx(View, { style: { flexDirection: "column", gap: 8, flex: 1 }, children: /* @__PURE__ */ jsx(
+              Typography,
+              {
+                token: systemNotifications.notifications.typography.default,
+                color: systemNotifications.notification.colour.text.default,
+                children
+              }
+            ) }),
+            link && /* @__PURE__ */ jsx(
+              StyledLinkWrapper,
+              {
+                linkPaddingLeft: parseTokenValue49(sizeTokens.content.gap),
+                children: /* @__PURE__ */ jsx(
+                  Link,
+                  {
+                    href: link.href,
+                    onPress: link.onPress,
+                    weight: "semiBold",
+                    size: "md",
+                    children: link.label
+                  }
+                )
+              }
+            )
+          ] })
         })
       );
     }
@@ -12795,59 +12801,57 @@ var Notification = React60.forwardRef(
         rootBgColor: bgMap[type]
       }, rest), {
         children: [
-          /* @__PURE__ */ jsxs(StyledContents, { contentsGap: parseTokenValue49(content.spacing.gap), children: [
-            /* @__PURE__ */ jsxs(StyledCopyRow, { copyGap: parseTokenValue49(content.spacing.gap), children: [
-              showIcon && /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  icon: IconComponent,
-                  size: "md",
-                  colour: type,
-                  "aria-label": type
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                StyledInlineCopy,
-                {
-                  copyGap: parseTokenValue49(content.copy.spacing.gap),
-                  children: [
-                    title && /* @__PURE__ */ jsx(
-                      Typography,
-                      {
-                        token: notifications.typography.title,
-                        color: colour.text.title,
-                        children: title
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Typography,
-                      {
-                        token: notifications.typography.body,
-                        color: colour.text.body,
-                        children
-                      }
-                    )
-                  ]
-                }
-              )
-            ] }),
-            link && /* @__PURE__ */ jsx(
-              StyledLinkWrapper,
+          /* @__PURE__ */ jsx(StyledContents, { contentsGap: parseTokenValue49(content.spacing.gap), children: /* @__PURE__ */ jsxs(StyledCopyRow, { copyGap: parseTokenValue49(content.spacing.gap), children: [
+            showIcon && /* @__PURE__ */ jsx(
+              Icon,
               {
-                linkPaddingLeft: parseTokenValue49(content.copy.spacing.gap),
-                children: /* @__PURE__ */ 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__ */ jsxs(
+              StyledInlineCopy,
+              {
+                copyGap: parseTokenValue49(content.copy.spacing.gap),
+                children: [
+                  title && /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      token: notifications.typography.title,
+                      color: colour.text.title,
+                      children: title
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      token: notifications.typography.body,
+                      color: colour.text.body,
+                      children
+                    }
+                  ),
+                  link && /* @__PURE__ */ jsx(
+                    StyledLinkWrapper,
+                    {
+                      linkPaddingLeft: parseTokenValue49(content.copy.spacing.gap),
+                      children: /* @__PURE__ */ jsx(
+                        Link,
+                        {
+                          href: link.href,
+                          onPress: link.onPress,
+                          weight: "semiBold",
+                          size: "md",
+                          children: link.label
+                        }
+                      )
+                    }
+                  )
+                ]
               }
             )
-          ] }),
+          ] }) }),
           onClose && /* @__PURE__ */ jsx(
             StyledCloseButton,
             {
@@ -14749,7 +14753,7 @@ var TabNavigationList = React60.forwardRef(
 TabNavigationList.displayName = "TabNavigation.List";
 var TabNavigationTab = React60.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.useRootContext();
     const theme2 = useTheme();
@@ -14759,7 +14763,7 @@ var TabNavigationTab = React60.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__ */ jsx(TabsPrimitive.Trigger, { value, disabled, asChild: true, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { value, disabled, asChild: true, children: /* @__PURE__ */ jsxs(
       StyledTab,
       __spreadProps(__spreadValues({
         ref,
@@ -14773,7 +14777,11 @@ var TabNavigationTab = React60.forwardRef(
         tabBorderColor: borderColour,
         tabFlex: layout === "fixed" ? 1 : void 0
       }, rest), {
-        children: /* @__PURE__ */ jsx(Typography, { token, color: textColour, children })
+        children: [
+          avatar && /* @__PURE__ */ jsx(Avatar, __spreadValues({}, avatar)),
+          icon && /* @__PURE__ */ jsx(Icon, { icon, customColour: textColour, "aria-hidden": true }),
+          /* @__PURE__ */ jsx(Typography, { token, color: textColour, children })
+        ]
       })
     ) });
   }