jfs-components 0.1.49 → 0.1.51

package/.cursor/D2C-FLOW.md

@@ -0,0 +1,94 @@
+# D2C multi-screen orchestration
+
+Load only when scope discovery finds two or more `ScreenSpec`s. The main agent
+is the orchestrator: it owns contracts, shared files, integration, and
+end-to-end QA. Each implementation agent owns exactly one screen family.
+
+## 1. Prepare conflict-free contracts
+
+Before launching agents:
+
+1. Define the transition graph and typed step model.
+2. Define shared props/callbacks, fake data, validation, timing, and persistence.
+3. Create the minimum scaffold: host/navigator, shared types, placeholders.
+4. Assign each family:
+   - one screen file;
+   - uniquely named mode file(s);
+   - `assets/<screen-key>/`.
+5. Only the orchestrator edits the host/shared types. Agents cannot edit other
+   screens or clear shared directories.
+
+Typical recording-demo layout:
+
+```text
+RecordingDemoScreen.tsx    # orchestrator
+types.ts                   # orchestrator
+SignInScreen.tsx           # Sign In agent
+signInModes.json
+assets/sign-in/
+OtpScreen.tsx              # OTP agent
+otpModes.json
+assets/otp/
+```
+
+## 2. Launch one agent per family
+
+After shared ambiguities are resolved and the scaffold exists, launch all
+independent agents in one parallel batch when possible; honor configured model
+preferences. Do not create one agent per state or combine unrelated screens.
+
+Each prompt is self-contained:
+
+```text
+absolute repo path; platform/stack; recording-demo placement
+owned files/directories + explicit do-not-edit list
+original flow URL + parent node
+primary node URL + all variant URLs/state meanings
+purpose + relationship to preceding/following screens
+shared TypeScript contract; input/output/persistence
+resolved fake-data, validation, navigation, timing behavior
+exact jfs-extract-modes commands + output paths
+files/rules/examples to read, including .cursor/D2C-SCREEN.md
+acceptance criteria + required completion summary
+STOP-BEFORE-EDIT rule for material ambiguity
+```
+
+Each agent independently executes `.cursor/D2C-SCREEN.md`, implements only its
+family/local states, runs focused checks, and returns its report.
+
+## 3. Integrate actual deliverables
+
+After all agents finish, inspect files—not only summaries:
+
+1. Confirm all placeholders are replaced and imports/modes/assets exist.
+2. Resolve conflicts, duplicates, missing assets, invalid props, and inconsistent
+   mode merging.
+3. Wire every transition and thread shared data/persistence.
+4. Keep variant states local to the correct family.
+5. Verify Back/Skip/Cancel/retry/resend, CTA states, and terminal paths.
+6. Keep fake flows local; do not add network/server dependencies.
+7. Re-run typecheck/lint/build; separate new failures from existing ones.
+
+## 4. End-to-end QA
+
+Render the complete journey on the target platform:
+
+- reach every terminal path from the intended start;
+- test all forward, Back, Skip, and Cancel branches;
+- test cross-screen validation, persistence, retry/resend, disabled/enabled
+  actions, transient timing, and repeated presses;
+- capture every real screen and materially different state;
+- verify keyboard/numpad, scrolling, sticky footers, and safe areas.
+
+One successful screen is not proof of the flow. Fix integration differences and
+recapture. If tooling is unavailable, report the exact remaining manual QA.
+
+## Completion report
+
+Report briefly:
+
+- detected families and grouped variants;
+- final transition graph and shared/fake-data behavior;
+- files, assets, and mode outputs per screen;
+- checks, paths, and edge cases exercised;
+- per-screen visual status and blockers.

package/.cursor/D2C-SCREEN.md

