jfs-components 0.0.72 → 0.0.74

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+/**
+ * A single row in the savings-goal legend (current vs. target).
+ *
+ * `value` is a **numeric amount** (e.g. `240000`). It serves two purposes:
+ *
+ * 1. Display: rendered on the right side of the row using Indian numeric
+ *    notation via {@link formatIndianNumber} and prefixed with `currency`
+ *    (e.g. `240000` → `"₹2.4L"`).
+ * 2. Progress derivation: the bar fills to `current.value / target.value`
+ *    automatically. There is no separate `progress` prop.
+ *
+ * Pass `value: undefined` to render a label-only row (the underlying
+ * {@link MetricLegendItem} hides the right slot in that case).
+ */
+export type SavingsGoalSummaryItem = {
+    /** Label shown next to the indicator dot (e.g. "Current (4 months)"). */
+    label?: React.ReactNode;
+    /**
+     * Numeric amount used for both display formatting and progress derivation.
+     * Use `undefined` to render a label-only row.
+     */
+    value?: number;
+    /** Override the indicator dot colour. */
+    indicatorColor?: string;
+};
+export type SavingsGoalSummaryProps = {
+    /**
+     * Currency symbol (e.g. `'₹'`, `'$'`) prefixed to every legend value.
+     * Defaults to `'₹'`. The symbol is rendered as part of the formatted
+     * string — this component does not use `MoneyValue`.
+     */
+    currency?: string;
+    /**
+     * "Current" row in the legend. The indicator dot defaults to the
+     * `LinearProgress` indicator colour. Pass `null` to hide the row.
+     *
+     * `current.value` (numeric) drives both the displayed amount and — together
+     * with `target.value` — the progress bar fill.
+     */
+    current?: SavingsGoalSummaryItem | null;
+    /**
+     * "Target" / recommended row in the legend. The indicator dot defaults to
+     * the `LinearProgress` track colour. Pass `null` to hide the row.
+     */
+    target?: SavingsGoalSummaryItem | null;
+    /**
+     * Custom legend slot. When provided, replaces the default `current`/`target`
+     * rows entirely — pass any number of `MetricLegendItem`s (or any other
+     * nodes) to fully control the legend.
+     *
+     * Note: the progress bar is still derived from `current.value` / `target.value`,
+     * so pass them even when overriding the legend if you want a non-zero bar.
+     */
+    children?: React.ReactNode;
+    /**
+     * Design token modes for theming. Defaults to `{ 'LinearProgress Size': 'L' }`
+     * which renders the thicker progress bar from the Figma reference. Caller
+     * modes are merged on top and can override every default key.
+     */
+    modes?: Record<string, any>;
+    /** Override container styles. */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Override styles for the auto-generated percentage text. Useful for
+     * tweaking colour or alignment; the value (e.g. `"50%"`) is always
+     * computed from `current` / `target` and cannot be replaced.
+     */
+    titleStyle?: StyleProp<TextStyle>;
+    /** Override the inner legend container styles. */
+    legendStyle?: StyleProp<ViewStyle>;
+};
+/**
+ * `SavingsGoalSummary` visualises progress toward a savings goal as:
+ *
+ * 1. A `Title` showing the percentage — **computed automatically** from
+ *    `current.value / target.value`. There is no `progress` prop; the
+ *    component owns the calculation so the title, bar and legend are always
+ *    in sync.
+ * 2. A `LinearProgress` bar driven by the same derived ratio.
+ * 3. A two-row legend comparing **current** vs. **target**, where each numeric
+ *    `value` is auto-formatted with Indian notation
+ *    ({@link formatIndianNumber}) and prefixed with the `currency` symbol.
+ *
+ * The component is intentionally narrow in scope — it is the body of a savings
+ * insight card. Wrap it in `CardInsight` (or any container of your choice) to
+ * add a heading, badge or footer.
+ *
+ * @component
+ * @param {SavingsGoalSummaryProps} props
+ */
+declare function SavingsGoalSummary({ currency, current, target, children, modes, style, titleStyle, legendStyle, }: SavingsGoalSummaryProps): import("react/jsx-runtime").JSX.Element;
+export default SavingsGoalSummary;
+//# sourceMappingURL=SavingsGoalSummary.d.ts.map

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

