jfs-components 0.0.69 → 0.0.71

package/lib/module/components/CircularProgressBarDoted/CircularProgressBarDoted.js

@@ -0,0 +1,253 @@
+"use strict";
+
+import React, { useMemo, useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { IconChevronright } from '../../icons/components/IconChevronright';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 = 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 = EMPTY_MODES,
+  children,
+  style,
+  ringStyle,
+  trackDotStyle,
+  progressDotStyle,
+  contentStyle,
+  scoreTierStyle,
+  scoreTrendStyle,
+  labelStyle,
+  scoreLabelStyle,
+  tierLabelStyle,
+  accessibilityLabel,
+  onLayout,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const [layoutSize, setLayoutSize] = 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(getVariableByName('circularProgressBarDoted/dot/shadow/size', modes), 6);
+  const baseDotSize = toNumber(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, getVariableByName('circularProgressBarDoted/trackDot/bg', modes) || '#ebebed');
+  const progressDotColor = getBackgroundColor(progressDotStyle, getVariableByName('circularProgressBarDoted/progressDot/bg', modes) || '#25ab21');
+  const contentGap = toNumber(getVariableByName('circularProgressBarDoted/gap', modes), 12);
+  const scoreTierGap = toNumber(getVariableByName('circularProgressBarDoted/scoreTier/gap', modes), 6);
+  const scoreTierWidth = toNumber(getVariableByName('circularProgressBarDoted/scoreTier/width', modes), 116);
+  const scoreTrendGap = toNumber(getVariableByName('circularProgressBarDoted/scoreTrend/gap', modes), 2);
+  const scoreTrendHeight = toNumber(getVariableByName('circularProgressBarDoted/scoreTrend/height', modes), 24);
+  const typographyFontFamily = getVariableByName('Typography/Font Family', modes) || 'JioType Var';
+  const labelColor = getVariableByName('circularProgressBarDoted/label/color', modes) || '#080d1a';
+  const labelFontSize = toNumber(getVariableByName('Typography/Size/Body/XS', modes), 12);
+  const labelFontWeight = toFontWeight(getVariableByName('Typography/Font Weight/Body Low (Regular)', modes), '400');
+  const scoreColor = getVariableByName('circularProgressBarDoted/scoreLabel/color', modes) || '#080d1a';
+  const scoreFontSize = toNumber(getVariableByName('circularProgressBarDoted/scoreLabel/fontSize', modes), 56);
+  const scoreFontFamily = getVariableByName('circularProgressBarDoted/scoreLabel/fontFamily', modes) || 'JioType Var';
+  const scoreLineHeight = toNumber(getVariableByName('circularProgressBarDoted/scoreLabel/lineHeight', modes), 56);
+  const scoreFontWeight = toFontWeight(getVariableByName('circularProgressBarDoted/scoreLabel/fontWeight', modes), '900');
+  const tierColor = getVariableByName('circularProgressBarDoted/tierLabel/color', modes) || '#080d1a';
+  const tierFontSize = toNumber(getVariableByName('Typography/Size/Body/M', modes), 16);
+  const tierFontWeight = toFontWeight(getVariableByName('Typography/Font Weight/Body High', modes), '700');
+  const iconColor = getVariableByName('circularProgressBarDoted/icon/color', modes) || '#303338';
+  const iconSize = toNumber(getVariableByName('circularProgressBarDoted/icon/size', modes), 24);
+  const dots = 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__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: [computedTierLabelStyle, tierLabelStyle],
+      children: tierLabel
+    }), showChevron ? /*#__PURE__*/_jsx(IconChevronright, {
+      width: iconSize,
+      height: iconSize,
+      fill: iconColor,
+      color: iconColor
+    }) : null]
+  });
+  return /*#__PURE__*/_jsxs(Pressable, {
+    accessibilityRole: "progressbar",
+    accessibilityLabel: defaultAccessibilityLabel,
+    accessibilityValue: {
+      min: 0,
+      max: 100,
+      now: normalizedValue
+    },
+    disabled: !onPress,
+    onLayout: handleLayout,
+    onPress: onPress,
+    style: [containerStyle, style],
+    ...rest,
+    children: [/*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      style: [computedRingStyle, ringStyle],
+      children: dots.map((dot, index) => /*#__PURE__*/_jsx(View, {
+        style: [dotOuterStyle, {
+          left: dot.left,
+          top: dot.top
+        }],
+        children: /*#__PURE__*/_jsx(View, {
+          style: [dotInnerStyle, {
+            backgroundColor: dot.isActive ? progressDotColor : trackDotColor
+          }, dot.isActive ? progressDotStyle : trackDotStyle]
+        })
+      }, index))
+    }), /*#__PURE__*/_jsx(View, {
+      style: [computedContentStyle, contentStyle],
+      children: children ? cloneChildrenWithModes(children, modes) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: [computedScoreTierStyle, scoreTierStyle],
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [computedLabelStyle, labelStyle],
+            children: label
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [computedScoreLabelStyle, scoreLabelStyle],
+            children: resolvedScoreLabel
+          })]
+        }), onTierPress ? /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          onPress: onTierPress,
+          style: [computedScoreTrendStyle, scoreTrendStyle],
+          children: trendContent
+        }) : /*#__PURE__*/_jsx(View, {
+          style: [computedScoreTrendStyle, scoreTrendStyle],
+          children: trendContent
+        })]
+      })
+    })]
+  });
+}
+export default CircularProgressBarDoted;

