jfs-components 0.1.49 → 0.1.50

package/lib/module/components/CardCTA/CardCTA.js

@@ -70,7 +70,8 @@ function CardCTA({
   const radius = getVariableByName('cardCTA/radius', modes);
   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);
   const rightPaddingH = getVariableByName('cardCTA/right-wrap/padding/horizontal', modes);
@@ -216,7 +217,8 @@ function CardCTA({
     flexShrink: 1,
     flexBasis: 0,
     minWidth: 0,
-    paddingHorizontal: leftPaddingH,
+    paddingLeft: leftPaddingLeft,
+    paddingRight: leftPaddingRight,
     paddingVertical: leftPaddingV,
     gap: leftGap,
     alignItems: 'flex-start',
@@ -248,7 +250,7 @@ function CardCTA({
   // space allows and can never collapse below its content.
   const iconCapsuleModes = {
     ...modes,
-    'IconCapsule / Size': 'M',
+    'Icon Capsule Size': 'M',
     Emphasis: 'Medium',
     AppearanceBrand: 'Secondary'
   };
@@ -307,7 +309,8 @@ function CardCTA({
   };
   const sipWrapStyle = {
     width: '100%',
-    paddingHorizontal: leftPaddingH,
+    paddingLeft: leftPaddingLeft,
+    paddingRight: leftPaddingRight,
     paddingVertical: leftPaddingV,
     gap: leftGap,
     alignItems: 'flex-start',

package/lib/module/components/CardFeedback/CardFeedback.js

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

package/lib/module/components/CategoryCard/CategoryCard.js

@@ -56,10 +56,10 @@ function resolveCategoryCardTokens(modes, active) {
   const backgroundColor = active ? activeBackground : idleBackground;
   const imageSize = toNumber(getVariableByName('cardTab/image/width', resolvedModes), 36);
   const imageRadius = toNumber(getVariableByName('image/radius', resolvedModes), 0);
-  const fontFamily = getVariableByName('cardTab/label/fontFamily', resolvedModes) ?? 'JioType Var';
-  const fontSize = toNumber(getVariableByName('cardTab/label/fontSize', resolvedModes), 12);
-  const lineHeight = toNumber(getVariableByName('cardTab/label/lineHeight', resolvedModes), Math.round(fontSize * 1.3));
-  const fontWeight = toFontWeight(getVariableByName('cardTab/label/fontWeight', resolvedModes), '500');
+  const fontFamily = getVariableByName('label/fontFamily', resolvedModes) ?? 'JioType Var';
+  const fontSize = toNumber(getVariableByName('label/fontSize', resolvedModes), 12);
+  const lineHeight = toNumber(getVariableByName('label/lineHeight', resolvedModes), Math.round(fontSize * 1.3));
+  const fontWeight = toFontWeight(getVariableByName('label/fontWeight', resolvedModes), '500');
   const labelColor = getVariableByName('cardTab/label/color', resolvedModes) ?? '#000000';
   return {
     containerStyle: {

package/lib/module/components/Checkbox/Checkbox.js

@@ -102,8 +102,8 @@ const Checkbox = /*#__PURE__*/forwardRef(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';
@@ -115,8 +115,6 @@ const Checkbox = /*#__PURE__*/forwardRef(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;
     const next = !isChecked;
@@ -161,7 +159,7 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox({
         ...base,
         backgroundColor: selectedFill,
         borderColor: selectedStroke,
-        ...boxShadow(`0px 0px 0px ${hoverShadowSize}px ${selectedHoverShadow}`)
+        ...boxShadow(`0px 0px 0px ${hoverSpread}px ${hoverShadow}`)
       };
     }
     if (isChecked) {
@@ -184,7 +182,7 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox({
         ...base,
         backgroundColor: hoverFill,
         borderColor: hoverStroke,
-        ...boxShadow(`0px 0px 0px ${hoverRing}px ${hoverShadow}`)
+        ...boxShadow(`0px 0px 0px ${hoverSpread}px ${hoverShadow}`)
       };
     }
     return {

package/lib/module/components/CircularProgressBarDoted/CircularProgressBarDoted.js

@@ -82,18 +82,21 @@ function CircularProgressBarDoted({
   const scoreTierWidth = toNumber(getVariableByName('circularProgressBarDoted/scoreTier/width', modes), 116);
   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);
   const scoreFontFamily = getVariableByName('circularProgressBarDoted/scoreLabel/fontFamily', modes);
   const scoreLineHeight = toNumber(getVariableByName('circularProgressBarDoted/scoreLabel/lineHeight', modes), 56);
   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);
   const dots = useMemo(() => Array.from({
@@ -154,10 +157,10 @@ function CircularProgressBarDoted({
   };
   const computedLabelStyle = {
     color: labelColor,
-    fontFamily: typographyFontFamily,
+    fontFamily: labelFontFamily,
     fontSize: labelFontSize,
     fontWeight: labelFontWeight,
-    lineHeight: labelFontSize * 1.3,
+    lineHeight: labelLineHeight,
     textAlign: 'center'
   };
   const computedScoreLabelStyle = {
@@ -170,10 +173,10 @@ function CircularProgressBarDoted({
   };
   const computedTierLabelStyle = {
     color: tierColor,
-    fontFamily: typographyFontFamily,
+    fontFamily: tierFontFamily,
     fontSize: tierFontSize,
     fontWeight: tierFontWeight,
-    lineHeight: tierFontSize * 1.3,
+    lineHeight: tierLineHeight,
     textAlign: 'center'
   };
   const resolvedScoreLabel = String(Math.round(normalizedValue));

package/lib/module/components/DonutChartSummary/DonutChartSummary.js

@@ -87,8 +87,13 @@ function DonutChartSummary({
     ...globalModes,
     ...propModes
   };
-  const gap = getVariableByName('donutChartSummary/gap', modes) ?? 16;
-  const legendGap = getVariableByName('donutChartSummary/legend/gap', modes) ?? 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;
   const segments = resolvedItems.map((item, index) => ({
     key: item.key ?? `segment-${index}`,

package/lib/module/components/ProductMerchandisingCard/ProductMerchandisingCard.js

@@ -328,7 +328,9 @@ function resolveTokens(modes) {
   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);
   const subtitleFamily = asStr(getVariableByName('productMerchandisingcard/footer/subtitle/fontfamily', modes), 'JioType Var');

package/lib/module/components/ProductOverview/ProductOverview.js

@@ -30,12 +30,12 @@ const ProductOverview = ({
   const padding = getVariableByName('productOverview/padding', modes) ?? 24;
   const gap = getVariableByName('productOverview/gap', modes) ?? 12;
   const background = getVariableByName('productOverview/background', modes) ?? '#ffffff';
-  const productNameColor = getVariableByName('productOverview/productName/color', modes) ?? '#0d0d0f';
+  const productNameColor = getVariableByName('text/appearance/high/color', modes) ?? '#0d0d0f';
   const productNameFontFamily = getVariableByName('productOverview/productName/fontFamily', modes) ?? 'JioType Var';
   const productNameFontSize = getVariableByName('productOverview/productName/fontSize', modes) ?? 26;
   const productNameFontWeight = getVariableByName('productOverview/productName/fontWeight', modes) ?? 900;
   const productNameLineHeight = getVariableByName('productOverview/productName/lineHeight', modes) ?? 26;
-  const descriptionColor = getVariableByName('productOverview/description/color', modes) ?? '#1a1c1f';
+  const descriptionColor = getVariableByName('text/appearance/medium/color', modes) ?? '#1a1c1f';
   const descriptionFontFamily = getVariableByName('productOverview/description/fontFamily', modes) ?? 'JioType Var';
   const descriptionFontSize = getVariableByName('productOverview/description/fontSize', modes) ?? 14;
   const descriptionFontWeight = getVariableByName('productOverview/description/fontWeight', modes) ?? 500;

package/lib/module/components/Radio/Radio.js

@@ -81,7 +81,9 @@ export const Radio = /*#__PURE__*/forwardRef(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`;
@@ -139,7 +141,6 @@ export const Radio = /*#__PURE__*/forwardRef(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');
@@ -153,13 +154,14 @@ export const Radio = /*#__PURE__*/forwardRef(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/lib/module/components/SavingsGoalSummary/SavingsGoalSummary.js

@@ -123,7 +123,7 @@ function SavingsGoalSummary({
   // ~1.2x so descenders never clip on native (same guard `Title` uses).
   const valueLineHeight = Math.max(valueRawLineHeight, Math.ceil(valueFontSize * 1.2));
   const valueFontWeight = String(getVariableByName('savingsGoalSummary/value/fontWeight', mergedModes) ?? 900);
-  const valueColor = getVariableByName('savingsGoalSummary/value/color', mergedModes) ?? '#0d0d0f';
+  const valueColor = getVariableByName('text/appearance/high/color', mergedModes) ?? '#0d0d0f';
 
   // Caption ("Credit usage") typography — `savingsGoalSummary/label/*`
   // (Figma 12 / 400). Only rendered when a `label` is supplied.
@@ -131,7 +131,7 @@ function SavingsGoalSummary({
   const labelFontFamily = getVariableByName('savingsGoalSummary/label/fontFamily', mergedModes) ?? 'JioType Var';
   const labelLineHeight = getVariableByName('savingsGoalSummary/label/lineHeight', mergedModes) ?? 16;
   const labelFontWeight = String(getVariableByName('savingsGoalSummary/label/fontWeight', mergedModes) ?? 400);
-  const labelColor = getVariableByName('savingsGoalSummary/label/color', mergedModes) ?? '#0d0d0f';
+  const labelColor = getVariableByName('text/appearance/medium/color', mergedModes) ?? '#1a1c1f';
   const labelNode = label == null || label === false ? null : typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
     style: [{
       color: labelColor,

package/lib/module/components/SegmentedControl/SegmentedControl.js

@@ -104,7 +104,7 @@ function SegmentedControl({
   }, [isControlled, onSelectionChange]);
   const gap = getVariableByName('segmentedControl/gap', modes) ?? 8;
   const background = getVariableByName('segmentedControl/background', modes) ?? '#f6f3ff';
-  const radius = getVariableByName('segmentedControl/radius', modes) ?? 24;
+  const radius = getVariableByName('segment/radius', modes) ?? 20;
   const containerStyle = {
     flexDirection: 'row',
     alignItems: 'center',

package/lib/module/components/SegmentedTrack/SegmentedTrack.js

@@ -90,7 +90,7 @@ function SegmentedTrack({
     ...propModes
   };
   const trackHeight = getVariableByName('segmentedTrack/height', modes) ?? 24;
-  const trackRadius = getVariableByName('segmentedTrack/radius', modes) ?? 999;
+  const trackRadius = trackHeight / 2;
   const renderedSegments = renderSegments({
     segments,
     children,

package/lib/module/components/Slider/Slider.js

@@ -386,8 +386,9 @@ function resolveTokens(modes) {
   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);
   const tooltipLabelColor = asStr(getVariableByName('tooltip/label/color', modes), '#ffffff');

package/lib/module/components/StatusHero/StatusHero.js

@@ -123,7 +123,7 @@ export default function StatusHero({
       currency: currency,
       modes: {
         ...modes,
-        Context3: 'Balance'
+        Context3: 'Balance & Cards'
       }
     })]
   });

package/lib/module/components/Tooltip/Tooltip.js

@@ -188,8 +188,10 @@ export function TooltipContent({
   const bgColor = getVariableByName('tooltip/background', modes);
   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);