jfs-components 0.0.71 → 0.0.73

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

@@ -5,13 +5,19 @@ export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
 export { default as Badge } from './Badge/Badge';
 export { default as BottomNav } from './BottomNav/BottomNav';
 export { default as BottomNavItem } from './BottomNavItem/BottomNavItem';
+export { default as BrandChip, type BrandChipProps } from './BrandChip/BrandChip';
 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 CardBankAccount, type CardBankAccountProps, type CardBankAccountItem } from './CardBankAccount/CardBankAccount';
 export { default as Carousel } from './Carousel/Carousel';
 export type { CarouselProps, CarouselItemProps, PaginationProps } from './Carousel/Carousel';
 export { default as Checkbox, type CheckboxProps } from './Checkbox/Checkbox';
+export { default as CheckboxItem, type CheckboxItemProps } from './CheckboxItem/CheckboxItem';
+export { default as CheckboxGroup, type CheckboxGroupProps } from './CheckboxGroup/CheckboxGroup';
 export { default as CardFeedback, type CardFeedbackProps } from './CardFeedback/CardFeedback';
+export { default as CardFinancialCondition, type CardFinancialConditionProps } from './CardFinancialCondition/CardFinancialCondition';
+export { default as CardInsight, type CardInsightProps } from './CardInsight/CardInsight';
 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';
@@ -24,6 +30,9 @@ export { default as FormField, type FormFieldProps, type FormFieldType } from '.
 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 CoverageRing, type CoverageRingProps } from './CoverageRing/CoverageRing';
+export { default as CoverageBarComparison, type CoverageBarComparisonProps, type CoverageBarComparisonItem } from './CoverageBarComparison/CoverageBarComparison';
+export { default as MonthlyStatusGrid, CalendarGlyph, type MonthlyStatusGridProps, type MonthlyStatusGridMonth, type MonthlyStatus, type CalendarGlyphProps } from './MonthlyStatusGrid/MonthlyStatusGrid';
 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';
@@ -32,10 +41,12 @@ export { default as IconCapsule } from './IconCapsule/IconCapsule';
 export { default as Image, type ImageProps } from './Image/Image';
 export { default as LazyList } from './LazyList/LazyList';
 export { default as LinearMeter, type LinearMeterProps } from './LinearMeter/LinearMeter';
+export { default as LinearProgress, type LinearProgressProps } from './LinearProgress/LinearProgress';
 export { default as ListGroup } from './ListGroup/ListGroup';
 export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard, type MediaCardProps } from './MediaCard/MediaCard';
 export { default as MerchantProfile, type MerchantProfileProps } from './MerchantProfile/MerchantProfile';
+export { default as MetricLegendItem, type MetricLegendItemProps } from './MetricLegendItem/MetricLegendItem';
 export { default as MoneyValue } from './MoneyValue/MoneyValue';
 export { default as NoteInput, type NoteInputProps } from './NoteInput/NoteInput';
 export { default as Nudge, type NudgeProps } from './Nudge/Nudge';
@@ -59,16 +70,28 @@ export { default as VStack, type VStackProps } from './VStack/VStack';
 export { default as ChipGroup, type ChipGroupProps } from './ChipGroup/ChipGroup';
 export { default as EmptyState, type EmptyStateProps } from './EmptyState/EmptyState';
 export { default as Accordion, type AccordionProps } from './Accordion/Accordion';
+export { default as AccordionCheckbox, type AccordionCheckboxProps } from './AccordionCheckbox/AccordionCheckbox';
 export { default as ActionTile, type ActionTileProps } from './ActionTile/ActionTile';
 export { default as Balance, type BalanceProps } from './Balance/Balance';
 export { default as ButtonGroup, type ButtonGroupProps } from './ButtonGroup/ButtonGroup';
 export { default as CardProviderInfo, type CardProviderInfoProps } from './CardProviderInfo/CardProviderInfo';
 export { default as ChipSelect, type ChipSelectProps } from './ChipSelect/ChipSelect';
 export { default as InputSearch, type InputSearchProps } from './InputSearch/InputSearch';
+export { default as InstitutionBadge, type InstitutionBadgeProps } from './InstitutionBadge/InstitutionBadge';
 export { default as SupportText, type SupportTextProps } from './SupportText/SupportText';
 export { default as SupportTextIcon, type SupportTextIconProps, type SupportTextStatus } from './SupportText/SupportTextIcon';