package/lib/module/components/CircularRating/CircularRating.js

@@ -0,0 +1,155 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Text, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import Icon from '../../icons/Icon';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import CircularProgressBarDoted from '../CircularProgressBarDoted/CircularProgressBarDoted';
+import Nudge from '../Nudge/Nudge';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 resolveCircularRatingTokens(modes) {
+  const gap = toNumber(getVariableByName('circularRating/gap', modes), 32);
+  const padding = toNumber(getVariableByName('circularRating/padding', modes), 10);
+  const footerGap = toNumber(getVariableByName('circularRating/footer/gap', modes), 4);
+  const footerHeight = toNumber(getVariableByName('circularRating/footer/height', modes), 16);
+  const footerTextColor = getVariableByName('circularRating/footer/text/color', modes) || '#0d0d0f';
+  const footerTextFontSize = toNumber(getVariableByName('circularRating/footer/text/fontSize', modes), 12);
+  const footerTextFontFamily = getVariableByName('circularRating/footer/text/fontFamily', modes) || 'JioType Var';
+  const footerTextLineHeight = toNumber(getVariableByName('circularRating/footer/text/lineHeight', modes), 16);
+  const footerTextFontWeight = toFontWeight(getVariableByName('circularRating/footer/text/fontWeight', modes), '400');
+  return {
+    containerStyle: {
+      alignItems: 'flex-start',
+      gap,
+      justifyContent: 'center',
+      padding
+    },
+    ratingStyle: {
+      height: 320,
+      width: 320
+    },
+    footerStyle: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: footerGap,
+      height: footerHeight,
+      justifyContent: 'center',
+      width: '100%'
+    },
+    footerTextStyle: {
+      color: footerTextColor,
+      fontFamily: footerTextFontFamily,
+      fontSize: footerTextFontSize,
+      fontWeight: footerTextFontWeight,
+      lineHeight: footerTextLineHeight,
+      textAlign: 'center'
+    },
+    footerIconColor: getVariableByName('circularRating/footer/icon/color', modes) || '#1a1c1f',
+    footerIconSize: toNumber(getVariableByName('circularRating/footer/icon/size', modes), 16)
+  };
+}
+function CircularRating({
+  value = 72,
+  dotCount = 24,
+  label = 'Rating',
+  tierLabel = 'Doing great',
+  footerText = 'Updated on 1 March',
+  showFooterIcon = true,
+  showNudge = true,
+  nudgeBody = 'Split this transaction into installments',
+  nudgeButtonLabel = 'Button',
+  onPressNudgeButton,
+  onTierPress,
+  footerSlot,
+  nudgeSlot,
+  modes: propModes = EMPTY_MODES,
+  style,
+  ratingStyle,
+  footerStyle,
+  footerTextStyle,
+  nudgeStyle,
+  accessibilityLabel,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const tokens = useMemo(() => resolveCircularRatingTokens(modes), [modes]);
+  const processedFooterSlot = useMemo(() => {
+    if (!footerSlot) return null;
+    const processed = cloneChildrenWithModes(React.Children.toArray(footerSlot), modes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [footerSlot, modes]);
+  const processedNudgeSlot = useMemo(() => {
+    if (!nudgeSlot) return null;
+    const processed = cloneChildrenWithModes(React.Children.toArray(nudgeSlot), modes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [nudgeSlot, modes]);
+  const defaultAccessibilityLabel = accessibilityLabel ?? `${label}. ${Math.round(value)} out of 100. ${tierLabel}. ${footerText}`;
+  return /*#__PURE__*/_jsxs(View, {
+    accessibilityLabel: defaultAccessibilityLabel,
+    style: [tokens.containerStyle, style],
+    ...rest,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [tokens.ratingStyle, ratingStyle],
+      children: /*#__PURE__*/_jsx(CircularProgressBarDoted, {
+        value: value,
+        dotCount: dotCount,
+        label: label,
+        tierLabel: tierLabel,
+        onTierPress: onTierPress,
+        modes: modes
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: [tokens.footerStyle, footerStyle],
+      children: processedFooterSlot || /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          style: [tokens.footerTextStyle, footerTextStyle],
+          children: footerText
+        }), showFooterIcon ? /*#__PURE__*/_jsx(Icon, {
+          name: "ic_info",
+          size: tokens.footerIconSize,
+          color: tokens.footerIconColor,
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no"
+        }) : null]
+      })
+    }), showNudge ? processedNudgeSlot || /*#__PURE__*/_jsx(Nudge, {
+      type: "inline-compact",
+      body: nudgeBody,
+      buttonLabel: nudgeButtonLabel,
+      onPressButton: onPressNudgeButton,
+      modes: modes,
+      style: [{
+        width: 312
+      }, nudgeStyle]
+    }) : null]
+  });
+}
+export default /*#__PURE__*/React.memo(CircularRating);