@@ -0,0 +1,119 @@
+# D2C per-screen execution
+
+Load only after scope discovery provides a `ScreenSpec`. Applies to direct
+single-screen work and each screen agent in a flow.
+
+## 1. Gather evidence
+
+Read the Figma design-to-code skill before Figma calls.
+
+1. `get_design_context` for the primary node and variants needed to understand
+   visual/interactive differences.
+2. `get_screenshot` for the primary and materially different variants; retain
+   them for QA.
+3. `get_metadata` when hierarchy, visibility, assets, or duplicate names need
+   disambiguation.
+4. Follow Code Connect, component docs, annotations, and hidden-layer metadata.
+5. Use exact exported images/icons. Download them into the repository; never
+   commit expiring/localhost URLs, placeholders, hand-authored SVGs, or a new
+   icon package.
+
+If MCP cannot read a required node, report the blocker and stop.
+
+## 2. Extract modes through Figma REST
+
+From the consuming repository:
+
+```bash
+npx jfs-extract-modes "<node-specific-figma-url>" --out "<unique-output>.json"
+```
+
+Fallback:
+
+```bash
+node node_modules/jfs-components/scripts/extract-figma-modes.js \
+  "<node-specific-figma-url>" --out "<unique-output>.json"
+```
+
+Extract a variant separately if selected modes differ from the primary. The CLI
+reads `FIGMA_ACCESS_TOKEN` from root `.env` (exported env wins). Never print it
+or ask the user to paste it into chat. Required scope: `file_content:read`.
+
+If missing, direct the user to `[Open .env](.env)` and add
+`FIGMA_ACCESS_TOKEN=`. Creation path: Figma file browser → account menu →
+Settings → Security → Personal access tokens → Generate; choose expiry and only
+`file_content:read`; copy once into `.env`. Never create/overwrite it yourself.
+[Official PAT docs](https://developers.figma.com/docs/rest-api/personal-access-tokens/).
+
+Resolve modes:
+
+1. Start with `inheritedFromAncestors`.
+2. Collect entries for the component path and its ancestors.
+3. Merge root → leaf; deeper entries override.
+4. Match name/position; use `nodeId` for duplicates.
+
+If `unresolved` exists, report every item/reason and stop:
+
+- `local collection`: packaged data cannot resolve a file-local collection.
+- `key not in variables JSON` / `mode not in collection`: packaged tokens stale.
+
+## 3. Implement
+
+Inspect actual `jfs-components` exports/types and nearby project examples first.
+
+- Implement one screen family; variants are local component state.
+- Use user-specified fake data, validation, navigation, timing, and persistence.
+- Prefer mapped components; primitives only for necessary layout.
+- Apply modes to the closest represented component/subtree. Preserve parent
+  inheritance and child overrides; never flatten, move, substitute, or omit
+  selected modes.
+- Match content, order, visibility, variants, spacing, and assets; omit hidden
+  layers.
+- Never invent a component, prop, or icon.
+
+Component contracts:
+
+- Titles: reproduce line count with `numberOfLines`/`disableTruncation`.
+- SubPage `AppBar`: trailing actions in a Fragment so action gaps apply.
+- Consent + CTA `ActionFooter`: one column child:
+  `<View style={{ flexGrow: 1, minWidth: 0, gap: 8 }}>`.
+- Multiple IMAGE fills: last fill is visually topmost.
+- Icons: exact registry `ic_*` glyph when available; otherwise exact exported
+  asset. Use a packaged substitute only when it clearly matches.
+
+Run focused type/lint checks.
+
+## 4. Visual and interaction QA
+
+Render on the target platform. Recording-demo boots directly into its host.
+Prefer `npm run simulator`, then capture device screenshots.
+
+For the primary and every materially different variant, compare:
+
+- component size, variant, emphasis, color, spacing, and alignment;
+- text content, wrapping, and truncation;
+- icons/images and visibility;
+- AppBar safe area/actions;
+- scrolling/below-fold content;
+- keyboard/numpad and sticky footer/home-indicator clearance.
+
+Exercise applicable behavior:
+
+- empty/partial/complete inputs and validation boundaries;
+- immutable formatting and disabled/enabled CTA;
+- selection, retry/resend, persistence, transient timing, rapid presses;
+- incoming/outgoing navigation callbacks.
+
+Fix differences and recapture. If render tooling is unavailable, do not claim
+visual completion; report the blocker and exact manual verification.
+
+## Return to orchestrator / completion report
+
+Report briefly:
+
+- files, mode outputs, and assets;
+- effective modes;
+- local states and behavior;
+- navigation callbacks/data contract;
+- checks and edge cases exercised;
+- visual status and blockers.

package/.cursor/commands/D2C.md

@@ -0,0 +1,101 @@
+# D2C — Figma to jfs-components
+
+Build the supplied Figma node with `jfs-components`. The link may represent one
+screen, states of one screen, or a complete flow. **Discover scope before
+implementation.**
+
+## Invariants
+
+- User-stated behavior is authoritative. Figma defines visuals and designed
+  states, not unspecified product logic.
+- Use Figma MCP. Never recreate an unreadable design from assumptions.
+- Use real package exports/props and extracted modes. Stop on unresolved modes.
+- Fake demos stay local unless the user explicitly requests a service.
+- This may be recorded: present a clean first implementation. Never mention
+  prior attempts, cached knowledge, mistakes, or “fixes.” Be concise:
+  discover → clarify → execute → verify.
+
+## 0. Input and placement
+
+Use the Figma URL after `/D2C` or in the latest prompt; ask for it if absent.
+
+On mobile, each root must be <Screen> wrapped in in `SafeAreaView`
+(from `react-native-safe-area-context` when the project already uses it,
+otherwise `react-native`) so notches and home indicators are respected — do not
+rely on the host to add it.
+
+## 1. Discover screen families
+
+On the linked node:
+
+1. Read the Figma design-to-code skill; call `get_design_context` with its
+   required skill logging parameter.
+2. Call `get_screenshot` for the complete overview.
+3. Call `get_metadata` to inventory visible screen-sized frames: IDs, names,
+   hierarchy, dimensions, order, and visibility.
+4. Inspect prototype links, annotations, titles, actions, repeated structure,
+   and spatial order. Never infer flow from left-to-right placement alone.
+
+Group every frame into a **screen family**:
+
+- Same family: same user goal/step, major layout, and data model; differences
+  are state (empty/filled/focused/disabled, selected, loading/success/error,
+  OTP progress/resend/invalid, expanded, toast/keyboard, scroll position).
+- Different family: different goal/step, content model, primary interaction,
+  destination, or substantially different layout.
+- If uncertain, inspect children/prototype links; frame names are weak evidence.
+
+Create one internal `ScreenSpec` per family:
+
+```text
+key + purpose
+primary node ID + exact URL
+variant node IDs/URLs + state meaning
+incoming/outgoing transitions (Back/Skip/Cancel/retry included)f
+input/output/shared data
+user-specified behavior
+material unknowns
+```
+
+Before coding, briefly report the family count and grouped variants.
+
+## 2. Clarify once
+
+Ask one consolidated question set only for material behavior not answered by
+Figma, the prompt, or project conventions:
+
+- validation/formatting/immutable prefixes/lengths;
+- fake operation success/failure and error states;
+- initial/terminal screens and Back/Skip/Cancel destinations;
+- backward-navigation persistence;
+- splash/loading/toast/resend/auto-advance timing;
+- platform-specific behavior.
+
+Default cosmetic details only; never invent product logic.
+
+## 3. Route
+
+### One family
+
+Variants are local state, never separate routes.
+
+1. Read `.cursor/D2C-SCREEN.md`.
+2. Execute it directly for the `ScreenSpec`.
+
+### Two or more families
+
+The linked node is a flow.
+
+1. Resolve shared material unknowns before implementation.
+2. Read `.cursor/D2C-FLOW.md`.
+3. Orchestrate one implementation agent per `ScreenSpec`.
+4. Every screen agent must read and execute `.cursor/D2C-SCREEN.md`.
+5. The orchestrator integrates and verifies the entire transition graph.
+
+If a screen agent finds a material unknown, it stops before editing and reports
+the precise question; the orchestrator asks the user and resumes it.
+
+## Completion
+
+Follow the reporting contract in the loaded reference file(s). Keep the final
+report factual and brief.

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.1.51] - 2026-07-26
+
+- Packages the Cursor D2C playbooks with the npm release: `.cursor/commands/D2C.md`, `.cursor/D2C-FLOW.md`, and `.cursor/D2C-SCREEN.md` (replacing the removed root `D2C.md` entry in `package.json` `files`).
+- D2C command — mobile roots must wrap `<Screen>` in `SafeAreaView` (no longer assumes a recording-demo host provides it).
+
+---
+
+## [0.1.50] - 2026-07-25
+
+- Token resolution pass — remapped unresolved `getVariableByName` refs and bad mode keys against Figma Code Connect / Coin Variables (CardCTA, CategoryCard, Checkbox, CircularProgressBarDoted, DonutChartSummary, ProductMerchandisingCard, ProductOverview, Radio, SavingsGoalSummary, SegmentedControl, SegmentedTrack, Slider, Tooltip, StatusHero, CardFeedback).
+- Coin Variables — repaired broken `nudge/radius` and Badge Semantic Intent System aliases; added `tooltip/radius` and `tooltip/maxWidth`.
+
+---
+
 ## [0.1.48] - 2026-07-23
 
 - `CompareTable` (fixed-width scroll mode) — selection cards pin above the scroll surface (`stickyCards`, default `true`); accordion section titles stick under the cards and replace each other as you scroll (`stickyAccordionTitles`, default `true`); gray table-header sticky is now opt-in (`stickyHeaders` default `false`). Selection cards are square (corner radius forced to `0`).

