@butternutbox/pawprint-native 0.6.0 → 0.8.0

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>

package/src/components/molecules/index.ts

@@ -13,6 +13,7 @@ export * from "./Radio"
 export * from "./SearchField"
 export * from "./SegmentedControl"
 export * from "./SelectField"
+export * from "./NativeSelectPicker"
 export * from "./Slider"
 export * from "./Notification"
 export * from "./Tooltip"