jfs-components 0.1.51 → 0.1.54

package/src/components/ExpandableCheckbox/ExpandableCheckbox.tsx

@@ -1,20 +1,41 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import {
   View,
-  Text,
   type StyleProp,
   type ViewStyle,
   type TextStyle,
+  type GestureResponderEvent,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES } from '../../utils/react-utils'
-import Checkbox from '../Checkbox/Checkbox'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import CheckboxItem from '../CheckboxItem/CheckboxItem'
 import Button from '../Button/Button'
+import Text from '../Text/Text'
+import Link from '../Link/Link'
+import ScrollArea from '../ScrollArea/ScrollArea'
 import type { Modes } from '../../design-tokens'
 
 export type ExpandableCheckboxProps = {
-  /** Long text label rendered next to the checkbox. */
+  /**
+   * Primary label rendered next to the checkbox (Figma `Text` instance).
+   * Ignored when {@link children} is provided.
+   */
   label?: string
+  /**
+   * Optional underlined link rendered after {@link label} (Figma `Link`
+   * instance, e.g. "Terms & Conditions"). Ignored when {@link children} is
+   * provided.
+   */
+  linkLabel?: string
+  /** Press handler for {@link linkLabel}. Navigation is left to the consumer. */
+  onLinkPress?: (event: GestureResponderEvent) => void
+  /**
+   * Full label-slot override matching the Figma Checkbox Item `slot`. When
+   * provided, {@link label} / {@link linkLabel} are ignored and `modes` are
+   * cascaded into the slot children. Prefer this for fully custom label
+   * compositions.
+   */
+  children?: React.ReactNode
   /** Whether the checkbox is checked (controlled). */
   checked?: boolean
   /** Initial checked state (uncontrolled). */
@@ -45,7 +66,10 @@ export type ExpandableCheckboxProps = {
   modes?: Modes
   /** Override outer container styles. */
   style?: StyleProp<ViewStyle>
-  /** Override the label text styles. */
+  /**
+   * Override styles applied to the composed {@link label} `Text`. No-op when
+   * {@link children} is provided.
+   */
   labelStyle?: StyleProp<TextStyle>
   /** Accessibility label for the checkbox. Falls back to `label`. */
   accessibilityLabel?: string
@@ -63,15 +87,21 @@ const BUTTON_DEFAULT_MODES = {
   Emphasis: 'Low',
 } as const
 
+/** Figma Idle label-slot itemSpacing. */
+const IDLE_SLOT_GAP = 4
+/** Figma Open scroll-slot itemSpacing. */
+const OPEN_SLOT_GAP = 2
+
 /**
- * ExpandableCheckbox composes a `Checkbox`, a long-form label and a
- * "Read more" / "Read less" toggle. Mirrors the Figma "Expandable Checkbox"
- * component with two states:
+ * ExpandableCheckbox composes a `CheckboxItem` (checkbox + label slot), optional
+ * `Text`/`Link` label content, and a "Read more" / "Read less" toggle. Mirrors
+ * the Figma "Expandable Checkbox" component with two states:
  *
- *  - **Idle (collapsed)** — checkbox + truncated label + toggle button arranged
- *    in a horizontal row (cross-axis centered).
- *  - **Open (expanded)** — checkbox + full multi-line label, with the toggle
- *    button right-aligned beneath the row.
+ *  - **Idle (collapsed)** — horizontal row: CheckboxItem (fill) + toggle button
+ *    (hug), cross-axis centered.
+ *  - **Open (expanded)** — vertical stack aligned to the end: CheckboxItem with
+ *    the label slot wrapped in a `ScrollArea` (capped by `checkbox/maxHeight`),
+ *    then the toggle button right-aligned beneath.
  *
  * The checkbox and the toggle button have independent press handlers — pressing
  * the toggle does not affect the checked state, and toggling the checkbox does
@@ -83,7 +113,9 @@ const BUTTON_DEFAULT_MODES = {
  * @example
  * ```tsx
  * <ExpandableCheckbox
- *   label="By checking this box, I (a) acknowledge and (b) agree to the full terms…"
+ *   label="I agree"
+ *   linkLabel="Terms & Conditions"
+ *   onLinkPress={openTerms}
  *   defaultChecked
  *   onValueChange={setAccepted}
  *   modes={{ 'Color Mode': 'Light' }}
@@ -92,6 +124,9 @@ const BUTTON_DEFAULT_MODES = {
  */
 function ExpandableCheckbox({
   label = '',
+  linkLabel,
+  onLinkPress,
+  children,
   checked: controlledChecked,
   defaultChecked = false,
   onValueChange,
@@ -132,23 +167,30 @@ function ExpandableCheckbox({
     onExpandedChange?.(next)
   }, [disabled, isExpanded, isExpandedControlled, onExpandedChange])
 
+  // Isolate link presses from the CheckboxItem row Pressable so activating the
+  // Terms link never toggles the checkbox.
+  const handleLinkPress = useCallback(
+    (event: GestureResponderEvent) => {
+      if (disabled) return
+      // RN web: stop the parent Pressable from also receiving the click.
+      event.stopPropagation?.()
+      onLinkPress?.(event)
+    },
+    [disabled, onLinkPress]
+  )
+
   const gap =
     (getVariableByName('expandableCheckbox/gap', modes) as number | null) ?? 8
-
-  const rowGap =
-    (getVariableByName('checkboxItem/gap', modes) as number | null) ?? 8
-
-  const labelColor =
-    (getVariableByName('checkboxItem/foreground', modes) as string | null) ?? '#1a1c1f'
-  const labelFontFamily =
-    (getVariableByName('checkboxItem/label/fontFamily', modes) as string | null) ?? 'JioType Var'
-  const labelFontSize =
-    (getVariableByName('checkboxItem/label/fontSize', modes) as number | null) ?? 14
-  const labelLineHeight =
-    (getVariableByName('checkboxItem/label/lineHeight', modes) as number | null) ?? 19
-  const labelFontWeightRaw =
-    getVariableByName('checkboxItem/label/fontWeight', modes) ?? 400
-  const labelFontWeight = String(labelFontWeightRaw) as TextStyle['fontWeight']
+  const maxHeight =
+    (getVariableByName('checkbox/maxHeight', modes) as number | null) ?? 450
+  const scrollPaddingLeft =
+    (getVariableByName('scrollArea/padding/left', modes) as number | null) ?? 0
+  const scrollPaddingTop =
+    (getVariableByName('scrollArea/padding/top', modes) as number | null) ?? 0
+  const scrollPaddingRight =
+    (getVariableByName('scrollArea/padding/right', modes) as number | null) ?? 0
+  const scrollPaddingBottom =
+    (getVariableByName('scrollArea/padding/bottom', modes) as number | null) ?? 0
 
   const containerStyle: ViewStyle = useMemo(
     () => ({
@@ -161,43 +203,36 @@ function ExpandableCheckbox({
     [isExpanded, gap, disabled]
   )
 
-  const rowStyle: ViewStyle = useMemo(
+  const itemWrapperStyle: ViewStyle = useMemo(
     () => ({
       flex: isExpanded ? undefined : 1,
       alignSelf: isExpanded ? 'stretch' : 'auto',
       minWidth: 0,
-      flexDirection: 'row',
+      width: isExpanded ? '100%' : undefined,
+    }),
+    [isExpanded]
+  )
+
+  const checkboxItemStyle: ViewStyle = useMemo(
+    () => ({
+      // CheckboxItem hard-codes width: '100%'; clear it in the Idle row so the
+      // Read more button can sit beside a flex-growing item.
+      width: isExpanded ? '100%' : undefined,
       alignItems: isExpanded ? 'flex-start' : 'center',
-      gap: rowGap,
     }),
-    [isExpanded, rowGap]
+    [isExpanded]
   )
 
-  const resolvedLabelStyle: TextStyle = useMemo(
+  const slotRowStyle: ViewStyle = useMemo(
     () => ({
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: isExpanded ? 'flex-start' : 'center',
+      gap: isExpanded ? OPEN_SLOT_GAP : IDLE_SLOT_GAP,
       flex: 1,
       minWidth: 0,
-      color: labelColor,
-      fontFamily: labelFontFamily,
-      fontSize: labelFontSize,
-      lineHeight: labelLineHeight,
-      fontWeight: labelFontWeight,
-      // Android adds asymmetric font padding and top-aligns the glyph inside
-      // an inflated line box when `lineHeight` is set. That makes the centered
-      // checkbox look like it drops below the text. Disabling the extra
-      // padding + centering the glyph keeps the single-line label optically
-      // aligned with the checkbox. No-op on iOS / web.
-      includeFontPadding: false,
-      textAlignVertical: isExpanded ? 'top' : 'center',
     }),
-    [
-      labelColor,
-      labelFontFamily,
-      labelFontSize,
-      labelLineHeight,
-      labelFontWeight,
-      isExpanded,
-    ]
+    [isExpanded]
   )
 
   // Layer component modes first (e.g. Color Mode), then button defaults so
@@ -208,31 +243,115 @@ function ExpandableCheckbox({
   )
 
   const a11yLabel =
-    accessibilityLabel ?? (typeof label === 'string' ? label : undefined)
-  const buttonLabel = isExpanded ? readLessLabel : readMoreLabel
+    accessibilityLabel ??
+    (typeof label === 'string' && label.length > 0
+      ? linkLabel
+        ? `${label} ${linkLabel}`
+        : label
+      : linkLabel)
 
-  const labelNumberOfLinesProps =
+  const buttonLabel = isExpanded ? readLessLabel : readMoreLabel
+  const shouldTruncate =
     !disableTruncation && !isExpanded && collapsedLines > 0
-      ? { numberOfLines: collapsedLines, ellipsizeMode: 'tail' as const }
-      : null
+
+  const hasChildren = children != null && children !== false
+
+  const composedLabel = hasChildren ? (
+    cloneChildrenWithModes(children, modes)
+  ) : (
+    <View style={slotRowStyle}>
+      {label ? (
+        <Text
+          text={label}
+          modes={modes}
+          textAlign="Left"
+          style={labelStyle}
+          {...(shouldTruncate
+            ? { numberOfLines: collapsedLines }
+            : { disableTruncation: true })}
+        />
+      ) : null}
+      {linkLabel ? (
+        // Capture the touch so the parent CheckboxItem Pressable does not also
+        // toggle the checkbox when the Terms link is activated.
+        <View onStartShouldSetResponder={() => true}>
+          <Link
+            text={linkLabel}
+            onPress={handleLinkPress}
+            disabled={disabled}
+            modes={modes}
+            textAlign="Left"
+            // Idle: Fill (Figma). Open: Hug (Figma).
+            autolayout={isExpanded || !label ? 'Hug' : 'Fill'}
+          />
+        </View>
+      ) : null}
+    </View>
+  )
+
+  const labelSlot = isExpanded ? (
+    <ScrollArea
+      direction="vertical"
+      modes={modes}
+      showScrollIndicator={false}
+      paddingLeft={scrollPaddingLeft}
+      paddingTop={scrollPaddingTop}
+      paddingRight={scrollPaddingRight}
+      paddingBottom={scrollPaddingBottom}
+      style={{ maxHeight, width: '100%', flexGrow: 1, flexShrink: 1 }}
+      contentContainerStyle={{
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'flex-start',
+        gap: OPEN_SLOT_GAP,
+      }}
+    >
+      {hasChildren ? (
+        composedLabel
+      ) : (
+        <>
+          {label ? (
+            <Text
+              text={label}
+              modes={modes}
+              textAlign="Left"
+              style={labelStyle}
+              disableTruncation
+            />
+          ) : null}
+          {linkLabel ? (
+            <View onStartShouldSetResponder={() => true}>
+              <Link
+                text={linkLabel}
+                onPress={handleLinkPress}
+                disabled={disabled}
+                modes={modes}
+                textAlign="Left"
+                autolayout="Hug"
+              />
+            </View>
+          ) : null}
+        </>
+      )}
+    </ScrollArea>
+  ) : (
+    composedLabel
+  )
 
   return (
     <View style={[containerStyle, style]}>
-      <View style={rowStyle}>
-        <Checkbox
+      <View style={itemWrapperStyle}>
+        <CheckboxItem
           checked={isChecked}
           disabled={disabled}
           onValueChange={handleToggleChecked}
           modes={modes}
+          control="leading"
+          style={checkboxItemStyle}
           {...(a11yLabel !== undefined ? { accessibilityLabel: a11yLabel } : {})}
-        />
-        <Text
-          style={[resolvedLabelStyle, labelStyle]}
-          selectable={false}
-          {...(labelNumberOfLinesProps ?? {})}
         >
-          {label}
-        </Text>
+          {labelSlot}
+        </CheckboxItem>
       </View>
       <Button
         label={buttonLabel}

package/src/components/HelloJioInput/HelloJioInput.tsx

@@ -28,7 +28,8 @@ import IconButton from '../IconButton/IconButton'
 import type { Modes } from '../../design-tokens'
 
 const IS_WEB = Platform.OS === 'web'
-const STATE_COLLECTION = 'HelloJioInput State'
+/** Figma collection name — must match `figma-modes.generated.ts` exactly. */
+const STATE_COLLECTION = 'Hello Jio Input State'
 
 /** Default IconButton modes matching the Figma send control. */
 const DEFAULT_SEND_BUTTON_MODES = Object.freeze({
@@ -36,6 +37,14 @@ const DEFAULT_SEND_BUTTON_MODES = Object.freeze({
   'Button / Size': 'S',
 }) as Modes
 
+/**
+ * Figma `Hello Jio Input State` only exposes Idle | Active. The component-set
+ * variant IdleJioPlus is glass chrome on top of Idle tokens — never a mode
+ * value for this collection.
+ */
+type TokenState = 'Idle' | 'Active'
+type VisualState = TokenState | 'IdleJioPlus'
+
 const toNumber = (value: unknown, fallback: number): number => {
   if (typeof value === 'number') {
     return Number.isFinite(value) ? value : fallback
@@ -56,7 +65,27 @@ const toFontWeight = (
   return fallback
 }
 
-type VisualState = 'Idle' | 'Active' | 'IdleJioPlus'
+/** True when a CSS/RN color string already carries a non-opaque alpha channel. */
+const hasAlphaChannel = (color: string): boolean => {
+  const trimmed = color.trim()
+  if (/^#[0-9a-fA-F]{8}$/.test(trimmed)) {
+    const alpha = parseInt(trimmed.slice(7, 9), 16)
+    return alpha < 255
+  }
+  if (/^#[0-9a-fA-F]{4}$/.test(trimmed)) {
+    const alphaNibble = parseInt(trimmed.slice(3, 4), 16)
+    return alphaNibble < 15
+  }
+  const func = trimmed.match(/^(rgba|hsla)\(/i)
+  if (func) {
+    const parts = trimmed.slice(trimmed.indexOf('(') + 1, -1).split(',')
+    if (parts.length === 4) {
+      const alpha = Number(parts[3].trim())
+      return Number.isFinite(alpha) && alpha < 1
+    }
+  }
+  return false
+}
 
 /**
  * Fallback values from the Figma `HelloJioInput` component when local token
@@ -85,14 +114,11 @@ const STATE_FALLBACKS: Record<
     iconColor: '#24262b',
   },
   IdleJioPlus: {
-    // Glass fill. In Figma the IdleJioPlus surface resolves
-    // `helloJioInput/background` under the `Page type = JioPlus` variable mode,
-    // which yields a TRANSLUCENT light fill (not the opaque `#f5f5f5` the
-    // MainPage mode gives). Painted over the backdrop blur, an opaque value
-    // would read as a solid bar and hide the blur entirely — so, matching the
-    // translucent glass fallbacks the sibling GlassFill consumers use
-    // (FavoriteToggle `#ffffff33`, NumberPagination `rgba(141,141,141,0.4)`),
-    // this fallback carries alpha so the frost tints the blurred content.
+    // Frosted IdleJioPlus fill. Figma paints `helloJioInput/background` over
+    // `glass/minimal` blur; the synced token is often opaque `#f5f5f5`, which
+    // would hide the blur. Match sibling GlassFill consumers (FavoriteToggle
+    // `#ffffff33`, NumberPagination `rgba(141,141,141,0.4)`) with alpha so the
+    // frost tints the blurred content.
     background: '#f5f5f566',
     borderColor: '#f5f5f5',
     labelColor: '#545961',
@@ -173,6 +199,8 @@ interface HelloJioInputTokens {
   iconSize: number
   blurIntensity: number
   useGlass: boolean
+  /** Tint laid over GlassFill; translucent so the frost remains visible. */
+  glassOverlay: string
 }
 
 function resolveHelloJioInputTokens(
@@ -247,6 +275,15 @@ function resolveHelloJioInputTokens(
   const blurIntensity = Math.max(0, Math.min(100, Math.round(blurMinimal)))
   const useGlass = visualState === 'IdleJioPlus'
 
+  // Figma IdleJioPlus paints `helloJioInput/background` over `glass/minimal`
+  // blur. The exported token is often opaque `#f5f5f5` (alpha lost in sync),
+  // which would fully hide the blur — keep a translucent frost when needed.
+  const glassOverlay = useGlass
+    ? hasAlphaChannel(background)
+      ? background
+      : STATE_FALLBACKS.IdleJioPlus.background
+    : background
+
   return {
     containerStyle: {
       position: 'relative',
@@ -291,6 +328,7 @@ function resolveHelloJioInputTokens(
     iconSize,
     blurIntensity,
     useGlass,
+    glassOverlay,
   }
 }
 
@@ -341,21 +379,28 @@ const HelloJioInput = forwardRef<RNTextInput, HelloJioInputProps>(
     const isControlled = value !== undefined
     const currentValue = isControlled ? value : uncontrolledValue
 
+    // Component-set visual vs token mode:
+    //  - Idle / Active map 1:1 onto `Hello Jio Input State`
+    //  - IdleJioPlus is Figma chrome (glass) on Idle tokens — never pass
+    //    "IdleJioPlus" into the state collection (that mode does not exist)
     const visualState: VisualState = isFocused
       ? 'Active'
       : jioPlus
         ? 'IdleJioPlus'
         : 'Idle'
+    const tokenState: TokenState = isFocused ? 'Active' : 'Idle'
 
     const modes = useMemo(
       () => ({
         ...globalModes,
         ...propModes,
-        [STATE_COLLECTION]: visualState,
+        [STATE_COLLECTION]: tokenState,
       }),
-      [globalModes, propModes, visualState]
+      [globalModes, propModes, tokenState]
     )
 
+    // Defaults first; caller/`modes` may still override Size/Appearance.
+    // Custom chrome that must ignore parent modes belongs in `trailing`.
     const sendButtonModes = useMemo(
       () => ({ ...DEFAULT_SEND_BUTTON_MODES, ...modes }),
       [modes]
@@ -449,17 +494,13 @@ const HelloJioInput = forwardRef<RNTextInput, HelloJioInputProps>(
       style,
     ]
 
-    const glassOverlay =
-      (getVariableByName('helloJioInput/background', modes) as string | null) ??
-      STATE_FALLBACKS.IdleJioPlus.background
-
     const inner = (
       <>
         {tokens.useGlass ? (
           <GlassFill
             tint="light"
             intensity={tokens.blurIntensity}
-            overlayColor={glassOverlay}
+            overlayColor={tokens.glassOverlay}
             androidTintWash={false}
           />
         ) : null}

package/src/components/IconCapsule/IconCapsule.tsx

@@ -67,7 +67,7 @@ function resolveIconCapsuleTokens(modes: Modes): IconCapsuleTokens {
  * @param {Object} props - Component props
  * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
  * @param {UnifiedSource} [props.source] - Fallback source (remote URI, inline SVG XML, `require()` asset, SVG React component, or React element). Used when `iconName` is missing or unknown. Tinted with the mode-resolved icon color so it follows design tokens just like a built-in icon.
- * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Appearance": "Primary"})
+ * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"AppearanceBrand": "Primary"})
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers
  * @param {string} [props.accessibilityRole] - Accessibility role (defaults to "image" for decorative icons)
  *

package/src/components/MetricData/MetricData.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import {
   View,
   Text,
@@ -7,12 +7,11 @@ import {
   type TextStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import Icon from '../Icon/Icon'
 import type { Modes } from '../../design-tokens'
 
 const LINE_HEIGHT_RATIO = 1.2
-const ICON_SIZE = 18
 // Figma renders the value-row icon with no surrounding padding; the shared Icon
 // component pulls padding from `icon/padding/*` tokens, so we zero it here.
 const ICON_PADDING_RESET: ViewStyle = {
@@ -34,8 +33,9 @@ export type MetricDataProps = {
   caption?: string
   /**
    * Optional glyph shown to the left of the value. Pass a registry icon name
-   * (e.g. `'ic_card'`) or a custom node. Rendered at 18px, tinted to the value
-   * colour. Hidden when omitted.
+   * (e.g. `'ic_card'`) or a custom node. Size/colour resolve from `icon/size`
+   * and `icon/color` (Figma seeds `AppearanceBrand: Secondary` → purple).
+   * Opt-in — omitted keeps existing no-icon instances unchanged.
    */
   icon?: string | React.ReactNode
   /** Design-token modes for theming. */
@@ -59,9 +59,10 @@ export type MetricDataProps = {
  * MetricData — a compact, centered metric block.
  *
  * Stacks a small `title`, a prominent `value` (with an optional leading
- * `icon`), and a muted `caption`. Typography, colours, gaps and padding all
- * resolve from the `metricdata/*` design tokens. `title`, `caption` and `icon`
- * are optional; only `value` is shown by default.
+ * `icon` in a `value wrap` row), and a muted `caption`. Typography, colours,
+ * gaps and padding resolve from the `metricdata/*` design tokens; the leading
+ * glyph uses `icon/*`. `title`, `caption` and `icon` are optional — omit
+ * `icon` to keep the legacy text-only layout.
  *
  * @example
  * ```tsx
@@ -81,10 +82,17 @@ function MetricData({
   captionStyle,
   accessibilityLabel,
 }: MetricDataProps) {
+  // Figma's Metricdata instance seeds Secondary on the nested Icon so the
+  // default glyph is brand purple (`#5d00b5`). Caller `modes` still win.
+  const iconModes = useMemo<Modes>(
+    () => ({ AppearanceBrand: 'Secondary', ...modes }),
+    [modes]
+  )
+
   const titleColor = (getVariableByName('metricdata/title/color', modes) as string | null) ?? '#000000'
   const titleFontFamily = (getVariableByName('metricdata/title/fontfamily', modes) as string | null) ?? 'JioType Var'
   const titleFontSize = (getVariableByName('metricdata/title/fontsize', modes) as number | null) ?? 12
-  const titleFontWeight = String(getVariableByName('metricdata/title/fontweight', modes) ?? 400) as TextStyle['fontWeight']
+  const titleFontWeight = String(getVariableByName('metricdata/title/fontweight', modes) ?? 500) as TextStyle['fontWeight']
 
   const valueColor = (getVariableByName('metricdata/value/color', modes) as string | null) ?? '#000000'
   const valueFontFamily = (getVariableByName('metricdata/value/fontfamily', modes) as string | null) ?? 'JioType Var'
@@ -94,13 +102,18 @@ function MetricData({
   const captionColor = (getVariableByName('metricdata/caption/color', modes) as string | null) ?? '#777777'
   const captionFontFamily = (getVariableByName('metricdata/caption/fontfamily', modes) as string | null) ?? 'JioType Var'
   const captionFontSize = (getVariableByName('metricdata/caption/fontsize', modes) as number | null) ?? 12
-  const captionFontWeight = String(getVariableByName('metricdata/caption/fontweight', modes) ?? 500) as TextStyle['fontWeight']
+  const captionFontWeight = String(getVariableByName('metricdata/caption/fontweight', modes) ?? 400) as TextStyle['fontWeight']
 
   const gap = (getVariableByName('metricdata/gap', modes) as number | null) ?? 4
   const valueWrapGap = (getVariableByName('metricdata/valueWrap/gap', modes) as number | null) ?? 4
   const paddingHorizontal = (getVariableByName('metricdata/padding/horizontal', modes) as number | null) ?? 10
   const paddingVertical = (getVariableByName('metricdata/padding/vertical', modes) as number | null) ?? 10
 
+  // Resolve via getVariableByName so extract-tokens picks up the new bindings;
+  // Icon reads the same tokens when color/size props are omitted.
+  const iconColor = (getVariableByName('icon/color', iconModes) as string | null) ?? '#5d00b5'
+  const iconSize = (getVariableByName('icon/size', iconModes) as number | null) ?? 18
+
   const containerStyle: ViewStyle = {
     flexDirection: 'column',
     alignItems: 'center',
@@ -141,15 +154,17 @@ function MetricData({
     icon == null ? null : typeof icon === 'string' ? (
       <Icon
         iconName={icon}
-        size={ICON_SIZE}
-        color={valueColor}
-        modes={modes}
+        size={iconSize}
+        color={iconColor}
+        modes={iconModes}
         style={ICON_PADDING_RESET}
       />
     ) : (
-      icon
+      cloneChildrenWithModes(icon, iconModes)
     )
 
+  const showValueWrap = iconNode != null || value !== undefined
+
   const resolvedLabel =
     accessibilityLabel ??
     ([title, typeof value === 'string' ? value : undefined, caption]
@@ -166,14 +181,16 @@ function MetricData({
         <Text style={[titleTextStyle, titleStyle]}>{title}</Text>
       ) : null}
 
-      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: valueWrapGap }}>
-        {iconNode}
-        {typeof value === 'string' ? (
-          <Text style={[valueTextStyle, valueStyle]}>{value}</Text>
-        ) : (
-          value
-        )}
-      </View>
+      {showValueWrap ? (
+        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: valueWrapGap }}>
+          {iconNode}
+          {typeof value === 'string' ? (
+            <Text style={[valueTextStyle, valueStyle]}>{value}</Text>
+          ) : (
+            value
+          )}
+        </View>
+      ) : null}
 
       {caption !== undefined && caption !== '' ? (
         <Text style={[captionTextStyle, captionStyle]}>{caption}</Text>

package/src/components/MoneyValue/MoneyValue.tsx

@@ -245,7 +245,7 @@ function MoneyValue({
   }, [focused, cursorOpacity])
 
   // Keyboard avoidance — lift the component when the keyboard would cover it.
-  // Follows the same pattern as ActionFooter (uses Keyboard.addListener).
+  // Uses Keyboard.addListener + measureInWindow overlap math (field-local).
   // Resets when editing ends or the keyboard hides.
   const rootRef = useRef<View>(null)
   const keyboardLift = useRef(new Animated.Value(0)).current

package/src/components/Nudge/Nudge.tsx

@@ -64,7 +64,7 @@ function toFontWeight(value: unknown, fallback: TextStyle['fontWeight']): TextSt
 
 function resolveNudgeTokens(modes: Modes): NudgeTokens {
   const background = getVariableByName('nudge/background', modes)
-  const radius = getVariableByName('nudge/radius', modes)
+  const radius = getVariableByName('nudge/borderRadius', modes)
   const paddingH = getVariableByName('nudge/padding/horizontal', modes)
   const paddingV = getVariableByName('nudge/padding/vertical', modes)
   const gap = getVariableByName('nudge/gap', modes)