jfs-components 0.0.71 → 0.0.72

package/CHANGELOG.md

@@ -4,6 +4,55 @@ 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.0.72] - 2026-05-04
+
+High-level summary (one line per point):
+
+- **`RadioButton` renamed to `Radio`** — naming aligned with the rest of the library; the old `RadioButton` import is preserved as a deprecated alias so consumer code keeps working without changes.
+- **`Carousel` pagination is now fully token-driven** — dot size, active width, and active/inactive colors come from design tokens (`carousel/pagination/indicator/{size,activeWidth,activeColor,inactiveColor}`) instead of hardcoded values, with token names normalized to camelCase.
+- **`Carousel` outer container height is now controlled by a token** — new `carousel/maxHeight` token enforces the Figma-aligned max height of the carousel viewport.
+- **`HoldingsCard` migrated to `Radio`** — internal-only swap, no API change for consumers.
+
+### Changed
+
+- `Carousel.Pagination` now reads `carousel/pagination/indicator/size`, `carousel/pagination/indicator/activeWidth`, `carousel/pagination/indicator/activeColor`, and `carousel/pagination/indicator/inactiveColor` from design tokens. Previous lowercase names (`activecolor`, `inactivecolor`) and hardcoded dot dimensions (6×6 / 16×6) are replaced.
+- `Carousel` outer container respects a new `carousel/maxHeight` token (defaults to `280`) applied as `maxHeight` on the outer view.
+- `HoldingsCard` now imports the new `Radio` component instead of `RadioButton` (no behavioral change).
+
+### Added
+
+- New `Radio` component (`src/components/Radio/Radio.tsx`) with its own stories and MDX docs. Exported from the package barrel as `Radio` / `RadioProps`.
+
+### Deprecated
+
+- `RadioButton` is deprecated. It is kept as a thin re-export of `Radio` for backward compatibility and will be removed in a future major release. Migrate to `import { Radio } from 'jfs-components'`.
+
+---
+
+## [0.0.71] - 2026-05-04
+
+### Added
+
+- **`CardAdvisory`** — new card component with stories and MDX docs.
+- **`CardFinancialCondition`** — new card component with stories and MDX docs.
+- **`CircularProgressBar`** — new circular progress component with stories and MDX docs.
+- **`CircularProgressBarDoted`** — new dotted variant of the circular progress component with stories and MDX docs.
+- **`CircularRating`** — new circular rating display component with stories and MDX docs.
+- **`Gauge`** — new gauge component with stories and MDX docs.
+- **`InstitutionBadge`** — new institution badge component with stories and MDX docs.
+- All new components are exported from the package barrel with their public types.
+
+### Changed
+
+- **`Nudge`** — significant rewrite (props, layout, and token usage refreshed); story file simplified.
+- **`CardCTA`** — expanded API and visual variants; story coverage extended.
+- **`MediaCard`** — minor doc/story refresh; no breaking changes.
+- **`ListGroup`** — small adjustments to internal layout; no API change.
+- Refreshed component token metadata and the icon registry; updated `Coin Variables` design-token JSON.
+- Storybook plumbing: added `.storybook/storybook-test-mock.js` and registered it in `.storybook/main.js` to stabilize Storybook test runs.
+
+---
+
 ## [0.0.70] - 2026-04-23
 
 ### Fixed

package/lib/commonjs/components/CardAdvisory/CardAdvisory.js