+export { default as Radio, type RadioProps } from './Radio/Radio';
+/**
+ * @deprecated Use `Radio` instead. `RadioButton` is kept as an alias for
+ * backward compatibility and will be removed in a future major release.
+ */
 export { default as RadioButton, type RadioButtonProps } from './RadioButton/RadioButton';
 export { default as RechargeCard, type RechargeCardProps } from './RechargeCard/RechargeCard';
+export { default as SavingsGoalSummary, type SavingsGoalSummaryProps, type SavingsGoalSummaryItem } from './SavingsGoalSummary/SavingsGoalSummary';
+export { default as DonutChart, type DonutChartProps, type DonutChartSegmentData, type DonutChartSegmentProps, DonutChartSegment } from './DonutChart/DonutChart';
+export { default as DonutChartSummary, type DonutChartSummaryProps, type DonutChartSummaryItem } from './DonutChartSummary/DonutChartSummary';
+export { default as RangeTrack, type RangeTrackProps, type RangeTrackTab, type RangeTrackItem } from './RangeTrack/RangeTrack';
+export { default as SegmentedTrack, type SegmentedTrackProps, type SegmentedTrackSegmentData, type SegmentedTrackSegmentProps, SegmentedTrackSegment } from './SegmentedTrack/SegmentedTrack';
 export { default as Tabs, type TabsProps } from './Tabs/Tabs';
 export { default as TabItem, type TabItemProps } from './Tabs/TabItem';
 export { default as Toast, type ToastProps } from './Toast/Toast';
@@ -78,11 +101,15 @@ export { default as AmountInput, type AmountInputProps } from './AmountInput/Amo
 export { default as Popup, type PopupProps, type PopupRef } from './Popup/Popup';
 export { default as PortfolioHero, type PortfolioHeroProps } from './PortfolioHero/PortfolioHero';
 export { default as ProductLabel, type ProductLabelProps } from './ProductLabel/ProductLabel';
+export { default as ProductOverview, type ProductOverviewProps, type ProductOverviewStat } from './ProductOverview/ProductOverview';
 export { default as ProgressBadge, type ProgressBadgeProps } from './ProgressBadge/ProgressBadge';
 export { default as SwappableAmount, type SwappableAmountProps } from './SwappableAmount/SwappableAmount';
-export { default as OTP, type OTPProps } from './OTP/OTP';
+export { default as OTP, OTPResend, useOtpResend, type OTPProps, type OTPResendProps, type OTPResendConfig, type UseOtpResendOptions, type UseOtpResendReturn, type OtpResendState, } from './OTP/OTP';
 export { default as PaymentFeedback, type PaymentFeedbackProps } from './PaymentFeedback/PaymentFeedback';
-export { default as StatItem, type StatItemProps } from './StatItem/StatItem';
+export { default as StatItem, type StatItemProps, type StatItemLabelPosition } from './StatItem/StatItem';
+export { default as StatGroup, type StatGroupProps, type StatGroupItem } from './StatGroup/StatGroup';
+export { default as StrengthIndicator, type StrengthIndicatorProps, type StrengthIndicatorConfidence, type StrengthIndicatorConfidenceValue } from './StrengthIndicator/StrengthIndicator';
+export { default as SummaryTile, type SummaryTileProps } from './SummaryTile/SummaryTile';
 export { default as Text, type TextProps } from './Text/Text';
 export { default as SegmentedControl, type SegmentedControlProps, type SegmentedControlItem } from './SegmentedControl/SegmentedControl';
 export { default as Toggle, type ToggleProps } from './Toggle/Toggle';

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-30T09:22:52.462Z
+ * Generated: 2026-05-15T16:18:56.427Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

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

@@ -1,4 +1,5 @@
 export { cloneChildrenWithModes, flattenChildren } from './react-utils';
 export { default as MediaSource } from './MediaSource';
 export type { UnifiedSource, MediaSourceProps } from './MediaSource';
