jfs-components 0.0.72 → 0.0.74

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+export type MetricLegendItemProps = {
+    /** The label text on the left (after the indicator). */
+    label?: React.ReactNode;
+    /**
+     * The value text shown on the right. When `undefined` or `null`, the
+     * value slot is hidden — matching the Figma `data` boolean toggle.
+     */
+    value?: React.ReactNode;
+    /**
+     * Override the indicator dot color. Falls back to the
+     * `metricLegendItem/indicator/bg` design token.
+     */
+    indicatorColor?: string;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Override container styles. */
+    style?: StyleProp<ViewStyle>;
+    /** Override the indicator (dot) styles. */
+    indicatorStyle?: StyleProp<ViewStyle>;
+    /** Override the label text styles. */
+    labelStyle?: StyleProp<TextStyle>;
+    /** Override the value text styles. */
+    valueStyle?: StyleProp<TextStyle>;
+};
+/**
+ * MetricLegendItem renders a horizontal row consisting of a small colored
+ * indicator dot, a label and an optional value. It is used in chart legends
+ * and similar metric callouts.
+ *
+ * @component
+ * @param {MetricLegendItemProps} props
+ */
+declare function MetricLegendItem({ label, value, indicatorColor, modes, style, indicatorStyle, labelStyle, valueStyle, }: MetricLegendItemProps): import("react/jsx-runtime").JSX.Element;
+export default MetricLegendItem;
+//# sourceMappingURL=MetricLegendItem.d.ts.map

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

