jfs-components 0.0.43 → 0.0.45

package/lib/commonjs/components/OTP/OTP.js

@@ -0,0 +1,242 @@
+"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 _SupportText = _interopRequireDefault(require("../SupportText/SupportText"));
+var _reactUtils = require("../../utils/react-utils");
+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 DIGITS_ONLY = /^\d*$/;
+function OTP({
+  length = 6,
+  value: controlledValue,
+  defaultValue = '',
+  onChange,
+  onValueChange,
+  onComplete,
+  isDisabled = false,
+  isInvalid = false,
+  allowedPattern = DIGITS_ONLY,
+  autoFocus = false,
+  modes: propModes = {},
+  style,
+  supportText,
+  supportTextStatus
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const isControlled = controlledValue !== undefined;
+  const [internalValue, setInternalValue] = (0, _react.useState)(defaultValue);
+  const currentValue = isControlled ? controlledValue : internalValue;
+  const inputRef = (0, _react.useRef)(null);
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const caretAnim = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  (0, _react.useEffect)(() => {
+    if (!isFocused) return;
+    const blink = _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(caretAnim, {
+      toValue: 0,
+      duration: 400,
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(caretAnim, {
+      toValue: 1,
+      duration: 400,
+      useNativeDriver: true
+    })]));
+    blink.start();
+    return () => blink.stop();
+  }, [isFocused, caretAnim]);
+  const prevCompleteRef = (0, _react.useRef)(false);
+  const setValue = (0, _react.useCallback)(next => {
+    const clamped = next.slice(0, length);
+    if (!isControlled) setInternalValue(clamped);
+    onChange?.(clamped);
+    onValueChange?.(clamped);
+    if (clamped.length === length && !prevCompleteRef.current) {
+      prevCompleteRef.current = true;
+      onComplete?.(clamped);
+    }
+    if (clamped.length < length) {
+      prevCompleteRef.current = false;
+    }
+  }, [length, isControlled, onChange, onValueChange, onComplete]);
+  const handleChangeText = (0, _react.useCallback)(text => {
+    if (isDisabled) return;
+    if (!allowedPattern.test(text)) return;
+    setValue(text);
+  }, [isDisabled, allowedPattern, setValue]);
+  const handlePress = (0, _react.useCallback)(() => {
+    if (isDisabled) return;
+    inputRef.current?.focus();
+  }, [isDisabled]);
+
+  // --- Token resolution (state-independent tokens resolved once) ---
+  const otpGap = Number((0, _figmaVariablesResolver.getVariableByName)('otp/gap', modes)) || 36;
+  const otpPaddingH = Number((0, _figmaVariablesResolver.getVariableByName)('otp/padding/horizontal', modes)) || 8;
+  const otpPaddingV = Number((0, _figmaVariablesResolver.getVariableByName)('otp/padding/vertical', modes)) || 8;
+  const slotWidth = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/width', modes)) || 48;
+  const slotGap = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/gap', modes)) || 8;
+  // digit/color has no state variants in Figma — resolved once from the Output collection
+  const digitColor = (0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/color', modes) || '#000000';
+  const digitFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/fontSize', modes)) || 24;
+  const digitFontFamily = (0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/fontFamily', modes) || 'JioType Var';
+  const digitLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/lineHeight', modes)) || 29;
+  const digitFontWeight = (0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/fontWeight', modes) || '500';
+  const underlineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/underline/height', modes)) || 2;
+  const underlineRadius = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/underline/radius', modes)) || 1;
+
+  // --- State-driven slot modes ---
+  // Collection name in Figma is "Input/PINSlot  States" (double space before States).
+  // Only PinSlot/underline/color (capital P/S) lives in this collection with Idle/Active/Error modes.
+  // isInvalid takes priority over active focus; the component maps semantic state → token mode
+  // internally so consumers never need to know the collection key name.
+  const getSlotModes = isActiveSlot => {
+    if (isInvalid) return {
+      ...modes,
+      'Input/PINSlot  States': 'Error'
+    };
+    if (isActiveSlot && isFocused) return {
+      ...modes,
+      'Input/PINSlot  States': 'Active'
+    };
+    return {
+      ...modes,
+      'Input/PINSlot  States': 'Idle'
+    };
+  };
+
+  // --- Styles ---
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+    gap: otpGap,
+    paddingHorizontal: otpPaddingH,
+    paddingVertical: otpPaddingV
+  };
+  const slotWrapStyle = {
+    flexDirection: 'row',
+    gap: 8,
+    alignItems: 'flex-start',
+    alignSelf: 'stretch'
+  };
+  const renderSlot = index => {
+    const char = currentValue[index];
+    const isActiveSlot = index === currentValue.length && currentValue.length < length;
+    const isFilled = char !== undefined;
+
+    // Underline color is the only state-sensitive token (lives in "Input/PINSlot  States" collection).
+    // Note: token name is "PinSlot/underline/color" (capital P/S) — different from the static
+    // "pinSlot/underline/color" in the Output collection.
+    const slotModes = getSlotModes(isActiveSlot);
+    const underlineColor = (0, _figmaVariablesResolver.getVariableByName)('PinSlot/underline/color', slotModes) || '#303338';
+    const slotStyle = {
+      width: slotWidth,
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      gap: slotGap
+    };
+    const digitStyle = {
+      fontFamily: digitFontFamily,
+      fontWeight: digitFontWeight,
+      fontSize: digitFontSize,
+      lineHeight: digitLineHeight,
+      color: digitColor,
+      textAlign: 'center',
+      minWidth: '100%'
+    };
+    const underlineStyle = {
+      width: slotWidth,
+      height: underlineHeight,
+      borderRadius: underlineRadius,
+      backgroundColor: underlineColor
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: slotStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          minHeight: digitLineHeight,
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: '100%'
+        },
+        children: isFilled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: digitStyle,
+          children: char
+        }) : isActiveSlot && isFocused ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+          style: {
+            width: 2,
+            height: digitFontSize,
+            backgroundColor: digitColor,
+            opacity: caretAnim
+          }
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [digitStyle, {
+            color: 'transparent'
+          }],
+          children: '\u00A0'
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: underlineStyle
+      })]
+    }, index);
+  };
+  const renderSupportText = () => {
+    if (!supportText) return null;
+    if (typeof supportText === 'string') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SupportText.default, {
+        label: supportText,
+        status: supportTextStatus ?? (isInvalid ? 'Error' : 'Neutral'),
+        modes: modes
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(supportText), modes)
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    style: [containerStyle, isDisabled && {
+      opacity: 0.4
+    }, style],
+    onPress: handlePress,
+    disabled: isDisabled,
+    accessibilityRole: "none",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+      ref: inputRef,
+      value: currentValue,
+      onChangeText: handleChangeText,
+      maxLength: length,
+      keyboardType: "number-pad",
+      autoFocus: autoFocus,
+      editable: !isDisabled,
+      onFocus: () => setIsFocused(true),
+      onBlur: () => setIsFocused(false),
+      caretHidden: true,
+      style: {
+        position: 'absolute',
+        width: 1,
+        height: 1,
+        opacity: 0
+      },
+      accessibilityLabel: `OTP input, ${length} digits`,
+      accessibilityHint: "Enter your verification code"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: slotWrapStyle,
+      children: Array.from({
+        length
+      }, (_, i) => renderSlot(i))
+    }), renderSupportText()]
+  });
+}
+var _default = exports.default = OTP;

