jfs-components 0.1.2 → 0.1.8

package/lib/typescript/src/components/index.d.ts

@@ -5,6 +5,7 @@ export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
 export { default as Badge } from './Badge/Badge';
+export { default as BenefitCard, type BenefitCardProps, type BenefitCardItem } from './BenefitCard/BenefitCard';
 export { default as BottomNav } from './BottomNav/BottomNav';
 export { default as BottomNavItem } from './BottomNavItem/BottomNavItem';
 export { default as BrandChip, type BrandChipProps } from './BrandChip/BrandChip';
@@ -20,11 +21,12 @@ export { default as CheckboxGroup, type CheckboxGroupProps } from './CheckboxGro
 export { default as CardFeedback, type CardFeedbackProps } from './CardFeedback/CardFeedback';
 export { default as CardFinancialCondition, type CardFinancialConditionProps } from './CardFinancialCondition/CardFinancialCondition';
 export { default as CardInsight, type CardInsightProps } from './CardInsight/CardInsight';
+export { default as CcCard, type CcCardProps, type CcCardBadge, type CcCardListItem } from './CcCard/CcCard';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
 export { default as Drawer, type DrawerProps, type DrawerHandle } from './Drawer/Drawer';
 export { default as Dropdown, DropdownItem, type DropdownProps, type DropdownItemProps } from './Dropdown/Dropdown';
-export { default as DropdownInput, type DropdownInputProps, type DropdownInputOption, type DropdownInputOptionValue } from './DropdownInput/DropdownInput';
+export { default as DropdownInput, type DropdownInputProps, type DropdownInputHandle, type DropdownInputOption, type DropdownInputOptionValue } from './DropdownInput/DropdownInput';
 export { default as SuggestiveSearch, type SuggestiveSearchProps, type SuggestiveSearchOption, type SuggestiveSearchOptionValue, type SuggestiveSearchItem } from './SuggestiveSearch/SuggestiveSearch';
 export { default as CardCTA, type CardCTAProps, type CardCTAType } from './CardCTA/CardCTA';
 export { default as DebitCard, type DebitCardProps } from './DebitCard/DebitCard';
@@ -38,6 +40,7 @@ export { default as CircularProgressBarDoted, type CircularProgressBarDotedProps
 export { default as CircularRating, type CircularRatingProps } from './CircularRating/CircularRating';
 export { default as CoverageRing, type CoverageRingProps } from './CoverageRing/CoverageRing';
 export { default as CoverageBarComparison, type CoverageBarComparisonProps, type CoverageBarComparisonItem } from './CoverageBarComparison/CoverageBarComparison';
+export { default as ComparisonBar, type ComparisonBarProps, type ComparisonBarItem } from './ComparisonBar/ComparisonBar';
 export { default as AllocationComparisonChart, type AllocationComparisonChartProps, type AllocationSegment } from './AllocationComparisonChart/AllocationComparisonChart';
 export { default as MonthlyStatusGrid, CalendarGlyph, type MonthlyStatusGridProps, type MonthlyStatusGridMonth, type MonthlyStatus, type CalendarGlyphProps } from './MonthlyStatusGrid/MonthlyStatusGrid';
 export { default as Gauge, type GaugeProps } from './Gauge/Gauge';
@@ -67,6 +70,7 @@ export { default as Overlay, type OverlayProps } from './Overlay/Overlay';
 export { default as Title, type TitleProps } from './Title/Title';
 export { default as Screen, type ScreenProps } from './Screen/Screen';
 export { default as Section } from './Section/Section';
+export { default as Slider, type SliderProps, type SliderHandle } from './Slider/Slider';
 export { default as Slot, type SlotProps, type SlotLayoutDirection } from './Slot/Slot';
 export { default as Spinner, type SpinnerProps, type SpinnerColors } from './Spinner/Spinner';
 export { default as Stepper, type StepperProps } from './Stepper/Stepper';
@@ -117,12 +121,16 @@ export { default as ToastProvider, type ToastProviderProps } from './Toast/Toast
 export { useToast, addToast, closeToast, closeAll, type ToastOptions, type ToastEntry, type ToastPlacement } from './Toast/useToast';
 export { default as AmountInput, type AmountInputProps } from './AmountInput/AmountInput';
 export { default as PageHero, type PageHeroProps } from './PageHero/PageHero';
+export { default as PdpCcCard, type PdpCcCardProps, type PdpCcCardMetric } from './PdpCcCard/PdpCcCard';
 export { default as Popup, type PopupProps, type PopupRef } from './Popup/Popup';
 export { default as PortfolioHero, type PortfolioHeroProps } from './PortfolioHero/PortfolioHero';
 export { default as PlanComparisonCard, type PlanComparisonCardProps, type PlanComparisonColumn, type PlanComparisonRow, type PlanComparisonCellValue } from './PlanComparisonCard/PlanComparisonCard';
+export { default as CompareTable, type CompareTableProps, type CompareTableColumn, type CompareTableRow, type CompareTableCellValue, type CompareTableSection } from './CompareTable/CompareTable';
 export { default as PoweredByLabel, type PoweredByLabelProps } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel, type ProductLabelProps } from './ProductLabel/ProductLabel';
