jfs-components 0.0.70 → 0.0.71

package/lib/module/components/CardAdvisory/CardAdvisory.js

@@ -0,0 +1,197 @@
+"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 CircularProgressBar from '../CircularProgressBar/CircularProgressBar';
+import Nudge from '../Nudge/Nudge';
+import { jsx as _jsx, 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 resolveCardAdvisoryTokens(modes) {
+  const width = toNumber(getVariableByName('cardAdvisory/width', modes), 360);
+  const gap = toNumber(getVariableByName('cardAdvisory/gap', modes), 16);
+  const paddingHorizontal = toNumber(getVariableByName('cardAdvisory/padding/horizontal', modes), 16);
+  const paddingVertical = toNumber(getVariableByName('cardAdvisory/padding/vertical', modes), 12);
+  const radius = toNumber(getVariableByName('cardAdvisory/radius', modes), 0);
+  const background = getVariableByName('cardAdvisory/background', modes) || '#ffffff';
+  const mainContentGap = toNumber(getVariableByName('cardAdvisory/mainContent/gap', modes), 16);
+  const contentGap = toNumber(getVariableByName('cardAdvisory/content/gap', modes), 6);
+  const headerGap = toNumber(getVariableByName('cardAdvisory/header/gap', modes), 8);
+  const titleColor = getVariableByName('cardAdvisory/title/foreground', modes) || '#0d0d0f';
+  const titleFontSize = toNumber(getVariableByName('cardAdvisory/title/fontSize', modes), 26);
+  const titleFontFamily = getVariableByName('cardAdvisory/title/fontFamily', modes) || 'JioType Var';
+  const titleLineHeight = toNumber(getVariableByName('cardAdvisory/title/lineHeight', modes), 26);
+  const titleFontWeight = toFontWeight(getVariableByName('cardAdvisory/title/fontWeight', modes), '900');
+  const titleDescenderAllowance = Math.ceil(titleFontSize * 0.16);
+  const descriptionColor = getVariableByName('cardAdvisory/description/foreground', modes) || '#24262b';
+  const descriptionFontSize = toNumber(getVariableByName('cardAdvisory/description/fontSize', modes), 12);
+  const descriptionFontFamily = getVariableByName('cardAdvisory/description/fontFamily', modes) || 'JioType Var';
+  const descriptionLineHeight = toNumber(getVariableByName('cardAdvisory/description/lineHeight', modes), 16);
+  const descriptionFontWeight = toFontWeight(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: getVariableByName('cardAdvisory/icon/color', modes) || '#1a1c1f',
+    iconSize: toNumber(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 = EMPTY_MODES,
+  style,
+  mainContentStyle,
+  titleStyle,
+  descriptionStyle,
+  progressStyle,
+  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(() => resolveCardAdvisoryTokens(modes), [modes]);
+  const processedTitleEndSlot = useMemo(() => {
+    if (!titleEndSlot) return null;
+    const processed = cloneChildrenWithModes(React.Children.toArray(titleEndSlot), modes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [titleEndSlot, modes]);
+  const processedProgressSlot = useMemo(() => {
+    if (!progressSlot) return null;
+    const processed = cloneChildrenWithModes(React.Children.toArray(progressSlot), modes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [progressSlot, 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 ?? `${title}. ${description}. ${Math.round(value)} out of 100. ${nudgeBody}`;
+  return /*#__PURE__*/_jsxs(View, {
+    accessibilityLabel: defaultAccessibilityLabel,
+    style: [tokens.containerStyle, style],
+    ...rest,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [tokens.mainContentStyle, mainContentStyle],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: tokens.contentStyle,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: tokens.headerStyle,
+          children: [/*#__PURE__*/_jsx(Text, {
+            numberOfLines: 1,
+            style: [tokens.titleStyle, titleStyle],
+            children: title
+          }), processedTitleEndSlot || (showInfoIcon ? /*#__PURE__*/_jsx(Icon, {
+            name: "ic_info",
+            size: tokens.iconSize,
+            color: tokens.iconColor,
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no"
+          }) : null)]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [tokens.descriptionStyle, descriptionStyle],
+          children: description
+        })]
+      }), processedProgressSlot || /*#__PURE__*/_jsx(CircularProgressBar, {
+        state: "Active",
+        value: value,
+        modes: modes,
+        style: progressStyle,
+        ...(valueLabel ? {
+          valueLabel
+        } : {})
+      })]
+    }), showNudge ? processedNudgeSlot || /*#__PURE__*/_jsx(Nudge, {
+      type: "inline-compact",
+      body: nudgeBody,
+      buttonLabel: nudgeButtonLabel,
+      modes: modes,
+      style: [{
+        width: '100%'
+      }, nudgeStyle],
+      ...(onPressNudgeButton ? {
+        onPressButton: onPressNudgeButton
+      } : {})
+    }) : null]
+  });
+}
+export default /*#__PURE__*/React.memo(CardAdvisory);

