jfs-components 0.0.72 → 0.0.74

package/lib/commonjs/components/CheckboxItem/CheckboxItem.js

@@ -0,0 +1,140 @@
+"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 _reactUtils = require("../../utils/react-utils");
+var _Checkbox = _interopRequireDefault(require("../Checkbox/Checkbox"));
+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); }
+/**
+ * CheckboxItem composes a `Checkbox`, a label and an optional `endSlot` into a
+ * single horizontal pressable row. Pressing anywhere on the row (outside of the
+ * `endSlot`) toggles the checkbox, mirroring the typical native form pattern.
+ *
+ * Use the `control` prop to swap the checkbox between the leading (left, default)
+ * and trailing (right) edge of the row. The `endSlot` flips to the opposite edge.
+ *
+ * Mirrors the Figma "Checkbox Item" component and uses the `checkboxItem/*`
+ * design tokens for typography and spacing.
+ *
+ * @component
+ * @param {CheckboxItemProps} props
+ *
+ * @example
+ * ```tsx
+ * const [checked, setChecked] = useState(false)
+ *
+ * <CheckboxItem
+ *   label="Fixed deposit • 0245"
+ *   checked={checked}
+ *   onValueChange={setChecked}
+ *   control="leading"
+ *   modes={{ 'Color Mode': 'Light' }}
+ * />
+ * ```
+ */
+function CheckboxItem({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onValueChange,
+  disabled = false,
+  label = 'Fixed deposit • 0245',
+  control = 'leading',
+  endSlot,
+  endSlotWidth = 80,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel
+}) {
+  const isTrailing = control === 'trailing';
+  const isControlled = controlledChecked !== undefined;
+  const [internalChecked, setInternalChecked] = (0, _react.useState)(defaultChecked);
+  const isChecked = isControlled ? controlledChecked : internalChecked;
+  const handleToggle = (0, _react.useCallback)(() => {
+    if (disabled) return;
+    const next = !isChecked;
+    if (!isControlled) {
+      setInternalChecked(next);
+    }
+    onValueChange?.(next);
+  }, [disabled, isChecked, isControlled, onValueChange]);
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/gap', modes) ?? 8;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/padding/horizontal', modes) ?? 0;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/padding/vertical', modes) ?? 0;
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/foreground', modes) ?? '#1a1c1f';
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/label/fontFamily', modes) ?? 'JioType Var';
+  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/label/fontSize', modes) ?? 14;
+  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/label/lineHeight', modes) ?? 19;
+  const labelFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/label/fontWeight', modes) ?? 400;
+  const labelFontWeight = String(labelFontWeightRaw);
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    width: '100%'
+  };
+  const resolvedLabelStyle = {
+    flex: 1,
+    minWidth: 0,
+    color: labelColor,
+    fontFamily: labelFontFamily,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: labelFontWeight
+  };
+  const a11yLabel = accessibilityLabel ?? (typeof label === 'string' ? label : undefined);
+  const checkboxNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+    checked: isChecked,
+    disabled: disabled,
+    onValueChange: handleToggle,
+    modes: modes,
+    ...(a11yLabel !== undefined ? {
+      accessibilityLabel: a11yLabel
+    } : {})
+  });
+  const labelNode = label != null && label !== false ? typeof label === 'string' || typeof label === 'number' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [resolvedLabelStyle, labelStyle],
+    selectable: false,
+    children: label
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      flex: 1,
+      minWidth: 0
+    },
+    children: label
+  }) : null;
+  const endSlotNode = endSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      width: endSlotWidth,
+      flexShrink: 0,
+      alignItems: 'stretch'
+    },
+    children: (0, _reactUtils.cloneChildrenWithModes)(endSlot, modes)
+  }) : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    style: [containerStyle, style],
+    onPress: handleToggle,
+    disabled: disabled,
+    accessibilityRole: "checkbox",
+    accessibilityState: {
+      checked: isChecked,
+      disabled
+    },
+    accessibilityLabel: a11yLabel,
+    children: isTrailing ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [endSlotNode, labelNode, checkboxNode]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [checkboxNode, labelNode, endSlotNode]
+    })
+  });
+}
+var _default = exports.default = CheckboxItem;