@@ -0,0 +1,119 @@
+import React from 'react';
+import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+/**
+ * The three semantic states a calendar glyph can be in. Maps 1:1 to the
+ * Figma `Calendar Glyph State` collection modes (`Idle`, `notSaved`,
+ * `saved`) and drives both the glyph fill/foreground tokens and the
+ * matching legend dot.
+ */
+export type MonthlyStatus = 'Idle' | 'notSaved' | 'saved';
+/** One month entry in the grid. */
+export type MonthlyStatusGridMonth = {
+    /** Stable React key. */
+    key?: React.Key;
+    /**
+     * Text rendered inside the glyph (e.g. `'Jan'`). When omitted, defaults
+     * to a 3-letter English month name based on the entry's index.
+     */
+    label?: React.ReactNode;
+    /**
+     * Semantic status. Drives the glyph background/foreground colors and the
+     * legend dot via the Figma `Calendar Glyph State` collection.
+     */
+    status: MonthlyStatus;
+    /**
+     * Per-month design token mode overrides. Merged on top of the parent
+     * `modes` and the per-month `Calendar Glyph State` derived from `status`.
+     */
+    modes?: Record<string, any>;
+    /** Per-month accessibility label. */
+    accessibilityLabel?: string;
+};
+export type MonthlyStatusGridProps = {
+    /**
+     * The months to render. Layout flows left-to-right, top-to-bottom into
+     * `columns` per row. Defaults to 12 `Idle` months (Jan…Dec) so the
+     * component renders something meaningful with no props.
+     */
+    months?: MonthlyStatusGridMonth[];
+    /**
+     * Number of glyphs per row. Default `4` (matching the Figma reference of
+     * 12 months × 4 columns = 3 rows).
+     */
+    columns?: number;
+    /**
+     * Override the legend labels. Pass `false` to hide the legend entirely.
+     * Missing keys fall back to the defaults: `No data`, `Not saved`,
+     * `Saved`.
+     */
+    legend?: false | Partial<Record<MonthlyStatus, React.ReactNode>>;
+    /**
+     * Restrict which legend entries are shown and in what order. Defaults to
+     * all three statuses in `[Idle, notSaved, saved]` order — matching the
+     * Figma reference.
+     */
+    legendStatuses?: MonthlyStatus[];
+    /** Design token modes (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Style applied to the months section (the rows wrapper). */
+    monthsStyle?: StyleProp<ViewStyle>;
+    /** Style applied to each row of glyphs. */
+    rowStyle?: StyleProp<ViewStyle>;
+    /** Style applied to every calendar glyph. */
+    glyphStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the glyph label text. */
+    labelStyle?: StyleProp<TextStyle>;
+    /** Style applied to the legend row. */
+    legendStyle?: StyleProp<ViewStyle>;
+    /** Accessibility label for the entire component. */
+    accessibilityLabel?: string;
+};
+export type CalendarGlyphProps = {
+    /** Text rendered inside the glyph (e.g. `'Jan'`). */
+    label?: React.ReactNode;
+    /**
+     * Semantic status — drives the glyph fill/foreground via the Figma
+     * `Calendar Glyph State` collection.
+     */
+    status?: MonthlyStatus;
+    /** Design token mode overrides. */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Label text style override. */
+    labelStyle?: StyleProp<TextStyle>;
+    /** Accessibility label. Defaults to `"{label}, {status}"`. */
+    accessibilityLabel?: string;
+};
+/**
+ * Single calendar-month glyph: a small pill with a status-driven background
+ * and foreground, and a centered month label. Exposed for callers who want
+ * to compose glyphs themselves; most consumers should use
+ * {@link MonthlyStatusGrid} instead, which keeps the count, layout and
+ * legend in sync automatically.
+ */
+declare function CalendarGlyph({ label, status, modes: propModes, style, labelStyle, accessibilityLabel, }: CalendarGlyphProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * `MonthlyStatusGrid` shows a year (or any contiguous range of months) as a
+ * grid of small pill-shaped calendar glyphs, each colored by its semantic
+ * status (`Idle` = "No data", `notSaved` = "Not saved", `saved` = "Saved").
+ * A legend below the grid explains the colors.
+ *
+ * Cohesiveness guarantees:
+ * - The number of glyphs is **always** `months.length`. There is no way to
+ *   render a glyph that has no underlying status.
+ * - The legend dot color for a status is resolved through the **same**
+ *   `calendarGlyph/background` token + `Calendar Glyph State` mode as the
+ *   glyph itself, so the visual mapping cannot drift.
+ *
+ * The chart is rendered with plain RN primitives (`View` + `Text`); SVG is
+ * unnecessary here because the glyph shape is a simple rounded rectangle.
+ *
+ * @component
+ */
+declare function MonthlyStatusGrid({ months, columns, legend, legendStatuses, modes: propModes, style, monthsStyle, rowStyle, glyphStyle, labelStyle, legendStyle, accessibilityLabel, }: MonthlyStatusGridProps): import("react/jsx-runtime").JSX.Element;
+export { CalendarGlyph };
+export default MonthlyStatusGrid;
+//# sourceMappingURL=MonthlyStatusGrid.d.ts.map

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

@@ -1,6 +1,71 @@
 import React from 'react';
 import { type ViewStyle, type StyleProp } from 'react-native';
 import { type SupportTextProps } from '../SupportText/SupportText';
+export type OtpResendState = 'counting' | 'ready' | 'sending';
+export type UseOtpResendOptions = {
+    /** Countdown length in seconds. Defaults to 30. */
+    durationSeconds?: number | undefined;
+    /** Called when the user requests a resend. May return a Promise; while pending, state is 'sending'. */
+    onResend?: (() => void | Promise<void>) | undefined;
+    /** Whether the countdown should auto-start on mount. Defaults to true. */
+    autoStart?: boolean | undefined;
+};
+export type UseOtpResendReturn = {
+    state: OtpResendState;
+    /** Seconds remaining in the current countdown (0 when not counting). */
+    secondsLeft: number;
+    /** True while state === 'ready'. */
+    canResend: boolean;
+    /** True while state === 'sending'. */
+    isSending: boolean;
+    /**
+     * Trigger a resend. No-op unless state === 'ready'. Awaits onResend()
+     * before restarting the countdown. Re-throws any onResend rejection
+     * so callers can surface the failure (state returns to 'ready').
+     */
+    resend: () => Promise<void>;
+    /** Manually start (or restart) the countdown. */
+    restart: (durationSeconds?: number) => void;
+    /** Stop the countdown and move to 'ready' (without invoking onResend). */
+    skip: () => void;
+};
+/**
+ * Headless hook that drives an OTP resend countdown.
+ *
+ * The hook is intentionally UI-agnostic: it returns just enough state
+ * (`state`, `secondsLeft`, plus `resend()` / `restart()` / `skip()`) so
+ * consumers can render their own button, support text, etc. The bundled
+ * `OTPResend` component is the canonical UI on top of this hook.
+ */
+export declare function useOtpResend({ durationSeconds, onResend, autoStart, }?: UseOtpResendOptions): UseOtpResendReturn;
+export type OTPResendConfig = {
+    /** Countdown length in seconds. Defaults to 30. */
+    durationSeconds?: number;
+    /** Called when the user taps the resend button. May return a Promise. */
+    onResend?: () => void | Promise<void>;
+    /** Whether the countdown should auto-start on mount. Defaults to true. */
+    autoStart?: boolean;
+    /** Format the countdown line. Defaults to (s) => `Resend OTP in ${s}s`. */
+    formatCountdown?: (secondsLeft: number) => string;
+    /** Label shown in the 'sending' state. Defaults to "Sending…". */
+    sendingLabel?: string;
+    /** Label shown when ready to resend. Defaults to "Resend". */
+    resendLabel?: string;
+    /** SupportText status applied while counting. Defaults to "Loading" (clock icon). */
+    countdownStatus?: SupportTextProps['status'];
+    /**
+     * Mode overrides for the resend Button (in the 'ready' state). Merged
+     * on top of the component default of `{ AppearanceBrand: 'Neutral',
+     * 'Button / Size': 'S', Emphasis: 'Low' }`. Use this to swap to a
+     * different brand/size/emphasis without touching the rest of the UI.
+     */
+    resendButtonModes?: Record<string, any>;
+};
+export type OTPResendProps = OTPResendConfig & {
+    modes?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+};
+export declare function OTPResend({ durationSeconds, onResend, autoStart, formatCountdown, sendingLabel, resendLabel, countdownStatus, resendButtonModes, modes: propModes, style, }: OTPResendProps): import("react/jsx-runtime").JSX.Element;
 export type OTPProps = {
     /** Number of OTP digits. Defaults to 6. */
     length?: number;
@@ -16,7 +81,7 @@ export type OTPProps = {
     onComplete?: (value: string) => void;
     /** Whether the OTP input is disabled. */
     isDisabled?: boolean;
-    /** Whether the OTP input is in an invalid/error state. */
+    /** Whether the OTP input is in an invalid/error state. Drives underline colour and (optionally) the error message. */
     isInvalid?: boolean;
     /** Regex pattern to filter allowed characters. Defaults to digits only. */
     allowedPattern?: RegExp;
@@ -30,7 +95,28 @@ export type OTPProps = {
     supportText?: React.ReactNode;
     /** SupportText status when using the string shorthand. */
     supportTextStatus?: SupportTextProps['status'];
+    /**
+     * Convenience: shown beneath the slots **only** while `isInvalid` is true.
+     * Renders with status="Error" automatically. When omitted, the regular
+     * `supportText` is shown instead (with status promoted to Error).
+     */
+    errorMessage?: string;
+    /**
+     * When provided, replaces the support area with a managed countdown that
+     * decays into a "Resend" button. Hidden while `isInvalid` is true so the
+     * error message can take precedence.
+     */
+    resend?: OTPResendConfig;
+    /**
+     * Enable native one-time-code auto-fill on the underlying TextInput.
+     * On iOS this surfaces the SMS code in the QuickType bar above the
+     * keyboard (system-managed; no library required). On Android this sets
+     * `autoComplete="one-time-code"`, which the OS can auto-fill from
+     * notifications when the host app is wired up to the SMS Retriever or
+     * SMS User Consent APIs. Defaults to true.
+     */
+    enableSmsAutofill?: boolean;
 };
-declare function OTP({ length, value: controlledValue, defaultValue, onChange, onValueChange, onComplete, isDisabled, isInvalid, allowedPattern, autoFocus, modes: propModes, style, supportText, supportTextStatus, }: OTPProps): import("react/jsx-runtime").JSX.Element;
+declare function OTP({ length, value: controlledValue, defaultValue, onChange, onValueChange, onComplete, isDisabled, isInvalid, allowedPattern, autoFocus, modes: propModes, style, supportText, supportTextStatus, errorMessage, resend, enableSmsAutofill, }: OTPProps): import("react/jsx-runtime").JSX.Element;
 export default OTP;
 //# sourceMappingURL=OTP.d.ts.map

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type PageHeroProps = {
+    /** Small eyebrow text shown above the headline. */
+    eyebrow?: string;
+    /** Main headline text. Centered and bold. */
+    headline?: string;
+    /** Optional supporting text shown below the headline. */
+    supportingText?: string;
+    /** Whether to render the supporting text. */
+    showSupportingText?: boolean;
+    /** Label for the default action button. Ignored when `buttonSlot` is provided. */
+    buttonLabel?: string;
+    /** Press handler for the default action button. Ignored when `buttonSlot` is provided. */
+    onButtonPress?: () => void;
+    /** Whether to render the default action button. Ignored when `buttonSlot` is provided. */
+    showButton?: boolean;
+    /**
+     * Optional slot to fully override the action button.
+     * When provided, `showButton`, `buttonLabel`, and `onButtonPress` are ignored.
+     * `modes` are automatically cascaded into this slot.
+     */
+    buttonSlot?: React.ReactNode;
+    /** Mode configuration for design-token theming. */
+    modes?: Record<string, any>;
+    /** Style overrides applied to the outer container. */
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+};
+/**
+ * PageHero displays a centered hero block typically used at the top of a page
+ * or feature screen. It contains an eyebrow line, a large headline, an optional
+ * supporting line (e.g. price/timeline), and an optional action button.
+ *
+ * All visual values are resolved from Figma design tokens via
+ * `getVariableByName`. The button slot cascades the active `modes` to its
+ * children through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PageHero
+ *   eyebrow="Upgrade to JioFinance+"
+ *   headline="Resume earning cashback, extra points, and 1% gold"
+ *   supportingText="₹999/year · ₹0 until 2027"
+ *   buttonLabel="Renew for free"
+ *   onButtonPress={() => navigate('Upgrade')}
+ * />
+ * ```
+ */
+declare function PageHero({ eyebrow, headline, supportingText, showSupportingText, buttonLabel, onButtonPress, showButton, buttonSlot, modes: propModes, style, testID, }: PageHeroProps): import("react/jsx-runtime").JSX.Element;
+export default PageHero;
+//# sourceMappingURL=PageHero.d.ts.map

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { type ImageStyle, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { type UnifiedSource } from '../../utils/MediaSource';
+export type PoweredByLabelProps = {
+    /**
+     * Label copy. Defaults to "Powered by RBI-regulated account aggregator"
+     * to match the Figma reference.
+     */
+    label?: string;
+    /**
+     * Brand logo source. Accepts any {@link UnifiedSource} — remote URI, SVG
+     * XML string, `require()` asset, SVG React component, or React element.
+     * Defaults to the bundled FINVU logo so the component renders correctly
+     * without any caller-provided image.
+     *
+     * Ignored when `imageSlot` is provided.
+     */
+    imageSource?: UnifiedSource;
+    /**
+     * Rendered width of the logo in px. Defaults to `33` to match Figma.
+     */
+    imageWidth?: number;
+    /**
+     * Rendered height of the logo in px. Defaults to `12` to match Figma.
+     */
+    imageHeight?: number;
+    /**
+     * Replace the default `Image` entirely (e.g. with a vector logo,
+     * `BrandChip`, or custom layout). Receives `modes` recursively.
+     * Overrides `imageSource`.
+     */
+    imageSlot?: React.ReactNode;
+    /**
+     * Design token modes for theming (e.g. `{ 'Color Mode': 'Dark' }`).
+     */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Label text style override. */
+    textStyle?: StyleProp<TextStyle>;
+    /** Logo image style override (size/resize behaviour, etc.). */
+    imageStyle?: StyleProp<ImageStyle>;
+    /**
+     * Accessibility label. Defaults to the visible `label` so the brand image
+     * (which is decorative) does not need to be announced separately.
+     */
+    accessibilityLabel?: string;
+};
+/**
+ * `PoweredByLabel` renders the small "Powered by RBI-regulated account
+ * aggregator" badge with a trailing brand logo, used to attribute the
+ * underlying account-aggregator partner in flows such as bank-account
+ * linking and consent screens.
+ *
+ * The component is composed of:
+ *
+ * 1. A token-styled pill container (`poweredByLabel/background`,
+ *    `poweredByLabel/padding/*`).
+ * 2. The disclosure copy rendered through the `poweredByLabel/*` typography
+ *    tokens.
+ * 3. A configurable brand logo slot. Defaults to the bundled FINVU mark, but
+ *    callers can pass any image via `imageSource` or fully replace the slot
+ *    via `imageSlot`.
+ *
+ * @component
+ * @param {PoweredByLabelProps} props
+ */
+declare function PoweredByLabel({ label, imageSource, imageWidth, imageHeight, imageSlot, modes: propModes, style, textStyle, imageStyle, accessibilityLabel, }: PoweredByLabelProps): import("react/jsx-runtime").JSX.Element;
+export default PoweredByLabel;
+//# sourceMappingURL=PoweredByLabel.d.ts.map

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle, type ImageSourcePropType } from 'react-native';
+export type ProductOverviewStat = {
+    /** The large prominent value shown on top, e.g. "995", "3%". */
+    value: string;
+    /** The descriptive label rendered beneath the value, e.g. "Purity". */
+    label: string;
+};
+export type ProductOverviewProps = {
+    /** Hero image source rendered at the top of the card. */
+    imageSource?: ImageSourcePropType | string;
+    /** Aspect ratio for the hero image. Defaults to the Figma frame (288:170). */
+    imageRatio?: number;
+    /** Avatar source for the inline ProductLabel chip. */
+    labelImageSource?: ImageSourcePropType | string;
+    /** Text shown next to the avatar in the ProductLabel chip. */
+    label?: string;
+    /** The large product name, e.g. "0.5g Gold Coin". */
+    productName?: string;
+    /** The short multi-line description below the product name. */
+    description?: string;
+    /**
+     * Stats rendered in the bottom row. Each stat shows a large value above a
+     * smaller label. Pass an empty array (or `null`) to hide the row.
+     */
+    stats?: ProductOverviewStat[];
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Custom slot rendered between the description and the stats row, useful
+     * for badges, callouts, etc. Receives the same `modes` as the parent.
+     */
+    children?: React.ReactNode;
+};
+declare const ProductOverview: ({ imageSource, imageRatio, labelImageSource, label, productName, description, stats, modes, style, children, }: ProductOverviewProps) => import("react/jsx-runtime").JSX.Element;
+export default ProductOverview;
+//# sourceMappingURL=ProductOverview.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