jfs-components 0.1.12 → 0.1.18

package/src/components/AmountInput/AmountInput.tsx

@@ -37,9 +37,9 @@ const AmountInput = forwardRef<View, AmountInputProps>(function AmountInput({
     const modes = { ...globalModes, ...propModes }
 
     // Resolve tokens
-    const gap = Number(getVariableByName('amountInput/gap', modes)) || 16
-    const paddingHorizontal = Number(getVariableByName('amountInput/padding/horizontal', modes)) || 0
-    const paddingVertical = Number(getVariableByName('amountInput/padding/vertical', modes)) || 0
+    const gap = Number(getVariableByName('amountInput/gap', modes))
+    const paddingHorizontal = Number(getVariableByName('amountInput/padding/horizontal', modes))
+    const paddingVertical = Number(getVariableByName('amountInput/padding/vertical', modes))
 
     const containerStyle: ViewStyle = {
         flexDirection: 'column',

package/src/components/AreaLineChart/AreaLineChart.tsx

@@ -1035,7 +1035,7 @@ function ChartTooltip({
     const bg = (getVariableByName('tooltip/background', modes) as string | null) ?? '#0f0d0a'
     const paddingH = toNumber(getVariableByName('tooltip/padding/horizontal', modes), 12)
     const paddingV = toNumber(getVariableByName('tooltip/padding/vertical', modes), 8)
-    const radius = toNumber(getVariableByName('radius', modes), 8)
+    const radius = 8
     const labelColor = (getVariableByName('tooltip/label/color', modes) as string | null) ?? '#ffffff'
 
     if (items.length === 0) return null
@@ -1111,7 +1111,7 @@ function ChartLegend() {
 /** Resolve `axisItem/*` typography tokens into a memoized text style. */
 function useAxisTypography(modes: Modes) {
     return useMemo(() => {
-        const color = (getVariableByName('axisItem/color', modes) as string | null) ?? '#000000'
+        const color = (getVariableByName('axisItem/fg', modes) as string | null) ?? '#000000'
         const fontFamily =
             (getVariableByName('axisItem/fontFamily', modes) as string | null) ?? 'JioType Var'
         const fontSize = toNumber(getVariableByName('axisItem/fontSize', modes), 12)

package/src/components/Attached/Attached.tsx

@@ -189,7 +189,7 @@ function Attached({
   // anchor centering intact).
   const slotBorderStyle = useMemo<ViewStyle | null>(() => {
     const borderColor = getVariableByName('attached/slot/border', modes)
-    const borderWidth = parseFloat(getVariableByName('attached/slot/borderWidth', modes) || '0')
+    const borderWidth = parseFloat(getVariableByName('attached/slot/borderWidth', modes))
     if (!borderColor || !(borderWidth > 0)) return null
 
     // Match the inner clip radius so the ring stays concentric. The outer edge

package/src/components/Avatar/Avatar.tsx

@@ -65,18 +65,18 @@ interface AvatarTokens {
 }
 
 function resolveAvatarTokens(modes: Modes, isMonogram: boolean): AvatarTokens {
-  const size = (getVariableByName('avatar/size', modes) || 29) as number
-  const radiusRaw = (getVariableByName('avatar/radius', modes) || 9999) as number
-  const backgroundColor = getVariableByName('avatar/background', modes) || '#dbcfff'
-  const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)'
-  const borderSize = (getVariableByName('avatar/border/size', modes) || 1) as number
-  const labelColor = getVariableByName('avatar/label/color', modes) || '#5c00b5'
-  const labelFontSize = (getVariableByName('avatar/label/fontSize', modes) || 12) as number
-  const labelLineHeight = (getVariableByName('avatar/label/lineHeight', modes) || 14) as number
-  const labelFontWeightRaw = getVariableByName('avatar/label/fontWeight', modes) || 500
+  const size = (getVariableByName('avatar/size', modes)) as number
+  const radiusRaw = (getVariableByName('avatar/radius', modes)) as number
+  const backgroundColor = getVariableByName('avatar/background', modes)
+  const borderColor = getVariableByName('avatar/border/color', modes)
+  const borderSize = (getVariableByName('avatar/border/size', modes)) as number
+  const labelColor = getVariableByName('avatar/label/color', modes)
+  const labelFontSize = (getVariableByName('avatar/label/fontSize', modes)) as number
+  const labelLineHeight = (getVariableByName('avatar/label/lineHeight', modes)) as number
+  const labelFontWeightRaw = getVariableByName('avatar/label/fontWeight', modes)
   const labelFontWeight =
     typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw
-  const labelFontFamily = (getVariableByName('avatar/label/fontFamily', modes) || 'Inter') as string
+  const labelFontFamily = (getVariableByName('avatar/label/fontFamily', modes)) as string
 
   // 9999 is the design-token sentinel for "perfect circle"
   const borderRadius = radiusRaw === 9999 ? size / 2 : radiusRaw

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { useId } from 'react';
 import { View, Platform, type ViewStyle } from 'react-native';
-import MaskedView from '@react-native-masked-view/masked-view';
-import Svg, { Path } from 'react-native-svg';
+import Svg, { Defs, Mask, Path, ForeignObject } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils';
 import type { Modes } from '../../design-tokens'
@@ -13,18 +12,23 @@ type AvatarGroupProps = {
 } & React.ComponentProps<typeof View>;
 
 function AvatarGroup({ modes = EMPTY_MODES, children, style, ...rest }: AvatarGroupProps) {
-    const gap = getVariableByName('avatarGroup/gap', modes) || 0;
+    // Stable, collision-free base for the per-avatar SVG mask ids so multiple
+    // groups on one screen (and multiple avatars in a group) never clash.
+    const rawId = useId();
+    const maskBaseId = `avatargroup-mask-${rawId.replace(/[^a-zA-Z0-9_-]/g, '')}`;
 
+    const gap = getVariableByName('avatarGroup/gap', modes);
 
-    const avatarSize = getVariableByName('avatar/size', modes) || 29;
-    const avatarRadius = getVariableByName('avatar/radius', modes) || 9999;
-    const borderSize = getVariableByName('avatar/border/size', modes) || 1;
-    const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)';
 
-    const paddingLeft = getVariableByName('avatarGroup/padding/left', modes) || 0;
-    const paddingRight = getVariableByName('avatarGroup/padding/right', modes) || 0;
-    const paddingTop = getVariableByName('avatarGroup/padding/top', modes) || 0;
-    const paddingBottom = getVariableByName('avatarGroup/padding/bottom', modes) || 0;
+    const avatarSize = getVariableByName('avatar/size', modes);
+    const avatarRadius = getVariableByName('avatar/radius', modes);
+    const borderSize = getVariableByName('avatar/border/size', modes);
+    const borderColor = getVariableByName('avatar/border/color', modes);
+
+    const paddingLeft = getVariableByName('avatarGroup/padding/left', modes);
+    const paddingRight = getVariableByName('avatarGroup/padding/right', modes);
+    const paddingTop = getVariableByName('avatarGroup/padding/top', modes);
+    const paddingBottom = getVariableByName('avatarGroup/padding/bottom', modes);
 
     const validChildren = flattenChildren(children);
     const totalChildren = validChildren.length;
@@ -43,7 +47,11 @@ function AvatarGroup({ modes = EMPTY_MODES, children, style, ...rest }: AvatarGr
     const holeRadius = effectiveRadius + borderSizeInt;
     const holeCenter = { x: nextAvatarX + r, y: r };
 
-    // Native Mask Path
+    // Native mask path: the full avatar square MINUS a circular hole where the
+    // next (overlapping) avatar sits. Drawn as a single `evenodd` path so the
+    // hole is cut out of the square. Filled WHITE because react-native-svg's
+    // `<Mask>` is a *luminance* mask (white = visible, black/absent = hidden) —
+    // the inverse of the old `@react-native-masked-view` alpha convention.
     const rectPath = `M 0 0 h ${avatarSizeInt} v ${avatarSizeInt} h -${avatarSizeInt} z`;
     const circlePath = `M ${holeCenter.x},${holeCenter.y} m -${holeRadius},0 a ${holeRadius},${holeRadius} 0 1,0 ${holeRadius * 2},0 a ${holeRadius},${holeRadius} 0 1,0 -${holeRadius * 2},0`;
     const maskPath = `${rectPath} ${circlePath}`;
@@ -101,23 +109,41 @@ function AvatarGroup({ modes = EMPTY_MODES, children, style, ...rest }: AvatarGr
                     );
                 }
 
-                // Native MaskedView
+                // Native: mask the avatar with react-native-svg instead of the
+                // unmaintained `@react-native-masked-view/masked-view`, whose
+                // legacy `requireNativeComponent('RNCMaskedView')` resolves to a
+                // plain object (crashing "Element type is invalid") under the New
+                // Architecture interop. react-native-svg ships a Fabric/codegen
+                // `<Mask>` + `<ForeignObject>` that resolves on both architectures;
+                // the avatar is hosted inside the `<ForeignObject>` and revealed
+                // through the luminance mask.
+                const maskId = `${maskBaseId}-${index}`;
                 return (
                     <View key={index} style={wrapperStyle}>
-                        <MaskedView
-                            style={{ flex: 1, height: '100%' }}
-                            maskElement={
-                                <Svg height="100%" width="100%" viewBox={`0 0 ${avatarSizeInt} ${avatarSizeInt}`}>
-                                    <Path
-                                        d={maskPath}
-                                        fill="black"
-                                        fillRule="evenodd"
-                                    />
-                                </Svg>
-                            }
+                        <Svg
+                            height="100%"
+                            width="100%"
+                            viewBox={`0 0 ${avatarSizeInt} ${avatarSizeInt}`}
                         >
-                            {clonedChild}
-                        </MaskedView>
+                            <Defs>
+                                <Mask
+                                    id={maskId}
+                                    maskUnits="userSpaceOnUse"
+                                    maskContentUnits="userSpaceOnUse"
+                                >
+                                    <Path d={maskPath} fill="white" fillRule="evenodd" />
+                                </Mask>
+                            </Defs>
+                            <ForeignObject
+                                x="0"
+                                y="0"
+                                width={avatarSizeInt}
+                                height={avatarSizeInt}
+                                mask={`url(#${maskId})`}
+                            >
+                                {clonedChild}
+                            </ForeignObject>
+                        </Svg>
                     </View>
                 );
             })}

package/src/components/Badge/Badge.tsx

@@ -84,34 +84,33 @@ function Badge({
   // swaps the solid fill for a translucent overlay + white label, matching the
   // Figma `badge/glass/*` tokens.
   const backgroundColor =
-    (getVariableByName('badge/color/background', modes) as string) || '#d8effe'
+    (getVariableByName('badge/color/background', modes) as string)
   const glassBackground =
-    (getVariableByName('badge/glass/color/background', modes) as string) || '#ffffff26'
+    (getVariableByName('badge/glass/color/background', modes) as string)
   const glassLabelColor =
-    (getVariableByName('badge/glass/color/label', modes) as string) || '#ffffff'
+    (getVariableByName('badge/glass/color/label', modes) as string)
   const labelColor = isGlass
     ? glassLabelColor
-    : (getVariableByName('badge/color/label', modes) as string) || '#000000'
+    : (getVariableByName('badge/color/label', modes) as string)
   const fontSize =
-    Number(getVariableByName('badge/label/fontSize', modes) as unknown) || 12
+    Number(getVariableByName('badge/label/fontSize', modes) as unknown)
   const fontFamily =
-    (getVariableByName('badge/fontFamily', modes) as string) || undefined
+    (getVariableByName('badge/fontFamily', modes) as string)
   const fontWeight =
-    (getVariableByName('badge/label/fontWeight', modes) as string) || '600'
+    (getVariableByName('badge/label/fontWeight', modes) as string)
   const paddingHorizontal =
-    Number(getVariableByName('badge/padding/horizontal', modes) as unknown) || 6
+    Number(getVariableByName('badge/padding/horizontal', modes) as unknown)
   const paddingVertical =
-    Number(getVariableByName('badge/padding/vertical', modes) as unknown) || 4
+    Number(getVariableByName('badge/padding/vertical', modes) as unknown)
   const borderRadius =
-    Number(getVariableByName('badge/radius', modes) as unknown) || 4
+    Number(getVariableByName('badge/radius', modes) as unknown)
   const lineHeight =
-    Number(getVariableByName('badge/label/lineHeight', modes) as unknown) ||
-    Math.round(fontSize * 1.2)
+    Number(getVariableByName('badge/label/lineHeight', modes) as unknown)
   // Figma `blur/minimal` (px radius) -> GlassFill's 0–100 intensity scale, the
   // same 1:1 mapping the merchandising card footer uses.
   const blurIntensity = Math.max(
     0,
-    Math.min(100, Math.round(Number(getVariableByName('blur/minimal', modes) as unknown) || 29)),
+    Math.min(100, Math.round(Number(getVariableByName('blur/minimal', modes) as unknown))),
   )
 
   // Skeleton short-circuit. Size derived from the same tokens the loaded

package/src/components/BenefitCard/BenefitCard.tsx

@@ -15,6 +15,9 @@ import Text from '../Text/Text'
 import ListItem from '../ListItem/ListItem'
 import Divider from '../Divider/Divider'
 import Button from '../Button/Button'
+import Nudge from '../Nudge/Nudge'
+import Avatar from '../Avatar/Avatar'
+import TextSegment from '../TextSegment/TextSegment'
 import type { Modes } from '../../design-tokens'
 
 /**
@@ -42,17 +45,46 @@ export interface BenefitCardProps {
     /** Header section title (e.g. `"You will earn"`). */
     headerTitle?: string
     /**
-     * Highlighted item shown directly under the header title (icon + title +
-     * optional trailing value). Rendered above the divider.
+     * @deprecated The header is now a multi-row list wrap. A single item still
+     * works and is rendered as a one-row list (lowest precedence, after
+     * `header` and `headerItems`). Prefer `headerItems` (declarative) or
+     * `header` (slot).
      */
     headerItem?: BenefitCardItem
+    /**
+     * Declarative header list-wrap rows shown under the header title and above
+     * the divider (icon + title + optional trailing value). Replaces the
+     * legacy single {@link BenefitCardProps.headerItem}. Ignored when the
+     * `header` slot is provided.
+     */
+    headerItems?: BenefitCardItem[]
+    /**
+     * Real slot for the header "list wrap" (the rows under the header title).
+     * Highest precedence — when provided, these children render instead of
+     * `headerItems` / `headerItem`; `modes` (plus the `List Item Style:
+     * Minimal` style) cascade into every child automatically.
+     */
+    header?: React.ReactNode
     /**
      * Toggles the whole header section (title + item + divider). Mirrors the
      * Figma `showHeader` property. Defaults to `true`.
      */
     showHeader?: boolean
-    /** Body section title (e.g. `"Upgrade to JioFinance+ and earn more"`). */
+    /**
+     * @deprecated In the Figma redesign the plain body title was replaced by a
+     * slot-based upsell `Nudge` ({@link BenefitCardProps.bodyHeader}). Still
+     * honored for backward compatibility: when set, it renders as a plain text
+     * title in place of the default nudge. Prefer `bodyHeader`.
+     */
     bodyTitle?: string
+    /**
+     * Real slot rendered between the header divider and the body list — in the
+     * Figma reference this is an upsell `Nudge` (avatar + highlighted
+     * "JioFinance+" message). Defaults to that nudge. Pass `null`/`false` to
+     * hide it, `bodyTitle` for the legacy plain-text title, or any `ReactNode`
+     * for full control; `modes` cascade into the slot.
+     */
+    bodyHeader?: React.ReactNode
     /**
      * Body benefit rows. Ignored when `children` is provided (the slot wins).
      */
@@ -109,8 +141,11 @@ export interface BenefitCardProps {
 function BenefitCard({
     headerTitle = 'You will earn',
     headerItem,
+    headerItems,
+    header,
     showHeader = true,
-    bodyTitle = 'Upgrade to JioFinance+ and earn more',
+    bodyTitle,
+    bodyHeader,
     items,
     children,
     buttonLabel = 'Upgrade',
@@ -125,14 +160,28 @@ function BenefitCard({
 }: BenefitCardProps) {
     const tokens = useMemo(() => resolveTokens(modes), [modes])
 
-    // Sub-component modes. Consumer-supplied `modes` always win via spread order.
-    const listItemModes = useMemo<Modes>(() => ({ 'List Item Style': 'Minimal', ...modes }), [modes])
+    // Component-level modes. `List Item Style: Minimal` and `Nudge padding: None`
+    // are BenefitCard's own defaults: they live on the card and cascade down into
+    // every child (the list-wrap rows and the upsell nudge) rather than being
+    // threaded onto each individual item. Consumer `modes` always win.
+    const cascadeModes = useMemo<Modes>(
+        () => ({ 'List Item Style': 'Minimal', 'Nudge padding': 'None', ...modes }),
+        [modes]
+    )
+    // Sub-element modes layer their own specifics on top of the consumer modes.
     const iconModes = useMemo<Modes>(() => ({ AppearanceBrand: 'Secondary', ...modes }), [modes])
     const trailingTextModes = useMemo<Modes>(
         () => ({ 'Text Sizes': 'Small', Weight: 'Regular', ...modes }),
         [modes]
     )
     const ctaModes = useMemo<Modes>(() => ({ 'Button / Size': 'S', ...modes }), [modes])
+    // The upsell nudge keeps a white/transparent background (`AppearanceBrand:
+    // Neutral` → `nudge/background: #ffffff`); its `Nudge padding: None` cascades
+    // in from `cascadeModes` so it sits flush with the card.
+    const nudgeModes = useMemo<Modes>(
+        () => ({ AppearanceBrand: 'Neutral', ...cascadeModes }),
+        [cascadeModes]
+    )
 
     const renderItem = (item: BenefitCardItem, key: React.Key) => {
         const leading =
@@ -157,25 +206,57 @@ function BenefitCard({
                 leading={leading}
                 trailing={trailing}
                 onPress={item.onPress}
-                modes={listItemModes}
             />
         )
     }
 
-    const headerNode =
-        showHeader && (headerTitle != null || headerItem != null) ? (
-            <View style={styles.section}>
-                <View style={styles.cardHeader}>
-                    {headerTitle != null ? <RNText style={tokens.title}>{headerTitle}</RNText> : null}
-                    {headerItem != null ? renderItem(headerItem, 'header-item') : null}
-                </View>
-                <Divider modes={modes} />
+    // Header "list wrap" — slot-based. Precedence: `header` slot > `headerItems`
+    // array > legacy single `headerItem` > Figma default rows. The component-level
+    // `cascadeModes` are pushed into the whole group at once, so individual rows
+    // never carry their own list-item modes.
+    const headerListSource = header
+        ? header
+        : (headerItems ?? (headerItem ? [headerItem] : DEFAULT_HEADER_ITEMS)).map((item, index) =>
+              renderItem(item, `header-${index}`)
+          )
+    const headerListNodes = cloneChildrenWithModes(headerListSource, cascadeModes)
+
+    const headerNode = showHeader ? (
+        <View style={styles.section}>
+            <View style={styles.cardHeader}>
+                {headerTitle != null ? <RNText style={tokens.title}>{headerTitle}</RNText> : null}
+                <View style={tokens.listWrap}>{headerListNodes}</View>
             </View>
-        ) : null
+            <Divider modes={modes} />
+        </View>
+    ) : null
+
+    // Body "header" slot (between the divider and the body list). Precedence:
+    // explicit `bodyHeader` slot > legacy `bodyTitle` text > Figma upsell nudge.
+    const bodyHeaderNode =
+        bodyHeader === null || bodyHeader === false
+            ? null
+            : bodyHeader !== undefined
+              ? renderSlot(bodyHeader, cascadeModes)
+              : bodyTitle != null
+                ? <RNText style={tokens.title}>{bodyTitle}</RNText>
+                : (
+                    <Nudge type="inline-compact" modes={{ ...nudgeModes, ...cascadeModes }} startSlot={DEFAULT_UPSELL_AVATAR}>
+                        <TextSegment
+                            modes={cascadeModes}
+                            segments={[
+                                { text: 'Upgrade to ' },
+                                { text: 'JioFinance+', modes: { 'Text Appearance': 'Primary' } },
+                                { text: ' and earn more' },
+                            ]}
+                        />
+                    </Nudge>
+                )
 
-    const bodyList = children
-        ? cloneChildrenWithModes(children, listItemModes)
+    const bodyListSource = children
+        ? children
         : (items ?? DEFAULT_ITEMS).map((item, index) => renderItem(item, index))
+    const bodyList = cloneChildrenWithModes(bodyListSource, cascadeModes)
 
     const ctaNode = button ?? (
         <Button label={buttonLabel} modes={ctaModes} onPress={onButtonPress} />
@@ -189,10 +270,8 @@ function BenefitCard({
     const content = (
         <>
             {headerNode}
-            <View style={tokens.body}>
-                {bodyTitle != null ? <RNText style={tokens.title}>{bodyTitle}</RNText> : null}
-                <View style={tokens.listWrap}>{bodyList}</View>
-            </View>
+            {bodyHeaderNode}
+            <View style={tokens.listWrap}>{bodyList}</View>
             {showButton ? ctaNode : null}
         </>
     )
@@ -227,7 +306,6 @@ const CARD_HEADER_GAP = 4
 
 interface ResolvedTokens {
     container: ViewStyle
-    body: ViewStyle
     listWrap: ViewStyle
     title: TextStyle
 }
@@ -267,10 +345,6 @@ function resolveTokens(modes: Modes): ResolvedTokens {
             flexDirection: 'column',
             alignItems: 'flex-start',
         },
-        body: {
-            alignSelf: 'stretch',
-            gap,
-        },
         listWrap: {
             alignSelf: 'stretch',
             gap,
@@ -287,11 +361,30 @@ function resolveTokens(modes: Modes): ResolvedTokens {
     }
 }
 
+// Cascades `modes` into a slot node and unwraps a single child so the slot can
+// be rendered inline without an extra fragment.
+function renderSlot(node: React.ReactNode, modes: Modes): React.ReactNode {
+    const processed = cloneChildrenWithModes(node, modes)
+    return processed.length === 1 ? processed[0] : processed
+}
+
+// Figma reference rows for the header list wrap (two highlighted "JioPoints"
+// rows). Used only when no `header` slot / `headerItems` / legacy `headerItem`
+// is supplied.
+const DEFAULT_HEADER_ITEMS: BenefitCardItem[] = [
+    { icon: 'ic_jewellery_diamond', title: 'JioPoints', trailingText: 'Up to 2000 pts' },
+    { icon: 'ic_jewellery_diamond', title: 'JioPoints', trailingText: 'Up to 2000 pts' },
+]
+
 const DEFAULT_ITEMS: BenefitCardItem[] = [
     { icon: 'ic_card', title: 'Up to ₹5000 cashback' },
     { icon: 'ic_card', title: '25% extra JioPoints' },
 ]
 
+// Start-slot avatar for the default upsell nudge. `modes` cascade in from the
+// nudge (XS keeps it compact next to the inline message).
+const DEFAULT_UPSELL_AVATAR = <Avatar style="Image" modes={{ 'Avatar Size': 'XS' }} />
+
 const styles = StyleSheet.create({
     section: {
         alignSelf: 'stretch',

package/src/components/BottomNav/BottomNav.tsx

@@ -53,8 +53,8 @@ function BottomNav({
   const modes = { ...globalModes, ...propModes }
 
   // Resolve container styling tokens
-  const backgroundColor = getVariableByName('bottomNav/background', modes) || '#ffffff'
-  const borderColor = getVariableByName('bottomNav/border/color', modes) || '#cccfd1'
+  const backgroundColor = getVariableByName('bottomNav/background', modes)
+  const borderColor = getVariableByName('bottomNav/border/color', modes)
   const borderWidth = getVariableByName('bottomNav/border/width', modes) ?? 1
   const paddingTop = getVariableByName('bottomNav/padding/top', modes) ?? 10
   const paddingBottom = getVariableByName('bottomNav/padding/bottom', modes) ?? 23

package/src/components/BottomNavItem/BottomNavItem.tsx

@@ -60,17 +60,17 @@ function resolveBottomNavItemTokens(
   const gap = (getVariableByName('bottomNavItem/gap', modes) ?? 6) as number
 
   const fontFamily =
-    (getVariableByName('bottomNavItem/fontFamily', modes) || 'JioType_Var:Medium') as string
+    (getVariableByName('bottomNavItem/fontFamily', modes)) as string
   const fontWeightRaw = getVariableByName('bottomNavItem/fontWeight', modes) ?? 500
   const fontWeight =
     typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw
   const fontSize = (getVariableByName('bottomNavItem/fontSize', modes) ?? 11) as number
   const lineHeight = (getVariableByName('bottomNavItem/lineHeight', modes) ?? 14) as number
 
-  const labelColor = (getVariableByName('bottomNavItem/label/color', modes) || '#0d0d0f') as string
+  const labelColor = (getVariableByName('bottomNavItem/label/color', modes)) as string
 
   const resolvedIconColor =
-    iconColorOverride || (getVariableByName('bottomNavItem/icon/color', modes) || '#ad8545') as string
+    iconColorOverride || (getVariableByName('bottomNavItem/icon/color', modes)) as string
   const resolvedIconSize =
     iconSizeOverride ?? (getVariableByName('bottomNavItem/icon/size', modes) ?? 24) as number
 

package/src/components/Button/Button.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
-import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
+import { EMPTY_MODES } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
 import Skeleton from '../../skeleton/Skeleton'
 import { useSkeleton } from '../../skeleton/SkeletonGroup'
@@ -95,6 +95,15 @@ const containerLayoutStyle = {
   justifyContent: 'center' as const,
 }
 
+// Keeps the label on a single line. `flexShrink: 0` stops a tight flex parent
+// from squeezing the text; on web `whiteSpace: 'nowrap'` is what actually
+// prevents the line break (a bare `numberOfLines` line-clamp still allows the
+// text to wrap inside a width-constrained pill in react-native-web).
+const NO_WRAP_LABEL_STYLE: TextStyle = {
+  flexShrink: 0,
+  ...(IS_WEB ? { whiteSpace: 'nowrap' as const } : {}),
+}
+
 // ---------------------------------------------------------------------------
 // Token resolution
 // ---------------------------------------------------------------------------
@@ -120,28 +129,28 @@ interface ButtonTokens {
 }
 
 function resolveButtonTokens(modes: Modes, disabled: boolean): ButtonTokens {
-  const backgroundColor = getVariableByName('button/background', modes) || '#cfa159'
-  const borderColor = getVariableByName('button/border/color', modes) || 'rgba(255,255,255,0)'
+  const backgroundColor = getVariableByName('button/background', modes)
+  const borderColor = getVariableByName('button/border/color', modes)
   const borderWidth = getVariableByName('button/border/size', modes)
-  const radius = getVariableByName('button/radius', modes) || 9999
-  const paddingHorizontal = getVariableByName('button/padding/horizontal', modes) || 20
-  const paddingVertical = getVariableByName('button/padding/vertical', modes) || 12
-  const gap = getVariableByName('button/gap', modes) || 8
+  const radius = getVariableByName('button/radius', modes)
+  const paddingHorizontal = getVariableByName('button/padding/horizontal', modes)
+  const paddingVertical = getVariableByName('button/padding/vertical', modes)
+  const gap = getVariableByName('button/gap', modes)
 
-  const fontFamily = getVariableByName('button/fontFamily', modes) || 'System'
-  const fontWeightValue = getVariableByName('button/fontWeight', modes) || 700
+  const fontFamily = getVariableByName('button/fontFamily', modes)
+  const fontWeightValue = getVariableByName('button/fontWeight', modes)
   const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue
-  const lineHeight = getVariableByName('button/lineHeight', modes) || 19
-  const fontSize = getVariableByName('button/fontSize', modes) || 16
-  const textColor = getVariableByName('button/foreground', modes) || '#0f0d0a'
+  const lineHeight = getVariableByName('button/lineHeight', modes)
+  const fontSize = getVariableByName('button/fontSize', modes)
+  const textColor = getVariableByName('button/foreground', modes)
   const iconSize = (getVariableByName('button/icon/size', modes) ?? 18) as number
 
   // Pressed tokens are always resolved so the Pressable `style` callback can
   // apply the pressed visual without scheduling a React render.
   const pressedModes = { ...modes, 'Button / State': 'Pressed' }
-  const pressedBg = getVariableByName('button/background', pressedModes) || backgroundColor
-  const pressedBorderColor = getVariableByName('button/border/color', pressedModes) || borderColor
-  const pressedTextColor = (getVariableByName('button/foreground', pressedModes) || textColor) as string
+  const pressedBg = getVariableByName('button/background', pressedModes)
+  const pressedBorderColor = getVariableByName('button/border/color', pressedModes)
+  const pressedTextColor = (getVariableByName('button/foreground', pressedModes)) as string
 
   // Hover tokens are only meaningful on web. Skipping them on native saves
   // ~3 token lookups + an object spread per render on every Button.
@@ -149,9 +158,9 @@ function resolveButtonTokens(modes: Modes, disabled: boolean): ButtonTokens {
   let hoverTextColor: string | null = null
   if (IS_WEB) {
     const hoverModes = { ...modes, 'Button / State': 'Hover' }
-    const hoverBg = getVariableByName('button/background', hoverModes) || backgroundColor
-    const hoverBorderColor = getVariableByName('button/border/color', hoverModes) || borderColor
-    hoverTextColor = (getVariableByName('button/foreground', hoverModes) || textColor) as string
+    const hoverBg = getVariableByName('button/background', hoverModes)
+    const hoverBorderColor = getVariableByName('button/border/color', hoverModes)
+    hoverTextColor = (getVariableByName('button/foreground', hoverModes)) as string
     hoverContainer = { backgroundColor: hoverBg as string, borderColor: hoverBorderColor as string }
   }
 
@@ -300,8 +309,9 @@ function ButtonImpl({
   } else {
     content = (
       <Text
-        style={activeLabelStyle}
-        {...resolveTruncation(disableTruncation, 1)}
+        style={[activeLabelStyle, disableTruncation ? null : NO_WRAP_LABEL_STYLE]}
+        numberOfLines={disableTruncation ? undefined : 1}
+        ellipsizeMode={disableTruncation ? undefined : 'tail'}
       >
         {label}
       </Text>