package/lib/commonjs/components/CircularProgressBar/CircularProgressBar.js

@@ -43,11 +43,13 @@ function CircularProgressBar({
   value = 70,
   state = 'Inactive',
   valueLabel,
+  supportText,
   modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   trackStyle,
   progressStyle,
   valueStyle,
+  supportTextStyle,
   accessibilityLabel,
   ...rest
 }) {
@@ -58,6 +60,17 @@ function CircularProgressBar({
     ...globalModes,
     ...propModes
   };
+  // The Figma `circularProgressBar/track/color` variable aliases to the same
+  // chain as `progress/color`, so user-selected Brand modes collapse the
+  // track and progress to a single hue. The Figma source of truth always
+  // renders the track as a neutral gray, so we force Neutral/Medium when
+  // resolving the track color while keeping the user modes for everything
+  // else.
+  const trackModes = {
+    ...modes,
+    'AppearanceBrand': 'Neutral',
+    'Emphasis': 'Medium'
+  };
   const isActive = state === true || state === 'Active';
   const normalizedValue = clamp(value, 0, 100);
   const size = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/size', modes), 60);
@@ -65,15 +78,18 @@ function CircularProgressBar({
   const radius = Math.max(0, (size - strokeWidth) / 2);
   const center = size / 2;
   const circumference = 2 * Math.PI * radius;
-  const trackColor = getStrokeColor(trackStyle, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/track/color', modes) || '#ebebed');
+  const trackColor = getStrokeColor(trackStyle, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/track/color', trackModes) || '#ebebed');
   const progressColor = getStrokeColor(progressStyle, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/progress/color', modes) || '#25ab21');
   const iconColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/icon/color', modes) || '#666666';
   const iconSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/icon/size', modes), 24);
   const foreground = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/foreground', modes) || '#0d0d0f';
-  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/fontSize', modes), 18);
+  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/value/fontSize', modes), 18);
   const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/fontFamily', modes) || 'JioType Var';
-  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/lineHeight', modes), 21);
-  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/fontWeight', modes), '700');
+  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/value/lineHeight', modes), 21);
+  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/value/fontWeight', modes), '700');
+  const supportFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/supportText/fontSize', modes), 11);
+  const supportLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/supportText/lineHeight', modes), 13);
+  const supportFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/supportText/fontWeight', modes), '500');
   const computedContainerStyle = {
     alignItems: 'center',
     height: size,
@@ -81,13 +97,34 @@ function CircularProgressBar({
     position: 'relative',
     width: size
   };
+
+  // The text stack (support text + value) is centered inside the ring using
+  // an absolutely-positioned column. Keeping the wrapper absolute (rather
+  // than the individual texts, as in earlier versions) lets multi-line stacks
+  // render correctly without sub-pixel misalignment.
+  const textStackStyle = {
+    alignItems: 'center',
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0
+  };
   const computedValueStyle = {
     color: foreground,
     fontFamily,
     fontSize,
     fontWeight,
     lineHeight,
-    position: 'absolute',
+    textAlign: 'center'
+  };
+  const computedSupportTextStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize: supportFontSize,
+    fontWeight: supportFontWeight,
+    lineHeight: supportLineHeight,
     textAlign: 'center'
   };
   const iconStyle = {
@@ -96,7 +133,8 @@ function CircularProgressBar({
     top: (size - iconSize) / 2
   };
   const displayValue = valueLabel ?? String(Math.round(normalizedValue));
-  const defaultAccessibilityLabel = accessibilityLabel ?? (isActive ? `${displayValue} out of 100` : 'Inactive progress');
+  const hasSupportText = typeof supportText === 'string' && supportText.length > 0;
+  const defaultAccessibilityLabel = accessibilityLabel ?? (isActive ? hasSupportText ? `${supportText}, ${displayValue} out of 100` : `${displayValue} out of 100` : 'Inactive progress');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     accessibilityRole: "progressbar",
     accessibilityLabel: defaultAccessibilityLabel,
@@ -132,9 +170,18 @@ function CircularProgressBar({
         originX: center,
         originY: center
       }) : null]
-    }), isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [computedValueStyle, valueStyle],
-      children: displayValue
+    }), isActive ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: textStackStyle,
+      pointerEvents: "none",
+      children: [hasSupportText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [computedSupportTextStyle, supportTextStyle],
+        numberOfLines: 1,
+        children: supportText
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [computedValueStyle, valueStyle],
+        numberOfLines: 1,
+        children: displayValue
+      })]
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMinus.IconMinus, {
       width: iconSize,
       height: iconSize,

package/lib/commonjs/components/CoverageBarComparison/CoverageBarComparison.js

@@ -0,0 +1,272 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _MetricLegendItem = _interopRequireDefault(require("../MetricLegendItem/MetricLegendItem"));
+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); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * One entry in the {@link CoverageBarComparisonProps.bars} array.
+ *
+ * Each entry carries **both** the bar's data and its legend label, so the
+ * number of bars is intrinsically equal to the number of legend items.
+ * There is no separate `legends` prop — that is by design.
+ */
+
+/**
+ * Default per-index `Emphasis / DataViz` modes applied when the caller does
+ * not provide its own override. Ascends Low → Medium → High so the natural
+ * "Current vs Recommended" two-bar story matches the Figma reference (left
+ * = lighter / Low, right = darker / High). Cycles for >3 bars.
+ */
+const DEFAULT_EMPHASIS_CYCLE = ['Low', 'Medium', 'High'];
+function defaultEmphasisFor(index, total) {
+  if (total <= 1) {
+    return 'High';
+  }
+  if (total === 2) {
+    return index === 0 ? 'Low' : 'High';
+  }
+  return DEFAULT_EMPHASIS_CYCLE[index % DEFAULT_EMPHASIS_CYCLE.length];
+}
+const DEFAULT_BARS = [{
+  value: 40,
+  label: '₹1L (40%)',
+  legend: 'Current coverage'
+}, {
+  value: 100,
+  label: '₹2.5L (100%)',
+  legend: 'Recommended coverage'
+}];
+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;
+};
+/**
+ * Bar shape rendered with `react-native-svg`. The wrapper measures its width
+ * via `onLayout` so the SVG can use concrete dimensions (RN SVG does not
+ * resolve percentage shape attributes when the parent SVG itself has a
+ * percentage `width`).
+ */
+function BarShape({
+  height,
+  color,
+  radius
+}) {
+  const [width, setWidth] = _react.default.useState(0);
+  const handleLayout = _react.default.useCallback(event => {
+    const next = event.nativeEvent.layout.width;
+    setWidth(prev => prev === next ? prev : next);
+  }, []);
+  if (height <= 0) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      onLayout: handleLayout,
+      style: {
+        width: '100%',
+        height: 0
+      }
+    });
+  }
+  const safeRadius = Math.max(0, Math.min(radius, width / 2, height / 2));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    onLayout: handleLayout,
+    style: {
+      width: '100%',
+      height,
+      minWidth: 1
+    },
+    children: width > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+      width: width,
+      height: height,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+        x: 0,
+        y: 0,
+        width: width,
+        height: height,
+        rx: safeRadius,
+        ry: safeRadius,
+        fill: color
+      })
+    }) : null
+  });
+}
+
+/**
+ * `CoverageBarComparison` renders a small vertical-bar chart that compares
+ * 2+ values side by side, with a legend row directly below where each item
+ * is intrinsically tied to one bar.
+ *
+ * Cohesiveness guarantees:
+ * - The legend row is **derived** from the same `bars` prop, so the count
+ *   and order can never desynchronise from the chart.
+ * - Each bar's color, its tokenized `Emphasis / DataViz` mode and its
+ *   legend indicator dot are the same value.
+ *
+ * Bars are drawn with `react-native-svg` (`<Rect>` with `rx`), and the
+ * fonts/spacing/colors are sourced from the Figma `valueBar/*` and
+ * `coverageBarComparison/*` tokens.
+ *
+ * @component
+ */
+function CoverageBarComparison({
+  bars = DEFAULT_BARS,
+  max,
+  height = 100,
+  legendGap = 12,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  chartStyle,
+  legendStyle,
+  labelStyle,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = _react.default.useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const wrapGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('coverageBarComparison/wrap/gap', modes), 6);
+  const valueBarGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('valueBar/gap', modes), 4);
+  const barRadius = toNumber((0, _figmaVariablesResolver.getVariableByName)('valueBar/bar/radius', modes), 10);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('valueBar/fontFamily', modes) ?? 'JioType Var';
+  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('valueBar/fontSize', modes), 12);
+  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('valueBar/lineHeight', modes), 16);
+  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('valueBar/fontWeight', modes), '700');
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('valueBar/foreground', modes) ?? '#000000';
+  const labelHeight = lineHeight;
+  const barAreaHeight = Math.max(0, height - labelHeight - valueBarGap);
+  const total = bars.length;
+  const computedMax = max ?? bars.reduce((acc, bar) => Math.max(acc, bar.value), 0);
+  const safeMax = computedMax > 0 ? computedMax : 1;
+  const resolvedBars = _react.default.useMemo(() => bars.map((bar, index) => {
+    const barModes = {
+      ...modes,
+      'Emphasis / DataViz': defaultEmphasisFor(index, total),
+      ...(bar.modes || {})
+    };
+    const ratio = Math.max(0, Math.min(1, bar.value / safeMax));
+    const tokenColor = (0, _figmaVariablesResolver.getVariableByName)('valueBar/bar/background', barModes) ?? '#c9b7ff';
+    const bgColor = bar.color ?? tokenColor;
+    return {
+      original: bar,
+      index,
+      barModes,
+      ratio,
+      bgColor
+    };
+  }), [bars, modes, safeMax, total]);
+  const computedLabelStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    textAlign: 'center'
+  };
+  const defaultAccessibilityLabel = accessibilityLabel ?? `Comparison of ${total} bar${total === 1 ? '' : 's'}: ` + bars.map((bar, i) => {
+    const legend = typeof bar.legend === 'string' ? bar.legend : `bar ${i + 1}`;
+    return `${legend} ${bar.value}`;
+  }).join(', ');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityLabel: defaultAccessibilityLabel,
+    style: [{
+      width: '100%'
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      accessibilityRole: "image",
+      style: [{
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        height,
+        gap: wrapGap,
+        width: '100%'
+      }, chartStyle],
+      children: resolvedBars.map(({
+        original,
+        index,
+        ratio,
+        bgColor
+      }) => {
+        const barHeightPx = Math.max(0, barAreaHeight * ratio);
+        const valueBarTotalHeight = labelHeight + valueBarGap + barHeightPx;
+        const hasLabel = original.label !== undefined && original.label !== null && original.label !== false;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          accessibilityLabel: original.accessibilityLabel,
+          style: {
+            flex: 1,
+            flexDirection: 'column',
+            alignItems: 'stretch',
+            justifyContent: 'flex-end',
+            height: valueBarTotalHeight,
+            gap: valueBarGap,
+            minWidth: 1
+          },
+          children: [hasLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            numberOfLines: 1,
+            style: [computedLabelStyle, labelStyle],
+            children: original.label
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(BarShape, {
+            height: barHeightPx,
+            color: bgColor,
+            radius: barRadius
+          })]
+        }, original.key ?? `bar-${index}`);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [{
+        marginTop: legendGap,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%'
+      }, legendStyle],
+      children: resolvedBars.map(({
+        original,
+        index,
+        barModes,
+        bgColor
+      }) => {
+        const indicatorOverride = original.color ? bgColor : undefined;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MetricLegendItem.default, {
+          label: original.legend,
+          value: original.legendValue,
+          modes: barModes,
+          ...(indicatorOverride !== undefined ? {
+            indicatorColor: indicatorOverride
+          } : {}),
+          style: {
+            flex: 1,
+            minWidth: 0
+          }
+        }, original.key ?? `legend-${index}`);
+      })
+    })]
+  });
+}
+var _default = exports.default = CoverageBarComparison;

