jfs-components 0.0.69 → 0.0.71

package/CHANGELOG.md

@@ -4,6 +4,26 @@ 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.70] - 2026-04-23
+
+### Fixed
+
+- **`MediaCard.Footer` blur on bare React Native:** `0.0.69` shipped the glass footer using `expo-blur`, which silently required consumers to integrate Expo Modules autolinking (`use_expo_modules!` in `Podfile`, `ExpoModulesPackage` on Android). Bare React Native apps that just installed the library and ran `pod install` hit two failures: a runtime "`Cannot read property 'BlurView' of undefined`" red box on Android and an iOS Xcode build failure after `pod install`. **Replaced `expo-blur` with [`@react-native-community/blur`](https://github.com/Kureev/react-native-blur)** — a regular React Native native module handled by standard autolinking. No Expo runtime required.
+
+### Changed
+
+- **`MediaCard.Footer` glass implementation:** Native blur now lives in a small platform-split helper, `MediaCard/GlassFill.tsx` (iOS + Android via the community blur module) and `MediaCard/GlassFill.web.tsx` (`backdrop-filter` via inline style). Metro picks the correct file per platform, so the web bundle never imports the native-only blur module. The Footer's API and design-token contract (`blur/minimal/background`, `blur/minimal`, `Contrast Context` mode) are unchanged.
+
+### Removed
+
+- **`expo-blur`** is no longer a runtime dependency.
+
+### Dependencies
+
+- **`@react-native-community/blur`** (`>=4.4.0`) added as a **peer dependency**. Consumers must install it once: `npm install @react-native-community/blur && cd ios && pod install`. On Expo, use `npx expo install @react-native-community/blur` and prebuild.
+
+---
+
 ## [0.0.69] - 2026-04-22
 
 ### Changed

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

@@ -0,0 +1,203 @@
+"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 _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _reactUtils = require("../../utils/react-utils");
+var _CircularProgressBar = _interopRequireDefault(require("../CircularProgressBar/CircularProgressBar"));
+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 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 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);
+  const contentGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/content/gap', modes), 6);
+  const headerGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/header/gap', modes), 8);
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/title/foreground', modes) || '#0d0d0f';
+  const titleFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/title/fontSize', modes), 26);
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/title/fontFamily', modes) || 'JioType Var';
+  const titleLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/title/lineHeight', modes), 26);
+  const titleFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/title/fontWeight', modes), '900');
+  const titleDescenderAllowance = Math.ceil(titleFontSize * 0.16);
+  const descriptionColor = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/description/foreground', modes) || '#24262b';
+  const descriptionFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/description/fontSize', modes), 12);
+  const descriptionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/description/fontFamily', modes) || 'JioType Var';
+  const descriptionLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/description/lineHeight', modes), 16);
+  const descriptionFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/description/fontWeight', modes), '500');
+  return {
+    containerStyle: {
+      alignItems: 'flex-start',
+      backgroundColor: background,
+      borderRadius: radius,
+      gap,
+      overflow: 'hidden',
+      paddingHorizontal,
+      paddingVertical,
+      width
+    },
+    mainContentStyle: {
+      alignItems: 'flex-start',
+      flexDirection: 'row',
+      gap: mainContentGap,
+      width: '100%'
+    },
+    contentStyle: {
+      alignItems: 'flex-start',
+      flex: 1,
+      gap: contentGap,
+      minWidth: 1
+    },
+    headerStyle: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: headerGap,
+      width: '100%'
+    },
+    titleStyle: {
+      color: titleColor,
+      fontFamily: titleFontFamily,
+      fontSize: titleFontSize,
+      fontWeight: titleFontWeight,
+      lineHeight: titleLineHeight,
+      marginBottom: -titleDescenderAllowance,
+      paddingBottom: titleDescenderAllowance
+    },
+    descriptionStyle: {
+      color: descriptionColor,
+      fontFamily: descriptionFontFamily,
+      fontSize: descriptionFontSize,
+      fontWeight: descriptionFontWeight,
+      lineHeight: descriptionLineHeight,
+      width: '100%'
+    },
+    iconColor: (0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/icon/color', modes) || '#1a1c1f',
+    iconSize: toNumber((0, _figmaVariablesResolver.getVariableByName)('cardAdvisory/icon/size', modes), 18)
+  };
+}
+function CardAdvisory({
+  title = 'Spending',
+  description = 'Track your spending habits and stay within your budget.',
+  value = 70,
+  valueLabel,
+  showInfoIcon = true,
+  showNudge = true,
+  nudgeBody = 'Data confidence is low, add more accounts for better insights.',
+  nudgeButtonLabel = 'Button',
+  onPressNudgeButton,
+  titleEndSlot,
+  progressSlot,
+  nudgeSlot,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  mainContentStyle,
+  titleStyle,
+  descriptionStyle,
+  progressStyle,
+  nudgeStyle,
+  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)(() => resolveCardAdvisoryTokens(modes), [modes]);
+  const processedTitleEndSlot = (0, _react.useMemo)(() => {
+    if (!titleEndSlot) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(titleEndSlot), modes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [titleEndSlot, 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 defaultAccessibilityLabel = accessibilityLabel ?? `${title}. ${description}. ${Math.round(value)} out of 100. ${nudgeBody}`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityLabel: defaultAccessibilityLabel,
+    style: [tokens.containerStyle, style],
+    ...rest,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [tokens.mainContentStyle, mainContentStyle],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: tokens.contentStyle,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: tokens.headerStyle,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            numberOfLines: 1,
+            style: [tokens.titleStyle, titleStyle],
+            children: title
+          }), processedTitleEndSlot || (showInfoIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            name: "ic_info",
+            size: tokens.iconSize,
+            color: tokens.iconColor,
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no"
+          }) : null)]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [tokens.descriptionStyle, descriptionStyle],
+          children: description
+        })]
+      }), processedProgressSlot || /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgressBar.default, {
+        state: "Active",
+        value: value,
+        modes: modes,
+        style: progressStyle,
+        ...(valueLabel ? {
+          valueLabel
+        } : {})
+      })]
+    }), showNudge ? processedNudgeSlot || /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nudge.default, {
+      type: "inline-compact",
+      body: nudgeBody,
+      buttonLabel: nudgeButtonLabel,
+      modes: modes,
+      style: [{
+        width: '100%'
+      }, nudgeStyle],
+      ...(onPressNudgeButton ? {
+        onPressButton: onPressNudgeButton
+      } : {})
+    }) : null]
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(CardAdvisory);

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