package/lib/module/components/CardCTA/CardCTA.js

@@ -2,21 +2,43 @@
 
 import React from 'react';
 import { View, Text } from 'react-native';
-import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { findVariablesByPattern, getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils';
 import IconCapsule from '../IconCapsule/IconCapsule';
 import Button from '../Button/Button';
+import Badge from '../Badge/Badge';
+import ButtonGroup from '../ButtonGroup/ButtonGroup';
+import IconButton from '../IconButton/IconButton';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const optionalTokenAvailability = new Map();
+function getOptionalVariableByName(name, modes, fallback) {
+  let isAvailable = optionalTokenAvailability.get(name);
+  if (isAvailable === undefined) {
+    isAvailable = findVariablesByPattern(name).some(variable => variable.name === name);
+    optionalTokenAvailability.set(name, isAvailable);
+  }
+  if (!isAvailable) {
+    return fallback;
+  }
+  return 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 = EMPTY_MODES,
   iconSlot,
   buttonSlot,
+  ratingBadgeSlot,
+  ratingActionsSlot,
   style
 }) {
   const {
@@ -26,6 +48,7 @@ function CardCTA({
     ...globalModes,
     ...propModes
   };
+  const isRating = type === 'rating';
   const background = getVariableByName('cardCTA/background', modes) || '#ffffff';
   const radius = getVariableByName('cardCTA/radius', modes) || 12;
   const borderSize = getVariableByName('cardCTA/border/size', modes) || 1;
@@ -48,13 +71,48 @@ function CardCTA({
   const bodyLineHeight = getVariableByName('cardCTA/body/lineHeight', modes) || 12;
   const bodyFontWeightRaw = 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.useState(null);
+  const buttonPaddingH = getVariableByName('button/padding/horizontal', buttonModes) || 20;
+  const buttonBorderSize = getVariableByName('button/border/size', buttonModes) ?? 1;
+  const measuredButtonWidth = measuredButtonLabelWidth === null ? undefined : Math.ceil(measuredButtonLabelWidth + buttonPaddingH * 2 + buttonBorderSize * 2);
+  const handleButtonLabelTextLayout = React.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.
@@ -71,7 +129,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
@@ -100,6 +160,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,
@@ -114,6 +197,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__*/_jsxs(View, {
+      style: [containerStyle, style],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: ratingContentStyle,
+        children: [ratingBadgeSlot ? cloneChildrenWithModes(ratingBadgeSlot, modes) : /*#__PURE__*/_jsx(Badge, {
+          label: ratingLabel,
+          modes: modes
+        }), /*#__PURE__*/_jsxs(View, {
+          style: textWrapStyle,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: titleStyle,
+            children: title
+          }), /*#__PURE__*/_jsx(Text, {
+            style: bodyStyle,
+            children: body
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: ratingFooterStyle,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: ratingButtonWrapStyle,
+          children: buttonSlot ? cloneChildrenWithModes(buttonSlot, buttonModes) : /*#__PURE__*/_jsx(Button, {
+            label: effectiveButtonLabel,
+            onPress: onPressButton || (() => {}),
+            modes: buttonModes,
+            style: ratingButtonStyle,
+            renderContent: labelStyles => /*#__PURE__*/_jsx(Text, {
+              onTextLayout: handleButtonLabelTextLayout,
+              style: [labelStyles, ratingButtonLabelStyle],
+              children: nonWrappingButtonLabel
+            })
+          })
+        }), showRatingActions ? ratingActionsSlot ? cloneChildrenWithModes(ratingActionsSlot, iconButtonModes) : /*#__PURE__*/_jsxs(ButtonGroup, {
+          modes: iconButtonModes,
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            iconName: "ic_like",
+            accessibilityLabel: "Like",
+            ...(onPressLike ? {
+              onPress: onPressLike
+            } : {})
+          }), /*#__PURE__*/_jsx(IconButton, {
+            iconName: "ic_dislike",
+            accessibilityLabel: "Dislike",
+            ...(onPressDislike ? {
+              onPress: onPressDislike
+            } : {})
+          })]
+        }) : null]
+      })]
+    });
+  }
   return /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
     children: [/*#__PURE__*/_jsxs(View, {
@@ -127,18 +308,19 @@ function CardCTA({
           style: bodyStyle,
           children: body
         })]
-      }), buttonSlot ? cloneChildrenWithModes(buttonSlot, {
-        ...modes,
-        AppearanceBrand: 'Secondary',
-        'Button / Size': 'S'
-      }) : /*#__PURE__*/_jsx(Button, {
-        label: buttonLabel,
-        onPress: onPressButton || (() => {}),
-        modes: {
-          ...modes,
-          AppearanceBrand: 'Secondary',
-          'Button / Size': 'S'
-        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: buttonWrapStyle,
+        children: buttonSlot ? cloneChildrenWithModes(buttonSlot, buttonModes) : /*#__PURE__*/_jsx(Button, {
+          label: effectiveButtonLabel,
+          onPress: onPressButton || (() => {}),
+          modes: buttonModes,
+          style: buttonStyle,
+          renderContent: labelStyles => /*#__PURE__*/_jsx(Text, {
+            onTextLayout: handleButtonLabelTextLayout,
+            style: [labelStyles, buttonLabelStyle],
+            children: nonWrappingButtonLabel
+          })
+        })
       })]
     }), /*#__PURE__*/_jsx(View, {
       style: rightWrapStyle,

package/lib/module/components/CircularProgressBar/CircularProgressBar.js

@@ -0,0 +1,141 @@
+"use strict";
+
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import { IconMinus } from '../../icons/components/IconMinus';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 = StyleSheet.flatten(style);
+  return typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
+};
+function CircularProgressBar({
+  value = 70,
+  state = 'Inactive',
+  valueLabel,
+  modes: propModes = EMPTY_MODES,
+  style,
+  trackStyle,
+  progressStyle,
+  valueStyle,
+  accessibilityLabel,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const isActive = state === true || state === 'Active';
+  const normalizedValue = clamp(value, 0, 100);
+  const size = toNumber(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, getVariableByName('circularProgressBar/track/color', modes) || '#ebebed');
+  const progressColor = getStrokeColor(progressStyle, getVariableByName('circularProgressBar/progress/color', modes) || '#25ab21');
+  const iconColor = getVariableByName('circularProgressBar/icon/color', modes) || '#666666';
+  const iconSize = toNumber(getVariableByName('circularProgressBar/icon/size', modes), 24);
+  const foreground = getVariableByName('circularProgressBar/foreground', modes) || '#0d0d0f';
+  const fontSize = toNumber(getVariableByName('circularProgressBar/fontSize', modes), 18);
+  const fontFamily = getVariableByName('circularProgressBar/fontFamily', modes) || 'JioType Var';
+  const lineHeight = toNumber(getVariableByName('circularProgressBar/lineHeight', modes), 21);
+  const fontWeight = toFontWeight(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__*/_jsxs(View, {
+    accessibilityRole: "progressbar",
+    accessibilityLabel: defaultAccessibilityLabel,
+    accessibilityValue: {
+      min: 0,
+      max: 100,
+      now: normalizedValue
+    },
+    style: [computedContainerStyle, style],
+    ...rest,
+    children: [/*#__PURE__*/_jsxs(Svg, {
+      width: size,
+      height: size,
+      viewBox: `0 0 ${size} ${size}`,
+      children: [/*#__PURE__*/_jsx(Circle, {
+        cx: center,
+        cy: center,
+        r: radius,
+        stroke: trackColor,
+        strokeWidth: strokeWidth,
+        fill: "none"
+      }), isActive ? /*#__PURE__*/_jsx(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__*/_jsx(Text, {
+      style: [computedValueStyle, valueStyle],
+      children: displayValue
+    }) : /*#__PURE__*/_jsx(IconMinus, {
+      width: iconSize,
+      height: iconSize,
+      fill: iconColor,
+      color: iconColor,
+      style: iconStyle
+    })]
+  });
+}
+export default CircularProgressBar;