@@ -37,8 +37,8 @@ const toFontWeight = (value, fallback) => {
 function resolveCardAdvisoryTokens(modes) {
   const width = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/width', modes), 360);
   const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/gap', modes), 16);
-  const paddingHorizontal = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/padding/horizontal', modes), 16);
-  const paddingVertical = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/padding/vertical', modes), 12);
+  const paddingHorizontal = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/padding/horizontal', modes), 0);
+  const paddingVertical = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/padding/vertical', modes), 0);
   const radius = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/radius', modes), 0);
   const background = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/background', modes) || '#ffffff';
   const mainContentGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/mainContent/gap', modes), 16);

package/lib/commonjs/components/CardFinancialCondition/CardFinancialCondition.js

@@ -0,0 +1,213 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _CircularProgressBar = _interopRequireDefault(require("../CircularProgressBar/CircularProgressBar"));
+var _Divider = _interopRequireDefault(require("../Divider/Divider"));
+var _Nudge = _interopRequireDefault(require("../Nudge/Nudge"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') {
+    return String(value);
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  return fallback;
+};
+function resolveCardFinancialConditionTokens(modes) {
+  const background = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/background', modes) || '#ffffff';
+  const radius = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/radius', modes), 16);
+  const paddingH = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/padding/horizontal', modes), 16);
+  const paddingV = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/padding/vertical', modes), 16);
+  const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/gap', modes), 8);
+  const headerGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/header/gap', modes), 16);
+  const textContentGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/textContent/gap', modes), 8);
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/color', modes) || '#0c0d10';
+  const titleFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/fontSize', modes), 16);
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/fontFamily', modes) || 'JioType Var';
+  const titleLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/lineHeight', modes), 18);
+  const titleFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/title/fontWeight', modes), '700');
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/color', modes) || '#0c0d10';
+  const bodyFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/fontSize', modes), 14);
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/fontFamily', modes) || 'JioType Var';
+  const bodyLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/lineHeight', modes), 17);
+  const bodyFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('financialConditionCard/body/fontWeight', modes), '400');
+  const nudgeBodyColor = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/color', modes) || '#1a1c1f';
+  const nudgeBodyFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontSize', modes), 12);
+  const nudgeBodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontFamily', modes) || 'JioType Var';
+  const nudgeBodyLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('nudge/body/lineHeight', modes), 16);
+  const nudgeBodyFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontWeight', modes), '500');
+  return {
+    containerStyle: {
+      alignItems: 'flex-start',
+      backgroundColor: background,
+      borderRadius: radius,
+      gap,
+      justifyContent: 'center',
+      overflow: 'hidden',
+      paddingHorizontal: paddingH,
+      paddingVertical: paddingV
+    },
+    headerStyle: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: headerGap,
+      width: '100%'
+    },
+    textContentStyle: {
+      alignItems: 'flex-start',
+      flex: 1,
+      gap: textContentGap,
+      minWidth: 1
+    },
+    titleStyle: {
+      color: titleColor,
+      fontFamily: titleFontFamily,
+      fontSize: titleFontSize,
+      fontWeight: titleFontWeight,
+      lineHeight: titleLineHeight
+    },
+    bodyStyle: {
+      color: bodyColor,
+      fontFamily: bodyFontFamily,
+      fontSize: bodyFontSize,
+      fontWeight: bodyFontWeight,
+      lineHeight: bodyLineHeight
+    },
+    nudgeBodyStyle: {
+      color: nudgeBodyColor,
+      fontFamily: nudgeBodyFontFamily,
+      fontSize: nudgeBodyFontSize,
+      fontWeight: nudgeBodyFontWeight,
+      lineHeight: nudgeBodyLineHeight
+    },
+    buttonWrapStyle: {
+      alignSelf: 'stretch',
+      alignItems: 'flex-start'
+    }
+  };
+}
+function CardFinancialCondition({
+  title = 'Protection',
+  body = 'Check your coverage and gaps',
+  value = 0,
+  progressState = 'Inactive',
+  valueLabel,
+  showNudge = true,
+  nudgeBody = 'There may be gaps in your health or life cover\nAdd coverage to stay financially secure',
+  showDivider = true,
+  showButton = true,
+  buttonLabel = 'View Details',
+  onPressButton,
+  progressSlot,
+  nudgeSlot,
+  buttonSlot,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  headerStyle,
+  titleStyle,
+  bodyStyle,
+  accessibilityLabel,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const tokens = (0, _react.useMemo)(() => resolveCardFinancialConditionTokens(modes), [modes]);
+
+  // Match Figma: the action button is the primary call-to-action and uses the
+  // Secondary brand (purple) regardless of the card's overall AppearanceBrand,
+  // while Nudge / CircularProgressBar still follow the user-supplied modes.
+  const buttonModes = (0, _react.useMemo)(() => ({
+    ...modes,
+    AppearanceBrand: 'Secondary'
+  }), [modes]);
+  const processedProgressSlot = (0, _react.useMemo)(() => {
+    if (!progressSlot) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(progressSlot), modes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [progressSlot, modes]);
+  const processedNudgeSlot = (0, _react.useMemo)(() => {
+    if (!nudgeSlot) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(nudgeSlot), modes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [nudgeSlot, modes]);
+  const processedButtonSlot = (0, _react.useMemo)(() => {
+    if (!buttonSlot) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(buttonSlot), buttonModes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [buttonSlot, buttonModes]);
+  const defaultAccessibilityLabel = accessibilityLabel ?? `${title}. ${body}.`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityLabel: defaultAccessibilityLabel,
+    style: [tokens.containerStyle, style],
+    ...rest,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [tokens.headerStyle, headerStyle],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: tokens.textContentStyle,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [tokens.titleStyle, titleStyle],
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [tokens.bodyStyle, bodyStyle],
+          children: body
+        })]
+      }), processedProgressSlot || /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgressBar.default, {
+        state: progressState,
+        value: value,
+        modes: modes,
+        ...(valueLabel ? {
+          valueLabel
+        } : {})
+      })]
+    }), showNudge ? processedNudgeSlot || /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nudge.default, {
+      type: "inline-compact",
+      modes: modes,
+      style: {
+        width: '100%'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: tokens.nudgeBodyStyle,
+        children: nudgeBody
+      })
+    }) : null, showDivider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+      modes: modes
+    }) : null, showButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: tokens.buttonWrapStyle,
+      children: processedButtonSlot || /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        label: buttonLabel,
+        modes: buttonModes,
+        ...(onPressButton ? {
+          onPress: onPressButton
+        } : {})
+      })
+    }) : null]
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(CardFinancialCondition);