@@ -11,17 +11,39 @@ var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _reactUtils = require("../../utils/react-utils");
 var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
 var _Button = _interopRequireDefault(require("../Button/Button"));
+var _Badge = _interopRequireDefault(require("../Badge/Badge"));
+var _ButtonGroup = _interopRequireDefault(require("../ButtonGroup/ButtonGroup"));
+var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const optionalTokenAvailability = new Map();
+function getOptionalVariableByName(name, modes, fallback) {
+  let isAvailable = optionalTokenAvailability.get(name);
+  if (isAvailable === undefined) {
+    isAvailable = (0, _figmaVariablesResolver.findVariablesByPattern)(name).some(variable => variable.name === name);
+    optionalTokenAvailability.set(name, isAvailable);
+  }
+  if (!isAvailable) {
+    return fallback;
+  }
+  return (0, _figmaVariablesResolver.getVariableByName)(name, modes) ?? fallback;
+}
 function CardCTA({
+  type = 'cta',
   title = 'If you have 1 line',
   body = 'Then you can have up to 3 lines in the subtext as well. This is for demonstration.',
   iconName = 'ic_upi_number',
-  buttonLabel = 'Button',
+  buttonLabel,
   onPressButton,
+  ratingLabel = '+28 Rating',
+  showRatingActions = true,
+  onPressLike,
+  onPressDislike,
   modes: propModes = _reactUtils.EMPTY_MODES,
   iconSlot,
   buttonSlot,
+  ratingBadgeSlot,
+  ratingActionsSlot,
   style
 }) {
   const {
@@ -31,6 +53,7 @@ function CardCTA({
     ...globalModes,
     ...propModes
   };
+  const isRating = type === 'rating';
   const background = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/background', modes) || '#ffffff';
   const radius = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/radius', modes) || 12;
   const borderSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/border/size', modes) || 1;
@@ -53,13 +76,48 @@ function CardCTA({
   const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/lineHeight', modes) || 12;
   const bodyFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontWeight', modes) || 400;
   const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw;
+  const ratingContentGap = getOptionalVariableByName('cardCTA/rating/content/gap', modes, 12);
+  const ratingContentPaddingH = getOptionalVariableByName('cardCTA/rating/content/padding/horizontal', modes, 16);
+  const ratingContentPaddingV = getOptionalVariableByName('cardCTA/rating/content/padding/vertical', modes, 12);
+  const ratingFooterPaddingH = getOptionalVariableByName('cardCTA/rating/footer/horizontal', modes, 16);
+  const ratingFooterPaddingTop = getOptionalVariableByName('cardCTA/rating/footer/top', modes, 0);
+  const ratingFooterPaddingBottom = getOptionalVariableByName('cardCTA/rating/footer/bottom', modes, 12);
+  const buttonModes = {
+    ...modes,
+    AppearanceBrand: 'Secondary',
+    'Button / Size': 'S'
+  };
+  const iconButtonModes = {
+    'Button / Size': 'S',
+    'Emphasis': 'Low',
+    'AppearanceBrand': 'Neutral',
+    ...modes
+  };
+  const effectiveButtonLabel = buttonLabel ?? (isRating ? 'Save' : 'Button');
+  const nonWrappingButtonLabel = effectiveButtonLabel.replace(/\s/g, '\u00A0');
+  const [measuredButtonLabelWidth, setMeasuredButtonLabelWidth] = _react.default.useState(null);
+  const buttonPaddingH = (0, _figmaVariablesResolver.getVariableByName)('button/padding/horizontal', buttonModes) || 20;
+  const buttonBorderSize = (0, _figmaVariablesResolver.getVariableByName)('button/border/size', buttonModes) ?? 1;
+  const measuredButtonWidth = measuredButtonLabelWidth === null ? undefined : Math.ceil(measuredButtonLabelWidth + buttonPaddingH * 2 + buttonBorderSize * 2);
+  const handleButtonLabelTextLayout = _react.default.useCallback(event => {
+    const lines = event?.nativeEvent?.lines;
+    if (!Array.isArray(lines) || lines.length === 0) return;
+    const nextWidth = Math.ceil(lines.reduce((sum, line) => sum + (typeof line?.width === 'number' ? line.width : 0), 0));
+    if (nextWidth <= 0) return;
+    setMeasuredButtonLabelWidth(currentWidth => {
+      if (currentWidth !== null && Math.abs(currentWidth - nextWidth) < 1) {
+        return currentWidth;
+      }
+      return nextWidth;
+    });
+  }, []);
   const containerStyle = {
     backgroundColor: background,
     borderRadius: radius,
     borderWidth: borderSize,
     borderColor,
-    flexDirection: 'row',
-    overflow: 'hidden'
+    flexDirection: isRating ? 'column' : 'row',
+    overflow: 'visible'
   };
 
   // NOTE: `minWidth: 0` + explicit `flexShrink: 1` are required on native.
@@ -76,7 +134,9 @@ function CardCTA({
     paddingVertical: leftPaddingV,
     gap: leftGap,
     alignItems: 'flex-start',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    overflow: 'visible',
+    zIndex: 1
   };
 
   // NOTE: rightWrap must NOT shrink on native. On Android (Yoga), the default
@@ -105,6 +165,29 @@ function CardCTA({
     alignSelf: 'stretch',
     minWidth: 0
   };
+
+  // Keep text shrink/wrap behavior on the left column, but let the CTA keep
+  // its own intrinsic width. On native, Yoga otherwise measures the Button
+  // with the left column's available width and the single-line label
+  // truncates even when the Button itself has no width/maxWidth constraint.
+  const buttonWrapStyle = {
+    alignSelf: 'flex-start',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    overflow: 'visible',
+    zIndex: 1
+  };
+  const buttonStyle = {
+    alignSelf: 'flex-start',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    overflow: 'visible',
+    ...(measuredButtonWidth !== undefined ? {
+      width: measuredButtonWidth
+    } : {})
+  };
   const titleStyle = {
     color: titleColor,
     fontFamily: titleFontFamily,
@@ -119,6 +202,104 @@ function CardCTA({
     lineHeight: bodyLineHeight,
     fontWeight: bodyFontWeight
   };
+  const ratingContentStyle = {
+    paddingHorizontal: ratingContentPaddingH,
+    paddingVertical: ratingContentPaddingV,
+    gap: ratingContentGap,
+    alignItems: 'flex-start'
+  };
+  const ratingFooterStyle = {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    paddingHorizontal: ratingFooterPaddingH,
+    paddingTop: ratingFooterPaddingTop,
+    paddingBottom: ratingFooterPaddingBottom,
+    overflow: 'visible'
+  };
+  const buttonLabelStyle = {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexWrap: 'nowrap'
+  };
+
+  // Keep the rating CTA on an overflow-visible, non-shrinking path. The
+  // footer's row width stays fixed by the card, but Yoga must not use that
+  // width to shrink or clip the button label.
+  const ratingButtonWrapStyle = {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    alignItems: 'flex-start',
+    overflow: 'visible'
+  };
+  const ratingButtonStyle = {
+    alignSelf: 'flex-start',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    overflow: 'visible',
+    ...(measuredButtonWidth !== undefined ? {
+      width: measuredButtonWidth
+    } : {})
+  };
+  const ratingButtonLabelStyle = {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexWrap: 'nowrap'
+  };
+  if (isRating) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [containerStyle, style],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: ratingContentStyle,
+        children: [ratingBadgeSlot ? (0, _reactUtils.cloneChildrenWithModes)(ratingBadgeSlot, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+          label: ratingLabel,
+          modes: modes
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: textWrapStyle,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: titleStyle,
+            children: title
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: bodyStyle,
+            children: body
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: ratingFooterStyle,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: ratingButtonWrapStyle,
+          children: buttonSlot ? (0, _reactUtils.cloneChildrenWithModes)(buttonSlot, buttonModes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            label: effectiveButtonLabel,
+            onPress: onPressButton || (() => {}),
+            modes: buttonModes,
+            style: ratingButtonStyle,
+            renderContent: labelStyles => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              onTextLayout: handleButtonLabelTextLayout,
+              style: [labelStyles, ratingButtonLabelStyle],
+              children: nonWrappingButtonLabel
+            })
+          })
+        }), showRatingActions ? ratingActionsSlot ? (0, _reactUtils.cloneChildrenWithModes)(ratingActionsSlot, iconButtonModes) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
+          modes: iconButtonModes,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+            iconName: "ic_like",
+            accessibilityLabel: "Like",
+            ...(onPressLike ? {
+              onPress: onPressLike
+            } : {})
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+            iconName: "ic_dislike",
+            accessibilityLabel: "Dislike",
+            ...(onPressDislike ? {
+              onPress: onPressDislike
+            } : {})
+          })]
+        }) : null]
+      })]
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -132,18 +313,19 @@ function CardCTA({
           style: bodyStyle,
           children: body
         })]