package/lib/module/components/Gauge/Gauge.js

@@ -0,0 +1,217 @@
+"use strict";
+
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import SupportText from '../SupportText/SupportText';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const clamp = (value, min, max) => {
+  if (max <= min) {
+    return 0;
+  }
+  return Math.min(1, Math.max(0, (value - min) / (max - min)));
+};
+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 = StyleSheet.flatten(style);
+  return typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
+};
+function Gauge({
+  value = 84,
+  min = 0,
+  max = 100,
+  valueLabel,
+  title = 'Your score is based on strong data',
+  caption = 'Add more details for even better accuracy',
+  supportText = 'Support Text',
+  supportTextStatus = 'Success',
+  showTitle = true,
+  showCaption = true,
+  showSupportText = true,
+  modes: propModes = EMPTY_MODES,
+  children,
+  style,
+  arcStyle,
+  readoutStyle,
+  titleStyle,
+  valueStyle,
+  captionStyle,
+  trackStyle,
+  progressStyle,
+  accessibilityLabel,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const supportTextModes = {
+    ...modes,
+    Status: supportTextStatus
+  };
+  const gap = toNumber(getVariableByName('gauge/gap', modes), 30);
+  const padding = toNumber(getVariableByName('gauge/padding', modes), 16);
+  const width = toNumber(getVariableByName('gauge/width', modes), 299);
+  const arcWidth = toNumber(getVariableByName('gauge/arc/width', modes), 267);
+  const arcHeight = arcWidth * (186 / 328);
+  const trackSize = toNumber(getVariableByName('gauge/track/size', modes), 244);
+  const trackInnerRadius = toNumber(getVariableByName('gauge/track/radius', modes), 99);
+  const progressInnerRadius = toNumber(getVariableByName('gauge/progress/radius', modes), 99);
+  const innerRadius = Math.min(trackInnerRadius, progressInnerRadius);
+  const strokeWidth = Math.max(1, trackSize / 2 - innerRadius);
+  const radius = innerRadius + strokeWidth / 2;
+  const centerX = arcWidth / 2;
+  const centerY = Math.min(arcHeight - strokeWidth / 2, radius + strokeWidth / 2);
+  const startX = centerX - radius;
+  const endX = centerX + radius;
+  const arcPath = `M ${startX} ${centerY} A ${radius} ${radius} 0 0 1 ${endX} ${centerY}`;
+  const arcLength = Math.PI * radius;
+  const progress = clamp(value, min, max);
+  const titleColor = getVariableByName('gauge/title/color', modes) || '#0c0d10';
+  const titleFontSize = toNumber(getVariableByName('gauge/title/fontSize', modes), 23);
+  const titleLineHeight = toNumber(getVariableByName('gauge/title/lineHeight', modes), 23);
+  const titleFontFamily = getVariableByName('gauge/title/fontFamily', modes) || 'JioType Var';
+  const titleFontWeight = toFontWeight(getVariableByName('gauge/title/fontWeight', modes), '900');
+  const titleHeight = toNumber(getVariableByName('gauge/title/height', modes), 46);
+  const readoutGap = toNumber(getVariableByName('gauge/readout/gap', modes), 8);
+  const readoutPadding = toNumber(getVariableByName('gauge/readout/padding', modes), 8);
+  const valueColor = getVariableByName('gauge/readout/value/color', modes) || '#0c0d10';
+  const valueFontSize = toNumber(getVariableByName('gauge/readout/value/fontSize', modes), 36);
+  const valueLineHeight = toNumber(getVariableByName('gauge/readout/value/lineHeight', modes), 36);
+  const valueFontFamily = getVariableByName('gauge/readout/value/fontFamily', modes) || 'JioType Var';
+  const valueFontWeight = toFontWeight(getVariableByName('gauge/readout/value/fontWeight', modes), '800');
+  const captionColor = getVariableByName('gauge/caption/color', modes) || '#0c0d10';
+  const captionFontSize = toNumber(getVariableByName('gauge/caption/fontSize', modes), 14);
+  const captionLineHeight = toNumber(getVariableByName('gauge/caption/lineHeight', modes), 18);
+  const captionFontFamily = getVariableByName('gauge/caption/fontFamily', modes) || 'JioType Var';
+  const captionFontWeight = toFontWeight(getVariableByName('gauge/caption/fontWeight', modes), '500');
+  const trackColor = getStrokeColor(trackStyle, getVariableByName('gauge/track/color', modes) || '#f5f5f6');
+  const progressColor = getStrokeColor(progressStyle, getVariableByName('gauge/progress/color', modes) || '#25ab21');
+  const containerStyle = {
+    alignItems: 'center',
+    gap,
+    padding,
+    width
+  };
+  const computedTitleStyle = {
+    color: titleColor,
+    fontFamily: titleFontFamily,
+    fontSize: titleFontSize,
+    fontWeight: titleFontWeight,
+    lineHeight: titleLineHeight,
+    minHeight: titleHeight,
+    textAlign: 'center',
+    width: '100%'
+  };
+  const computedArcStyle = {
+    height: arcHeight,
+    overflow: 'hidden',
+    position: 'relative',
+    width: '100%'
+  };
+  const computedReadoutStyle = {
+    alignItems: 'center',
+    gap: readoutGap,
+    left: 0,
+    padding: readoutPadding,
+    position: 'absolute',
+    right: 0,
+    top: arcHeight * 0.42
+  };
+  const computedValueStyle = {
+    color: valueColor,
+    fontFamily: valueFontFamily,
+    fontSize: valueFontSize,
+    fontWeight: valueFontWeight,
+    lineHeight: valueLineHeight,
+    textAlign: 'center'
+  };
+  const computedCaptionStyle = {
+    color: captionColor,
+    fontFamily: captionFontFamily,
+    fontSize: captionFontSize,
+    fontWeight: captionFontWeight,
+    lineHeight: captionLineHeight,
+    textAlign: 'center',
+    width: '100%'
+  };
+  const defaultValueLabel = valueLabel ?? String(Math.round(value));
+  const defaultAccessibilityLabel = accessibilityLabel ?? `${title}. ${defaultValueLabel} out of ${max}. ${supportText}. ${caption}`;
+  return /*#__PURE__*/_jsxs(View, {
+    accessibilityRole: "progressbar",
+    accessibilityLabel: defaultAccessibilityLabel,
+    accessibilityValue: {
+      min,
+      max,
+      now: value
+    },
+    style: [containerStyle, style],
+    ...rest,
+    children: [showTitle ? /*#__PURE__*/_jsx(Text, {
+      style: [computedTitleStyle, titleStyle],
+      children: title
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: [computedArcStyle, arcStyle],
+      children: [/*#__PURE__*/_jsxs(Svg, {
+        width: "100%",
+        height: arcHeight,
+        viewBox: `0 0 ${arcWidth} ${arcHeight}`,
+        children: [/*#__PURE__*/_jsx(Path, {
+          d: arcPath,
+          stroke: trackColor,
+          strokeWidth: strokeWidth,
+          strokeLinecap: "butt",
+          fill: "none"
+        }), /*#__PURE__*/_jsx(Path, {
+          d: arcPath,
+          stroke: progressColor,
+          strokeWidth: strokeWidth,
+          strokeLinecap: "butt",
+          fill: "none",
+          strokeDasharray: `${arcLength} ${arcLength}`,
+          strokeDashoffset: arcLength * (1 - progress)
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [computedReadoutStyle, readoutStyle],
+        children: children ? cloneChildrenWithModes(children, modes) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [computedValueStyle, valueStyle],
+            children: defaultValueLabel
+          }), showSupportText ? /*#__PURE__*/_jsx(SupportText, {
+            label: supportText,
+            status: supportTextStatus,
+            modes: supportTextModes
+          }) : null]
+        })
+      })]
+    }), showCaption ? /*#__PURE__*/_jsx(Text, {
+      style: [computedCaptionStyle, captionStyle],
+      children: caption
+    }) : null]
+  });
+}
+export default Gauge;

