jfs-components 0.0.70 → 0.0.71

package/lib/typescript/src/components/CardAdvisory/CardAdvisory.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+type CardAdvisoryBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
+export type CardAdvisoryProps = CardAdvisoryBaseProps & {
+    /** Main heading text. */
+    title?: string;
+    /** Description shown below the heading. */
+    description?: string;
+    /** Progress score displayed in the circular progress bar. */
+    value?: number;
+    /** Optional formatted score label. */
+    valueLabel?: string;
+    /** Show the info icon beside the title. */
+    showInfoIcon?: boolean;
+    /** Show the bottom advisory nudge. */
+    showNudge?: boolean;
+    /** Body text for the default nudge. */
+    nudgeBody?: string;
+    /** Button label for the default nudge. */
+    nudgeButtonLabel?: string;
+    /** Callback for the default nudge button. */
+    onPressNudgeButton?: () => void;
+    /** Optional slot replacing the title info icon. Receives `modes` recursively. */
+    titleEndSlot?: React.ReactNode;
+    /** Optional slot replacing the circular progress bar. Receives `modes` recursively. */
+    progressSlot?: React.ReactNode;
+    /** Optional slot replacing the bottom nudge. Receives `modes` recursively. */
+    nudgeSlot?: React.ReactNode;
+    /** Design token modes forwarded to token lookups and child components. */
+    modes?: Record<string, any>;
+    /** Optional container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Optional main content row style override. */
+    mainContentStyle?: StyleProp<ViewStyle>;
+    /** Optional title text style override. */
+    titleStyle?: StyleProp<TextStyle>;
+    /** Optional description text style override. */
+    descriptionStyle?: StyleProp<TextStyle>;
+    /** Optional progress wrapper style override. */
+    progressStyle?: StyleProp<ViewStyle>;
+    /** Optional nudge style override. */
+    nudgeStyle?: StyleProp<ViewStyle>;
+    /** Accessibility label for the full card. */
+    accessibilityLabel?: string;
+};
+declare function CardAdvisory({ title, description, value, valueLabel, showInfoIcon, showNudge, nudgeBody, nudgeButtonLabel, onPressNudgeButton, titleEndSlot, progressSlot, nudgeSlot, modes: propModes, style, mainContentStyle, titleStyle, descriptionStyle, progressStyle, nudgeStyle, accessibilityLabel, ...rest }: CardAdvisoryProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof CardAdvisory>;
+export default _default;
+//# sourceMappingURL=CardAdvisory.d.ts.map

package/lib/typescript/src/components/CardCTA/CardCTA.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 import { type ViewStyle, type StyleProp } from 'react-native';
+export type CardCTAType = 'cta' | 'rating';
 export type CardCTAProps = {
+    /** Visual layout variant */
+    type?: CardCTAType;
     /** Title text */
     title?: string;
     /** Body / subtitle text */
@@ -11,15 +14,27 @@ export type CardCTAProps = {
     buttonLabel?: string;
     /** Callback for the default Button press */
     onPressButton?: () => void;
+    /** Label shown in the rating badge */
+    ratingLabel?: string;
+    /** Show like/dislike actions in the rating footer */
+    showRatingActions?: boolean;
+    /** Callback for the default like action */
+    onPressLike?: () => void;
+    /** Callback for the default dislike action */
+    onPressDislike?: () => void;
     /** Mode configuration for design token resolution */
     modes?: Record<string, any>;
     /** Slot: replaces the default icon area (right side) */
     iconSlot?: React.ReactNode;
     /** Slot: replaces the default Button */
     buttonSlot?: React.ReactNode;
+    /** Slot: replaces the default rating badge */
+    ratingBadgeSlot?: React.ReactNode;
+    /** Slot: replaces the default like/dislike action group */
+    ratingActionsSlot?: React.ReactNode;
     /** Container style overrides */
     style?: StyleProp<ViewStyle>;
 };
-declare function CardCTA({ title, body, iconName, buttonLabel, onPressButton, modes: propModes, iconSlot, buttonSlot, style, }: CardCTAProps): import("react/jsx-runtime").JSX.Element;
+declare function CardCTA({ type, title, body, iconName, buttonLabel, onPressButton, ratingLabel, showRatingActions, onPressLike, onPressDislike, modes: propModes, iconSlot, buttonSlot, ratingBadgeSlot, ratingActionsSlot, style, }: CardCTAProps): import("react/jsx-runtime").JSX.Element;
 export default CardCTA;
 //# sourceMappingURL=CardCTA.d.ts.map

package/lib/typescript/src/components/CircularProgressBar/CircularProgressBar.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+type CircularProgressBarBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
+export type CircularProgressBarState = 'Active' | 'Inactive';
+export type CircularProgressBarProps = CircularProgressBarBaseProps & {
+    /** Current progress value. Clamped between 0 and 100. */
+    value?: number;
+    /** Active shows progress and value; inactive shows the track and minus icon. */
+    state?: CircularProgressBarState | boolean;
+    /** Optional formatted value shown in the active state. */
+    valueLabel?: string;
+    /** Design token modes forwarded to token lookups. */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Track stroke style override. */
+    trackStyle?: StyleProp<ViewStyle>;
+    /** Progress stroke style override. */
+    progressStyle?: StyleProp<ViewStyle>;
+    /** Value text style override. */
+    valueStyle?: StyleProp<TextStyle>;
+    /** Accessibility label for the whole progress component. */
+    accessibilityLabel?: string;
+};
+declare function CircularProgressBar({ value, state, valueLabel, modes: propModes, style, trackStyle, progressStyle, valueStyle, accessibilityLabel, ...rest }: CircularProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export default CircularProgressBar;
+//# sourceMappingURL=CircularProgressBar.d.ts.map

package/lib/typescript/src/components/CircularProgressBarDoted/CircularProgressBarDoted.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+type CircularProgressBarDotedBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
+export type CircularProgressBarDotedProps = CircularProgressBarDotedBaseProps & {
+    /** Progress value. Clamped between 0 and 100. */
+    value?: number;
+    /** Number of dots in the ring. */
+    dotCount?: number;
+    /** Small label above the score. */
+    label?: string;
+    /** Text below the score. */
+    tierLabel?: string;
+    /** Show or hide the chevron after the tier label. */
+    showChevron?: boolean;
+    /** Called when the component is pressed. */
+    onPress?: () => void;
+    /** Called when the tier row is pressed. */
+    onTierPress?: () => void;
+    /** Design token modes forwarded to token lookups and slot children. */
+    modes?: Record<string, any>;
+    /** Slot rendered in the center of the dotted ring. Receives `modes` recursively. */
+    children?: React.ReactNode;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Ring wrapper style override. */
+    ringStyle?: StyleProp<ViewStyle>;
+    /** Track dot style override. */
+    trackDotStyle?: StyleProp<ViewStyle>;
+    /** Progress dot style override. */
+    progressDotStyle?: StyleProp<ViewStyle>;
+    /** Center content style override. */
+    contentStyle?: StyleProp<ViewStyle>;
+    /** Score tier stack style override. */
+    scoreTierStyle?: StyleProp<ViewStyle>;
+    /** Score trend row style override. */
+    scoreTrendStyle?: StyleProp<ViewStyle>;
+    /** Label text style override. */
+    labelStyle?: StyleProp<TextStyle>;
+    /** Score text style override. */
+    scoreLabelStyle?: StyleProp<TextStyle>;
+    /** Tier text style override. */
+    tierLabelStyle?: StyleProp<TextStyle>;
+    /** Accessibility label for the whole progress component. */
+    accessibilityLabel?: string;
+};
+declare function CircularProgressBarDoted({ value, dotCount, label, tierLabel, showChevron, onPress, onTierPress, modes: propModes, children, style, ringStyle, trackDotStyle, progressDotStyle, contentStyle, scoreTierStyle, scoreTrendStyle, labelStyle, scoreLabelStyle, tierLabelStyle, accessibilityLabel, onLayout, ...rest }: CircularProgressBarDotedProps): import("react/jsx-runtime").JSX.Element;
+export default CircularProgressBarDoted;
+//# sourceMappingURL=CircularProgressBarDoted.d.ts.map

package/lib/typescript/src/components/CircularRating/CircularRating.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+type CircularRatingBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
+export type CircularRatingProps = CircularRatingBaseProps & {
+    /** Rating value. Clamped by CircularProgressBarDoted between 0 and 100. */
+    value?: number;
+    /** Number of dots rendered around the rating ring. */
+    dotCount?: number;
+    /** Small label above the score. */
+    label?: string;
+    /** Text below the score. */
+    tierLabel?: string;
+    /** Footer timestamp/copy shown below the rating. */
+    footerText?: string;
+    /** Show the footer info icon. */
+    showFooterIcon?: boolean;
+    /** Show the bottom inline nudge. */
+    showNudge?: boolean;
+    /** Body text for the default bottom nudge. */
+    nudgeBody?: string;
+    /** Button label for the default bottom nudge. */
+    nudgeButtonLabel?: string;
+    /** Called when the nudge button is pressed. */
+    onPressNudgeButton?: () => void;
+    /** Called when the rating tier row is pressed. */
+    onTierPress?: () => void;
+    /** Optional footer slot. Receives `modes` recursively. */
+    footerSlot?: React.ReactNode;
+    /** Optional nudge slot. Receives `modes` recursively. */
+    nudgeSlot?: React.ReactNode;
+    /** Design token modes forwarded to token lookups and child components. */
+    modes?: Record<string, any>;
+    /** Optional container style overrides. */
+    style?: StyleProp<ViewStyle>;
+    /** Optional rating ring wrapper style overrides. */
+    ratingStyle?: StyleProp<ViewStyle>;
+    /** Optional footer row style overrides. */
+    footerStyle?: StyleProp<ViewStyle>;
+    /** Optional footer text style overrides. */
+    footerTextStyle?: StyleProp<TextStyle>;
+    /** Optional nudge style overrides. */
+    nudgeStyle?: StyleProp<ViewStyle>;
+    /** Accessibility label for the whole component. */
+    accessibilityLabel?: string;
+};
+declare function CircularRating({ value, dotCount, label, tierLabel, footerText, showFooterIcon, showNudge, nudgeBody, nudgeButtonLabel, onPressNudgeButton, onTierPress, footerSlot, nudgeSlot, modes: propModes, style, ratingStyle, footerStyle, footerTextStyle, nudgeStyle, accessibilityLabel, ...rest }: CircularRatingProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof CircularRating>;
+export default _default;
+//# sourceMappingURL=CircularRating.d.ts.map

package/lib/typescript/src/components/Gauge/Gauge.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { type SupportTextProps } from '../SupportText/SupportText';
+type GaugeBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
+export type GaugeProps = GaugeBaseProps & {
+    /** Current gauge value. Interpreted against `min` and `max`. */
+    value?: number;
+    /** Lower bound used to normalize progress. */
+    min?: number;
+    /** Upper bound used to normalize progress. */
+    max?: number;
+    /** Optional formatted value shown in the default readout. */
+    valueLabel?: string;
+    /** Heading above the arc. */
+    title?: string;
+    /** Caption below the arc. */
+    caption?: string;
+    /** Support text shown in the default readout. */
+    supportText?: string;
+    /** Status passed to the default SupportText component. */
+    supportTextStatus?: SupportTextProps['status'];
+    /** Hides the heading while keeping the rest of the layout intact. */
+    showTitle?: boolean;
+    /** Hides the caption while keeping the rest of the layout intact. */
+    showCaption?: boolean;
+    /** Hides default support text when no custom readout slot is provided. */
+    showSupportText?: boolean;
+    /** Design token modes forwarded to token lookups and slot children. */
+    modes?: Record<string, any>;
+    /** Slot rendered in the center of the gauge arc. Receives `modes` recursively. */
+    children?: React.ReactNode;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Arc wrapper style override. */
+    arcStyle?: StyleProp<ViewStyle>;
+    /** Readout container style override. */
+    readoutStyle?: StyleProp<ViewStyle>;
+    /** Title text style override. */
+    titleStyle?: StyleProp<TextStyle>;
+    /** Value text style override. */
+    valueStyle?: StyleProp<TextStyle>;
+    /** Caption text style override. */
+    captionStyle?: StyleProp<TextStyle>;
+    /** Track stroke style override. */
+    trackStyle?: StyleProp<ViewStyle>;
+    /** Progress stroke style override. */
+    progressStyle?: StyleProp<ViewStyle>;
+    /** Accessibility label for the whole gauge. */
+    accessibilityLabel?: string;
+};
+declare function Gauge({ value, min, max, valueLabel, title, caption, supportText, supportTextStatus, showTitle, showCaption, showSupportText, modes: propModes, children, style, arcStyle, readoutStyle, titleStyle, valueStyle, captionStyle, trackStyle, progressStyle, accessibilityLabel, ...rest }: GaugeProps): import("react/jsx-runtime").JSX.Element;
+export default Gauge;
+//# sourceMappingURL=Gauge.d.ts.map

package/lib/typescript/src/components/Nudge/Nudge.d.ts

@@ -1,31 +1,34 @@
 import React from 'react';
 import { type ViewStyle, type StyleProp } from 'react-native';
+export type NudgeType = 'stacked-prominent' | 'stacked-detailed' | 'inline-compact';
 export type NudgeProps = {
     /**
-     * Controls the layout variant.
-     * - "Default": horizontal layout with optional start icon and content (title/body/button or children slot)
-     * - "Variant2": vertical layout with header (icon + title) and children slot below
+     * Controls the layout type.
+     * - "stacked-prominent": icon + title/body/button content
+     * - "inline-compact": icon + body/button in one row
+     * - "stacked-detailed": header + children detail slot
      */
-    variant?: 'Default' | 'Variant2';
+    type?: NudgeType;
     /** Title text displayed in the nudge */
     title?: string;
-    /** Body text displayed below the title (Default variant only, when no children are provided) */
+    /** Body text displayed in prominent and compact types when no children are provided */
     body?: string;
-    /** Label for the default button (Default variant only, when no children are provided) */
+    /** Label for the default button when no buttonSlot is provided */
     buttonLabel?: string;
     /** Callback for the default button press */
     onPressButton?: () => void;
-    /** Custom button slot (Default variant only, overrides buttonLabel/onPressButton) */
+    /** Custom button slot, overrides buttonLabel/onPressButton */
     buttonSlot?: React.ReactNode;
-    /** Optional leading slot for an icon/element. Pass null or omit to hide. */
-    startSlot?: React.ReactNode;
-    /** Content slot — overrides the default title/body/button content */
+    /** Optional leading slot. Omit for the token-driven sparkle icon, pass null/false to hide. */
+    startSlot?: React.ReactNode | false;
+    /** Content slot — overrides default content, or provides detailed list content */
     children?: React.ReactNode;
     /** Mode configuration for design token resolution */
     modes?: Record<string, any>;
     /** Optional container style overrides */
     style?: StyleProp<ViewStyle>;
 };
-declare function Nudge({ variant, title, body, buttonLabel, onPressButton, buttonSlot, startSlot, children, modes: propModes, style, }: NudgeProps): import("react/jsx-runtime").JSX.Element;
+declare function NudgeImpl({ type, title, body, buttonLabel, onPressButton, buttonSlot, startSlot, children, modes: propModes, style, }: NudgeProps): import("react/jsx-runtime").JSX.Element;
+declare const Nudge: React.MemoExoticComponent<typeof NudgeImpl>;
 export default Nudge;
 //# sourceMappingURL=Nudge.d.ts.map

package/lib/typescript/src/components/index.d.ts

@@ -7,6 +7,7 @@ export { default as BottomNav } from './BottomNav/BottomNav';
 export { default as BottomNavItem } from './BottomNavItem/BottomNavItem';
 export { default as Button, type ButtonProps } from './Button/Button';
 export { default as Card } from './Card/Card';
+export { default as CardAdvisory, type CardAdvisoryProps } from './CardAdvisory/CardAdvisory';
 export { default as Carousel } from './Carousel/Carousel';
 export type { CarouselProps, CarouselItemProps, PaginationProps } from './Carousel/Carousel';
 export { default as Checkbox, type CheckboxProps } from './Checkbox/Checkbox';
@@ -14,12 +15,16 @@ export { default as CardFeedback, type CardFeedbackProps } from './CardFeedback/
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
-export { default as CardCTA, type CardCTAProps } from './CardCTA/CardCTA';
+export { default as CardCTA, type CardCTAProps, type CardCTAType } from './CardCTA/CardCTA';
 export { default as DebitCard, type DebitCardProps } from './DebitCard/DebitCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
 export { default as Form, type FormProps } from './Form/Form';
 export { useFormContext } from './Form/Form';
 export { default as FormField, type FormFieldProps, type FormFieldType } from './FormField/FormField';
+export { default as CircularProgressBar, type CircularProgressBarProps } from './CircularProgressBar/CircularProgressBar';
+export { default as CircularProgressBarDoted, type CircularProgressBarDotedProps } from './CircularProgressBarDoted/CircularProgressBarDoted';
+export { default as CircularRating, type CircularRatingProps } from './CircularRating/CircularRating';
+export { default as Gauge, type GaugeProps } from './Gauge/Gauge';
 export { default as HoldingsCard, type HoldingsCardProps } from './HoldingsCard/HoldingsCard';
 export { default as HStack, type HStackProps } from './HStack/HStack';
 export { default as IconButton } from './IconButton/IconButton';

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-04-23T10:31:30.721Z
+ * Generated: 2026-04-30T09:22:52.462Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.70",
+  "version": "0.0.71",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",

package/src/components/CardAdvisory/CardAdvisory.tsx

@@ -0,0 +1,283 @@
+import React, { useMemo } from 'react'
+import {
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} 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'
+
+type CardAdvisoryBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>
+
+export type CardAdvisoryProps = CardAdvisoryBaseProps & {
+  /** Main heading text. */
+  title?: string
+  /** Description shown below the heading. */
+  description?: string
+  /** Progress score displayed in the circular progress bar. */
+  value?: number
+  /** Optional formatted score label. */
+  valueLabel?: string
+  /** Show the info icon beside the title. */
+  showInfoIcon?: boolean
+  /** Show the bottom advisory nudge. */
+  showNudge?: boolean
+  /** Body text for the default nudge. */
+  nudgeBody?: string
+  /** Button label for the default nudge. */
+  nudgeButtonLabel?: string
+  /** Callback for the default nudge button. */
+  onPressNudgeButton?: () => void
+  /** Optional slot replacing the title info icon. Receives `modes` recursively. */
+  titleEndSlot?: React.ReactNode
+  /** Optional slot replacing the circular progress bar. Receives `modes` recursively. */
+  progressSlot?: React.ReactNode
+  /** Optional slot replacing the bottom nudge. Receives `modes` recursively. */
+  nudgeSlot?: React.ReactNode
+  /** Design token modes forwarded to token lookups and child components. */
+  modes?: Record<string, any>
+  /** Optional container style override. */
+  style?: StyleProp<ViewStyle>
+  /** Optional main content row style override. */
+  mainContentStyle?: StyleProp<ViewStyle>
+  /** Optional title text style override. */
+  titleStyle?: StyleProp<TextStyle>
+  /** Optional description text style override. */
+  descriptionStyle?: StyleProp<TextStyle>
+  /** Optional progress wrapper style override. */
+  progressStyle?: StyleProp<ViewStyle>
+  /** Optional nudge style override. */
+  nudgeStyle?: StyleProp<ViewStyle>
+  /** Accessibility label for the full card. */
+  accessibilityLabel?: string
+}
+
+interface CardAdvisoryTokens {
+  containerStyle: ViewStyle
+  mainContentStyle: ViewStyle
+  contentStyle: ViewStyle
+  headerStyle: ViewStyle
+  titleStyle: TextStyle
+  descriptionStyle: TextStyle
+  iconColor: string
+  iconSize: number
+}
+
+const toNumber = (value: unknown, fallback: number) => {
+  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: unknown, fallback: TextStyle['fontWeight']) => {
+  if (typeof value === 'number') {
+    return String(value) as TextStyle['fontWeight']
+  }
+
+  if (typeof value === 'string') {
+    return value as TextStyle['fontWeight']
+  }
+
+  return fallback
+}
+
+function resolveCardAdvisoryTokens(modes: Record<string, any>): CardAdvisoryTokens {
+  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 as string,
+      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 as string,
+      fontFamily: titleFontFamily as string,
+      fontSize: titleFontSize,
+      fontWeight: titleFontWeight,
+      lineHeight: titleLineHeight,
+      marginBottom: -titleDescenderAllowance,
+      paddingBottom: titleDescenderAllowance,
+    },
+    descriptionStyle: {
+      color: descriptionColor as string,
+      fontFamily: descriptionFontFamily as string,
+      fontSize: descriptionFontSize,
+      fontWeight: descriptionFontWeight,
+      lineHeight: descriptionLineHeight,
+      width: '100%',
+    },
+    iconColor: (getVariableByName('cardAdvisory/icon/color', modes) || '#1a1c1f') as string,
+    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
+}: CardAdvisoryProps) {
+  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 (
+    <View
+      accessibilityLabel={defaultAccessibilityLabel}
+      style={[tokens.containerStyle, style]}
+      {...rest}
+    >
+      <View style={[tokens.mainContentStyle, mainContentStyle]}>
+        <View style={tokens.contentStyle}>
+          <View style={tokens.headerStyle}>
+            <Text numberOfLines={1} style={[tokens.titleStyle, titleStyle]}>
+              {title}
+            </Text>
+            {processedTitleEndSlot || (showInfoIcon ? (
+              <Icon
+                name="ic_info"
+                size={tokens.iconSize}
+                color={tokens.iconColor}
+                accessibilityElementsHidden={true}
+                importantForAccessibility="no"
+              />
+            ) : null)}
+          </View>
+          <Text style={[tokens.descriptionStyle, descriptionStyle]}>
+            {description}
+          </Text>
+        </View>
+
+        {processedProgressSlot || (
+          <CircularProgressBar
+            state="Active"
+            value={value}
+            modes={modes}
+            style={progressStyle}
+            {...(valueLabel ? { valueLabel } : {})}
+          />
+        )}
+      </View>
+
+      {showNudge ? (
+        processedNudgeSlot || (
+          <Nudge
+            type="inline-compact"
+            body={nudgeBody}
+            buttonLabel={nudgeButtonLabel}
+            modes={modes}
+            style={[{ width: '100%' }, nudgeStyle]}
+            {...(onPressNudgeButton ? { onPressButton: onPressNudgeButton } : {})}
+          />
+        )
+      ) : null}
+    </View>
+  )
+}
+
+export default React.memo(CardAdvisory)