-      }), buttonSlot ? (0, _reactUtils.cloneChildrenWithModes)(buttonSlot, {
-        ...modes,
-        AppearanceBrand: 'Secondary',
-        'Button / Size': 'S'
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        label: buttonLabel,
-        onPress: onPressButton || (() => {}),
-        modes: {
-          ...modes,
-          AppearanceBrand: 'Secondary',
-          'Button / Size': 'S'
-        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: buttonWrapStyle,
+        children: buttonSlot ? (0, _reactUtils.cloneChildrenWithModes)(buttonSlot, buttonModes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          label: effectiveButtonLabel,
+          onPress: onPressButton || (() => {}),
+          modes: buttonModes,
+          style: buttonStyle,
+          renderContent: labelStyles => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            onTextLayout: handleButtonLabelTextLayout,
+            style: [labelStyles, buttonLabelStyle],
+            children: nonWrappingButtonLabel
+          })
+        })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: rightWrapStyle,

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

@@ -0,0 +1,147 @@
+"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 _IconMinus = require("../../icons/components/IconMinus");
+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 }; }
+const STROKE_WIDTH_RATIO = 8 / 60;
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+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;
+};
+const getStrokeColor = (style, fallback) => {
+  const flattened = _reactNative.StyleSheet.flatten(style);
+  return typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
+};
+function CircularProgressBar({
+  value = 70,
+  state = 'Inactive',
+  valueLabel,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  trackStyle,
+  progressStyle,
+  valueStyle,
+  accessibilityLabel,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const isActive = state === true || state === 'Active';
+  const normalizedValue = clamp(value, 0, 100);
+  const size = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/size', modes), 60);
+  const strokeWidth = Math.max(1, size * STROKE_WIDTH_RATIO);
+  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 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 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 computedContainerStyle = {
+    alignItems: 'center',
+    height: size,
+    justifyContent: 'center',
+    position: 'relative',
+    width: size
+  };
+  const computedValueStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    position: 'absolute',
+    textAlign: 'center'
+  };
+  const iconStyle = {
+    left: (size - iconSize) / 2,
+    position: 'absolute',
+    top: (size - iconSize) / 2
+  };
+  const displayValue = valueLabel ?? String(Math.round(normalizedValue));
+  const defaultAccessibilityLabel = accessibilityLabel ?? (isActive ? `${displayValue} out of 100` : 'Inactive progress');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityRole: "progressbar",
+    accessibilityLabel: defaultAccessibilityLabel,
+    accessibilityValue: {
+      min: 0,
+      max: 100,
+      now: normalizedValue
+    },
+    style: [computedContainerStyle, style],
+    ...rest,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+      width: size,
+      height: size,
+      viewBox: `0 0 ${size} ${size}`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+        cx: center,
+        cy: center,
+        r: radius,
+        stroke: trackColor,
+        strokeWidth: strokeWidth,
+        fill: "none"
+      }), isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+        cx: center,
+        cy: center,
+        r: radius,
+        stroke: progressColor,
+        strokeWidth: strokeWidth,
+        strokeLinecap: "round",
+        fill: "none",
+        strokeDasharray: `${circumference} ${circumference}`,
+        strokeDashoffset: circumference * (1 - normalizedValue / 100),
+        rotation: "-90",
+        originX: center,
+        originY: center
+      }) : null]
+    }), isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [computedValueStyle, valueStyle],
+      children: displayValue
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMinus.IconMinus, {
+      width: iconSize,
+      height: iconSize,
+      fill: iconColor,
+      color: iconColor,
+      style: iconStyle
+    })]
+  });
+}
+var _default = exports.default = CircularProgressBar;