@@ -0,0 +1,108 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * Per-segment data definition for the data-driven `segments` prop.
+ *
+ * Use `value` for proportional widths (segments share width by their value
+ * relative to the sum). When `value` is omitted, segments share the row
+ * equally (`flex: 1`).
+ *
+ * Use `modes` to override the per-segment design-token mode — typically the
+ * `Appearance / DataViz` mode for color theming, or `Emphasis / DataViz` to
+ * change the emphasis level. The parent already injects per-index defaults
+ * (segment 0 = High, 1 = Medium, 2 = Low, then cycling) so callers only need
+ * to pass `modes` when they want a different result.
+ */
+export type SegmentedTrackSegmentData = {
+    /** Stable React key. */
+    key?: React.Key;
+    /**
+     * Optional explicit weight used for proportional width (`flex: value`).
+     * When omitted, the segment uses an equal share of the available row.
+     * Mixing values and undefined is supported — undefined falls back to 1.
+     */
+    value?: number;
+    /**
+     * Hard-override the segment color. Bypasses `dataViz/bg` token resolution
+     * entirely.
+     */
+    color?: string;
+    /**
+     * Per-segment design token mode overrides. Merged on top of the parent
+     * `modes` and the per-index Emphasis defaults.
+     */
+    modes?: Record<string, any>;
+    /** Override individual segment styles. */
+    style?: StyleProp<ViewStyle>;
+    /** Per-segment accessibility label. */
+    accessibilityLabel?: string;
+};
+export type SegmentedTrackProps = {
+    /**
+     * Data-driven segment list. Used when no `children` slot is provided.
+     * Defaults to three equal segments which receive per-index Emphasis
+     * defaults (`High`, `Medium`, `Low`).
+     */
+    segments?: SegmentedTrackSegmentData[];
+    /**
+     * Slot for fully custom segment children. Each top-level child is treated
+     * as one segment. The parent injects per-index Emphasis defaults and the
+     * shared `modes`, while child-level `modes` overrides win.
+     */
+    children?: React.ReactNode;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Override the container styles. */
+    style?: StyleProp<ViewStyle>;
+    /** Style applied to every segment (data-driven mode only). */
+    segmentStyle?: StyleProp<ViewStyle>;
+    /** Accessibility label announced for the whole distribution row. */
+    accessibilityLabel?: string;
+};
+type SegmentedTrackSegmentProps = {
+    /**
+     * Optional explicit weight used for proportional width (`flex: value`).
+     * Defaults to 1 (equal share within the parent row).
+     */
+    value?: number | undefined;
+    /**
+     * Hard-override the segment color. Bypasses `dataViz/bg` token resolution.
+     */
+    color?: string | undefined;
+    /**
+     * Design token modes for the segment. Merged with parent `modes` and the
+     * per-index Emphasis defaults injected by the parent `SegmentedTrack`.
+     */
+    modes?: Record<string, any> | undefined;
+    /** Override the segment styles. */
+    style?: StyleProp<ViewStyle> | undefined;
+    /** Per-segment accessibility label. */
+    accessibilityLabel?: string | undefined;
+};
+declare function SegmentedTrackSegment({ value, color, modes, style, accessibilityLabel, }: SegmentedTrackSegmentProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * `SegmentedTrack` renders a horizontal pill-shaped row of categorical
+ * segments. Use it for distribution / share-of breakdowns where each
+ * segment is a sibling category (not a directional or temporal progress).
+ *
+ * Defaults to three equal segments tinted at descending Emphasis levels
+ * (`High`, `Medium`, `Low`) so the shape reads as a single concept split
+ * three ways. Consumers can either pass the data-driven `segments` prop or
+ * a fully custom `children` slot of `SegmentedTrack.Segment`s.
+ *
+ * Each segment resolves its color through the `dataViz/bg` token, which
+ * cascades through `Emphasis / DataViz` and `Appearance / DataViz`. Pass
+ * `modes` per segment (or override `Appearance / DataViz` at the parent
+ * level via `modes`) to retheme the row without touching colors directly.
+ *
+ * @component
+ * @param {SegmentedTrackProps} props
+ */
+declare function SegmentedTrack({ segments, children, modes: propModes, style, segmentStyle, accessibilityLabel, }: SegmentedTrackProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SegmentedTrack {
+    var Segment: typeof SegmentedTrackSegment;
+}
+export { SegmentedTrackSegment };
+export type { SegmentedTrackSegmentProps };
+export default SegmentedTrack;
+//# sourceMappingURL=SegmentedTrack.d.ts.map

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type StatGroupItem = {
+    /** Stable key for the item. Falls back to the label / index. */
+    key?: React.Key;
+    /** The descriptive label shown beneath the value. */
+    label?: string;
+    /** The prominent value shown above the label. */
+    value?: string;
+};
+export type StatGroupProps = {
+    /**
+     * Array of stat items. Each item is rendered as a centered `StatItem`
+     * (`labelPosition="Bottom"`) with vertical dividers between them.
+     *
+     * Ignored when a `children` slot is provided.
+     */
+    items?: StatGroupItem[];
+    /**
+     * Custom slot content. When provided, the `items` prop is ignored. Each
+     * top-level child is wrapped to take an equal share of the available width
+     * and a vertical `Divider` is auto-inserted between siblings — matching the
+     * Figma `slot` behaviour. `modes` are propagated to all children.
+     */
+    children?: React.ReactNode;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Override container styles. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * StatGroup renders a card-style container holding a horizontal row of
+ * `StatItem`s separated by vertical dividers. It is typically used to surface
+ * 3–5 short metrics (e.g. validity, data range, storage) at a glance.
+ *
+ * Pass `items` for the simple data-driven case, or use the `children` slot
+ * for full control over the row contents (the component still auto-inserts
+ * vertical dividers between top-level children).
+ *
+ * @component
+ * @param {StatGroupProps} props
+ */
+declare function StatGroup({ items, children, modes, style, }: StatGroupProps): import("react/jsx-runtime").JSX.Element;
+export default StatGroup;
+//# sourceMappingURL=StatGroup.d.ts.map

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

@@ -1,21 +1,38 @@
-import { type StyleProp, type ViewStyle } from 'react-native';
+import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+export type StatItemLabelPosition = 'Top' | 'Bottom';
 export type StatItemProps = {
-    /** The small descriptive label above the value. */
+    /** The small descriptive label. */
     label?: string;
-    /** The large prominent value to display. */
+    /** The prominent value to display. */
     value?: string;
-    /** Design token modes for theming. */
+    /**
+     * Whether the label is rendered above or below the value. Matches the
+     * Figma `labelPosition` variant. Defaults to `'Top'`.
+     *
+     * - `'Top'`  — Label (12px medium) above large value (26px black). Left-aligned.
+     * - `'Bottom'` — Value (12px medium) above smaller label (10px regular). Center-aligned.
+     */
+    labelPosition?: StatItemLabelPosition;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
     modes?: Record<string, any>;
     /** Override container styles. */
     style?: StyleProp<ViewStyle>;
+    /** Override the label text styles. */
+    labelStyle?: StyleProp<TextStyle>;
+    /** Override the value text styles. */
+    valueStyle?: StyleProp<TextStyle>;
 };
 /**
- * StatItem displays a label/value pair with the value in a large, bold style.
- * Useful for metrics, product stats, or KPI callouts.
+ * StatItem displays a label/value pair, useful for product stats, metrics
+ * or KPI callouts.
+ *
+ * Supports two layouts via the `labelPosition` variant:
+ *  - `'Top'`    — Small label above a large prominent value (default).
+ *  - `'Bottom'` — Value above a smaller label, content centered.
  *
  * @component
  * @param {StatItemProps} props
  */
-declare function StatItem({ label, value, modes, style, }: StatItemProps): import("react/jsx-runtime").JSX.Element;
+declare function StatItem({ label, value, labelPosition, modes, style, labelStyle, valueStyle, }: StatItemProps): import("react/jsx-runtime").JSX.Element;
 export default StatItem;
 //# sourceMappingURL=StatItem.d.ts.map

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * Confidence levels supported by the indicator. Mirrors the Figma `Confidence`
+ * mode collection exactly (`High` | `Medium` | `Low` | `None`).
+ */
+export type StrengthIndicatorConfidence = 'High' | 'Medium' | 'Low' | 'None';
+/**
+ * Accepted shape for the `confidence` prop. Either:
+ *   - one of the named levels (`'High' | 'Medium' | 'Low' | 'None'`), or
+ *   - a float in `[0, 1]`. Floats are bucketed to the nearest level using
+ *     midpoint thresholds (1/6, 1/2, 5/6) so anchor values land squarely:
+ *     `0` → `None`, `~0.33` → `Low`, `~0.66` → `Medium`, `1` → `High`.
+ *     Values outside `[0, 1]` are clamped.
+ */
+export type StrengthIndicatorConfidenceValue = StrengthIndicatorConfidence | number;
+export type StrengthIndicatorProps = {
+    /**
+     * Overall confidence level. Accepts either the named enum value
+     * (`'High' | 'Medium' | 'Low' | 'None'`) or a float in `[0, 1]`:
+     *
+     *   `1.0` (or `'High'`)   → bars `[High, High, High]`     (3/3 lit)
+     *   `0.66` (or `'Medium'`) → bars `[Medium, Medium, None]`   (2/3 lit)
+     *   `0.33` (or `'Low'`)    → bars `[Low, None, None]`        (1/3 lit)
+     *   `0.0` (or `'None'`)    → bars `[None, None, None]`       (0/3 lit)
+     *
+     * The component maps the resolved level to a per-bar confidence mode
+     * internally, so each bar's color resolves through the
+     * `strengthIndicator/bar/<size>/background` token using its own
+     * `Confidence` mode.
+     *
+     * Default: `'High'`.
+     */
+    confidence?: StrengthIndicatorConfidenceValue;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Override container styles. */
+    style?: StyleProp<ViewStyle>;
+} & Omit<React.ComponentProps<typeof View>, 'style'>;
+/**
+ * StrengthIndicator renders three fixed-size, ascending bars that
+ * communicate a discrete confidence/strength level — typically used to
+ * signal model confidence, signal quality, or password strength.
+ *
+ * Sizes are intentionally fixed (matching the Figma spec): 3px-wide bars
+ * 6/9/12px tall with a 2px gap and 2px container padding.
+ *
+ * Pass a single `confidence` value (named enum *or* float `[0, 1]`); the
+ * component normalizes it to a level, maps that level to a per-bar
+ * confidence mode, and resolves each bar's color through design tokens
+ * (`strengthIndicator/bar/<size>/background`).
+ *
+ * @component
+ * @param {StrengthIndicatorProps} props
+ */
+declare function StrengthIndicator({ confidence, modes, style, ...rest }: StrengthIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export default StrengthIndicator;
+//# sourceMappingURL=StrengthIndicator.d.ts.map

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import { type StrengthIndicatorConfidenceValue } from '../StrengthIndicator/StrengthIndicator';
+export type SummaryTileProps = {
+    /** Bold heading shown at the top-left of the tile. */
+    title?: string;
+    /** Smaller supporting copy rendered beneath the title. */
+    description?: string;
+    /**
+     * Confidence level for the inline `StrengthIndicator` next to the title.
+     * Defaults to `'None'` to match the Figma reference (all bars unlit).
+     * Pass `null` to hide the indicator entirely.
+     */
+    confidence?: StrengthIndicatorConfidenceValue | null;
+    /**
+     * When `true`, render a trailing forward chevron (`NavArrow`) — the
+     * convention for "tap the tile to drill in" affordance. Defaults to
+     * `false`.
+     */
+    chevron?: boolean;
+    /**
+     * Action slot rendered to the right of the text content. Defaults to a
+     * small `Button` (`Button / Size: 'S'`) labelled "Button" to match the
+     * Figma default. Pass `null` to render no action slot (typical for
+     * static tiles that want only a chevron).
+     */
+    children?: React.ReactNode;
+    /**
+     * Optional press handler for the entire tile. When provided, the tile
+     * is wrapped in a `Pressable`, gets `accessibilityRole="button"` and
+     * the default `Button` action slot is automatically suppressed so the
+     * rendered HTML doesn't contain a `<button>` inside another `<button>`
+     * (which would trigger a hydration warning on web). Pair this with
+     * `chevron` for the navigational tile pattern.
+     */
+    onPress?: () => void;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Override container styles. */
+    style?: StyleProp<ViewStyle>;
+    /** Override the title text styles. */
+    titleStyle?: StyleProp<TextStyle>;
+    /** Override the description text styles. */
+    descriptionStyle?: StyleProp<TextStyle>;
+    /** Accessibility label override (defaults to `title`). */
+    accessibilityLabel?: string;
+};
+/**
+ * SummaryTile composes a title (with an inline `StrengthIndicator`), a
+ * supporting description and an action slot into a compact horizontal row,
+ * commonly used at the top of dashboard cards (e.g. "Spending — know your
+ * spending and savings"). An optional trailing chevron and tile-level
+ * `onPress` handler turn the whole row into a navigational entry point.
+ *
+ * @component
+ * @param {SummaryTileProps} props
+ */
+declare function SummaryTile({ title, description, confidence, chevron, children, onPress, modes, style, titleStyle, descriptionStyle, accessibilityLabel, }: SummaryTileProps): import("react/jsx-runtime").JSX.Element;
+export default SummaryTile;
+//# sourceMappingURL=SummaryTile.d.ts.map

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

@@ -1,7 +1,17 @@
+import React from 'react';
 import { type TextStyle, type StyleProp } from 'react-native';
 export type TextProps = {
-    /** The text content to display. */
+    /**
+     * The text content to display. You may also pass content as JSX children
+     * (e.g. `<Text>Hello</Text>`) — when both are provided, `children` wins.
+     */
     text?: string;
+    /**
+     * Child nodes (string, number, or nested <Text>/<RNText> elements). This
+     * mirrors the standard React Native `<Text>` API so the component is a
+     * near-drop-in replacement.
+     */
+    children?: React.ReactNode;
     /** Horizontal alignment of the text. */
     textAlign?: 'Left' | 'Center';
     /** Modes configuration for design token resolution. */
@@ -11,6 +21,6 @@ export type TextProps = {
     /** Number of lines to limit the text to. */
     numberOfLines?: number;
 };
-declare function Text({ text, textAlign, modes, style, numberOfLines, }: TextProps): import("react/jsx-runtime").JSX.Element;
+declare function Text({ text, children, textAlign, modes, style, numberOfLines, }: TextProps): import("react/jsx-runtime").JSX.Element;
 export default Text;
 //# sourceMappingURL=Text.d.ts.map

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Pressable } from 'react-native';
+import { Pressable, ViewStyle } from 'react-native';
 export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 export type TooltipProps = {
     children: ReactNode;
@@ -21,6 +21,17 @@ export declare function TooltipTrigger({ children, asChild, ...props }: TooltipT
 export type TooltipContentProps = {
     children: ReactNode;
     sideOffset?: number;
+    /**
+     * Vertical spacing between slot children, in pixels.
+     * The content area acts as a vertical slot: any children passed in
+     * (text, icons, custom views, etc.) are stacked top-to-bottom with this gap.
+     */
+    gap?: number;
+    /**
+     * Cross-axis alignment of slot children.
+     * Defaults to `flex-start` so multi-line/multi-element content lines up on the left.
+     */
+    alignItems?: ViewStyle['alignItems'];
 };
-export declare function TooltipContent({ children, sideOffset }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function TooltipContent({ children, sideOffset, gap, alignItems, }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tooltip.d.ts.map

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

@@ -1,3 +1,4 @@
+export { default as AccountCard, type AccountCardProps, type AccountCardState } from './AccountCard/AccountCard';
 export { default as ActionFooter, type ActionFooterProps } from './ActionFooter/ActionFooter';
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
@@ -5,17 +6,24 @@ 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';
+export { default as Dropdown, DropdownItem, type DropdownProps, type DropdownItemProps } from './Dropdown/Dropdown';
+export { default as DropdownInput, type DropdownInputProps, type DropdownInputOption, type DropdownInputOptionValue } from './DropdownInput/DropdownInput';
 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';
@@ -25,6 +33,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';
@@ -33,10 +44,13 @@ 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 LottieIntroBlock, type LottieIntroBlockProps } from './LottieIntroBlock/LottieIntroBlock';
 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';
@@ -51,7 +65,7 @@ export { StepLabel } from './Stepper/StepLabel';
 export { default as TextInput } from './TextInput/TextInput';
 export { default as StatusHero, type StatusHeroProps } from './StatusHero/StatusHero';
 export { default as ThreadHero, type ThreadHeroProps } from './ThreadHero/ThreadHero';
-export { Tooltip } from './Tooltip/Tooltip';
+export { Tooltip, TooltipTrigger, TooltipContent, type TooltipProps, type TooltipTriggerProps, type TooltipContentProps, type Placement as TooltipPlacement, } from './Tooltip/Tooltip';
 export { default as TransactionDetails } from './TransactionDetails/TransactionDetails';
 export { default as TransactionStatus } from './TransactionStatus/TransactionStatus';
 export { default as TransactionBubble, type TransactionBubbleProps } from './TransactionBubble/TransactionBubble';
@@ -60,6 +74,7 @@ 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';
@@ -76,20 +91,31 @@ export { default as Radio, type RadioProps } from './Radio/Radio';
  */
 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';
 export { default as ToastProvider, type ToastProviderProps } from './Toast/ToastProvider';
 export { useToast, addToast, closeToast, closeAll, type ToastOptions, type ToastEntry, type ToastPlacement } from './Toast/useToast';
 export { default as AmountInput, type AmountInputProps } from './AmountInput/AmountInput';
+export { default as PageHero, type PageHeroProps } from './PageHero/PageHero';
 export { default as Popup, type PopupProps, type PopupRef } from './Popup/Popup';
 export { default as PortfolioHero, type PortfolioHeroProps } from './PortfolioHero/PortfolioHero';
+export { default as PoweredByLabel, type PoweredByLabelProps } from './PoweredByLabel/PoweredByLabel';
 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-05-04T12:27:11.660Z
+ * Generated: 2026-05-19T16:28:08.570Z
  */
 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.72",
+  "version": "0.0.74",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -36,8 +36,6 @@
     "storybook-web": "storybook dev -p 6006",
     "build:storybook-web": "storybook build",
     "deploy:storybook": "vercel --prod",
-    "example": "yarn --cwd example start",
-    "example:install": "yarn --cwd example install",
     "postinstall": "patch-package",
     "icons:generate": "node scripts/generate-icon-registry.js",
     "prepare": "bob build",