jfs-components 0.0.71 → 0.0.73

package/lib/module/utils/index.js

@@ -1,4 +1,5 @@
 "use strict";
 
 export { cloneChildrenWithModes, flattenChildren } from './react-utils';
-export { default as MediaSource } from './MediaSource';
+export { default as MediaSource } from './MediaSource';
+export { formatIndianNumber } from './number-utils';

package/lib/module/utils/number-utils.js

@@ -0,0 +1,53 @@
+"use strict";
+
+/**
+ * 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 function formatIndianNumber(value, options = {}) {
+  if (!Number.isFinite(value)) return String(value);
+  const {
+    decimals = 1,
+    prefix = ''
+  } = options;
+  const sign = value < 0 ? '-' : '';
+  const absValue = Math.abs(value);
+  const CRORE = 10_000_000;
+  const LAKH = 100_000;
+  if (absValue >= CRORE) {
+    return `${sign}${prefix}${trimTrailingZeros((absValue / CRORE).toFixed(Math.max(0, decimals)))}Cr`;
+  }
+  if (absValue >= LAKH) {
+    return `${sign}${prefix}${trimTrailingZeros((absValue / LAKH).toFixed(Math.max(0, decimals)))}L`;
+  }
+
+  // For sub-lakh values, fall back to the native Indian comma grouping.
+  // `toLocaleString` with `en-IN` gives 1,23,456 — exactly what we want.
+  return `${prefix}${value.toLocaleString('en-IN', {
+    maximumFractionDigits: 0
+  })}`;
+}
+function trimTrailingZeros(numericString) {
+  if (!numericString.includes('.')) return numericString;
+  return numericString.replace(/\.?0+$/, '');
+}

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+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>
+ * ```
+ */
+declare function AccordionCheckbox({ title, subtitle, defaultExpanded, expanded: controlledExpanded, onExpandedChange, defaultChecked, checked: controlledChecked, onCheckedChange, disabled, children, modes, style, accessibilityLabel, }: AccordionCheckboxProps): import("react/jsx-runtime").JSX.Element;
+export default AccordionCheckbox;
+//# sourceMappingURL=AccordionCheckbox.d.ts.map

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { type ImageSourcePropType, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+export type BrandChipProps = {
+    /** Visible label (e.g. `"Axis Bank • 0245"`). */
+    label?: string;
+    /**
+     * Image shown in the avatar. Forwarded to the underlying `Avatar`'s
+     * `imageSource` prop. Pass a `require()`-ed asset, an `{ uri }` object
+     * or a remote URL string. Ignored when `avatarSlot` is provided.
+     */
+    imageSource?: ImageSourcePropType | string;
+    /**
+     * Slot replacing the default `Avatar`. Receives `modes` recursively, so
+     * inner `Avatar` / `IconCapsule` instances inherit theming.
+     */
+    avatarSlot?: React.ReactNode;
+    /** Optional press handler — when provided, the chip becomes a `Pressable`. */
+    onPress?: () => void;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Label style override. */
+    labelStyle?: StyleProp<TextStyle>;
+    /** Accessibility label. Defaults to `label`. */
+    accessibilityLabel?: string;
+};
+/**
+ * `BrandChip` renders a compact pill that pairs a small institution avatar
+ * with a short identifier label (e.g. `"Axis Bank • 0245"`). It's typically
+ * used to surface the currently-selected linked account in headers, sticky
+ * bars, or selectors.
+ *
+ * All visual values resolve through the `brandChip/*` design tokens with
+ * sensible Figma defaults so the chip renders correctly out of the box.
+ *
+ * @component
+ * @param {BrandChipProps} props
+ */
+declare function BrandChip({ label, imageSource, avatarSlot, onPress, modes: propModes, style, labelStyle, accessibilityLabel, }: BrandChipProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof BrandChip>;
+export default _default;
+//# sourceMappingURL=BrandChip.d.ts.map

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { UnifiedSource } from '../../utils/MediaSource';
+export type CardBankAccountItem = {
+    /** Left-aligned label text (e.g. "Account type"). */
+    label: string;
+    /**
+     * Right-aligned value. Strings render through the `text/*` design tokens.
+     * Pass any `ReactNode` to fully customise the value (e.g. obfuscated
+     * account numbers, masked dots, icons).
+     */
+    value: React.ReactNode;
+};
+export type CardBankAccountProps = {
+    /**
+     * Institution name shown in the header next to the avatar. Pass an empty
+     * string and `headerSlot` to fully replace the default header.
+     */
+    institutionName?: string;
+    /**
+     * Avatar source for the institution. Forwarded to the underlying
+     * `InstitutionBadge`. Accepts any {@link UnifiedSource}.
+     */
+    institutionAvatar?: UnifiedSource;
+    /**
+     * Header badge. Pass a string to render the default `Badge` with that
+     * label, or a custom `ReactNode` for full control. Pass `false`/`null`
+     * to hide the badge entirely.
+     */
+    badge?: React.ReactNode | string | false | null;
+    /**
+     * Override the entire header. When provided, replaces the default
+     * `InstitutionBadge` + `Badge` row.
+     */
+    headerSlot?: React.ReactNode;
+    /**
+     * Data rows shown in the middle. Each entry renders a left-aligned label
+     * and a right-aligned value. Defaults to three placeholder rows that
+     * match the Figma reference.
+     */
+    items?: CardBankAccountItem[];
+    /**
+     * Custom content slot rendered between the header and the footer.
+     * Overrides `items` when provided.
+     */
+    children?: React.ReactNode;
+    /** Footer button label. Ignored when `footer` is provided. */
+    buttonLabel?: string;
+    /** Footer button press handler. Ignored when `footer` is provided. */
+    onButtonPress?: () => void;
+    /**
+     * Override the footer. Pass a `ReactNode` for full control or
+     * `false`/`null` to hide it entirely.
+     */
+    footer?: React.ReactNode | false | null;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the card region. */
+    accessibilityLabel?: string;
+};
+/**
+ * `CardBankAccount` renders a bank account summary card composed of:
+ *
+ * 1. A header with an `InstitutionBadge` (avatar + bank name) and an
+ *    optional trailing `Badge`.
+ * 2. A configurable list of label/value rows describing the account.
+ * 3. A footer `Button` for the primary action.
+ *
+ * All values resolve through the `bankAccountCard/*` design tokens with
+ * sensible Figma defaults so the card renders correctly out of the box.
+ *
+ * @component
+ * @param {CardBankAccountProps} props
+ */
+declare function CardBankAccount({ institutionName, institutionAvatar, badge, headerSlot, items, children, buttonLabel, onButtonPress, footer, modes, style, accessibilityLabel, }: CardBankAccountProps): import("react/jsx-runtime").JSX.Element;
+export default CardBankAccount;
+//# sourceMappingURL=CardBankAccount.d.ts.map

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { type CircularProgressBarProps } from '../CircularProgressBar/CircularProgressBar';
+type CardFinancialConditionBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
+export type CardFinancialConditionProps = CardFinancialConditionBaseProps & {
+    /** Title text shown in the header. */
+    title?: string;
+    /** Body / description shown below the title. */
+    body?: string;
+    /** Progress score for the circular indicator. Forwarded to CircularProgressBar. */
+    value?: number;
+    /** Visual state of the circular indicator. Forwarded to CircularProgressBar. */
+    progressState?: CircularProgressBarProps['state'];
+    /** Optional formatted value label for the active state. */
+    valueLabel?: string;
+    /** Show the bottom advisory nudge. */
+    showNudge?: boolean;
+    /** Body text for the default nudge. Use `\n` to add a second line. */
+    nudgeBody?: string;
+    /** Show the bottom divider above the action button. */
+    showDivider?: boolean;
+    /** Show the action button at the bottom of the card. */
+    showButton?: boolean;
+    /** Label for the default action button. */
+    buttonLabel?: string;
+    /** Callback for the default action button press. */
+    onPressButton?: () => void;
+    /** Slot replacing the default circular progress bar. Receives `modes` recursively. */
+    progressSlot?: React.ReactNode;
+    /** Slot replacing the default Nudge. Receives `modes` recursively. */
+    nudgeSlot?: React.ReactNode;
+    /** Slot replacing the default action button. Receives `modes` recursively. */
+    buttonSlot?: React.ReactNode;
+    /** Design token modes forwarded to token lookups and child components. */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Header row style override. */
+    headerStyle?: StyleProp<ViewStyle>;
+    /** Title text style override. */
+    titleStyle?: StyleProp<TextStyle>;
+    /** Body text style override. */
+    bodyStyle?: StyleProp<TextStyle>;
+    /** Accessibility label for the whole card. */
+    accessibilityLabel?: string;
+};
+declare function CardFinancialCondition({ title, body, value, progressState, valueLabel, showNudge, nudgeBody, showDivider, showButton, buttonLabel, onPressButton, progressSlot, nudgeSlot, buttonSlot, modes: propModes, style, headerStyle, titleStyle, bodyStyle, accessibilityLabel, ...rest }: CardFinancialConditionProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof CardFinancialCondition>;
+export default _default;
+//# sourceMappingURL=CardFinancialCondition.d.ts.map

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type CardInsightProps = {
+    /** Card title rendered in the header (left of the badge). */
+    title?: string;
+    /** One-line explanation rendered under the title. */
+    subtitle?: string;
+    /**
+     * Header badge. Pass a string to render the default `Badge` with that
+     * label, or a custom `ReactNode` for full control. Pass `false` or
+     * `null` to hide the badge entirely.
+     */
+    badge?: React.ReactNode | string | false;
+    /**
+     * Main content slot. Defaults to a `SavingsGoalSummary` to match the
+     * Figma reference. Pass any `ReactNode` to override.
+     */
+    children?: React.ReactNode;
+    /**
+     * Footer Nudge. Pass a `ReactNode` to override the default inline-compact
+     * `Nudge`, or `false`/`null` to hide it.
+     */
+    footer?: React.ReactNode | false;
+    /**
+     * Whether to render a `Divider` between the content slot and the footer.
+     * Defaults to `true` whenever a footer is shown. Pass `false` to hide it,
+     * or a custom `ReactNode` to override.
+     */
+    divider?: React.ReactNode | boolean;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Override container styles. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * `CardInsight` renders a single insight card composed of:
+ *
+ * 1. A header with a title, subtitle and a trailing `Badge`.
+ * 2. A flexible content slot — defaults to `SavingsGoalSummary`.
+ * 3. A `Divider` separating the slot from the footer.
+ * 4. A footer slot — defaults to an inline-compact `Nudge`.
+ *
+ * @component
+ * @param {CardInsightProps} props
+ */
+declare function CardInsight({ title, subtitle, badge, children, footer, divider, modes, style, }: CardInsightProps): import("react/jsx-runtime").JSX.Element;
+export default CardInsight;
+//# sourceMappingURL=CardInsight.d.ts.map

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type CheckboxGroupProps = {
+    /**
+     * Slot — a list of `CheckboxItem` (or compatible) elements to render inside
+     * the group. The `modes` prop is automatically forwarded to each child.
+     *
+     * When omitted, three default placeholder `CheckboxItem`s are rendered to
+     * mirror the Figma reference for the empty/initial state.
+     */
+    children?: React.ReactNode;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Override container styles. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the surrounding group. */
+    accessibilityLabel?: string;
+};
+/**
+ * CheckboxGroup composes a vertical stack of `CheckboxItem`s. Spacing and
+ * padding are driven by the `checkboxGroup/*` design tokens so groups stay
+ * visually consistent across screens.
+ *
+ * The `modes` prop is forwarded recursively to all children — including
+ * `CheckboxItem`s and any element rendered inside their `endSlot`.
+ *
+ * @component
+ * @param {CheckboxGroupProps} props
+ *
+ * @example
+ * ```tsx
+ * <CheckboxGroup modes={{ 'Color Mode': 'Light' }}>
+ *   <CheckboxItem label="Fixed deposit • 0245" />
+ *   <CheckboxItem label="Recurring deposit • 1182" />
+ *   <CheckboxItem label="Mutual fund • Equity" />
+ * </CheckboxGroup>
+ * ```
+ */
+declare function CheckboxGroup({ children, modes, style, accessibilityLabel, }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+export default CheckboxGroup;
+//# sourceMappingURL=CheckboxGroup.d.ts.map

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+export type CheckboxItemProps = {
+    /** Whether the checkbox is checked (controlled). */
+    checked?: boolean;
+    /** Initial checked state (uncontrolled). */
+    defaultChecked?: boolean;
+    /** Callback fired when the checked state changes. */
+    onValueChange?: (checked: boolean) => void;
+    /** Whether the row is disabled — both the checkbox and row press handler are disabled. */
+    disabled?: boolean;
+    /** The label text rendered next to the checkbox. */
+    label?: React.ReactNode;
+    /**
+     * Optional content rendered on the right side (e.g. a `Button`). When provided,
+     * it receives the same `modes` as the parent. Wrapped in a fixed-width container
+     * matching the Figma `endSlot` design.
+     */
+    endSlot?: React.ReactNode;
+    /** Width of the end slot container in pixels. Defaults to 80 to match the Figma reference. */
+    endSlotWidth?: number;
+    /** 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>;
+    /** Accessibility label for screen readers. Defaults to the `label` prop when it is a string. */
+    accessibilityLabel?: string;
+};
+/**
+ * CheckboxItem composes a `Checkbox`, a label and an optional `endSlot` into a
+ * single horizontal pressable row. Pressing anywhere on the row (outside of the
+ * `endSlot`) toggles the checkbox, mirroring the typical native form pattern.
+ *
+ * Mirrors the Figma "Checkbox Item" component and uses the `checkboxItem/*`
+ * design tokens for typography and spacing.
+ *
+ * @component
+ * @param {CheckboxItemProps} props
+ *
+ * @example
+ * ```tsx
+ * const [checked, setChecked] = useState(false)
+ *
+ * <CheckboxItem
+ *   label="Fixed deposit • 0245"
+ *   checked={checked}
+ *   onValueChange={setChecked}
+ *   modes={{ 'Color Mode': 'Light' }}
+ * />
+ * ```
+ */
+declare function CheckboxItem({ checked: controlledChecked, defaultChecked, onValueChange, disabled, label, endSlot, endSlotWidth, modes, style, labelStyle, accessibilityLabel, }: CheckboxItemProps): import("react/jsx-runtime").JSX.Element;
+export default CheckboxItem;
+//# sourceMappingURL=CheckboxItem.d.ts.map

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

@@ -9,6 +9,14 @@ export type CircularProgressBarProps = CircularProgressBarBaseProps & {
     state?: CircularProgressBarState | boolean;
     /** Optional formatted value shown in the active state. */
     valueLabel?: string;
+    /**
+     * Optional small label rendered above the value inside the ring. Useful for
+     * sizes that have enough room for both a caption and a value (e.g. the
+     * `circularProgressBar Size: M` mode from Figma). When omitted, only the
+     * value is shown — keeping the default S-size compatible with existing
+     * callers.
+     */
+    supportText?: string;
     /** Design token modes forwarded to token lookups. */
     modes?: Record<string, any>;
     /** Container style override. */
@@ -19,9 +27,11 @@ export type CircularProgressBarProps = CircularProgressBarBaseProps & {
     progressStyle?: StyleProp<ViewStyle>;
     /** Value text style override. */
     valueStyle?: StyleProp<TextStyle>;
+    /** Support text style override. */
+    supportTextStyle?: 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;
+declare function CircularProgressBar({ value, state, valueLabel, supportText, modes: propModes, style, trackStyle, progressStyle, valueStyle, supportTextStyle, accessibilityLabel, ...rest }: CircularProgressBarProps): import("react/jsx-runtime").JSX.Element;
 export default CircularProgressBar;
 //# sourceMappingURL=CircularProgressBar.d.ts.map

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+/**
+ * One entry in the {@link CoverageBarComparisonProps.bars} array.
+ *
+ * Each entry carries **both** the bar's data and its legend label, so the
+ * number of bars is intrinsically equal to the number of legend items.
+ * There is no separate `legends` prop — that is by design.
+ */
+export type CoverageBarComparisonItem = {
+    /** Stable React key. */
+    key?: React.Key;
+    /**
+     * Numeric value used to scale the bar height proportionally. Bars share
+     * the chart area; the largest value (or {@link CoverageBarComparisonProps.max})
+     * fills the full bar area, smaller bars are proportionally shorter.
+     */
+    value: number;
+    /**
+     * Text rendered above the bar (the Figma `Header` slot, e.g. `"₹1L (40%)"`).
+     * Omit to hide the header for this bar.
+     */
+    label?: React.ReactNode;
+    /**
+     * Legend label rendered below the chart for this bar. Required: the legend
+     * row always has exactly one item per bar.
+     */
+    legend: React.ReactNode;
+    /**
+     * Optional value text shown on the right of the legend (e.g. `"₹12,400"`).
+     * When omitted the legend renders only the colored dot + label.
+     */
+    legendValue?: React.ReactNode;
+    /**
+     * Hard-override the bar fill color. Bypasses `valueBar/bar/background`
+     * resolution entirely — and is also used for the legend indicator dot, so
+     * the bar and its legend stay in sync.
+     */
+    color?: string;
+    /**
+     * Per-bar design token mode overrides. Merged on top of the parent `modes`
+     * and the per-index `Emphasis / DataViz` defaults injected by the parent.
+     */
+    modes?: Record<string, any>;
+    /** Per-bar accessibility label. */
+    accessibilityLabel?: string;
+};
+export type CoverageBarComparisonProps = {
+    /**
+     * The bars to render. Each entry contains the value, the bar header label
+     * **and** the legend label, so the chart and the legend can never go out of
+     * sync. Defaults to a 2-item "Current vs Recommended" example matching the
+     * Figma reference.
+     */
+    bars?: CoverageBarComparisonItem[];
+    /**
+     * Maximum value used to scale the bars. Defaults to the largest
+     * `bars[i].value`. Pass an explicit `max` when bars represent absolute
+     * numbers and you want a fixed scale (e.g. `max=100` for percentages).
+     */
+    max?: number;
+    /**
+     * Total height of the bar visualization area in px (includes the per-bar
+     * header label space). The largest bar fills `height - labelHeight - gap`.
+     * Default: `100`.
+     */
+    height?: number;
+    /**
+     * Vertical gap (px) between the chart and the legend row. Default: `12`,
+     * matching the Figma reference.
+     */
+    legendGap?: number;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Style applied to the chart row (the bars container). */
+    chartStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the legend row. */
+    legendStyle?: StyleProp<ViewStyle>;
+    /** Style applied to every value-label text above the bars. */
+    labelStyle?: StyleProp<TextStyle>;
+    /** Accessibility label for the entire component. */
+    accessibilityLabel?: string;
+};
+/**
+ * `CoverageBarComparison` renders a small vertical-bar chart that compares
+ * 2+ values side by side, with a legend row directly below where each item
+ * is intrinsically tied to one bar.
+ *
+ * Cohesiveness guarantees:
+ * - The legend row is **derived** from the same `bars` prop, so the count
+ *   and order can never desynchronise from the chart.
+ * - Each bar's color, its tokenized `Emphasis / DataViz` mode and its
+ *   legend indicator dot are the same value.
+ *
+ * Bars are drawn with `react-native-svg` (`<Rect>` with `rx`), and the
+ * fonts/spacing/colors are sourced from the Figma `valueBar/*` and
+ * `coverageBarComparison/*` tokens.
+ *
+ * @component
+ */
+declare function CoverageBarComparison({ bars, max, height, legendGap, modes: propModes, style, chartStyle, legendStyle, labelStyle, accessibilityLabel, }: CoverageBarComparisonProps): import("react/jsx-runtime").JSX.Element;
+export default CoverageBarComparison;
+//# sourceMappingURL=CoverageBarComparison.d.ts.map