package/lib/commonjs/components/CardCTA/CardCTA.js

@@ -75,7 +75,8 @@ function CardCTA({
   const radius = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/radius', modes);
   const borderSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/border/size', modes);
   const borderColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/border/color', modes);
-  const leftPaddingH = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/horizontal', modes);
+  const leftPaddingLeft = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/left', modes);
+  const leftPaddingRight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/right', modes);
   const leftPaddingV = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/padding/vertical', modes);
   const leftGap = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/left-wrap/gap', modes);
   const rightPaddingH = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/right-wrap/padding/horizontal', modes);
@@ -221,7 +222,8 @@ function CardCTA({
     flexShrink: 1,
     flexBasis: 0,
     minWidth: 0,
-    paddingHorizontal: leftPaddingH,
+    paddingLeft: leftPaddingLeft,
+    paddingRight: leftPaddingRight,
     paddingVertical: leftPaddingV,
     gap: leftGap,
     alignItems: 'flex-start',
@@ -253,7 +255,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'
   };
@@ -312,7 +314,8 @@ function CardCTA({
   };
   const sipWrapStyle = {
     width: '100%',
-    paddingHorizontal: leftPaddingH,
+    paddingLeft: leftPaddingLeft,
+    paddingRight: leftPaddingRight,
     paddingVertical: leftPaddingV,
     gap: leftGap,
     alignItems: 'flex-start',

package/lib/commonjs/components/CardFeedback/CardFeedback.js

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

package/lib/commonjs/components/CategoryCard/CategoryCard.js

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

package/lib/commonjs/components/Checkbox/Checkbox.js

@@ -107,8 +107,8 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
   const idleStroke = (0, _figmaVariablesResolver.getVariableByName)('checkbox/idle/stroke/color', modes) ?? '#666666';
   const hoverFill = (0, _figmaVariablesResolver.getVariableByName)('checkbox/hover/fill/color', modes) ?? 'rgba(0,0,0,0.1)';
   const hoverStroke = (0, _figmaVariablesResolver.getVariableByName)('checkbox/hover/stroke/color', modes) ?? '#666666';
-  const hoverRing = (0, _figmaVariablesResolver.getVariableByName)('checkbox/hoverRing', modes) ?? 4;
-  const hoverShadow = (0, _figmaVariablesResolver.getVariableByName)('hover/boxShadow', modes) ?? 'rgba(0,0,0,0.1)';
+  const hoverSpread = (0, _figmaVariablesResolver.getVariableByName)('checkbox/hover/spread/effect1', modes) ?? 4;
+  const hoverShadow = (0, _figmaVariablesResolver.getVariableByName)('checkbox/hover/shadow/color', modes) ?? 'rgba(0,0,0,0.1)';
   const selectedFill = (0, _figmaVariablesResolver.getVariableByName)('checkbox/selected/fill/color', modes) ?? '#cea15a';
   const selectedStroke = (0, _figmaVariablesResolver.getVariableByName)('checkbox/selected/stroke/color', modes) ?? '#0d0d0d';
   const selectedMarkColor = (0, _figmaVariablesResolver.getVariableByName)('checkbox/selected/mark/color', modes) ?? '#0f0d0a';
@@ -120,8 +120,6 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
   const disabledActiveBg = (0, _figmaVariablesResolver.getVariableByName)('checkbox/disabledActive/background/color', modes) ?? '#f6d19a';
   const disabledActiveBorder = (0, _figmaVariablesResolver.getVariableByName)('checkbox/disabledActive/border/color', modes) ?? '#f6d19a';
   const disabledActiveMark = (0, _figmaVariablesResolver.getVariableByName)('checkbox/disabledActive/mark/color', modes) ?? '#474d54';
-  const selectedHoverShadow = (0, _figmaVariablesResolver.getVariableByName)('selected/hover/boxShadow', modes) ?? 'rgba(0,0,0,0.1)';
-  const hoverShadowSize = (0, _figmaVariablesResolver.getVariableByName)('hover/boxShadow/size', modes) ?? 4;
   const handlePress = (0, _react.useCallback)(() => {
     if (disabled) return;
     const next = !isChecked;
@@ -166,7 +164,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
         ...base,
         backgroundColor: selectedFill,
         borderColor: selectedStroke,
-        ...(0, _shadow.boxShadow)(`0px 0px 0px ${hoverShadowSize}px ${selectedHoverShadow}`)
+        ...(0, _shadow.boxShadow)(`0px 0px 0px ${hoverSpread}px ${hoverShadow}`)
       };
     }
     if (isChecked) {
@@ -189,7 +187,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox({
         ...base,
         backgroundColor: hoverFill,
         borderColor: hoverStroke,
-        ...(0, _shadow.boxShadow)(`0px 0px 0px ${hoverRing}px ${hoverShadow}`)
+        ...(0, _shadow.boxShadow)(`0px 0px 0px ${hoverSpread}px ${hoverShadow}`)
       };
     }
     return {

package/lib/commonjs/components/CircularProgressBarDoted/CircularProgressBarDoted.js

@@ -87,18 +87,21 @@ function CircularProgressBarDoted({
   const scoreTierWidth = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreTier/width', modes), 116);
   const scoreTrendGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreTrend/gap', modes), 2);
   const scoreTrendHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreTrend/height', modes), 24);
-  const typographyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('Typography/Font Family', modes);
   const labelColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/label/color', modes);
-  const labelFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('Typography/Size/Body/XS', modes), 12);
-  const labelFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('Typography/Font Weight/Body Low (Regular)', modes), '400');
+  const labelFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/label/fontSize', modes), 12);
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/label/fontFamily', modes);
+  const labelLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/label/lineHeight', modes), 15.6);
+  const labelFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/label/fontWeight', modes), '400');
   const scoreColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreLabel/color', modes);
   const scoreFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreLabel/fontSize', modes), 56);
   const scoreFontFamily = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreLabel/fontFamily', modes);
   const scoreLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreLabel/lineHeight', modes), 56);
   const scoreFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreLabel/fontWeight', modes), '900');
   const tierColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/tierLabel/color', modes);
-  const tierFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('Typography/Size/Body/M', modes), 16);
-  const tierFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('Typography/Font Weight/Body High', modes), '700');
+  const tierFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/tierLabel/fontSize', modes), 16);
+  const tierFontFamily = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/tierLabel/fontFamily', modes);
+  const tierLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/tierLabel/lineHeight', modes), 20.8);
+  const tierFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/tierLabel/fontWeight', modes), '700');
   const iconColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/icon/color', modes);
   const iconSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/icon/size', modes), 24);
   const dots = (0, _react.useMemo)(() => Array.from({
@@ -159,10 +162,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 = {
@@ -175,10 +178,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/commonjs/components/DonutChartSummary/DonutChartSummary.js

@@ -92,8 +92,13 @@ function DonutChartSummary({
     ...globalModes,
     ...propModes
   };
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('donutChartSummary/gap', modes) ?? 16;
-  const legendGap = (0, _figmaVariablesResolver.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/commonjs/components/ProductMerchandisingCard/ProductMerchandisingCard.js

@@ -334,7 +334,9 @@ function resolveTokens(modes) {
   const titleColor = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/title/font/color', modes), '#ffffff');
   const titleSize = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/title/fontsize', modes), 14);
   const titleFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/title/fontfamily', modes), 'JioType Var');
-  const titleWeight = asStr((0, _figmaVariablesResolver.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((0, _figmaVariablesResolver.getVariableByName)('typography/body/fontWeight/high', modes), '700');
   const subtitleColor = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/subtitle/font/color', modes), '#c5bcb5');
   const subtitleSize = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/subtitle/fontsize', modes), 12);
   const subtitleFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/subtitle/fontfamily', modes), 'JioType Var');

package/lib/commonjs/components/ProductOverview/ProductOverview.js

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

package/lib/commonjs/components/Radio/Radio.js

@@ -86,7 +86,9 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.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`;
@@ -144,7 +146,6 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)(function Radio
     (0, _figmaVariablesResolver.getVariableByName)('radio/selector/size');
     (0, _figmaVariablesResolver.getVariableByName)('radio/width');
     (0, _figmaVariablesResolver.getVariableByName)('radio/height');
-    (0, _figmaVariablesResolver.getVariableByName)('radio/background/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/hover/background/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/hover/border/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/hover/boxShadow/size');
@@ -158,13 +159,14 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)(function Radio
     (0, _figmaVariablesResolver.getVariableByName)('radio/hoverSelected/shadow/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/hoverSelected/selector/background/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/focus/background/color');
-    (0, _figmaVariablesResolver.getVariableByName)('radio/focus/border/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/focus/border/size');
     (0, _figmaVariablesResolver.getVariableByName)('radio/focus/boxShadow/size');
     (0, _figmaVariablesResolver.getVariableByName)('radio/focus/shadow/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/focusSelected/background/color');
+    (0, _figmaVariablesResolver.getVariableByName)('radio/focusSelected/border/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/focusSelected/selector/background/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/focusSelected/border/size');
+    (0, _figmaVariablesResolver.getVariableByName)('radio/focusSelected/shadow/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/disabled/radio/disabled/border/size');
     (0, _figmaVariablesResolver.getVariableByName)('radio/disabled/background/color');
     (0, _figmaVariablesResolver.getVariableByName)('radio/disabled/border/color');

package/lib/commonjs/components/SavingsGoalSummary/SavingsGoalSummary.js

@@ -129,7 +129,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((0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/value/fontWeight', mergedModes) ?? 900);
-  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/value/color', mergedModes) ?? '#0d0d0f';
+  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('text/appearance/high/color', mergedModes) ?? '#0d0d0f';
 
   // Caption ("Credit usage") typography — `savingsGoalSummary/label/*`
   // (Figma 12 / 400). Only rendered when a `label` is supplied.
@@ -137,7 +137,7 @@ function SavingsGoalSummary({
   const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/label/fontFamily', mergedModes) ?? 'JioType Var';
   const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/label/lineHeight', mergedModes) ?? 16;
   const labelFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/label/fontWeight', mergedModes) ?? 400);
-  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/label/color', mergedModes) ?? '#0d0d0f';
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('text/appearance/medium/color', mergedModes) ?? '#1a1c1f';
   const labelNode = label == null || label === false ? null : typeof label === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
     style: [{
       color: labelColor,

package/lib/commonjs/components/SegmentedControl/SegmentedControl.js

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

package/lib/commonjs/components/SegmentedTrack/SegmentedTrack.js

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

package/lib/commonjs/components/Slider/Slider.js

@@ -391,8 +391,9 @@ function resolveTokens(modes) {
   const tooltipBackground = asStr((0, _figmaVariablesResolver.getVariableByName)('tooltip/background', modes), '#0f0d0a');
   const tooltipPaddingH = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/padding/horizontal', modes), 12);
   const tooltipPaddingV = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/padding/vertical', modes), 8);
-  const tooltipRadius = asNum((0, _figmaVariablesResolver.getVariableByName)('radius', modes), 8);
-  const tooltipMaxWidth = asNum((0, _figmaVariablesResolver.getVariableByName)('maxWidth', modes), 280);
+  // Not yet in Coin Variables export (Figma still binds bare local radius/maxWidth).
+  const tooltipRadius = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/radius', modes), 8);
+  const tooltipMaxWidth = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/maxWidth', modes), 280);
   const tipWidth = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/tipItem/width', modes), 16);
   const tipHeight = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/tipItem/height', modes), 8);
   const tooltipLabelColor = asStr((0, _figmaVariablesResolver.getVariableByName)('tooltip/label/color', modes), '#ffffff');

package/lib/commonjs/components/StatusHero/StatusHero.js

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