jfs-components 0.1.49 → 0.1.51

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

@@ -9,6 +9,7 @@ export declare const FIGMA_MODES: {
     readonly "AccordionGroup / Output": readonly ["Default"];
     readonly "AccountCard / Output": readonly ["Default"];
     readonly Action: readonly ["True", "False"];
+    readonly "Action Footer Radius": readonly ["False", "True"];
     readonly "ActionFooter / Output": readonly ["Default"];
     readonly "ActionNumpad / Output": readonly ["Default"];
     readonly "ActionTile / Output": readonly ["Default"];
@@ -42,6 +43,8 @@ export declare const FIGMA_MODES: {
     readonly "Button / Output": readonly ["Default"];
     readonly "Button / Size": readonly ["M", "S", "XS"];
     readonly "Button / State": readonly ["Idle", "Hover", "Pressed", "Disabled"];
+    readonly "Button Glass State": readonly ["Idle", "Hover", "Pressed", "Disabled"];
+    readonly "Button type": readonly ["default", "glass"];
     readonly "ButtonGroup / Output": readonly ["Default"];
     readonly "Calendar Glyph / Output": readonly ["Default"];
     readonly "Calendar Glyph State": readonly ["Idle", "notSaved", "saved"];
@@ -90,7 +93,7 @@ export declare const FIGMA_MODES: {
     readonly Context2: readonly ["Default", "AppBar"];
     readonly Context3: readonly ["Default", "Transaction Bubble", "Balance & Cards", "Amount Input"];
     readonly Context4: readonly ["Default", "Chip", "Button", "Badge", "Badge/glass"];
-    readonly context5: readonly ["Default", "Fullscreen Modal"];
+    readonly context5: readonly ["Default", "Fullscreen Modal", "Mode 1"];
     readonly context7: readonly ["Default", "Card", "Page Hero"];
     readonly "Contrast Context": readonly ["on dark", "on light"];
     readonly "Control Toggle ": readonly ["Default"];

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-07-25T08:19:21.865Z
+ * Generated: 2026-07-26T08:49:43.170Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.1.49",
+  "version": "0.1.51",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -17,7 +17,9 @@
     "src",
     "lib",
     "scripts/extract-figma-modes.js",
-    "D2C.md",
+    ".cursor/commands/D2C.md",
+    ".cursor/D2C-FLOW.md",
+    ".cursor/D2C-SCREEN.md",
     "CHANGELOG.md",
     "!**/__tests__",
     "!**/*.stories.*",

package/src/components/CardCTA/CardCTA.tsx

@@ -126,7 +126,8 @@ function CardCTA({
     const borderSize = getVariableByName('cardCTA/border/size', modes)
     const borderColor = getVariableByName('cardCTA/border/color', modes)
 
-    const leftPaddingH = getVariableByName('cardCTA/left-wrap/padding/horizontal', modes)
+    const leftPaddingLeft = getVariableByName('cardCTA/left-wrap/padding/left', modes)
+    const leftPaddingRight = getVariableByName('cardCTA/left-wrap/padding/right', modes)
     const leftPaddingV = getVariableByName('cardCTA/left-wrap/padding/vertical', modes)
     const leftGap = getVariableByName('cardCTA/left-wrap/gap', modes)
 
@@ -272,7 +273,8 @@ function CardCTA({
         flexShrink: 1,
         flexBasis: 0,
         minWidth: 0,
-        paddingHorizontal: leftPaddingH,
+        paddingLeft: leftPaddingLeft,
+        paddingRight: leftPaddingRight,
         paddingVertical: leftPaddingV,
         gap: leftGap,
         alignItems: 'flex-start',
@@ -302,7 +304,7 @@ function CardCTA({
     // an explicit computed floor — the resolved IconCapsule size plus the
     // wrapper's own horizontal padding. The column is exactly 2fr whenever
     // space allows and can never collapse below its content.
-    const iconCapsuleModes = { ...modes, 'IconCapsule / Size': 'M', Emphasis: 'Medium', AppearanceBrand: 'Secondary' }
+    const iconCapsuleModes = { ...modes, 'Icon Capsule Size': 'M', Emphasis: 'Medium', AppearanceBrand: 'Secondary' }
     const rightWrapMinWidth =
         ((getVariableByName('iconCapsule/size', iconCapsuleModes) as number) || 0) +
         ((rightPaddingH as number) || 0) * 2
@@ -364,7 +366,8 @@ function CardCTA({
 
     const sipWrapStyle: ViewStyle = {
         width: '100%',
-        paddingHorizontal: leftPaddingH,
+        paddingLeft: leftPaddingLeft,
+        paddingRight: leftPaddingRight,
         paddingVertical: leftPaddingV,
         gap: leftGap,
         alignItems: 'flex-start',

package/src/components/CardFeedback/CardFeedback.tsx

@@ -47,7 +47,7 @@ export function CardFeedback({
     accessibilityLabel,
 }: CardFeedbackProps) {
     const modes = {
-        'Appearance.System': 'positive',
+        'AppearanceSystem': 'positive',
         'Context': 'Nudge&Alert',
         'Semantic Intent': 'System',
         ...propModes,

package/src/components/CategoryCard/CategoryCard.tsx

@@ -162,18 +162,18 @@ function resolveCategoryCardTokens(
   )
 
   const fontFamily =
-    (getVariableByName('cardTab/label/fontFamily', resolvedModes) as string | null) ??
+    (getVariableByName('label/fontFamily', resolvedModes) as string | null) ??
     'JioType Var'
   const fontSize = toNumber(
-    getVariableByName('cardTab/label/fontSize', resolvedModes),
+    getVariableByName('label/fontSize', resolvedModes),
     12
   )
   const lineHeight = toNumber(
-    getVariableByName('cardTab/label/lineHeight', resolvedModes),
+    getVariableByName('label/lineHeight', resolvedModes),
     Math.round(fontSize * 1.3)
   )
   const fontWeight = toFontWeight(
-    getVariableByName('cardTab/label/fontWeight', resolvedModes),
+    getVariableByName('label/fontWeight', resolvedModes),
     '500'
   )
   const labelColor =

package/src/components/Checkbox/Checkbox.tsx

@@ -122,8 +122,8 @@ const Checkbox = forwardRef<View, CheckboxProps>(function Checkbox({
   const idleStroke = getVariableByName('checkbox/idle/stroke/color', modes) ?? '#666666'
   const hoverFill = getVariableByName('checkbox/hover/fill/color', modes) ?? 'rgba(0,0,0,0.1)'
   const hoverStroke = getVariableByName('checkbox/hover/stroke/color', modes) ?? '#666666'
-  const hoverRing = getVariableByName('checkbox/hoverRing', modes) ?? 4
-  const hoverShadow = getVariableByName('hover/boxShadow', modes) ?? 'rgba(0,0,0,0.1)'
+  const hoverSpread = getVariableByName('checkbox/hover/spread/effect1', modes) ?? 4
+  const hoverShadow = getVariableByName('checkbox/hover/shadow/color', modes) ?? 'rgba(0,0,0,0.1)'
   const selectedFill = getVariableByName('checkbox/selected/fill/color', modes) ?? '#cea15a'
   const selectedStroke = getVariableByName('checkbox/selected/stroke/color', modes) ?? '#0d0d0d'
   const selectedMarkColor = getVariableByName('checkbox/selected/mark/color', modes) ?? '#0f0d0a'
@@ -135,8 +135,6 @@ const Checkbox = forwardRef<View, CheckboxProps>(function Checkbox({
   const disabledActiveBg = getVariableByName('checkbox/disabledActive/background/color', modes) ?? '#f6d19a'
   const disabledActiveBorder = getVariableByName('checkbox/disabledActive/border/color', modes) ?? '#f6d19a'
   const disabledActiveMark = getVariableByName('checkbox/disabledActive/mark/color', modes) ?? '#474d54'
-  const selectedHoverShadow = getVariableByName('selected/hover/boxShadow', modes) ?? 'rgba(0,0,0,0.1)'
-  const hoverShadowSize = getVariableByName('hover/boxShadow/size', modes) ?? 4
 
   const handlePress = useCallback(() => {
     if (disabled) return
@@ -187,7 +185,7 @@ const Checkbox = forwardRef<View, CheckboxProps>(function Checkbox({
         ...base,
         backgroundColor: selectedFill as string,
         borderColor: selectedStroke as string,
-        ...boxShadow(`0px 0px 0px ${hoverShadowSize}px ${selectedHoverShadow}`),
+        ...boxShadow(`0px 0px 0px ${hoverSpread}px ${hoverShadow}`),
       }
     }
 
@@ -213,7 +211,7 @@ const Checkbox = forwardRef<View, CheckboxProps>(function Checkbox({
         ...base,
         backgroundColor: hoverFill as string,
         borderColor: hoverStroke as string,
-        ...boxShadow(`0px 0px 0px ${hoverRing}px ${hoverShadow}`),
+        ...boxShadow(`0px 0px 0px ${hoverSpread}px ${hoverShadow}`),
       }
     }
 

package/src/components/CircularProgressBarDoted/CircularProgressBarDoted.tsx

@@ -160,10 +160,11 @@ function CircularProgressBarDoted({
   const scoreTrendGap = toNumber(getVariableByName('circularProgressBarDoted/scoreTrend/gap', modes), 2)
   const scoreTrendHeight = toNumber(getVariableByName('circularProgressBarDoted/scoreTrend/height', modes), 24)
 
-  const typographyFontFamily = getVariableByName('Typography/Font Family', modes)
   const labelColor = getVariableByName('circularProgressBarDoted/label/color', modes)
-  const labelFontSize = toNumber(getVariableByName('Typography/Size/Body/XS', modes), 12)
-  const labelFontWeight = toFontWeight(getVariableByName('Typography/Font Weight/Body Low (Regular)', modes), '400')
+  const labelFontSize = toNumber(getVariableByName('circularProgressBarDoted/label/fontSize', modes), 12)
+  const labelFontFamily = getVariableByName('circularProgressBarDoted/label/fontFamily', modes)
+  const labelLineHeight = toNumber(getVariableByName('circularProgressBarDoted/label/lineHeight', modes), 15.6)
+  const labelFontWeight = toFontWeight(getVariableByName('circularProgressBarDoted/label/fontWeight', modes), '400')
 
   const scoreColor = getVariableByName('circularProgressBarDoted/scoreLabel/color', modes)
   const scoreFontSize = toNumber(getVariableByName('circularProgressBarDoted/scoreLabel/fontSize', modes), 56)
@@ -172,8 +173,10 @@ function CircularProgressBarDoted({
   const scoreFontWeight = toFontWeight(getVariableByName('circularProgressBarDoted/scoreLabel/fontWeight', modes), '900')
 
   const tierColor = getVariableByName('circularProgressBarDoted/tierLabel/color', modes)
-  const tierFontSize = toNumber(getVariableByName('Typography/Size/Body/M', modes), 16)
-  const tierFontWeight = toFontWeight(getVariableByName('Typography/Font Weight/Body High', modes), '700')
+  const tierFontSize = toNumber(getVariableByName('circularProgressBarDoted/tierLabel/fontSize', modes), 16)
+  const tierFontFamily = getVariableByName('circularProgressBarDoted/tierLabel/fontFamily', modes)
+  const tierLineHeight = toNumber(getVariableByName('circularProgressBarDoted/tierLabel/lineHeight', modes), 20.8)
+  const tierFontWeight = toFontWeight(getVariableByName('circularProgressBarDoted/tierLabel/fontWeight', modes), '700')
   const iconColor = getVariableByName('circularProgressBarDoted/icon/color', modes)
   const iconSize = toNumber(getVariableByName('circularProgressBarDoted/icon/size', modes), 24)
 
@@ -245,10 +248,10 @@ function CircularProgressBarDoted({
 
   const computedLabelStyle: TextStyle = {
     color: labelColor,
-    fontFamily: typographyFontFamily,
+    fontFamily: labelFontFamily,
     fontSize: labelFontSize,
     fontWeight: labelFontWeight,
-    lineHeight: labelFontSize * 1.3,
+    lineHeight: labelLineHeight,
     textAlign: 'center',
   }
 
@@ -263,10 +266,10 @@ function CircularProgressBarDoted({
 
   const computedTierLabelStyle: TextStyle = {
     color: tierColor,
-    fontFamily: typographyFontFamily,
+    fontFamily: tierFontFamily,
     fontSize: tierFontSize,
     fontWeight: tierFontWeight,
-    lineHeight: tierFontSize * 1.3,
+    lineHeight: tierLineHeight,
     textAlign: 'center',
   }
 

package/src/components/DonutChartSummary/DonutChartSummary.tsx

@@ -164,12 +164,12 @@ function DonutChartSummary({
     const { modes: globalModes } = useTokens()
     const modes = { ...globalModes, ...propModes }
 
-    const gap =
-        (getVariableByName('donutChartSummary/gap', modes) as number | null) ?? 16
-    const legendGap =
-        (getVariableByName('donutChartSummary/legend/gap', modes) as
-            | number
-            | null) ?? 8
+    // Figma DonutChartSummary (4203:51713) does not expose component-level
+    // gap variables — layout uses unbound 16px (donut→legend) and 8px
+    // (legend rows). Nested `textWrap/gap` / `metricLegendItem/gap` belong
+    // to child components and are not substitutes.
+    const gap = 16
+    const legendGap = 8
 
     const resolvedItems = items && items.length > 0 ? items : DEFAULT_ITEMS
 

package/src/components/ProductMerchandisingCard/ProductMerchandisingCard.tsx

@@ -430,7 +430,9 @@ function resolveTokens(modes: Modes): ResolvedTokens {
     const titleColor = asStr(getVariableByName('productMerchandisingcard/footer/title/font/color', modes), '#ffffff')
     const titleSize = asNum(getVariableByName('productMerchandisingcard/footer/title/fontsize', modes), 14)
     const titleFamily = asStr(getVariableByName('productMerchandisingcard/footer/title/fontfamily', modes), 'JioType Var')
-    const titleWeight = asStr(getVariableByName('productMerchandisingcard/footer/title/fontweight', modes), '700')
+    // No `productMerchandisingcard/footer/title/fontweight` in Coin Variables (Figma
+    // binds 700). `typography/title/fontWeight/high` is 800; use body/high (=700).
+    const titleWeight = asStr(getVariableByName('typography/body/fontWeight/high', modes), '700')
 
     const subtitleColor = asStr(getVariableByName('productMerchandisingcard/footer/subtitle/font/color', modes), '#c5bcb5')
     const subtitleSize = asNum(getVariableByName('productMerchandisingcard/footer/subtitle/fontsize', modes), 12)

package/src/components/ProductOverview/ProductOverview.tsx

@@ -79,7 +79,7 @@ const ProductOverview = ({
         (getVariableByName('productOverview/background', modes) as string | null) ?? '#ffffff'
 
     const productNameColor =
-        (getVariableByName('productOverview/productName/color', modes) as string | null) ??
+        (getVariableByName('text/appearance/high/color', modes) as string | null) ??
         '#0d0d0f'
     const productNameFontFamily =
         (getVariableByName('productOverview/productName/fontFamily', modes) as string | null) ??
@@ -92,7 +92,7 @@ const ProductOverview = ({
         (getVariableByName('productOverview/productName/lineHeight', modes) as number | null) ?? 26
 
     const descriptionColor =
-        (getVariableByName('productOverview/description/color', modes) as string | null) ??
+        (getVariableByName('text/appearance/medium/color', modes) as string | null) ??
         '#1a1c1f'
     const descriptionFontFamily =
         (getVariableByName('productOverview/description/fontFamily', modes) as string | null) ??

package/src/components/Radio/Radio.tsx

@@ -115,7 +115,12 @@ export const Radio = forwardRef<View, RadioProps>(function Radio({
     }
 
     // Border Color
-    let borderColorVar = `${prefix}/border/color`
+    // Coin Variables has no `radio/focus/border/color` — focus indication is
+    // the yellow boxShadow ring; stroke reuses the published idle border.
+    let borderColorVar =
+        visualState === 'focus' && !selected
+            ? 'radio/idle/border/color'
+            : `${prefix}/border/color`
 
     // Border Width
     let borderWidthVar = `${prefix}/border/size`
@@ -174,7 +179,6 @@ export const Radio = forwardRef<View, RadioProps>(function Radio({
         getVariableByName('radio/selector/size')
         getVariableByName('radio/width')
         getVariableByName('radio/height')
-        getVariableByName('radio/background/color')
         getVariableByName('radio/hover/background/color')
         getVariableByName('radio/hover/border/color')
         getVariableByName('radio/hover/boxShadow/size')
@@ -188,13 +192,14 @@ export const Radio = forwardRef<View, RadioProps>(function Radio({
         getVariableByName('radio/hoverSelected/shadow/color')
         getVariableByName('radio/hoverSelected/selector/background/color')
         getVariableByName('radio/focus/background/color')
-        getVariableByName('radio/focus/border/color')
         getVariableByName('radio/focus/border/size')
         getVariableByName('radio/focus/boxShadow/size')
         getVariableByName('radio/focus/shadow/color')
         getVariableByName('radio/focusSelected/background/color')
+        getVariableByName('radio/focusSelected/border/color')
         getVariableByName('radio/focusSelected/selector/background/color')
         getVariableByName('radio/focusSelected/border/size')
+        getVariableByName('radio/focusSelected/shadow/color')
         getVariableByName('radio/disabled/radio/disabled/border/size')
         getVariableByName('radio/disabled/background/color')
         getVariableByName('radio/disabled/border/color')

package/src/components/SavingsGoalSummary/SavingsGoalSummary.tsx

@@ -211,7 +211,7 @@ function SavingsGoalSummary({
         getVariableByName('savingsGoalSummary/value/fontWeight', mergedModes) ?? 900,
     ) as TextStyle['fontWeight']
     const valueColor =
-        (getVariableByName('savingsGoalSummary/value/color', mergedModes) as string | null) ??
+        (getVariableByName('text/appearance/high/color', mergedModes) as string | null) ??
         '#0d0d0f'
 
     // Caption ("Credit usage") typography — `savingsGoalSummary/label/*`
@@ -227,8 +227,8 @@ function SavingsGoalSummary({
         getVariableByName('savingsGoalSummary/label/fontWeight', mergedModes) ?? 400,
     ) as TextStyle['fontWeight']
     const labelColor =
-        (getVariableByName('savingsGoalSummary/label/color', mergedModes) as string | null) ??
-        '#0d0d0f'
+        (getVariableByName('text/appearance/medium/color', mergedModes) as string | null) ??
+        '#1a1c1f'
 
     const labelNode =
         label == null || label === false ? null : typeof label === 'string' ? (

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -141,7 +141,7 @@ function SegmentedControl({
 
   const gap = (getVariableByName('segmentedControl/gap', modes) ?? 8) as number
   const background = (getVariableByName('segmentedControl/background', modes) ?? '#f6f3ff') as string
-  const radius = (getVariableByName('segmentedControl/radius', modes) ?? 24) as number
+  const radius = (getVariableByName('segment/radius', modes) ?? 20) as number
 
   const containerStyle: ViewStyle = {
     flexDirection: 'row',

package/src/components/SegmentedTrack/SegmentedTrack.tsx

@@ -171,8 +171,7 @@ function SegmentedTrack({
 
     const trackHeight =
         (getVariableByName('segmentedTrack/height', modes) as number | null) ?? 24
-    const trackRadius =
-        (getVariableByName('segmentedTrack/radius', modes) as number | null) ?? 999
+    const trackRadius = trackHeight / 2
 
     const renderedSegments = renderSegments({
         segments,

package/src/components/Slider/Slider.tsx

@@ -547,8 +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)
-    const tooltipRadius = asNum(getVariableByName('radius', modes), 8)
-    const tooltipMaxWidth = asNum(getVariableByName('maxWidth', modes), 280)
+    // 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)
     const tipWidth = asNum(getVariableByName('tooltip/tipItem/width', modes), 16)
     const tipHeight = asNum(getVariableByName('tooltip/tipItem/height', modes), 8)
 

package/src/components/StatusHero/StatusHero.tsx

@@ -141,7 +141,7 @@ export default function StatusHero({
       <MoneyValue
         value={value}
         currency={currency}
-        modes={{ ...modes, Context3: 'Balance' }}
+        modes={{ ...modes, Context3: 'Balance & Cards' }}
       />
     </View>
   )

package/src/components/Tooltip/Tooltip.tsx

@@ -266,8 +266,10 @@ export function TooltipContent({
   const bgColor = (getVariableByName('tooltip/background', modes) as string)
   const paddingH = Number(getVariableByName('tooltip/padding/horizontal', modes))
   const paddingV = Number(getVariableByName('tooltip/padding/vertical', modes))
-  const radius = Number(getVariableByName('radius', modes))
-  const maxWidthToken = Number(getVariableByName('maxWidth', 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 arrowWidth = Number(getVariableByName('tooltip/tipItem/width', modes))
   const arrowHeight = Number(getVariableByName('tooltip/tipItem/height', modes))
   const labelColor = (getVariableByName('tooltip/label/color', modes) as string)