package/lib/commonjs/components/CoverageRing/CoverageRing.js

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(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 _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+
+// The Figma "Coverage Ring" pairs a `circularProgressBar Size: M` ring with a
+// `Button / Size: S` Secondary button. Locking these in as component defaults
+// keeps the visual identical to the Figma reference when the caller supplies
+// only their own brand/theme modes — caller modes are still merged on top so
+// any of these can be overridden per-instance.
+const COMPONENT_DEFAULT_MODES = Object.freeze({
+  'circularProgressBar Size': 'M',
+  'Button / Size': 'S'
+});
+
+// Match the Figma source: regardless of the overall AppearanceBrand/Emphasis
+// the caller picks (used to colour the ring), the Coverage Ring CTA renders
+// with the Secondary brand at Medium emphasis — which resolves to the
+// pale-lavender background (`#dbcfff`) + deep-purple foreground (`#5d00b5`)
+// shown in Figma. Mirrors the pattern used by `CardFinancialCondition.tsx`.
+const BUTTON_FORCED_BRAND = Object.freeze({
+  AppearanceBrand: 'Secondary',
+  Emphasis: 'Medium'
+});
+
+/**
+ * `CoverageRing` renders a single-purpose insight: how many items out of a
+ * total have been covered (e.g. "4 of 7 benefits availed"), paired with a
+ * call-to-action button below the ring.
+ *
+ * It composes the existing {@link CircularProgressBar} (in its `M` size so
+ * there is room for a caption + value inside the ring) and {@link Button}
+ * (in its `S`, Secondary brand variant) — both driven by the same design
+ * tokens used by the rest of the design system.
+ *
+ * The ring fill is derived from `value / total`, so the percentage, the
+ * displayed `"{value} of {total}"` label and the support caption stay in
+ * sync automatically. There is no separate `progress` prop.
+ *
+ * @component
+ */
+function CoverageRing({
+  value = 4,
+  total = 7,
+  supportText = 'Benefits availed',
+  valueLabel,
+  actionLabel = 'Learn more',
+  onActionPress,
+  actionProps,
+  action,
+  children,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  supportTextStyle,
+  valueStyle,
+  accessibilityLabel,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+
+  // Merge order matches the rest of the design system (see `Gauge.tsx`):
+  // 1. Component-level defaults — the lowest-priority safety net.
+  // 2. Global modes from `JFSThemeProvider` — app-wide theme.
+  // 3. Caller-supplied `propModes` — highest priority, overrides everything.
+  const modes = _react.default.useMemo(() => ({
+    ...COMPONENT_DEFAULT_MODES,
+    ...globalModes,
+    ...propModes
+  }), [propModes, globalModes]);
+
+  // Force the Secondary brand on the button only; the ring stays on whatever
+  // brand the caller selected. Done via a forcedModes layer so callers can't
+  // accidentally bring back a Primary-coloured CTA through their own modes.
+  const buttonModes = _react.default.useMemo(() => ({
+    ...modes,
+    ...BUTTON_FORCED_BRAND
+  }), [modes]);
+  const safeTotal = total > 0 ? total : 0;
+  const clampedValue = clamp(value, 0, safeTotal);
+  const progressPercent = safeTotal > 0 ? clampedValue / safeTotal * 100 : 0;
+  const computedValueLabel = valueLabel ?? `${clampedValue} of ${safeTotal}`;
+  const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('coverageRing/gap', modes), 16);
+  const containerStyle = {
+    alignItems: 'center',
+    gap
+  };
+
+  // Custom action slot resolution order: explicit `action` prop wins over
+  // `children`. We pass `modes` down via cloneChildrenWithModes so any
+  // token-driven child (e.g. a custom `<Button>`) inherits the parent theme.
+  const customAction = action ?? children;
+  const hasCustomAction = customAction !== undefined && customAction !== null;
+  const defaultAccessibilityLabel = accessibilityLabel ?? `${supportText}, ${computedValueLabel}`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityLabel: defaultAccessibilityLabel,
+    style: [containerStyle, style],
+    ...rest,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgressBar.default, {
+      state: "Active",
+      value: progressPercent,
+      valueLabel: computedValueLabel,
+      supportText: supportText,
+      supportTextStyle: supportTextStyle,
+      valueStyle: valueStyle,
+      modes: modes,
+      accessibilityLabel: `${supportText}, ${computedValueLabel}`
+    }), hasCustomAction ? (0, _reactUtils.cloneChildrenWithModes)(customAction, buttonModes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      label: actionLabel,
+      modes: buttonModes,
+      ...(onActionPress !== undefined ? {
+        onPress: onActionPress
+      } : {}),
+      ...actionProps
+    })]
+  });
+}
+var _default = exports.default = CoverageRing;