package/lib/commonjs/components/PortfolioHero/PortfolioHero.js

@@ -0,0 +1,78 @@
+"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 _reactUtils = require("../../utils/react-utils");
+var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
+var _MoneyValue = _interopRequireDefault(require("../MoneyValue/MoneyValue"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function PortfolioHero({
+  label = 'Gold',
+  imageSource,
+  value = '12,000.11',
+  currency = '₹',
+  modes = {
+    Context3: 'Balance'
+  },
+  children,
+  style
+}) {
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('portfolioHero/gap', modes) ?? 16;
+  const padding = (0, _figmaVariablesResolver.getVariableByName)('portfolioHero/padding', modes) ?? 8;
+  const slotWrapGap = (0, _figmaVariablesResolver.getVariableByName)('portfolioHero/slotWrap/gap', modes) ?? 8;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: gap,
+    padding: padding
+  };
+  const productLabelStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8
+  };
+  const labelTextStyle = {
+    fontFamily: 'System',
+    fontWeight: '700',
+    fontSize: 16,
+    lineHeight: 16 * 1.3,
+    color: '#0d0d0f',
+    textAlign: 'center'
+  };
+  const slotWrapStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: slotWrapGap
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: productLabelStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+        style: "Image",
+        ...(imageSource != null && {
+          imageSource
+        }),
+        modes: modes
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: labelTextStyle,
+        children: label
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoneyValue.default, {
+      value: value,
+      currency: currency,
+      modes: modes
+    }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: slotWrapStyle,
+      children: (0, _reactUtils.cloneChildrenWithModes)(children, modes)
+    })]
+  });
+}
+var _default = exports.default = PortfolioHero;