+export { formatIndianNumber } from './number-utils';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/utils/number-utils.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Format a number using the Indian numeric system.
+ *
+ * - Below 1 lakh (100,000): standard Indian-locale comma grouping (e.g. `12,400`).
+ * - 1 lakh up to (but excluding) 1 crore: shorthand `L` (e.g. `2.4L`).
+ * - 1 crore and above: shorthand `Cr` (e.g. `1.2Cr`).
+ *
+ * Trailing zero decimals are trimmed, so `100000` becomes `1L` rather than `1.0L`.
+ * Negative values keep the sign (`-2.4L`). Non-finite inputs (`NaN`, `Infinity`)
+ * are returned via `String(value)` so callers can decide how to handle them.
+ *
+ * @example formatIndianNumber(240000)    // "2.4L"
+ * @example formatIndianNumber(12400)     // "12,400"
+ * @example formatIndianNumber(15000000)  // "1.5Cr"
+ * @example formatIndianNumber(-100000)   // "-1L"
+ * @example formatIndianNumber(99999)     // "99,999"
+ *
+ * @param value     The number to format.
+ * @param options   Optional formatting overrides.
+ * @param options.decimals  Maximum number of decimal places used in the
+ *                          shorthand `L` / `Cr` form. Defaults to `1`.
+ * @param options.prefix    String to prefix the output with — useful for a
+ *                          currency symbol, e.g. `'₹'`. Defaults to `''`.
+ */
+export declare function formatIndianNumber(value: number, options?: {
+    decimals?: number;
+    prefix?: string;
+}): string;
+//# sourceMappingURL=number-utils.d.ts.map

package/package.json

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

package/src/components/AccordionCheckbox/AccordionCheckbox.tsx

