jfs-components 0.0.70 → 0.0.72

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/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;

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

@@ -0,0 +1,258 @@
+"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 _IconChevronright = require("../../icons/components/IconChevronright");
+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); }
+const DEFAULT_DOT_COUNT = 24;
+const START_ANGLE_DEGREES = -90;
+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 getBackgroundColor = (style, fallback) => {
+  const flattened = _reactNative.StyleSheet.flatten(style);
+  return typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
+};
+function CircularProgressBarDoted({
+  value = 72,
+  dotCount = DEFAULT_DOT_COUNT,
+  label = 'Rating',
+  tierLabel = 'Doing great',
+  showChevron = true,
+  onPress,
+  onTierPress,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  children,
+  style,
+  ringStyle,
+  trackDotStyle,
+  progressDotStyle,
+  contentStyle,
+  scoreTierStyle,
+  scoreTrendStyle,
+  labelStyle,
+  scoreLabelStyle,
+  tierLabelStyle,
+  accessibilityLabel,
+  onLayout,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const [layoutSize, setLayoutSize] = (0, _react.useState)(0);
+  const normalizedValue = clamp(value, 0, 100);
+  const resolvedDotCount = Math.max(1, Math.floor(dotCount));
+  const activeDots = normalizedValue <= 0 ? 0 : Math.ceil(normalizedValue / 100 * resolvedDotCount);
+  const dotShadowSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/dot/shadow/size', modes), 6);
+  const baseDotSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/dot/size', modes), 6);
+  const dotSize = baseDotSize + dotShadowSize;
+  const outerDotSize = dotSize;
+  const ringSize = layoutSize;
+  const ringRadius = Math.max(0, (ringSize - outerDotSize) / 2);
+  const trackDotColor = getBackgroundColor(trackDotStyle, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/trackDot/bg', modes) || '#ebebed');
+  const progressDotColor = getBackgroundColor(progressDotStyle, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/progressDot/bg', modes) || '#25ab21');
+  const contentGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/gap', modes), 12);
+  const scoreTierGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreTier/gap', modes), 6);
+  const scoreTierWidth = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreTier/width', modes), 116);
+  const scoreTrendGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreTrend/gap', modes), 2);
+  const scoreTrendHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreTrend/height', modes), 24);
+  const typographyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('Typography/Font Family', modes) || 'JioType Var';
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/label/color', modes) || '#080d1a';
+  const labelFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('Typography/Size/Body/XS', modes), 12);
+  const labelFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('Typography/Font Weight/Body Low (Regular)', modes), '400');
+  const scoreColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreLabel/color', modes) || '#080d1a';
+  const scoreFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreLabel/fontSize', modes), 56);
+  const scoreFontFamily = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreLabel/fontFamily', modes) || 'JioType Var';
+  const scoreLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreLabel/lineHeight', modes), 56);
+  const scoreFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/scoreLabel/fontWeight', modes), '900');
+  const tierColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/tierLabel/color', modes) || '#080d1a';
+  const tierFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('Typography/Size/Body/M', modes), 16);
+  const tierFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('Typography/Font Weight/Body High', modes), '700');
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/icon/color', modes) || '#303338';
+  const iconSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBarDoted/icon/size', modes), 24);
+  const dots = (0, _react.useMemo)(() => Array.from({
+    length: resolvedDotCount
+  }, (_, index) => {
+    const angle = (360 / resolvedDotCount * index + START_ANGLE_DEGREES) * (Math.PI / 180);
+    const center = ringSize / 2;
+    return {
+      isActive: index < activeDots,
+      left: center + ringRadius * Math.cos(angle) - outerDotSize / 2,
+      top: center + ringRadius * Math.sin(angle) - outerDotSize / 2
+    };
+  }), [activeDots, outerDotSize, resolvedDotCount, ringRadius, ringSize]);
+  const containerStyle = {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    height: '100%',
+    justifyContent: 'center',
+    position: 'relative',
+    width: '100%'
+  };
+  const computedRingStyle = {
+    height: ringSize,
+    position: 'absolute',
+    width: ringSize
+  };
+  const dotOuterStyle = {
+    alignItems: 'center',
+    height: outerDotSize,
+    justifyContent: 'center',
+    position: 'absolute',
+    width: outerDotSize
+  };
+  const dotInnerStyle = {
+    borderRadius: dotSize / 2,
+    height: dotSize,
+    width: dotSize
+  };
+  const computedContentStyle = {
+    alignItems: 'center',
+    gap: contentGap,
+    justifyContent: 'center',
+    minWidth: scoreTierWidth
+  };
+  const computedScoreTierStyle = {
+    alignItems: 'center',
+    gap: scoreTierGap,
+    justifyContent: 'center',
+    width: '100%'
+  };
+  const computedScoreTrendStyle = {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: scoreTrendGap,
+    height: scoreTrendHeight,
+    justifyContent: 'center',
+    minWidth: scoreTierWidth
+  };
+  const computedLabelStyle = {
+    color: labelColor,
+    fontFamily: typographyFontFamily,
+    fontSize: labelFontSize,
+    fontWeight: labelFontWeight,
+    lineHeight: labelFontSize * 1.3,
+    textAlign: 'center'
+  };
+  const computedScoreLabelStyle = {
+    color: scoreColor,
+    fontFamily: scoreFontFamily,
+    fontSize: scoreFontSize,
+    fontWeight: scoreFontWeight,
+    lineHeight: scoreLineHeight,
+    textAlign: 'center'
+  };
+  const computedTierLabelStyle = {
+    color: tierColor,
+    fontFamily: typographyFontFamily,
+    fontSize: tierFontSize,
+    fontWeight: tierFontWeight,
+    lineHeight: tierFontSize * 1.3,
+    textAlign: 'center'
+  };
+  const resolvedScoreLabel = String(Math.round(normalizedValue));
+  const defaultAccessibilityLabel = accessibilityLabel ?? `${label}. ${resolvedScoreLabel} out of 100. ${tierLabel}`;
+  const handleLayout = event => {
+    onLayout?.(event);
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    const nextSize = Math.max(0, Math.min(width, height));
+    setLayoutSize(currentSize => currentSize === nextSize ? currentSize : nextSize);
+  };
+  const trendContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      numberOfLines: 1,
+      style: [computedTierLabelStyle, tierLabelStyle],
+      children: tierLabel
+    }), showChevron ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconChevronright.IconChevronright, {
+      width: iconSize,
+      height: iconSize,
+      fill: iconColor,
+      color: iconColor
+    }) : null]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    accessibilityRole: "progressbar",
+    accessibilityLabel: defaultAccessibilityLabel,
+    accessibilityValue: {
+      min: 0,
+      max: 100,
+      now: normalizedValue
+    },
+    disabled: !onPress,
+    onLayout: handleLayout,
+    onPress: onPress,
+    style: [containerStyle, style],
+    ...rest,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "none",
+      style: [computedRingStyle, ringStyle],
+      children: dots.map((dot, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [dotOuterStyle, {
+          left: dot.left,
+          top: dot.top
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [dotInnerStyle, {
+            backgroundColor: dot.isActive ? progressDotColor : trackDotColor
+          }, dot.isActive ? progressDotStyle : trackDotStyle]
+        })
+      }, index))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [computedContentStyle, contentStyle],
+      children: children ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [computedScoreTierStyle, scoreTierStyle],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [computedLabelStyle, labelStyle],
+            children: label
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [computedScoreLabelStyle, scoreLabelStyle],
+            children: resolvedScoreLabel
+          })]
+        }), onTierPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          accessibilityRole: "button",
+          onPress: onTierPress,
+          style: [computedScoreTrendStyle, scoreTrendStyle],
+          children: trendContent
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [computedScoreTrendStyle, scoreTrendStyle],
+          children: trendContent
+        })]
+      })
+    })]
+  });
+}
+var _default = exports.default = CircularProgressBarDoted;