package/lib/module/components/ListGroup/ListGroup.js

@@ -47,7 +47,9 @@ function ListGroup({
 }) {
   // Resolve container tokens
   const backgroundColor = getVariableByName('listGroup/background', modes) || 'rgba(255,255,255,0)';
-  const borderColor = getVariableByName('listGroup/border/color', modes) || 'rgba(255,255,255,0)';
+  // The current exported token aliases a missing Figma variable. Keep the
+  // transparent fallback without logging the missing alias on every render.
+  const borderColor = 'rgba(255,255,255,0)';
   const borderWidth = getVariableByName('listGroup/borderWidth', modes) || 0;
   const gap = getVariableByName('listGroup/gap', modes) || 12;
 

package/lib/module/components/MediaCard/GlassFill.js

@@ -0,0 +1,57 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet, Platform } from 'react-native';
+import { BlurView } from '@react-native-community/blur';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_FALLBACK_DARK = '#1414174a';
+const DEFAULT_FALLBACK_LIGHT = '#ffffff66';
+
+/**
+ * Glass / frosted surface for native (iOS + Android).
+ *
+ * Why this lives in its own platform-split file:
+ *   - `@react-native-community/blur` is a native-only module. Importing it on
+ *     web throws because the JS shim references native components that aren't
+ *     registered there. By using Metro's platform-extension resolution
+ *     (`GlassFill.tsx` for native, `GlassFill.web.tsx` for web), we keep the
+ *     web bundle free of any native-only imports.
+ *   - Centralizes the `intensity` (0–100) -> `blurAmount` (0–32) mapping so
+ *     callers can keep the Figma token semantics they already know.
+ *
+ * On iOS this is a real `UIVisualEffectView` (true OS-level live blur).
+ * On Android this uses the community blur view (RealtimeBlurView). On devices
+ * where realtime blur is unavailable, `reducedTransparencyFallbackColor` (and
+ * the explicit `overlayColor`) ensure the surface still renders as a
+ * translucent tinted scrim instead of disappearing.
+ */
+function GlassFill({
+  tint = 'dark',
+  intensity = 50,
+  overlayColor,
+  style
+}) {
+  const blurType = tint === 'light' ? 'light' : 'dark';
+  const blurAmount = Math.max(0, Math.min(32, Math.round(intensity * 0.32)));
+  const fallbackColor = overlayColor ?? (tint === 'light' ? DEFAULT_FALLBACK_LIGHT : DEFAULT_FALLBACK_DARK);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [StyleSheet.absoluteFill, style],
+    pointerEvents: "none",
+    children: [/*#__PURE__*/_jsx(BlurView, {
+      style: StyleSheet.absoluteFill,
+      blurType: blurType,
+      blurAmount: blurAmount,
+      reducedTransparencyFallbackColor: fallbackColor
+    }), overlayColor != null ? /*#__PURE__*/_jsx(View, {
+      style: [StyleSheet.absoluteFill, {
+        backgroundColor: overlayColor
+      }]
+    }) : null, Platform.OS === 'android' ? /*#__PURE__*/_jsx(View, {
+      style: [StyleSheet.absoluteFill, {
+        backgroundColor: 'rgba(255,255,255,0.03)',
+        opacity: 0.6
+      }]
+    }) : null]
+  });
+}
+export default GlassFill;