@butternutbox/pawprint-native 0.7.0 → 0.9.0

package/src/components/molecules/TabNavigation/TabNavigation.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { View, StyleSheet } from "react-native"
+import { Home } from "@butternutbox/pawprint-icons/core"
 import { TabNavigation } from "./TabNavigation"
 import type { TabNavigationProps } from "./TabNavigation"
 import { Typography } from "../../atoms/Typography"
@@ -149,6 +150,40 @@ export const States = {
   )
 }
 
+const DOG_PHOTO_URL = "https://placedog.net/200/200"
+
+export const WithIconsAndAvatars = {
+  name: "With Icons & Avatars",
+  render: () => (
+    <View style={styles.container}>
+      <TabNavigation defaultValue="home" layout="fixed">
+        <TabNavigation.List>
+          <TabNavigation.Tab value="home" icon={Home}>
+            Home
+          </TabNavigation.Tab>
+          <TabNavigation.Tab
+            value="dog"
+            avatar={{
+              src: DOG_PHOTO_URL,
+              alt: "Your dog",
+              size: "sm",
+              border: "sm"
+            }}
+          >
+            Your dog
+          </TabNavigation.Tab>
+        </TabNavigation.List>
+        <TabNavigation.Panel value="home">
+          <PanelBody>A leading icon sits before the label.</PanelBody>
+        </TabNavigation.Panel>
+        <TabNavigation.Panel value="dog">
+          <PanelBody>The Avatar atom can lead the label too.</PanelBody>
+        </TabNavigation.Panel>
+      </TabNavigation>
+    </View>
+  )
+}
+
 export const AnimatedContent = {
   name: "Animated Content (fade)",
   render: () => (

package/src/components/molecules/TabNavigation/TabNavigation.tsx

@@ -10,6 +10,8 @@ import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import * as TabsPrimitive from "@rn-primitives/tabs"
 import { Typography, type TypographyProps } from "../../atoms/Typography"
+import { Icon, type PawprintIcon } from "../../atoms/Icon"
+import { Avatar, type AvatarProps } from "../../atoms/Avatar"
 import { Animated, type AnimatedVariant } from "../Animated"
 
 type TabNavigationLayout = "fixed" | "intrinsic"
@@ -64,6 +66,8 @@ export type TabNavigationListProps = TabNavigationListOwnProps &
 type TabNavigationTabOwnProps = {
   value: string
   disabled?: boolean
+  icon?: PawprintIcon
+  avatar?: AvatarProps
   children: React.ReactNode
 }
 
@@ -169,12 +173,18 @@ TabNavigationList.displayName = "TabNavigation.List"
  * 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).
  */
 const TabNavigationTab = React.forwardRef<View, TabNavigationTabProps>(
-  ({ value, disabled = false, children, ...rest }, ref) => {
+  ({ value, disabled = false, icon, avatar, children, ...rest }, ref) => {
     const { layout } = useTabNavigationContext()
     const { value: selectedValue } = TabsPrimitive.useRootContext()
     const theme = useTheme()
@@ -209,6 +219,10 @@ const TabNavigationTab = React.forwardRef<View, TabNavigationTabProps>(
           tabFlex={layout === "fixed" ? 1 : undefined}
           {...rest}
         >
+          {avatar && <Avatar {...avatar} />}
+          {icon && (
+            <Icon icon={icon} customColour={textColour as string} aria-hidden />
+          )}
           <Typography token={token} color={textColour}>
             {children}
           </Typography>