jfs-components 0.0.71 → 0.0.73

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

@@ -0,0 +1,30 @@
+import { ViewStyle, StyleProp } from 'react-native';
+export interface RadioProps {
+    /**
+     * Whether the radio is selected.
+     */
+    selected?: boolean;
+    /**
+     * Whether the radio is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Function to call when the radio is pressed.
+     */
+    onPress?: () => void;
+    /**
+     * Modes object for design-token resolution.
+     */
+    modes?: Record<string, any>;
+    /**
+     * Custom style for the radio container.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Test ID for testing.
+     */
+    testID?: string;
+}
+export declare function Radio({ selected, disabled, onPress, modes, style, testID, }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export default Radio;
+//# sourceMappingURL=Radio.d.ts.map

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

@@ -1,30 +1,22 @@
-import { ViewStyle, StyleProp } from 'react-native';
-export interface RadioButtonProps {
-    /**
-     * Whether the radio button is selected.
-     */
-    selected?: boolean;
-    /**
-     * Whether the radio button is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Function to call when the radio button is pressed.
-     */
-    onPress?: () => void;
-    /**
-     * Modes object for design-token resolution.
-     */
-    modes?: Record<string, any>;
-    /**
-     * Custom style for the radio button container.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Test ID for testing.
-     */
-    testID?: string;
-}
-export declare function RadioButton({ selected, disabled, onPress, modes, style, testID, }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated `RadioButton` has been renamed to `Radio`.
+ *
+ * This file is kept as a backward-compatibility shim for teams that may be
+ * importing `RadioButton` directly from this deep path:
+ *
+ *   import RadioButton from 'jfs-components/src/components/RadioButton/RadioButton'
+ *   import { RadioButton, RadioButtonProps } from '...'
+ *
+ * The recommended public import is now:
+ *
+ *   import { Radio, type RadioProps } from 'jfs-components'
+ *
+ * Going forward, this component is called `Radio`. This shim only re-exports
+ * the new `Radio` component under the old `RadioButton` names; please migrate
+ * existing usages to `Radio` at your earliest convenience.
+ */
+import { Radio, type RadioProps } from '../Radio/Radio';
+export type RadioButtonProps = RadioProps;
+export declare const RadioButton: typeof Radio;
 export default RadioButton;
 //# sourceMappingURL=RadioButton.d.ts.map

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

@@ -0,0 +1,173 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * One row of data inside a `RangeTrack` tab.
+ *
+ * Each item drives BOTH a `SegmentedTrack` segment and the matching
+ * `MetricLegendItem` row, so the segment color and legend indicator
+ * always share the same color by construction (same `Emphasis / DataViz`
+ * cascade as the standalone `SegmentedTrack`).
+ */
+export type RangeTrackItem = {
+    /** Stable React key. Falls back to the item label / index. */
+    key?: React.Key;
+    /** The descriptive label rendered next to the indicator dot. */
+    label?: React.ReactNode;
+    /**
+     * The data point — drives the segment's proportional width. Same
+     * semantics as `SegmentedTrackSegmentData.value`. When the legend's
+     * right-side text is shown, the resolution order is:
+     * `displayValue` → `formatValue(value)` → hide.
+     */
+    value: number;
+    /**
+     * Optional override for the legend row's right-side text. Falls
+     * back to `formatValue(value)` if a parent-level `formatValue` is
+     * provided; otherwise the value slot is hidden (matches the
+     * `data` boolean toggle on `MetricLegendItem`). Pass `null` or
+     * `false` to explicitly hide on a per-item basis.
+     */
+    displayValue?: React.ReactNode;
+    /**
+     * Hard-override the shared color used for both the segment and the
+     * legend indicator. Bypasses `dataViz/bg` token resolution.
+     */
+    color?: string;
+    /**
+     * Per-item design token mode overrides. Merged on top of parent
+     * `modes` and the per-index `Emphasis / DataViz` defaults
+     * (`High`, `Medium`, `Low`, then cycles).
+     */
+    modes?: Record<string, any>;
+    /** Accessibility label for the segment + legend row pairing. */
+    accessibilityLabel?: string;
+};
+/**
+ * One tab inside a `RangeTrack`. Each tab carries its own `items`
+ * array, which is the single source of truth for both the
+ * `SegmentedTrack` segments AND the `MetricLegendItem` legend rows
+ * rendered for that tab.
+ */
+export type RangeTrackTab = {
+    /** Stable React key. Falls back to the tab label / index. */
+    key?: React.Key;
+    /** The label shown inside the `TabItem` at the top of the component. */
+    label: string;
+    /**
+     * Data-driven rows. Each entry produces one `SegmentedTrack`
+     * segment AND one matching `MetricLegendItem` legend row — the
+     * count of legend rows is locked in step with the count of segments
+     * by construction.
+     */
+    items: RangeTrackItem[];
+    /**
+     * Per-tab accessibility label for the tab item button. Falls back
+     * to `label`.
+     */
+    accessibilityLabel?: string;
+};
+export type RangeTrackProps = {
+    /**
+     * Tabs to render across the top. Each tab carries its own `items`
+     * array, which is the single source of truth for that tab's
+     * segments and legend rows. Switching tabs swaps both the segments
+     * and the legend together.
+     */
+    tabs: RangeTrackTab[];
+    /**
+     * Optional formatter applied to each item's numeric `value` when
+     * the item does not provide an explicit `displayValue`. Useful for
+     * the common "format every weight the same way" case
+     * (e.g. `(v) => `${v}%``). Applies to the legend rows of the
+     * currently active tab.
+     */
+    formatValue?: (value: number) => React.ReactNode;
+    /**
+     * Controlled active tab index. When provided, the component is
+     * fully controlled and `onTabChange` should be wired up. When
+     * `undefined`, the component manages the active tab internally
+     * starting from `defaultActiveTabIndex`.
+     */
+    activeTabIndex?: number;
+    /**
+     * Initial active tab index when the component is uncontrolled.
+     * Ignored if `activeTabIndex` is provided.
+     * @default 0
+     */
+    defaultActiveTabIndex?: number;
+    /**
+     * Fired when the user taps a tab. Receives the new index and the
+     * matching `RangeTrackTab` from the `tabs` array.
+     */
+    onTabChange?: (index: number, tab: RangeTrackTab) => void;
+    /**
+     * When true, the tab row scrolls horizontally — useful when there
+     * are many tabs.
+     * @default false
+     */
+    scrollableTabs?: boolean;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Override the outer container styles. */
+    style?: StyleProp<ViewStyle>;
+    /** Override the tab row styles. */
+    tabsStyle?: StyleProp<ViewStyle>;
+    /** Override the `SegmentedTrack` styles. */
+    trackStyle?: StyleProp<ViewStyle>;
+    /** Override the legend list container styles. */
+    legendStyle?: StyleProp<ViewStyle>;
+    /** Accessibility label announced for the whole component. */
+    accessibilityLabel?: string;
+};
+/**
+ * `RangeTrack` pairs a tab row with a `SegmentedTrack` and a vertical
+ * stack of `MetricLegendItem` rows. Each tab carries its own `items`
+ * array which is the **single source of truth** for both the segments
+ * and the legend rows of that tab — every segment has exactly one
+ * legend row and they share the same color through the same
+ * `Emphasis / DataViz` cascade as the standalone `SegmentedTrack`.
+ *
+ * Switching tabs swaps the segments and the legend together so the
+ * two visualizations can never drift out of sync.
+ *
+ * The default 3-item layout per tab receives per-index
+ * `Emphasis / DataViz` defaults (item 1 → `High`, 2 → `Medium`, 3 →
+ * `Low`, then cycles). Override `Appearance / DataViz` on the parent
+ * `modes` to retheme the whole component, or set `modes` per item to
+ * remix.
+ *
+ * The component supports both **controlled** and **uncontrolled**
+ * tab selection — pass `activeTabIndex` + `onTabChange` for the
+ * controlled mode, or omit them and the component will manage the
+ * selection internally starting from `defaultActiveTabIndex`.
+ *
+ * @component
+ * @param {RangeTrackProps} props
+ *
+ * @example
+ * ```tsx
+ * <RangeTrack
+ *   tabs={[
+ *     {
+ *       label: 'Sectoral',
+ *       items: [
+ *         { label: 'Large cap', value: 50, displayValue: '50%' },
+ *         { label: 'Mid cap',   value: 30, displayValue: '30%' },
+ *         { label: 'Small cap', value: 20, displayValue: '20%' },
+ *       ],
+ *     },
+ *     {
+ *       label: 'Geography',
+ *       items: [
+ *         { label: 'India', value: 70, displayValue: '70%' },
+ *         { label: 'US',    value: 20, displayValue: '20%' },
+ *         { label: 'Other', value: 10, displayValue: '10%' },
+ *       ],
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+declare function RangeTrack({ tabs, formatValue, activeTabIndex, defaultActiveTabIndex, onTabChange, scrollableTabs, modes: propModes, style, tabsStyle, trackStyle, legendStyle, accessibilityLabel, }: RangeTrackProps): import("react/jsx-runtime").JSX.Element;
+export default RangeTrack;
+//# sourceMappingURL=RangeTrack.d.ts.map

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