@@ -0,0 +1,323 @@
+import React, { useCallback, useState } from 'react'
+import {
+  View,
+  Text,
+  Pressable,
+  LayoutAnimation,
+  Platform,
+  UIManager,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Checkbox from '../Checkbox/Checkbox'
+import Divider from '../Divider/Divider'
+import Icon from '../../icons/Icon'
+
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true)
+}
+
+export type AccordionCheckboxProps = {
+  /** Title shown next to the checkbox (e.g. "Axis Bank"). */
+  title?: string
+  /** Subtitle shown beneath the title (e.g. "3 accounts"). */
+  subtitle?: string
+  /** Initial expanded state (uncontrolled). Defaults to `false`. */
+  defaultExpanded?: boolean
+  /** Controlled expanded state. When provided, the component becomes controlled. */
+  expanded?: boolean
+  /** Callback fired whenever the expanded state changes. */
+  onExpandedChange?: (expanded: boolean) => void
+  /** Initial checked state of the header checkbox (uncontrolled). */
+  defaultChecked?: boolean
+  /** Controlled checked state of the header checkbox. */
+  checked?: boolean
+  /** Callback fired whenever the header checkbox value changes. */
+  onCheckedChange?: (checked: boolean) => void
+  /** Disables the entire component (header press + checkbox + content). */
+  disabled?: boolean
+  /**
+   * Slot — content rendered below the divider when expanded. Typically a
+   * `CheckboxGroup` of child `CheckboxItem`s. The `modes` prop is forwarded
+   * recursively to every child.
+   */
+  children?: React.ReactNode
+  /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+  modes?: Record<string, any>
+  /** Override outer container styles. */
+  style?: StyleProp<ViewStyle>
+  /** Accessibility label for the header press target. Defaults to `title`. */
+  accessibilityLabel?: string
+}
+
+/**
+ * AccordionCheckbox composes a header (with a `Checkbox`, title, subtitle and
+ * chevron) and a collapsible content slot. It mirrors the Figma
+ * "Accordion Checkbox" component.
+ *
+ * Two independent interactions live inside the header:
+ *  - **Pressing the checkbox** toggles the parent checked state via
+ *    `onCheckedChange` (typically used for "select all" behaviour).
+ *  - **Pressing anywhere else on the header** toggles the expanded state via
+ *    `onExpandedChange`.
+ *
+ * When expanded, a divider is shown and `children` are rendered with `modes`
+ * automatically forwarded through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @param {AccordionCheckboxProps} props
+ *
+ * @example
+ * ```tsx
+ * <AccordionCheckbox
+ *   title="Axis Bank"
+ *   subtitle="3 accounts"
+ *   defaultExpanded
+ *   defaultChecked
+ *   modes={{ 'Color Mode': 'Light' }}
+ * >
+ *   <CheckboxGroup>
+ *     <CheckboxItem label="Fixed deposit • 0245" />
+ *     <CheckboxItem label="Recurring deposit • 1182" />
+ *     <CheckboxItem label="Mutual fund • Equity" />
+ *   </CheckboxGroup>
+ * </AccordionCheckbox>
+ * ```
+ */
+function AccordionCheckbox({
+  title = 'Axis Bank',
+  subtitle = '3 accounts',
+  defaultExpanded = false,
+  expanded: controlledExpanded,
+  onExpandedChange,
+  defaultChecked = false,
+  checked: controlledChecked,
+  onCheckedChange,
+  disabled = false,
+  children,
+  modes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+}: AccordionCheckboxProps) {
+  const isExpandedControlled = controlledExpanded !== undefined
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded)
+  const isExpanded = isExpandedControlled ? controlledExpanded : internalExpanded
+
+  const isCheckedControlled = controlledChecked !== undefined
+  const [internalChecked, setInternalChecked] = useState(defaultChecked)
+  const isChecked = isCheckedControlled ? controlledChecked : internalChecked
+
+  const handleToggleExpanded = useCallback(() => {
+    if (disabled) return
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+    const next = !isExpanded
+    if (!isExpandedControlled) {
+      setInternalExpanded(next)
+    }
+    onExpandedChange?.(next)
+  }, [disabled, isExpanded, isExpandedControlled, onExpandedChange])
+
+  const handleToggleChecked = useCallback(
+    (next: boolean) => {
+      if (disabled) return
+      if (!isCheckedControlled) {
+        setInternalChecked(next)
+      }
+      onCheckedChange?.(next)
+    },
+    [disabled, isCheckedControlled, onCheckedChange]
+  )
+
+  const background =
+    (getVariableByName('accordionCheckbox/background', modes) as string | null) ?? '#ffffff'
+  const radius = (getVariableByName('accordionCheckbox/radius', modes) as number | null) ?? 12
+  const paddingHorizontal =
+    (getVariableByName('accordionCheckbox/padding/horizontal', modes) as number | null) ?? 12
+  const paddingVertical =
+    (getVariableByName('accordionCheckbox/padding/vertical', modes) as number | null) ?? 16
+  const containerGap =
+    (getVariableByName('accordionCheckbox/gap', modes) as number | null) ?? 12
+  const borderColor =
+    (getVariableByName('accordionCheckbox/border/color', modes) as string | null) ?? '#ebebed'
+  const borderSize =
+    (getVariableByName('accordionCheckbox/border/size', modes) as number | null) ?? 1
+
+  const headerGap =
+    (getVariableByName('accordionCheckbox/header/gap', modes) as number | null) ?? 12
+  const headerPaddingHorizontal =
+    (getVariableByName('accordionCheckbox/header/padding/horizontal', modes) as number | null) ?? 0
+  const headerPaddingVertical =
+    (getVariableByName('accordionCheckbox/header/padding/vertical', modes) as number | null) ?? 0
+  const headerWrapGap =
+    (getVariableByName('accordionCheckbox/header/wrap/gap', modes) as number | null) ?? 12
+
+  const textWrapGap =
+    (getVariableByName('accordionCheckbox/textWrap/gap', modes) as number | null) ?? 2
+
+  const titleColor =
+    (getVariableByName('accordionCheckbox/title/color', modes) as string | null) ?? '#000000'
+  const titleFontSize =
+    (getVariableByName('accordionCheckbox/title/fontSize', modes) as number | null) ?? 14
+  const titleFontFamily =
+    (getVariableByName('accordionCheckbox/title/fontFamily', modes) as string | null) ?? 'JioType Var'
+  const titleLineHeight =
+    (getVariableByName('accordionCheckbox/title/lineHeight', modes) as number | null) ?? 18
+  const titleFontWeightRaw =
+    getVariableByName('accordionCheckbox/title/fontWeight', modes) ?? 600
+  const titleFontWeight = String(titleFontWeightRaw) as TextStyle['fontWeight']
+
+  const subtitleColor =
+    (getVariableByName('accordionCheckbox/subtitle/color', modes) as string | null) ?? '#23190a'
+  const subtitleFontSize =
+    (getVariableByName('accordionCheckbox/subtitle/fontSize', modes) as number | null) ?? 12
+  const subtitleFontFamily =
+    (getVariableByName('accordionCheckbox/subtitle/fontFamily', modes) as string | null) ?? 'JioType Var'
+  const subtitleLineHeight =
+    (getVariableByName('accordionCheckbox/subtitle/lineHeight', modes) as number | null) ?? 16
+  const subtitleFontWeightRaw =
+    getVariableByName('accordionCheckbox/subtitle/fontWeight', modes) ?? 500
+  const subtitleFontWeight = String(subtitleFontWeightRaw) as TextStyle['fontWeight']
+
+  const iconColor =
+    (getVariableByName('accordionCheckbox/icon/color', modes) as string | null) ?? '#000000'
+  const iconSize =
+    (getVariableByName('accordionCheckbox/icon/size', modes) as number | null) ?? 24
+
+  const contentGap =
+    (getVariableByName('accordionCheckbox/content/gap', modes) as number | null) ?? 0
+  const contentPaddingTop =
+    (getVariableByName('accordionCheckbox/content/padding/top', modes) as number | null) ?? 8
+  const contentPaddingBottom =
+    (getVariableByName('accordionCheckbox/content/padding/bottom', modes) as number | null) ?? 0
+  const contentPaddingHorizontal =
+    (getVariableByName('accordionCheckbox/content/padding/horizontal', modes) as number | null) ?? 0
+
+  const containerStyle: ViewStyle = {
+    backgroundColor: background,
+    borderRadius: radius,
+    paddingHorizontal,
+    paddingVertical,
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap: containerGap,
+    overflow: 'hidden',
+    ...(isExpanded
+      ? { borderWidth: borderSize, borderColor }
+      : null),
+    ...(disabled ? { opacity: 0.6 } : null),
+  }
+
+  const headerStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: headerGap,
+    paddingHorizontal: headerPaddingHorizontal,
+    paddingVertical: headerPaddingVertical,
+  }
+
+  const wrapStyle: ViewStyle = {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: headerWrapGap,
+  }
+
+  const textWrapStyle: ViewStyle = {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: textWrapGap,
+  }
+
+  const titleStyle: TextStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontFamily: titleFontFamily,
+    fontWeight: titleFontWeight,
+  }
+
+  const subtitleStyle: TextStyle = {
+    color: subtitleColor,
+    fontSize: subtitleFontSize,
+    lineHeight: subtitleLineHeight,
+    fontFamily: subtitleFontFamily,
+    fontWeight: subtitleFontWeight,
+  }
+
+  const contentStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    justifyContent: 'center',
+    gap: contentGap,
+    paddingTop: contentPaddingTop,
+    paddingBottom: contentPaddingBottom,
+    paddingHorizontal: contentPaddingHorizontal,
+  }
+
+  const a11yLabel = accessibilityLabel ?? title
+
+  return (
+    <View style={[containerStyle, style]}>
+      <Pressable
+        onPress={handleToggleExpanded}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: isExpanded, disabled }}
+        accessibilityLabel={a11yLabel}
+        accessibilityHint={isExpanded ? 'Collapse' : 'Expand'}
+        style={({ pressed }) => [
+          headerStyle,
+          pressed && !disabled ? { opacity: 0.9 } : null,
+        ]}
+      >
+        <View style={wrapStyle}>
+          <Checkbox
+            checked={isChecked}
+            onValueChange={handleToggleChecked}
+            disabled={disabled}
+            modes={modes}
+            accessibilityLabel={
+              typeof title === 'string' ? `Select ${title}` : undefined
+            }
+          />
+          <View style={textWrapStyle}>
+            <Text style={titleStyle} numberOfLines={1} selectable={false}>
+              {title}
+            </Text>
+            {subtitle ? (
+              <Text style={subtitleStyle} numberOfLines={1} selectable={false}>
+                {subtitle}
+              </Text>
+            ) : null}
+          </View>
+        </View>
+        <Icon
+          name={isExpanded ? 'ic_chevron_up' : 'ic_chevron_down'}
+          size={iconSize}
+          color={iconColor}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no"
+        />
+      </Pressable>
+
+      {isExpanded ? (
+        <>
+          <Divider modes={modes} />
+          {children ? (
+            <View style={contentStyle}>
+              {cloneChildrenWithModes(children, modes)}
+            </View>
+          ) : null}
+        </>
+      ) : null}
+    </View>
+  )
+}
+
+export default AccordionCheckbox