jfs-components 0.1.51 → 0.1.54

package/src/components/PdpCcCard/PdpCcCard.tsx

@@ -1,11 +1,9 @@
 import React, { useMemo } from 'react'
 import {
     View,
-    Text,
     Pressable,
     StyleSheet,
     type ViewStyle,
-    type TextStyle,
     type StyleProp,
     type ImageSourcePropType,
 } from 'react-native'
@@ -16,19 +14,29 @@ import Divider from '../Divider/Divider'
 import Button from '../Button/Button'
 import Image from '../Image/Image'
 import Icon from '../Icon/Icon'
+import MetricData from '../MetricData/MetricData'
 import type { Modes } from '../../design-tokens'
 
 /**
  * A single metric column inside the card's stats row: a small title, a bold
- * value and an optional muted caption.
+ * value (optionally preceded by an icon) and an optional muted caption.
  */
 export interface PdpCcCardMetric {
     /** Small label rendered above the value (e.g. `"Weight"`). */
     title?: string
-    /** The prominent value (e.g. `"24K"`). */
-    value?: string
+    /**
+     * The prominent value (e.g. `"24K"`). Accepts a string or any node
+     * (e.g. a `MoneyValue`) for richer composition.
+     */
+    value?: string | React.ReactNode
     /** Optional muted caption rendered below the value. */
     caption?: string
+    /**
+     * Optional glyph shown to the left of the value. Pass a registry icon name
+     * (e.g. `'ic_card'`) or a custom node. Opt-in — omit to keep the legacy
+     * text-only metric column.
+     */
+    icon?: string | React.ReactNode
 }
 
 export interface PdpCcCardProps {
@@ -77,7 +85,7 @@ export interface PdpCcCardProps {
     /**
      * The metric columns rendered in the stats row. Vertical dividers are
      * inserted automatically between adjacent metrics. Defaults to two sample
-     * metrics.
+     * metrics (with leading icons) matching the Figma default.
      */
     metrics?: PdpCcCardMetric[]
     /** CTA button label. Defaults to `"button"`. */
@@ -115,8 +123,9 @@ export interface PdpCcCardProps {
  *    `imageSource` for the default image or `media` for a full slot override.
  *  - **Title** — a centered headline + subtitle rendered through the shared
  *    {@link Title} component (`title/*`, `pageSubtitle/*` tokens).
- *  - **Metrics** — a row of {@link PdpCcCardMetric} columns (title / value /
- *    caption) separated by vertical `Divider`s (`metricdata/*` tokens).
+ *  - **Metrics** — a row of {@link PdpCcCardMetric} columns composed via
+ *    {@link MetricData} (title / optional icon + value / caption) separated by
+ *    vertical `Divider`s (`metricdata/*`, `icon/*` tokens).
  *  - **CTA** — a small tonal {@link Button} (`Button / Size: S`,
  *    `AppearanceBrand: Secondary`, `Emphasis: Medium`) with a leading icon.
  *
@@ -179,12 +188,14 @@ function PdpCcCard({
         <Button
             label={buttonLabel}
             modes={ctaModes}
-            onPress={onButtonPress}
-            leading={
-                buttonIcon ? (
-                    <Icon iconName={buttonIcon} size={tokens.buttonIconSize} color={buttonForeground} />
-                ) : undefined
-            }
+            {...(onButtonPress !== undefined ? { onPress: onButtonPress } : null)}
+            {...(buttonIcon
+                ? {
+                      leading: (
+                          <Icon iconName={buttonIcon} size={tokens.buttonIconSize} color={buttonForeground} />
+                      ),
+                  }
+                : null)}
         />
     )
 
@@ -197,9 +208,9 @@ function PdpCcCard({
                 subtitle={subtitle}
                 textAlign="Center"
                 modes={modes}
-                numberOfLines={numberOfLines}
-                disableTruncation={disableTruncation}
-                singleLine={singleLine}
+                {...(numberOfLines !== undefined ? { numberOfLines } : null)}
+                {...(disableTruncation !== undefined ? { disableTruncation } : null)}
+                {...(singleLine !== undefined ? { singleLine } : null)}
             />
 
             {metrics.length > 0 ? (
@@ -209,7 +220,14 @@ function PdpCcCard({
                             {index > 0 ? (
                                 <Divider direction="vertical" modes={modes} style={styles.metricDivider} />
                             ) : null}
-                            <Metricdata metric={metric} tokens={tokens} />
+                            <MetricData
+                                {...(metric.title !== undefined ? { title: metric.title } : null)}
+                                {...(metric.value !== undefined ? { value: metric.value } : null)}
+                                {...(metric.caption !== undefined ? { caption: metric.caption } : null)}
+                                {...(metric.icon !== undefined ? { icon: metric.icon } : null)}
+                                modes={modes}
+                                style={styles.metricCell}
+                            />
                         </React.Fragment>
                     ))}
                 </View>
@@ -244,20 +262,6 @@ function PdpCcCard({
     )
 }
 
-// ---------------------------------------------------------------------------
-// Metricdata — internal metric column (Figma node 5352:256)
-// ---------------------------------------------------------------------------
-
-function Metricdata({ metric, tokens }: { metric: PdpCcCardMetric; tokens: ResolvedTokens }) {
-    return (
-        <View style={tokens.metric}>
-            {metric.title != null ? <Text style={tokens.metricTitle}>{metric.title}</Text> : null}
-            {metric.value != null ? <Text style={tokens.metricValue}>{metric.value}</Text> : null}
-            {metric.caption != null ? <Text style={tokens.metricCaption}>{metric.caption}</Text> : null}
-        </View>
-    )
-}
-
 // ---------------------------------------------------------------------------
 // Tokens / static styles
 // ---------------------------------------------------------------------------
@@ -266,10 +270,6 @@ interface ResolvedTokens {
     container: ViewStyle
     imageRadius: number
     buttonIconSize: number
-    metric: ViewStyle
-    metricTitle: TextStyle
-    metricValue: TextStyle
-    metricCaption: TextStyle
 }
 
 function asNum(raw: unknown, fallback: number): number {
@@ -294,25 +294,6 @@ function resolveTokens(modes: Modes): ResolvedTokens {
     const imageRadius = asNum(getVariableByName('image/radius', modes), 8)
     const buttonIconSize = asNum(getVariableByName('button/iconSize', modes), 16)
 
-    const metricGap = asNum(getVariableByName('metricdata/gap', modes), 4)
-    const metricPadH = asNum(getVariableByName('metricdata/padding/horizontal', modes), 10)
-    const metricPadV = asNum(getVariableByName('metricdata/padding/vertical', modes), 10)
-
-    const titleColor = asStr(getVariableByName('metricdata/title/color', modes), '#000000')
-    const titleSize = asNum(getVariableByName('metricdata/title/fontsize', modes), 12)
-    const titleFamily = asStr(getVariableByName('metricdata/title/fontfamily', modes), 'JioType Var')
-    const titleWeight = asStr(getVariableByName('metricdata/title/fontweight', modes), '400')
-
-    const valueColor = asStr(getVariableByName('metricdata/value/color', modes), '#000000')
-    const valueSize = asNum(getVariableByName('metricdata/value/fontsize', modes), 20)
-    const valueFamily = asStr(getVariableByName('metricdata/value/fontfamily', modes), 'JioType Var')
-    const valueWeight = asStr(getVariableByName('metricdata/value/fontweight', modes), '700')
-
-    const captionColor = asStr(getVariableByName('metricdata/caption/color', modes), '#777777')
-    const captionSize = asNum(getVariableByName('metricdata/caption/fontsize', modes), 12)
-    const captionFamily = asStr(getVariableByName('metricdata/caption/fontfamily', modes), 'JioType Var')
-    const captionWeight = asStr(getVariableByName('metricdata/caption/fontweight', modes), '500')
-
     return {
         container: {
             backgroundColor: background,
@@ -325,47 +306,12 @@ function resolveTokens(modes: Modes): ResolvedTokens {
         },
         imageRadius,
         buttonIconSize,
-        metric: {
-            flex: 1,
-            gap: metricGap,
-            paddingHorizontal: metricPadH,
-            paddingVertical: metricPadV,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        metricTitle: {
-            color: titleColor,
-            fontSize: titleSize,
-            fontFamily: titleFamily,
-            fontWeight: titleWeight as TextStyle['fontWeight'],
-            lineHeight: Math.round(titleSize * 1.2),
-            textAlign: 'center',
-            includeFontPadding: false as any,
-        },
-        metricValue: {
-            color: valueColor,
-            fontSize: valueSize,
-            fontFamily: valueFamily,
-            fontWeight: valueWeight as TextStyle['fontWeight'],
-            lineHeight: Math.round(valueSize * 1.2),
-            textAlign: 'center',
-            includeFontPadding: false as any,
-        },
-        metricCaption: {
-            color: captionColor,
-            fontSize: captionSize,
-            fontFamily: captionFamily,
-            fontWeight: captionWeight as TextStyle['fontWeight'],
-            lineHeight: Math.round(captionSize * 1.2),
-            textAlign: 'center',
-            includeFontPadding: false as any,
-        },
     }
 }
 
 const DEFAULT_METRICS: PdpCcCardMetric[] = [
-    { title: 'Title', value: 'Value', caption: 'caption' },
-    { title: 'Title', value: 'Value', caption: 'caption' },
+    { title: 'Title', value: 'Value', caption: 'caption', icon: 'ic_card' },
+    { title: 'Title', value: 'Value', caption: 'caption', icon: 'ic_card' },
 ]
 
 const styles = StyleSheet.create({
@@ -379,6 +325,9 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'stretch',
     },
+    metricCell: {
+        flex: 1,
+    },
     metricDivider: {
         alignSelf: 'center',
         height: '70%',

package/src/components/PlanComparisonCard/PlanComparisonCard.tsx

@@ -73,6 +73,12 @@ export type PlanComparisonCardProps = {
     columns?: PlanComparisonColumn[];
     /** Feature rows compared across the plan columns. */
     rows?: PlanComparisonRow[];
+    /**
+     * Slot that replaces the default comparison table (Figma `Slot`). When
+     * omitted, the table is built from `columns` + `rows`. Header still
+     * renders from `columns`. `modes` are cascaded into slot children.
+     */
+    children?: React.ReactNode;
     /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
     modes?: Modes;
     /** Override the outer container style. */
@@ -88,6 +94,7 @@ const DEFAULT_ROWS: PlanComparisonRow[] = [
     { label: 'JioPoints multiplier', values: ['1x', '1.25x'] },
     { label: 'Cashback', showInfo: true, values: [false, 'Upto ₹5000'] },
     { label: 'Bonus JioGold', showInfo: true, values: [false, '1%'] },
+    { label: 'Bonus JioSilver', showInfo: true, values: [false, '1%'] },
 ];
 
 /** Keeps every text layer on a single line. */
@@ -112,13 +119,15 @@ const planColumnStyle: ViewStyle = {
  * current plan against one or more alternative plans across a set of feature
  * rows. Implementation of Figma node `4498:2968` (`PlanComparisonCard`).
  *
- * Columns use a 1.8fr / 1fr flex ratio (label vs plan), matching the Figma grid.
+ * Structure: header (from `columns`) + Slot (default table from `rows`, or
+ * custom `children`). Columns use a 1.8fr / 1fr flex ratio (label vs plan).
  *
  * @component
  */
 function PlanComparisonCard({
     columns = DEFAULT_COLUMNS,
     rows = DEFAULT_ROWS,
+    children,
     modes = EMPTY_MODES,
     style,
 }: PlanComparisonCardProps) {
@@ -234,6 +243,65 @@ function PlanComparisonCard({
         return cloneChildrenWithModes(value, modes);
     };
 
+    const defaultTable = (
+        <View
+            style={{
+                width: '100%',
+                backgroundColor: tableBackground,
+                borderWidth: tableBorderSize,
+                borderColor: tableBorderColor,
+                borderRadius: tableRadius,
+                overflow: 'hidden',
+            }}
+        >
+            {rows.map((row, rowIndex) => {
+                const isLast = rowIndex === rows.length - 1;
+                const showInfo = row.showInfo || row.onInfoPress != null;
+                return (
+                    <View
+                        key={row.key ?? `${row.label}-${rowIndex}`}
+                        style={[
+                            rowStyle,
+                            {
+                                borderBottomWidth: isLast ? 0 : cellBorderSize,
+                                borderBottomColor: cellBorderColor,
+                            },
+                        ]}
+                    >
+                        <View style={[labelColumnStyle, labelCellStyle]}>
+                            <Text style={labelTextStyle}>{row.label}</Text>
+                            {showInfo &&
+                                (row.onInfoPress ? (
+                                    <Pressable
+                                        onPress={row.onInfoPress}
+                                        accessibilityRole="button"
+                                        accessibilityLabel={`More information about ${row.label}`}
+                                        hitSlop={8}
+                                    >
+                                        <Icon name="ic_info" size={iconSize} color={iconColor} />
+                                    </Pressable>
+                                ) : (
+                                    <Icon name="ic_info" size={iconSize} color={iconColor} />
+                                ))}
+                        </View>
+
+                        {columns.map((column, colIndex) => (
+                            <View
+                                key={column.label ?? colIndex}
+                                style={[planColumnStyle, valueCellStyle]}
+                            >
+                                {renderValue(
+                                    row.values?.[colIndex],
+                                    `${rowIndex}-${colIndex}`,
+                                )}
+                            </View>
+                        ))}
+                    </View>
+                );
+            })}
+        </View>
+    );
+
     return (
         <View style={[{ gap, width: '100%' }, style]}>
             {/* Header row — same 1.8fr / 1fr grid as the table */}
@@ -253,63 +321,10 @@ function PlanComparisonCard({
                 ))}
             </View>
 
-            {/* Table body */}
-            <View
-                style={{
-                    width: '100%',
-                    backgroundColor: tableBackground,
-                    borderWidth: tableBorderSize,
-                    borderColor: tableBorderColor,
-                    borderRadius: tableRadius,
-                    overflow: 'hidden',
-                }}
-            >
-                {rows.map((row, rowIndex) => {
-                    const isLast = rowIndex === rows.length - 1;
-                    const showInfo = row.showInfo || row.onInfoPress != null;
-                    return (
-                        <View
-                            key={row.key ?? `${row.label}-${rowIndex}`}
-                            style={[
-                                rowStyle,
-                                {
-                                    borderBottomWidth: isLast ? 0 : cellBorderSize,
-                                    borderBottomColor: cellBorderColor,
-                                },
-                            ]}
-                        >
-                            <View style={[labelColumnStyle, labelCellStyle]}>
-                                <Text style={labelTextStyle}>{row.label}</Text>
-                                {showInfo &&
-                                    (row.onInfoPress ? (
-                                        <Pressable
-                                            onPress={row.onInfoPress}
-                                            accessibilityRole="button"
-                                            accessibilityLabel={`More information about ${row.label}`}
-                                            hitSlop={8}
-                                        >
-                                            <Icon name="ic_info" size={iconSize} color={iconColor} />
-                                        </Pressable>
-                                    ) : (
-                                        <Icon name="ic_info" size={iconSize} color={iconColor} />
-                                    ))}
-                            </View>
-
-                            {columns.map((column, colIndex) => (
-                                <View
-                                    key={column.label ?? colIndex}
-                                    style={[planColumnStyle, valueCellStyle]}
-                                >
-                                    {renderValue(
-                                        row.values?.[colIndex],
-                                        `${rowIndex}-${colIndex}`,
-                                    )}
-                                </View>
-                            ))}
-                        </View>
-                    );
-                })}
-            </View>
+            {/* Figma Slot — custom children replace the default table */}
+            {children != null
+                ? cloneChildrenWithModes(children, modes)
+                : defaultTable}
         </View>
     );
 }

package/src/components/PortfolioHero/PortfolioHero.tsx

@@ -34,7 +34,7 @@ function PortfolioHero({
   imageSource,
   value = '12,000.11',
   currency = '₹',
-  modes = { Context3: 'Balance' },
+  modes = { Context3: 'Balance & Cards' },
   children,
   style,
 }: PortfolioHeroProps) {

package/src/components/Slider/Slider.tsx

@@ -547,9 +547,9 @@ function resolveTokens(modes: Modes): ResolvedTokens {
     const tooltipBackground = asStr(getVariableByName('tooltip/background', modes), '#0f0d0a')
     const tooltipPaddingH = asNum(getVariableByName('tooltip/padding/horizontal', modes), 12)
     const tooltipPaddingV = asNum(getVariableByName('tooltip/padding/vertical', modes), 8)
-    // Not yet in Coin Variables export (Figma still binds bare local radius/maxWidth).
-    const tooltipRadius = asNum(getVariableByName('tooltip/radius', modes), 8)
-    const tooltipMaxWidth = asNum(getVariableByName('tooltip/maxWidth', modes), 280)
+    // Figma Tooltip binds bare local `radius` / `maxWidth` (not tooltip/*).
+    const tooltipRadius = Number(getVariableByName('radius', modes))
+    const tooltipMaxWidth = Number(getVariableByName('maxWidth', modes))
     const tipWidth = asNum(getVariableByName('tooltip/tipItem/width', modes), 16)
     const tipHeight = asNum(getVariableByName('tooltip/tipItem/height', modes), 8)
 

package/src/components/TextInput/TextInput.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useRef, useState } from 'react'
-import { Platform, Pressable, View, TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextInputProps as RNTextInputProps, type TextStyle } from 'react-native'
+import { Platform, Pressable, StyleSheet, View, TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextInputProps as RNTextInputProps, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
 import { EMPTY_MODES, cloneChildrenWithModes, mergeRefs } from '../../utils/react-utils'
@@ -178,28 +178,45 @@ const TextInputBase = forwardRef<RNTextInput, TextInputProps>(function TextInput
   const hoverStyle: ViewStyle = isHovered ? { opacity: 0.95 } : {}
   const focusContainerStyle: ViewStyle = isFocused ? { borderColor: '#222', borderWidth: 1 } : {}
 
+  // ⚠️ DO NOT change to an unconditional `lineHeight`, and do NOT put
+  // `minHeight: lineHeight` on this single-line input on iOS. Same contract as
+  // FormField / SuggestiveSearch — read before "simplifying".
+  //
+  // facebook/react-native#39145 / #28012: on iOS, a single-line RN TextInput
+  // (UITextField) with `lineHeight` > font metrics puts ALL the extra space
+  // ABOVE the glyphs, so placeholder/value sink. Android/Web distribute evenly.
+  // RN's documented workaround (#39145) and #56774: omit `lineHeight` on
+  // single-line iOS inputs — UITextField centers natively — and let the
+  // wrapper (`alignItems: 'center'` + padding/icon) own vertical layout.
+  // Pinning `lineHeight` to `fontSize` is NOT a substitute; it clips custom
+  // font metrics and floats typed text above center.
   const textInputStyle: TextStyle = {
     flex: 1,
     color: textColor,
     fontSize,
-    // iOS-only quirk: a single-line RNTextInput with an explicit `lineHeight`
-    // larger than `fontSize` puts all the extra space ABOVE the glyphs, so the
-    // text/placeholder sits below center (iOS native font-metrics bug — see
-    // facebook/react-native#39145 / #28012). The container centers via
-    // `alignItems: 'center'` + `minHeight`, so omit lineHeight on iOS
-    // (UITextField centers natively) and keep it on Android/Web where it's fine.
     ...(Platform.OS === 'ios' ? null : { lineHeight }),
     fontFamily,
     fontWeight,
     padding: 0,
     margin: 0,
-    minHeight: lineHeight,
     // Remove focus outline for React Native Web
     outlineStyle: 'none' as any,
     outlineWidth: 0,
     outlineColor: 'transparent',
   }
 
+  // On iOS, strip any consumer `inputStyle.lineHeight` so it can't re-break
+  // the native centering contract above.
+  const resolvedInputStyle: StyleProp<TextStyle> =
+    Platform.OS === 'ios' && inputStyle != null
+      ? (() => {
+          const flat = StyleSheet.flatten(inputStyle) as TextStyle | undefined
+          if (!flat || flat.lineHeight == null) return inputStyle
+          const { lineHeight: _ignoredLineHeight, ...restStyle } = flat
+          return restStyle
+        })()
+      : inputStyle
+
   // Determine leading element: use provided leading, or default to icon from leadingIconName
   const leadingElement = leading || (
     <Icon name={leadingIconName} size={iconSize} color={iconColor} />
@@ -266,7 +283,7 @@ const TextInputBase = forwardRef<RNTextInput, TextInputProps>(function TextInput
         placeholderTextColor={placeholderColor}
         onFocus={handleFocus}
         onBlur={handleBlur}
-        style={[textInputStyle, inputStyle]}
+        style={[textInputStyle, resolvedInputStyle]}
         {...rest}
       />
       {processedTrailing && (

package/src/components/Tooltip/Tooltip.tsx

@@ -262,14 +262,12 @@ export function TooltipContent({
   const insets = useSafeAreaInsets()
   const { width: windowWidth, height: windowHeight } = Dimensions.get('window')
 
-  // Tokens
+  // Tokens — Figma binds Output/Tooltip `radius` + `maxWidth` (not tooltip/*).
   const bgColor = (getVariableByName('tooltip/background', modes) as string)
   const paddingH = Number(getVariableByName('tooltip/padding/horizontal', modes))
   const paddingV = Number(getVariableByName('tooltip/padding/vertical', modes))
-  // Figma still binds bare local radius/maxWidth; published names are tooltip/*.
-  // Not yet in Coin Variables export — fall back to Figma values (8 / 280).
-  const radius = Number(getVariableByName('tooltip/radius', modes) ?? 8)
-  const maxWidthToken = Number(getVariableByName('tooltip/maxWidth', modes) ?? 280)
+  const radius = Number(getVariableByName('radius', modes))
+  const maxWidthToken = Number(getVariableByName('maxWidth', modes))
   const arrowWidth = Number(getVariableByName('tooltip/tipItem/width', modes))
   const arrowHeight = Number(getVariableByName('tooltip/tipItem/height', modes))
   const labelColor = (getVariableByName('tooltip/label/color', modes) as string)

package/src/components/index.ts

@@ -14,8 +14,15 @@ export { default as BenefitCard, type BenefitCardProps, type BenefitCardItem } f
 export { default as BottomNav } from './BottomNav/BottomNav'
 export { default as BottomNavItem } from './BottomNavItem/BottomNavItem'
 export { default as BrandChip, type BrandChipProps } from './BrandChip/BrandChip'
-export { default as Button, type ButtonProps } from './Button/Button'
-export { default as Card } from './Card/Card'
+export { default as Button, type ButtonProps, type ButtonType } from './Button/Button'
+export {
+  default as Card,
+  type CardProps,
+  type CardTextProps,
+  type CardVariant,
+  type CardVariantInput,
+  CARD_MEDIA_ASPECT_RATIO,
+} from './Card/Card'
 export { default as CardAdvisory, type CardAdvisoryProps } from './CardAdvisory/CardAdvisory'
 export {
   default as CardBankAccount,