package/lib/commonjs/components/Carousel/Carousel.js

@@ -51,6 +51,8 @@ function Carousel({
   const gap = gapProp ?? tokenGap;
   const containerPaddingH = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/padding/horizontal', modes) || '0');
   const containerPaddingV = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/padding/vertical', modes) || '0');
+  // Outer container max height per Figma (`carousel/maxHeight`).
+  const maxHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/maxHeight', modes) || '280');
   // Spacing between the cards row and the pagination dots uses `carousel/gap`.
   const paginationOffset = gap;
 
@@ -162,7 +164,8 @@ function Carousel({
 
   // ---- Render ----
   const outerStyle = {
-    paddingVertical: containerPaddingV
+    paddingVertical: containerPaddingV,
+    maxHeight
   };
   const contentContainerStyle = {
     paddingHorizontal: containerPaddingH * 2,
@@ -270,13 +273,12 @@ function Pagination({
   const modes = propModes || ctxModes || {};
 
   // Token resolution for dots — matches Figma tokens
-  // (carousel/pagination/gap, carousel/pagination/indicator/{activecolor,inactivecolor,radius}).
-  // Dot dimensions are fixed per Figma spec: inactive 6x6, active 16x6.
-  const dotSize = 6;
-  const dotActiveWidth = 16;
+  // (carousel/pagination/gap, carousel/pagination/indicator/{activeColor,inactiveColor,radius,size,activeWidth}).
+  const dotSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/size', modes) || '6');
+  const dotActiveWidth = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/activeWidth', modes) || '16');
   const dotGap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/gap', modes) || '4');
-  const dotColor = (0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/inactivecolor', modes) || 'rgba(0,0,0,0.3)';
-  const dotActiveColor = (0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/activecolor', modes) || '#170d0a';
+  const dotColor = (0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/inactiveColor', modes) || 'rgba(0,0,0,0.3)';
+  const dotActiveColor = (0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/activeColor', modes) || '#170d0a';
   const dotRadius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/pagination/indicator/radius', modes) || '9999');
   const containerStyle = {
     flexDirection: 'row',

package/lib/commonjs/components/HoldingsCard/HoldingsCard.js

@@ -7,7 +7,7 @@ exports.default = HoldingsCard;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
-var _RadioButton = _interopRequireDefault(require("../RadioButton/RadioButton"));
+var _Radio = _interopRequireDefault(require("../Radio/Radio"));
 var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -128,7 +128,7 @@ function HoldingsCard({
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         pointerEvents: "none",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.default, {
           selected: selected,
           disabled: disabled,
           modes: modes

package/lib/commonjs/components/InstitutionBadge/InstitutionBadge.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _MediaSource = _interopRequireDefault(require("../../utils/MediaSource"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Default avatar asset (shared with the Avatar component) so that
+// InstitutionBadge has a sensible visual fallback when no `source` is
+// provided in stories or playgrounds.
+const DEFAULT_AVATAR_IMAGE = require('../Avatar/31595e70c4181263f9971590224b12934b280c9b.png');
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') {
+    return String(value);
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  return fallback;
+};
+function resolveInstitutionBadgeTokens(modes) {
+  const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/gap', modes), 8);
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('institutionBadge/foreground', modes) || '#080d1a';
+  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/fontSize', modes), 14);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('institutionBadge/fontFamily', modes) || 'JioType Var';
+  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/lineHeight', modes), 18);
+  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/fontWeight', modes), '500');
+
+  // Avatar wrapper styled from shared `avatar/*` tokens so the badge stays
+  // visually consistent with other Avatar-bearing components.
+  const avatarSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('avatar/size', modes), 36);
+  const avatarRadiusRaw = toNumber((0, _figmaVariablesResolver.getVariableByName)('avatar/radius', modes), 9999);
+  // 9999 is the design-token sentinel for "perfect circle".
+  const avatarRadius = avatarRadiusRaw === 9999 ? avatarSize / 2 : avatarRadiusRaw;
+  const avatarBorderColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/color', modes) || 'rgba(255,255,255,0)';
+  const avatarBorderSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('avatar/border/size', modes), 1);
+  return {
+    containerStyle: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap
+    },
+    avatarStyle: {
+      width: avatarSize,
+      height: avatarSize,
+      borderRadius: avatarRadius,
+      borderWidth: avatarBorderSize,
+      borderColor: avatarBorderColor,
+      overflow: 'hidden'
+    },
+    avatarSize,
+    labelStyle: {
+      color: foreground,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight
+    }
+  };
+}
+
+// Default Avatar Size = M (36px in tokens) — matches the Figma badge. Callers
+// can override via `modes` if needed.
+const DEFAULT_AVATAR_MODE = 'M';
+function InstitutionBadge({
+  label = 'State Bank of India',
+  source,
+  avatarSlot,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const avatarModes = (0, _react.useMemo)(() => ({
+    'Avatar Size': DEFAULT_AVATAR_MODE,
+    ...modes
+  }), [modes]);
+  const tokens = (0, _react.useMemo)(() => resolveInstitutionBadgeTokens(avatarModes), [avatarModes]);
+  const processedAvatarSlot = (0, _react.useMemo)(() => {
+    if (!avatarSlot) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(avatarSlot), avatarModes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [avatarSlot, avatarModes]);
+  const resolvedSource = source ?? DEFAULT_AVATAR_IMAGE;
+  const defaultAccessibilityLabel = accessibilityLabel ?? label;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityLabel: defaultAccessibilityLabel,
+    style: [tokens.containerStyle, style],
+    ...rest,
+    children: [processedAvatarSlot || /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: tokens.avatarStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaSource.default, {
+        source: resolvedSource,
+        size: tokens.avatarSize,
+        resizeMode: "cover",
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [tokens.labelStyle, labelStyle],
+      numberOfLines: 1,
+      children: label
+    })]
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(InstitutionBadge);

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

@@ -0,0 +1,194 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Radio = Radio;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+// ---------------------------------------------------------------------------
+// Radio
+// ---------------------------------------------------------------------------
+
+function Radio({
+  selected = false,
+  disabled = false,
+  onPress,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  testID
+}) {
+  // ---- Refs & State ----
+  const [hovered, setHovered] = (0, _react.useState)(false);
+  const [focused, setFocused] = (0, _react.useState)(false);
+  const [pressed, setPressed] = (0, _react.useState)(false);
+
+  // ---- Dimensions ----
+  const widthStr = (0, _figmaVariablesResolver.getVariableByName)('radio/width', modes) || '18';
+  const heightStr = (0, _figmaVariablesResolver.getVariableByName)('radio/height', modes) || '18';
+  const selectorSizeStr = (0, _figmaVariablesResolver.getVariableByName)('radio/selector/size', modes) || '10';
+  const width = parseFloat(widthStr?.toString() || '18');
+  const height = parseFloat(heightStr?.toString() || '18');
+  const selectorSize = parseFloat(selectorSizeStr?.toString() || '10');
+
+  // ---- State Logic ----
+  // Priority: Disabled -> Focused -> Hover/Pressed -> Idle
+  // Note: Design treats Active (Pressed) similar to Selected for some styles, 
+  // but usually in Radios, Pressed is a transient state.
+  // We will map:
+  // - Disabled -> 'disabled'
+  // - Focused -> 'focus'
+  // - Hovered -> 'hover'
+  // - Idle -> 'idle'
+
+  // We handle `selected` as a separate dimension derived from state.
+
+  let visualState = 'idle';
+  if (disabled) {
+    visualState = 'disabled';
+  } else if (focused) {
+    visualState = 'focus';
+  } else if (hovered || pressed) {
+    visualState = 'hover';
+  }
+
+  // Construct token paths based on state + selected
+  let prefix = `radio/${visualState}`;
+  if (visualState === 'idle' && selected) {
+    prefix = `radio/selected`;
+  } else if (selected) {
+    prefix = `radio/${visualState}Selected`;
+  }
+
+  // ---- Colors & Border ----
+
+  const resolveColor = (path, fallback) => {
+    return (0, _figmaVariablesResolver.getVariableByName)(path, modes) || fallback;
+  };
+
+  // Background Color
+  let bgColorVar = `${prefix}/background/color`;
+  // Fix for disabledSelected weirdness if needed
+  if (visualState === 'disabled' && selected) {
+    // Check specific path from dump: `radio/disabledSelected/background`
+    if (!(0, _figmaVariablesResolver.getVariableByName)(`${prefix}/background/color`, modes)) {
+      bgColorVar = `${prefix}/background`;
+    }
+  }
+
+  // Border Color
+  let borderColorVar = `${prefix}/border/color`;
+
+  // Border Width
+  let borderWidthVar = `${prefix}/border/size`;
+  // Fix for huge path: `radio/disabled/radio/disabled/border/size`
+  if (visualState === 'disabled' && !selected) {
+    if ((0, _figmaVariablesResolver.getVariableByName)('radio/disabled/radio/disabled/border/size', modes)) {
+      borderWidthVar = 'radio/disabled/radio/disabled/border/size';
+    }
+  }
+
+  // Selector Color
+  let selectorBgVar = `${prefix}/selector/background/color`;
+  if (!selected) {
+    selectorBgVar = 'transparent';
+  }
+
+  // Shadows (Glow)
+  let shadowSizeVar = `${prefix}/boxShadow/size`;
+  let shadowColorVar = `${prefix}/shadow/color`;
+
+  // Resolve Values
+  const backgroundColor = resolveColor(bgColorVar, 'transparent');
+  const borderColor = resolveColor(borderColorVar, 'transparent');
+  const borderWidth = parseFloat((0, _figmaVariablesResolver.getVariableByName)(borderWidthVar, modes)?.toString() || '1');
+  const selectorColor = resolveColor(selectorBgVar, 'transparent');
+  const shadowSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)(shadowSizeVar, modes)?.toString() || '0');
+  const shadowColor = resolveColor(shadowColorVar, 'transparent');
+
+  // Styles
+  const containerStyle = {
+    width,
+    height,
+    borderRadius: width / 2,
+    // 9999px -> circle
+    borderWidth,
+    borderColor,
+    backgroundColor,
+    justifyContent: 'center',
+    alignItems: 'center',
+    // Web shadow (ring)
+    ...(_reactNative.Platform.OS === 'web' && shadowSize > 0 ? {
+      boxShadow: `0px 0px 0px ${shadowSize}px ${shadowColor}`
+    } : {})
+  };
+  const selectorStyle = {
+    width: selectorSize,
+    height: selectorSize,
+    borderRadius: selectorSize / 2,
+    backgroundColor: selectorColor
+  };
+
+  // Dummy block for token extraction (static analysis)
+  if (false) {
+    (0, _figmaVariablesResolver.getVariableByName)('radio/idle/background/color');
+    (0, _figmaVariablesResolver.getVariableByName)('radio/idle/border/color');
+    (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');
+    (0, _figmaVariablesResolver.getVariableByName)('radio/hover/shadow/color');
+    (0, _figmaVariablesResolver.getVariableByName)('radio/selected/background/color');
+    (0, _figmaVariablesResolver.getVariableByName)('radio/selected/border/color');
+    (0, _figmaVariablesResolver.getVariableByName)('radio/selected/selector/background/color');
+    (0, _figmaVariablesResolver.getVariableByName)('radio/hoverSelected/background/color');
+    (0, _figmaVariablesResolver.getVariableByName)('radio/hoverSelected/border/color');
+    (0, _figmaVariablesResolver.getVariableByName)('radio/hoverSelected/boxShadow/size');
+    (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/selector/background/color');
+    (0, _figmaVariablesResolver.getVariableByName)('radio/focusSelected/border/size');
+    (0, _figmaVariablesResolver.getVariableByName)('radio/disabled/radio/disabled/border/size');
+    (0, _figmaVariablesResolver.getVariableByName)('radio/disabled/background/color');
+    (0, _figmaVariablesResolver.getVariableByName)('radio/disabled/border/color');
+    (0, _figmaVariablesResolver.getVariableByName)('radio/disabledSelected/selector/background/color');
+    (0, _figmaVariablesResolver.getVariableByName)('radio/disabledSelected/background');
+    (0, _figmaVariablesResolver.getVariableByName)('radio/disabledSelected/border/color');
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    testID: testID,
+    disabled: disabled,
+    onPress: onPress,
+    onHoverIn: () => setHovered(true),
+    onHoverOut: () => setHovered(false),
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false),
+    onPressIn: () => setPressed(true),
+    onPressOut: () => setPressed(false),
+    style: ({
+      pressed: isPressed
+    }) => [containerStyle, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: selectorStyle
+    })
+  });
+}
+var _default = exports.default = Radio;