package/lib/commonjs/components/ProductLabel/ProductLabel.js

@@ -0,0 +1,50 @@
+"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 _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ProductLabel({
+  label = 'Gold',
+  imageSource,
+  modes = {},
+  style
+}) {
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('productLabel/gap', modes) ?? 8;
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('productLabel/text/color', modes) ?? '#000000';
+  const textFontSize = (0, _figmaVariablesResolver.getVariableByName)('productLabel/text/fontSize', modes) ?? 16;
+  const textFontFamily = (0, _figmaVariablesResolver.getVariableByName)('productLabel/text/fontFamily', modes) ?? 'JioType Var';
+  const textFontWeight = (0, _figmaVariablesResolver.getVariableByName)('productLabel/text/fontWeight', modes) ?? 700;
+  const textLineHeight = (0, _figmaVariablesResolver.getVariableByName)('productLabel/text/lineHeight', modes) ?? 21;
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: gap
+  };
+  const labelTextStyle = {
+    color: textColor,
+    fontSize: textFontSize,
+    fontFamily: textFontFamily,
+    fontWeight: String(textFontWeight),
+    lineHeight: textLineHeight,
+    textAlign: 'center'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+      style: "Image",
+      imageSource: imageSource,
+      modes: modes
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: labelTextStyle,
+      children: label
+    })]
+  });
+}
+var _default = exports.default = ProductLabel;

package/lib/commonjs/components/ProgressBadge/ProgressBadge.js