+export { default as ProductMerchandisingCard, type ProductMerchandisingCardProps } from './ProductMerchandisingCard/ProductMerchandisingCard';
 export { default as ProductOverview, type ProductOverviewProps, type ProductOverviewStat } from './ProductOverview/ProductOverview';
+export { default as ProjectionMarker, type ProjectionMarkerProps } from './ProjectionMarker/ProjectionMarker';
 export { default as ProgressBadge, type ProgressBadgeProps } from './ProgressBadge/ProgressBadge';
 export { default as SwappableAmount, type SwappableAmountProps } from './SwappableAmount/SwappableAmount';
 export { default as OTP, OTPResend, useOtpResend, type OTPProps, type OTPResendProps, type OTPResendConfig, type UseOtpResendOptions, type UseOtpResendReturn, type OtpResendState, } from './OTP/OTP';
@@ -133,6 +141,7 @@ export { default as StrengthIndicator, type StrengthIndicatorProps, type Strengt
 export { default as SummaryTile, type SummaryTileProps } from './SummaryTile/SummaryTile';
 export { default as TestimonialsCard, type TestimonialsCardProps } from './TestimonialsCard/TestimonialsCard';
 export { default as Text, type TextProps } from './Text/Text';
+export { default as TextSegment, type TextSegmentProps, type TextSegmentRun } from './TextSegment/TextSegment';
 export { default as SegmentedControl, type SegmentedControlProps, type SegmentedControlItem } from './SegmentedControl/SegmentedControl';
 export { default as Toggle, type ToggleProps } from './Toggle/Toggle';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/design-tokens/figma-modes.generated.d.ts

@@ -22,11 +22,12 @@ export declare const FIGMA_MODES: {
     readonly "Attached / Output": readonly ["Default"];
     readonly "Avatar / Output": readonly ["Default"];
     readonly "Avatar Group / Output": readonly ["Default"];
-    readonly "Avatar Size": readonly ["L", "M", "S"];
+    readonly "Avatar Size": readonly ["L", "M", "S", "XS"];
     readonly "Avatar Type": readonly ["Avatar", "Icon", "Text"];
     readonly "Axis / Output": readonly ["Default"];
     readonly Background: readonly ["False", "True"];
     readonly "Badge / Output": readonly ["Default"];
+    readonly "Badge Size": readonly ["Medium", "Small"];
     readonly "Balance / Output": readonly ["Default"];
     readonly "BankAccountCard / Output": readonly ["Default"];
     readonly "Benefit Card": readonly ["Default"];
@@ -52,6 +53,7 @@ export declare const FIGMA_MODES: {
     readonly cardsShared: readonly ["Default"];
     readonly "Carousel / Output": readonly ["Default"];
     readonly "CarouselCardAccounts / Output": readonly ["Default"];
+    readonly "ccCard / Output": readonly ["Default"];
     readonly "checkbox / Output": readonly ["Default"];
     readonly "Checkbox / Output": readonly ["Default"];
     readonly "Checkbox states": readonly ["Idle", "Hover", "Focus", "Focus Selected", "Selected Hover", "Disabled/Active", "Disabled", "Selected"];
@@ -67,7 +69,12 @@ export declare const FIGMA_MODES: {
     readonly "circularProgressBar / Output": readonly ["Default"];
     readonly "circularProgressBar Size": readonly ["S", "M"];
     readonly "clusterBubble / Output": readonly ["Default"];
+    readonly coincard: readonly ["Mode 1"];
     readonly "Color Mode": readonly ["Light", "Dark"];
+    readonly comparetablecell: readonly ["Mode 1"];
+    readonly comparetableheader: readonly ["Mode 1"];
+    readonly "Comparison Floating card": readonly ["Default"];
+    readonly ComparisonCardItem: readonly ["Default"];
     readonly Confidence: readonly ["High", "Medium", "Low", "None"];
     readonly "ContentSheet / Output": readonly ["Default"];
     readonly Context: readonly ["Default", "Nudge&Alert", "CTACard", "ListItem"];
@@ -78,6 +85,7 @@ export declare const FIGMA_MODES: {
     readonly context7: readonly ["Default", "Card"];
     readonly "Contrast Context": readonly ["on dark", "on light"];
     readonly "Conversation Feed / Output": readonly ["Default"];
+    readonly "Counter Badge / Output": readonly ["Mode 1"];
     readonly "Coverage Bar Comparison / Output": readonly ["Default"];
     readonly "CoverageRing / Output": readonly ["Mode 1"];
     readonly "CTACard / Output": readonly ["Default"];
@@ -106,6 +114,7 @@ export declare const FIGMA_MODES: {
     readonly FullScreenModal: readonly ["Default"];
     readonly Gap: readonly ["S", "M", "L", "None"];
     readonly "Gauge / Output": readonly ["Default"];
+    readonly "Handle Boolean": readonly ["False", "True"];
     readonly "Heading / Output": readonly ["Default"];
     readonly "Heading text": readonly ["Default", "Slot"];
     readonly "Holdings card / Output": readonly ["Default"];
@@ -113,7 +122,7 @@ export declare const FIGMA_MODES: {
     readonly "Icon / Output": readonly ["Default"];
     readonly "Icon Button / Output": readonly ["Default"];
     readonly "Icon Capsule / Output": readonly ["Default"];
-    readonly "Icon Capsule Size": readonly ["M", "L", "S"];
+    readonly "Icon Capsule Size": readonly ["M", "L", "S", "XS"];
     readonly "Image / Output": readonly ["Default"];
     readonly "Input / Output": readonly ["Default"];
     readonly "Input/PINSlot  States": readonly ["Idle", "Active", "Error"];
@@ -138,6 +147,7 @@ export declare const FIGMA_MODES: {
     readonly "Message Direction": readonly ["Incoming (Left)", "Outgoing (Right)"];
     readonly "Message Row / Output": readonly ["Default"];
     readonly "MessageField / Output": readonly ["Default"];
+    readonly metricdata: readonly ["Mode 1"];
     readonly "MetricLegendItem / Output": readonly ["Default"];
     readonly "Money Value / Output": readonly ["Default"];
     readonly "MonthlyStatusGrid / Output": readonly ["Default"];
@@ -155,15 +165,18 @@ export declare const FIGMA_MODES: {
     readonly "Page type": readonly ["MainPage", "SubPage", "JioPlus"];
     readonly "PageHero / Output": readonly ["Default"];
     readonly "PaymnetFeedback / Output": readonly ["Default"];
+    readonly "PDP cc card": readonly ["Mode 1"];
     readonly peekOffset: readonly ["Medium", "Small", "Large", "None"];
     readonly Placement: readonly ["Prefix", "Suffix"];
     readonly "PlanComparisonCard / Output": readonly ["Default"];
     readonly "Popup / Output": readonly ["Default"];
     readonly "PortfolioHero / Output": readonly ["Default"];
     readonly PoweredByLabel: readonly ["Default"];
+    readonly "Product Merchandising card": readonly ["Mode 1"];
     readonly "ProductLabel / Output": readonly ["Default"];
     readonly "ProductOverview / Output": readonly ["Default"];
     readonly "ProgressBadge / Output": readonly ["Default"];
+    readonly ProjectionMarker: readonly ["Mode 1"];
     readonly "QR code / Output": readonly ["Idle"];
     readonly "Radio / Output": readonly ["Default"];
     readonly Radius: readonly ["S", "M", "L", "None"];
@@ -181,8 +194,10 @@ export declare const FIGMA_MODES: {
     readonly "SegmentedControl/Segment / Output": readonly ["Default"];
     readonly "SegmentedTrack / Output": readonly ["Default"];
     readonly Selectable: readonly ["False", "True"];
+    readonly selectioncard: readonly ["Mode 1"];
     readonly "Semantic Intent": readonly ["Brand", "System"];
     readonly Skeleton: readonly ["Mode 1"];
+    readonly "Slider / Output": readonly ["Default"];
     readonly "Slot gap": readonly ["S", "M", "L", "XL"];
     readonly "special button": readonly ["Default"];
     readonly "Spinner / Output": readonly ["Default"];
@@ -203,14 +218,19 @@ export declare const FIGMA_MODES: {
     readonly "SwappableAmount / Output": readonly ["Default"];
     readonly "tabItem / Output": readonly ["Default"];
     readonly "Tabs / Output": readonly ["Default"];
+    readonly TestimonialsCard: readonly ["Default"];
     readonly "Text / Output": readonly ["Default"];
+    readonly "Text Appearance": readonly ["Neutral", "Primary", "Secondary", "Tertiary"];
+    readonly "Text Sizes": readonly ["Medium", "Small"];
     readonly "textInput / Output": readonly ["Default"];
+    readonly "TextSegment / Output": readonly ["Default"];
     readonly "Thread Hero / Output": readonly ["Default"];
     readonly "Title / Output": readonly ["Default"];
     readonly "Title Level": readonly ["Default", "Bold"];
     readonly "Toggle / Output": readonly ["Default"];
     readonly "Toggle States": readonly ["Off", "On", "Disabled Off", "Disabled On"];
     readonly "ToggleIconButton / Output": readonly ["Default"];
+    readonly Tooltip: readonly ["True", "False"];
     readonly "tooltip / Output": readonly ["Default"];
     readonly "Tost Output": readonly ["Default"];
     readonly "Transaction Status": readonly ["Request", "Paid", "Declined", "Expired"];

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-06-10T14:28:21.260Z
+ * Generated: 2026-06-12T12:48:07.304Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/lib/typescript/src/utils/react-utils.d.ts

@@ -20,6 +20,16 @@ export declare const EMPTY_MODES: Readonly<Record<string, any>>;
  * This ensures that all child components in slots receive the modes prop from the parent.
  */
 export declare function cloneChildrenWithModes(children: React.ReactNode, modes: Modes, forcedModes?: Modes): React.ReactNode[];
+/**
+ * Combines several refs (object refs and/or callback refs) into a single
+ * callback ref. Useful when a component needs to keep its own internal ref to a
+ * node while still honouring a ref forwarded by the consumer.
+ *
+ * @example
+ * const inputRef = useRef<RNTextInput>(null)
+ * <RNTextInput ref={mergeRefs(inputRef, forwardedRef)} />
+ */
+export declare function mergeRefs<T>(...refs: Array<React.Ref<T> | undefined | null>): React.RefCallback<T>;
 /**
  * Flattens React children, extracting them from Fragments.
  * Useful for Group components that need to process individual items (e.g., for layout or styling)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.1.2",
+  "version": "0.1.8",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -30,6 +30,7 @@
     "lint": "eslint .",
     "build-react": "webpack --mode production",
     "start-react": "webpack-dev-server --config ./webpack.config.js --mode development",
+    "tokens": "node scripts/figma-token-explorer.js",
     "extract-tokens": "node scripts/extract-component-tokens.js",
     "generate-mode-types": "node scripts/generate-mode-types.js",
     "generate-docs": "node scripts/generate-component-docs.js",

package/src/components/AmountInput/AmountInput.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { View, type ViewStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
@@ -27,12 +27,12 @@ export type AmountInputProps = {
  *
  * @component
  */
-export default function AmountInput({
+const AmountInput = forwardRef<View, AmountInputProps>(function AmountInput({
     moneyValueSlot,
     noteInputSlot,
     modes: propModes = EMPTY_MODES,
     style,
-}: AmountInputProps) {
+}: AmountInputProps, ref: React.Ref<View>) {
     const { modes: globalModes } = useTokens()
     const modes = { ...globalModes, ...propModes }
 
@@ -75,9 +75,11 @@ export default function AmountInput({
     }
 
     return (
-        <View style={containerStyle}>
+        <View ref={ref} style={containerStyle}>
             {renderMoneyValueSlot()}
             {renderNoteInputSlot()}
         </View>
     )
-}
+})
+
+export default AmountInput

package/src/components/BenefitCard/BenefitCard.tsx

@@ -0,0 +1,309 @@
+import React, { useMemo } from 'react'
+import {
+    View,
+    Text as RNText,
+    Pressable,
+    StyleSheet,
+    type ViewStyle,
+    type TextStyle,
+    type StyleProp,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Icon from '../Icon/Icon'
+import Text from '../Text/Text'
+import ListItem from '../ListItem/ListItem'
+import Divider from '../Divider/Divider'
+import Button from '../Button/Button'
+import type { Modes } from '../../design-tokens'
+
+/**
+ * A single benefit row rendered with the shared `ListItem` primitive: a
+ * leading icon, a title and an optional right-aligned trailing value.
+ */
+export interface BenefitCardItem {
+    /** Registry icon name for the leading glyph (e.g. `'ic_jewellery_diamond'`). */
+    icon?: string
+    /** Per-item override for the leading icon color. Defaults to the brand token. */
+    iconColor?: string
+    /** Full override for the leading node. Takes precedence over `icon`. */
+    leading?: React.ReactNode
+    /** Row title (e.g. `"JioPoints"`). */
+    title: string
+    /** Optional right-aligned trailing value (e.g. `"Up to 2000 pts"`). */
+    trailingText?: string
+    /** Full override for the trailing node. Takes precedence over `trailingText`. */
+    trailing?: React.ReactNode
+    /** Makes the row pressable. */
+    onPress?: () => void
+}
+
+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.
+     */
+    headerItem?: BenefitCardItem
+    /**
+     * 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"`). */
+    bodyTitle?: string
+    /**
+     * Body benefit rows. Ignored when `children` is provided (the slot wins).
+     */
+    items?: BenefitCardItem[]
+    /**
+     * Real slot for the body "list wrap". When provided, these children render
+     * instead of `items`; `modes` (plus the `List Item Style: Minimal` style)
+     * cascade into every child automatically.
+     */
+    children?: React.ReactNode
+    /** CTA button label. Defaults to `"Upgrade"`. */
+    buttonLabel?: string
+    /** CTA press handler. */
+    onButtonPress?: () => void
+    /** Full override for the CTA. Takes precedence over `buttonLabel`. */
+    button?: React.ReactNode
+    /**
+     * Toggles the CTA button. Mirrors the Figma `showButton` property.
+     * Defaults to `true`.
+     */
+    showButton?: boolean
+    /** Press handler for the whole card. When set, the card becomes pressable. */
+    onPress?: () => void
+    /** Card width. Defaults to the Figma spec (`344`). Pass `'100%'` to fill the parent. */
+    width?: number | `${number}%`
+    /** Modes object for design-token resolution. Cascaded to all children. */
+    modes?: Modes
+    /** Style overrides for the card container. */
+    style?: StyleProp<ViewStyle>
+    /** Accessibility label for the card. */
+    accessibilityLabel?: string
+}
+
+/**
+ * BenefitCard — Figma node 5352:1077 ("Benefit Card").
+ *
+ * A white, rounded card that summarises the rewards a user will earn. It is
+ * composed entirely from the shared design-system primitives so it stays in
+ * sync with the rest of the library:
+ *
+ *  - **Header** — a section title + a single highlighted {@link ListItem}
+ *    (leading `Icon`, title, right-aligned trailing value) followed by a
+ *    `Divider`.
+ *  - **Body** — a section title + a column of benefit {@link ListItem}s. The
+ *    list is a real slot: pass `children` to fully control it, or `items` for
+ *    the declarative path.
+ *  - **CTA** — a small {@link Button} (Figma `Button / Size = S`).
+ *
+ * The list rows resolve through the `List Item Style: Minimal` mode (12px /
+ * regular title, 4px gap, no padding) and the leading icons use the
+ * `AppearanceBrand: Secondary` brand color, exactly matching the design. All
+ * three defaults can be overridden via `modes`.
+ */
+function BenefitCard({
+    headerTitle = 'You will earn',
+    headerItem,
+    showHeader = true,
+    bodyTitle = 'Upgrade to JioFinance+ and earn more',
+    items,
+    children,
+    buttonLabel = 'Upgrade',
+    onButtonPress,
+    button,
+    showButton = true,
+    onPress,
+    width = 344,
+    modes = EMPTY_MODES,
+    style,
+    accessibilityLabel,
+}: 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])
+    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])
+
+    const renderItem = (item: BenefitCardItem, key: React.Key) => {
+        const leading =
+            item.leading ??
+            (item.icon != null ? (
+                <Icon iconName={item.icon} color={item.iconColor} modes={iconModes} />
+            ) : null)
+
+        const trailing =
+            item.trailing ??
+            (item.trailingText != null ? (
+                <Text modes={trailingTextModes}>{item.trailingText}</Text>
+            ) : undefined)
+
+        return (
+            <ListItem
+                key={key}
+                layout="Horizontal"
+                navArrow={false}
+                showSupportText={false}
+                title={item.title}
+                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} />
+            </View>
+        ) : null
+
+    const bodyList = children
+        ? cloneChildrenWithModes(children, listItemModes)
+        : (items ?? DEFAULT_ITEMS).map((item, index) => renderItem(item, index))
+
+    const ctaNode = button ?? (
+        <Button label={buttonLabel} modes={ctaModes} onPress={onButtonPress} />
+    )
+
+    const containerStyle = useMemo<ViewStyle>(
+        () => ({ ...tokens.container, width }),
+        [tokens.container, width]
+    )
+
+    const content = (
+        <>
+            {headerNode}
+            <View style={tokens.body}>
+                {bodyTitle != null ? <RNText style={tokens.title}>{bodyTitle}</RNText> : null}
+                <View style={tokens.listWrap}>{bodyList}</View>
+            </View>
+            {showButton ? ctaNode : null}
+        </>
+    )
+
+    if (onPress) {
+        return (
+            <Pressable
+                style={({ pressed }) => [containerStyle, pressed ? styles.pressed : null, style]}
+                accessibilityRole="button"
+                accessibilityLabel={accessibilityLabel ?? headerTitle ?? bodyTitle}
+                onPress={onPress}
+            >
+                {content}
+            </Pressable>
+        )
+    }
+
+    return (
+        <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
+            {content}
+        </View>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Tokens / static styles
+// ---------------------------------------------------------------------------
+
+// The "card header" inner gap (title -> highlighted item) is a fixed 4px in
+// the Figma node and has no dedicated token.
+const CARD_HEADER_GAP = 4
+
+interface ResolvedTokens {
+    container: ViewStyle
+    body: ViewStyle
+    listWrap: ViewStyle
+    title: TextStyle
+}
+
+function asNum(raw: unknown, fallback: number): number {
+    const n = typeof raw === 'number' ? raw : parseFloat(raw as string)
+    return Number.isFinite(n) ? n : fallback
+}
+
+function asStr(raw: unknown, fallback: string): string {
+    return raw != null ? String(raw) : fallback
+}
+
+function resolveTokens(modes: Modes): ResolvedTokens {
+    // NOTE: token names are passed as string literals DIRECTLY to
+    // getVariableByName so the `extract-component-tokens` script can statically
+    // collect them for the generated docs. Do not refactor these into a helper
+    // that receives the name as a variable.
+    const background = asStr(getVariableByName('benefitCard/background', modes), '#ffffff')
+    const paddingHorizontal = asNum(getVariableByName('benefitCard/padding/horizontal', modes), 12)
+    const paddingVertical = asNum(getVariableByName('benefitCard/padding/vertical', modes), 12)
+    const radius = asNum(getVariableByName('benefitCard/radius', modes), 12)
+    const gap = asNum(getVariableByName('benefitCard/gap', modes), 8)
+
+    const titleColor = asStr(getVariableByName('benefitCard/title/foreground', modes), '#000000')
+    const titleSize = asNum(getVariableByName('benefitCard/title/fontsize', modes), 14)
+    const titleFamily = asStr(getVariableByName('benefitCard/title/fontFamily', modes), 'JioType Var')
+    const titleWeight = asStr(getVariableByName('benefitCard/title/fontWeight', modes), '500')
+
+    return {
+        container: {
+            backgroundColor: background,
+            paddingHorizontal,
+            paddingVertical,
+            borderRadius: radius,
+            gap,
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+        },
+        body: {
+            alignSelf: 'stretch',
+            gap,
+        },
+        listWrap: {
+            alignSelf: 'stretch',
+            gap,
+        },
+        title: {
+            color: titleColor,
+            fontSize: titleSize,
+            fontFamily: titleFamily,
+            fontWeight: titleWeight as TextStyle['fontWeight'],
+            lineHeight: 20,
+            letterSpacing: -0.5,
+            includeFontPadding: false as any,
+        },
+    }
+}
+
+const DEFAULT_ITEMS: BenefitCardItem[] = [
+    { icon: 'ic_card', title: 'Up to ₹5000 cashback' },
+    { icon: 'ic_card', title: '25% extra JioPoints' },
+]
+
+const styles = StyleSheet.create({
+    section: {
+        alignSelf: 'stretch',
+        gap: 8,
+    },
+    cardHeader: {
+        alignSelf: 'stretch',
+        gap: CARD_HEADER_GAP,
+    },
+    pressed: {
+        opacity: 0.92,
+    },
+})
+
+export default BenefitCard