@@ -0,0 +1,130 @@
+"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 _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * ProgressBadge component that displays an icon, text, and an internal progress bar.
+ *
+ * All visual attributes resolve from Figma tokens via `getVariableByName` using the provided `modes`.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.taskName="Live price: [price] (00:43)"] - The text displayed.
+ * @param {string} [props.iconName="ic_live"] - Icon name from the registry.
+ * @param {number} [props.value=0] - The progress value between 0 and 100.
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for design tokens.
+ * @param {Object} [props.style] - Optional container style overrides.
+ * @param {Object} [props.textStyle] - Optional text style overrides.
+ * @param {string} [props.accessibilityLabel] - Accessibility label.
+ */
+function ProgressBadge({
+  taskName = 'Live price: [price] (00:43)',
+  iconName = 'ic_live',
+  value = 0,
+  modes = {},
+  style,
+  textStyle: textStyleOverride,
+  accessibilityLabel,
+  ...rest
+}) {
+  // Resolve layout tokens
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/background', modes) || '#ffffff';
+  const progressColor = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/progress/color', modes) || '#ebebed';
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/gap', modes) ?? 12;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/padding/horizontal', modes) ?? 16;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/padding/vertical', modes) ?? 6;
+  const borderRadius = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/radius', modes) ?? 999;
+  const descriptionGap = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/description/gap', modes) ?? 8;
+
+  // Resolve typography tokens
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/fontFamily', modes) || 'JioType_Var:Medium';
+  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/fontWeight', modes) ?? 500;
+  const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/fontSize', modes) ?? 14;
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/lineHeight', modes) ?? 17;
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/foreground', modes) || '#000000';
+
+  // Resolve icon tokens
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/icon/color', modes) || '#f50030';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('progressBadge/icon/size', modes) ?? 18;
+  const containerStyle = {
+    backgroundColor,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius,
+    overflow: 'hidden',
+    position: 'relative',
+    flexWrap: 'wrap'
+  };
+  const descriptionContainerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: descriptionGap,
+    flex: 1,
+    paddingVertical: 0,
+    minHeight: 1,
+    minWidth: 1,
+    position: 'relative'
+  };
+  const textStyle = {
+    fontFamily,
+    fontWeight,
+    fontSize,
+    lineHeight,
+    color: textColor,
+    textAlign: 'center',
+    overflow: 'hidden',
+    flexShrink: 0
+  };
+
+  // Ensure value is between 0 and 100
+  const clampedValue = Math.max(0, Math.min(100, value));
+  const progressStyle = {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    width: `${clampedValue}%`,
+    backgroundColor: progressColor
+  };
+  const defaultAccessibilityLabel = accessibilityLabel || taskName;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: "text",
+    accessibilityLabel: defaultAccessibilityLabel,
+    ...rest,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: progressStyle,
+      pointerEvents: "none"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: descriptionContainerStyle,
+      children: [iconName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: iconName,
+        size: iconSize,
+        color: iconColor,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [textStyle, textStyleOverride],
+        numberOfLines: 1,
+        ellipsizeMode: "tail",
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: taskName
+      })]
+    })]
+  });
+}
+var _default = exports.default = ProgressBadge;

package/lib/commonjs/components/ProgressBadge/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ProgressBadge.default;
+  }
+});
+var _ProgressBadge = _interopRequireWildcard(require("./ProgressBadge"));
+Object.keys(_ProgressBadge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ProgressBadge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ProgressBadge[key];
+    }
+  });
+});
+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); }

package/lib/commonjs/components/StatItem/StatItem.js

@@ -0,0 +1,61 @@
+"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 _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * StatItem displays a label/value pair with the value in a large, bold style.
+ * Useful for metrics, product stats, or KPI callouts.
+ *
+ * @component
+ * @param {StatItemProps} props
+ */
+function StatItem({
+  label = 'Purity verified by NABL',
+  value = '99.99%',
+  modes = {},
+  style
+}) {
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('statItem/gap', modes) ?? 2;
+  const labelForeground = (0, _figmaVariablesResolver.getVariableByName)('statItem/label/foreground', modes) ?? '#1a1c1f';
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('statItem/label/fontFamily', modes) ?? 'JioType Var';
+  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('statItem/label/fontSize', modes) ?? 12;
+  const labelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('statItem/label/fontWeight', modes) ?? '500';
+  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('statItem/label/lineHeight', modes) ?? 16;
+  const valueForeground = (0, _figmaVariablesResolver.getVariableByName)('statItem/value/foreground', modes) ?? '#0d0d0f';
+  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('statItem/value/fontFamily', modes) ?? 'JioType Var';
+  const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('statItem/value/fontSize', modes) ?? 26;
+  const valueFontWeight = (0, _figmaVariablesResolver.getVariableByName)('statItem/value/fontWeight', modes) ?? '900';
+  const valueLineHeight = (0, _figmaVariablesResolver.getVariableByName)('statItem/value/lineHeight', modes) ?? 26;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      gap: gap
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: {
+        color: labelForeground,
+        fontFamily: labelFontFamily,
+        fontSize: labelFontSize,
+        fontWeight: String(labelFontWeight),
+        lineHeight: labelLineHeight
+      },
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: {
+        color: valueForeground,
+        fontFamily: valueFontFamily,
+        fontSize: valueFontSize,
+        fontWeight: String(valueFontWeight),
+        lineHeight: valueLineHeight
+      },
+      children: value
+    })]
+  });
+}
+var _default = exports.default = StatItem;