jfs-components 0.1.0 → 0.1.8

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { type ViewStyle, type StyleProp, type ImageSourcePropType } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export interface ProductMerchandisingCardProps {
+    /**
+     * Background media for the card. Accepts a URL string or any RN
+     * `ImageSourcePropType` (same shape as `Avatar`, `MediaCard`, etc.). The
+     * image is rendered full-bleed behind the header and glass footer.
+     */
+    imageSource?: ImageSourcePropType | string;
+    /** Footer title (bold, white). */
+    title?: string;
+    /** Footer subtitle (muted). */
+    subtitle?: string;
+    /**
+     * Header badge label (top-right). The badge is hidden when this is
+     * `undefined` and no `badge` override is provided.
+     */
+    badgeLabel?: string;
+    /**
+     * Full override for the header badge. Takes precedence over `badgeLabel`.
+     */
+    badge?: React.ReactNode;
+    /** Show the header avatar (top-left). Defaults to `true`. */
+    showAvatar?: boolean;
+    /** Avatar image source. */
+    avatarSource?: ImageSourcePropType | string;
+    /** Avatar monogram fallback when no image is supplied. */
+    avatarMonogram?: string;
+    /** Full override for the header avatar. Takes precedence over avatar props. */
+    avatar?: React.ReactNode;
+    /**
+     * Footer "special badge" label (small frosted pill above the title). The
+     * badge is hidden when this is `undefined` and no `specialBadge` override
+     * is provided.
+     */
+    specialBadgeLabel?: string;
+    /** Optional leading node (icon/image) rendered inside the special badge. */
+    specialBadgeIcon?: React.ReactNode;
+    /** Full override for the special badge. Takes precedence over the props above. */
+    specialBadge?: React.ReactNode;
+    /** CTA button label. Defaults to `"CTA"`. */
+    ctaLabel?: string;
+    /** CTA button press handler. */
+    onCtaPress?: () => void;
+    /** Full override for the CTA. Takes precedence over `ctaLabel`/`onCtaPress`. */
+    cta?: React.ReactNode;
+    /** Press handler for the whole card. When set, the card becomes pressable. */
+    onPress?: () => void;
+    /** Card height in px. Defaults to `223` (Figma spec). */
+    height?: number;
+    /** Modes object for design-token resolution. Cascaded to all children. */
+    modes?: Modes;
+    /** Style overrides for the card container. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the card. */
+    accessibilityLabel?: string;
+}
+/**
+ * ProductMerchandisingCard — a full-bleed image card (Figma node 5277:317)
+ * with a top header (avatar + badge) and a bottom **glass footer** that
+ * combines a real native background blur with a transparent→black gradient
+ * scrim for legible text over any image.
+ *
+ * Glass footer implementation (works on iOS, Android and Web):
+ *  - **iOS / Android:** `<GlassFill>` wraps `@react-native-community/blur`'s
+ *    `BlurView` — iOS gets a real `UIVisualEffectView` (live OS blur),
+ *    Android gets the community `RealtimeBlurView` with a tinted scrim
+ *    fallback. The native-only module is isolated in `GlassFill.tsx`.
+ *  - **Web:** the platform-extension `GlassFill.web.tsx` renders a translucent
+ *    `View` with `backdrop-filter: blur()` — Metro picks the right file so the
+ *    web bundle never imports the native blur module.
+ *  - The gradient scrim is drawn with `react-native-svg` (one renderer for all
+ *    platforms) so the fade is identical everywhere.
+ *
+ * The blur strength is driven by the Figma `blur/minimal` token, mapped to the
+ * `GlassFill` 0–100 intensity scale the same way `MediaCard` does.
+ */
+declare function ProductMerchandisingCard({ imageSource, title, subtitle, badgeLabel, badge, showAvatar, avatarSource, avatarMonogram, avatar, specialBadgeLabel, specialBadgeIcon, specialBadge, ctaLabel, onCtaPress, cta, onPress, height, modes, style, accessibilityLabel, }: ProductMerchandisingCardProps): import("react/jsx-runtime").JSX.Element;
+export default ProductMerchandisingCard;
+//# sourceMappingURL=ProductMerchandisingCard.d.ts.map

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle, type ImageSourcePropType } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type ProductOverviewStat = {
     /** The large prominent value shown on top, e.g. "995", "3%". */
     value: string;
@@ -25,7 +26,7 @@ export type ProductOverviewProps = {
      */
     stats?: ProductOverviewStat[];
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style override. */
     style?: StyleProp<ViewStyle>;
     /**

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type ProgressBadgeProps = {
     /** The text displayed in the badge (e.g. "Live price...") */
     taskName?: string;
@@ -8,7 +9,7 @@ export type ProgressBadgeProps = {
     /** The progress value between 0 and 100 */
     value?: number;
     /** Modes object passed to `getVariableByName` for design token resolution */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Optional container style overrides */
     style?: StyleProp<ViewStyle>;
     /** Optional text style overrides */

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+/**
+ * A value rendered at either end of the marker. A `string`/`number` is rendered
+ * with the built-in title typography; any other `ReactNode` (e.g. a
+ * `MoneyValue`) is rendered as-is so consumers can fully control presentation.
+ */
+type ProjectionMarkerEndValue = React.ReactNode;
+export type ProjectionMarkerProps = {
+    /**
+     * Value shown on the leading (left) end of the marker — typically the
+     * invested/starting amount. Accepts a string for the default styling or any
+     * `ReactNode` (e.g. `MoneyValue`) for custom rendering.
+     */
+    startValue?: ProjectionMarkerEndValue;
+    /**
+     * Value shown on the trailing (right) end of the marker — typically the
+     * projected/ending amount.
+     */
+    endValue?: ProjectionMarkerEndValue;
+    /**
+     * Primary line inside the center badge — typically the duration
+     * (e.g. `"1Y 10M"`).
+     */
+    duration?: React.ReactNode;
+    /**
+     * Secondary line inside the center badge — typically the rate
+     * (e.g. `"@ 8.25 %"`).
+     */
+    rate?: React.ReactNode;
+    /**
+     * Whether to render the connector lines between the end values and the
+     * center badge. Defaults to `true`.
+     */
+    showConnectors?: boolean;
+    /** Design token modes for theming. */
+    modes?: Modes;
+    /** Override the root container styles. */
+    style?: StyleProp<ViewStyle>;
+    /** Override the leading value text styles (only applies to string values). */
+    startValueStyle?: StyleProp<TextStyle>;
+    /** Override the trailing value text styles (only applies to string values). */
+    endValueStyle?: StyleProp<TextStyle>;
+    /** Override the center badge container styles. */
+    badgeStyle?: StyleProp<ViewStyle>;
+    /** Override the duration text styles. */
+    durationStyle?: StyleProp<TextStyle>;
+    /** Override the rate text styles. */
+    rateStyle?: StyleProp<TextStyle>;
+    /** Accessibility label for the whole marker. */
+    accessibilityLabel?: string;
+};
+/**
+ * ProjectionMarker renders a start value and an end value connected to a
+ * centered badge that summarizes the projection (e.g. a tenure and interest
+ * rate). It mirrors the Figma `projectionMarker` component and is commonly used
+ * inside "Potential returns" style cards.
+ *
+ * @example
+ * ```tsx
+ * <ProjectionMarker
+ *   startValue="₹1,00,000"
+ *   endValue="₹1,25,101"
+ *   duration="1Y 10M"
+ *   rate="@ 8.25 %"
+ * />
+ * ```
+ *
+ * @example Custom end values via MoneyValue
+ * ```tsx
+ * <ProjectionMarker
+ *   startValue={<MoneyValue value="1,00,000" />}
+ *   endValue={<MoneyValue value="1,25,101" />}
+ *   duration="1Y 10M"
+ *   rate="@ 8.25 %"
+ * />
+ * ```
+ */
+declare function ProjectionMarker({ startValue, endValue, duration, rate, showConnectors, modes, style, startValueStyle, endValueStyle, badgeStyle, durationStyle, rateStyle, accessibilityLabel, }: ProjectionMarkerProps): import("react/jsx-runtime").JSX.Element;
+export default ProjectionMarker;
+//# sourceMappingURL=ProjectionMarker.d.ts.map

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

@@ -1,4 +1,6 @@
-import { ViewStyle, StyleProp } from 'react-native';
+import React from 'react';
+import { View, ViewStyle, StyleProp } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export interface RadioProps {
     /**
      * Whether the radio is selected.
@@ -15,7 +17,7 @@ export interface RadioProps {
     /**
      * Modes object for design-token resolution.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Custom style for the radio container.
      */
@@ -25,6 +27,6 @@ export interface RadioProps {
      */
     testID?: string;
 }
-export declare function Radio({ selected, disabled, onPress, modes, style, testID, }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<View>>;
 export default Radio;
 //# sourceMappingURL=Radio.d.ts.map

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

@@ -15,8 +15,8 @@
  * 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';
+import { type RadioProps } from '../Radio/Radio';
 export type RadioButtonProps = RadioProps;
-export declare const RadioButton: typeof Radio;
+export declare const RadioButton: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<import("react-native").View>>;
 export default RadioButton;
 //# sourceMappingURL=RadioButton.d.ts.map

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /**
  * One row of data inside a `RangeTrack` tab.
  *
@@ -38,7 +39,7 @@ export type RangeTrackItem = {
      * `modes` and the per-index `Emphasis / DataViz` defaults
      * (`High`, `Medium`, `Low`, then cycles).
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Accessibility label for the segment + legend row pairing. */
     accessibilityLabel?: string;
 };
@@ -107,7 +108,7 @@ export type RangeTrackProps = {
      */
     scrollableTabs?: boolean;
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override the outer container styles. */
     style?: StyleProp<ViewStyle>;
     /** Override the tab row styles. */

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type RechargeCardProps = {
     /**
      * Title of the card.
@@ -39,7 +40,7 @@ export type RechargeCardProps = {
     /**
      * Mode configuration for design tokens.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: ViewStyle;
 };
 /**

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /**
  * A single row in the savings-goal legend (current vs. target).
  *
@@ -59,7 +60,7 @@ export type SavingsGoalSummaryProps = {
      * 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>;
+    modes?: Modes;
     /** Override container styles. */
     style?: StyleProp<ViewStyle>;
     /**

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export interface ScreenProps {
     /**
      * The content to display inside the screen.
@@ -8,7 +9,7 @@ export interface ScreenProps {
     /**
      * Modes object to override default variable values.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Optional style overrides for the container.
      */

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 import { type WebAccessibilityProps } from '../../utils/web-platform-utils';
+import type { Modes } from '../../design-tokens';
 type SectionProps = {
     title?: string;
     supportText?: string;
@@ -8,7 +9,7 @@ type SectionProps = {
     slot?: React.ReactNode;
     /** Layout direction of the slot's children. Defaults to 'row' (horizontal). */
     slotDirection?: 'row' | 'column';
-    modes?: Record<string, any>;
+    modes?: Modes;
     onPress?: () => void;
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
@@ -29,7 +30,7 @@ type BentoToggleRenderState = {
 type SectionBentoProps = {
     navSlot?: React.ReactNode;
     upiSlot?: React.ReactNode;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
     accessibilityHint?: string;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type SegmentedControlItem = {
     key: React.Key;
     label: string;
@@ -14,7 +15,7 @@ export type SegmentedControlProps = {
     /** Callback fired when the selected segment changes */
     onSelectionChange?: (key: React.Key) => void;
     /** Design token modes for theming */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override container styles */
     style?: StyleProp<ViewStyle>;
 };

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /**
  * Per-segment data definition for the data-driven `segments` prop.
  *
@@ -31,7 +32,7 @@ export type SegmentedTrackSegmentData = {
      * Per-segment design token mode overrides. Merged on top of the parent
      * `modes` and the per-index Emphasis defaults.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override individual segment styles. */
     style?: StyleProp<ViewStyle>;
     /** Per-segment accessibility label. */
@@ -51,7 +52,7 @@ export type SegmentedTrackProps = {
      */
     children?: React.ReactNode;
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override the container styles. */
     style?: StyleProp<ViewStyle>;
     /** Style applied to every segment (data-driven mode only). */
@@ -73,7 +74,7 @@ type SegmentedTrackSegmentProps = {
      * 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;
+    modes?: Modes | undefined;
     /** Override the segment styles. */
     style?: StyleProp<ViewStyle> | undefined;
     /** Per-segment accessibility label. */

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+/**
+ * Imperative handle exposed via `ref`. The primary way to read a slider's value
+ * is still the controlled `value` + `onChange` pair (each `<Slider />` reports
+ * its own value, so multiple sliders are disambiguated by their own handlers).
+ * The ref is a convenience for reading the latest value on demand (e.g. on a
+ * button press) or imperatively nudging an uncontrolled slider.
+ *
+ * @example
+ * const slider = useRef<SliderHandle>(null)
+ * slider.current?.setValue(50)
+ * const v = slider.current?.getValue()
+ */
+export interface SliderHandle {
+    /** Returns the slider's current (clamped, step-snapped) value. */
+    getValue: () => number;
+    /** Sets the value. Fires `onChange` + `onChangeEnd`. */
+    setValue: (value: number) => void;
+    /** Steps the value up by one `step` (or `by`, snapped to `step`). */
+    increment: (by?: number) => void;
+    /** Steps the value down by one `step` (or `by`, snapped to `step`). */
+    decrement: (by?: number) => void;
+}
+export interface SliderProps {
+    /** Current value (controlled). Pair with `onChange`. */
+    value?: number;
+    /** Initial value (uncontrolled). Defaults to `minValue`. */
+    defaultValue?: number;
+    /** Called continuously while the value changes (drag / keypress / track press). */
+    onChange?: (value: number) => void;
+    /** Called once when the interaction ends (drag release / keypress). */
+    onChangeEnd?: (value: number) => void;
+    /** Minimum selectable value. Defaults to `0`. */
+    minValue?: number;
+    /** Maximum selectable value. Defaults to `100`. */
+    maxValue?: number;
+    /** Snap increment. Defaults to `1`. Use a smaller value for finer control. */
+    step?: number;
+    /** Disables interaction and dims the control. */
+    isDisabled?: boolean;
+    /**
+     * `Intl.NumberFormat` options used to format the value bubble and the
+     * min/max labels (e.g. `{ style: 'currency', currency: 'USD' }`).
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** BCP-47 locale used with `formatOptions`. Defaults to the runtime locale. */
+    locale?: string;
+    /**
+     * Full override for value formatting. Takes precedence over `formatOptions`.
+     * Receives the raw numeric value, returns the string to display.
+     */
+    formatValue?: (value: number) => string;
+    /** Renders fully custom value-bubble content. Takes precedence over `formatValue`. */
+    renderTooltip?: (value: number) => React.ReactNode;
+    /**
+     * When `true` (default, matches the Figma design) the value bubble is
+     * always visible. When `false` it behaves like a normal tooltip — hidden at
+     * rest and revealed only while the user interacts (dragging on touch, or
+     * hovering/dragging on web), then dismissed as soon as the finger lifts.
+     *
+     * Either way the bubble floats above the track and never occupies layout
+     * space, so it will overlap content above the slider — leave room for it.
+     */
+    alwaysShowTooltip?: boolean;
+    /** Toggles the min/max labels below the track. Defaults to `true`. */
+    showLabels?: boolean;
+    /** Override for the left (min) label. Defaults to the formatted `minValue`. */
+    minLabel?: React.ReactNode;
+    /** Override for the right (max) label. Defaults to the formatted `maxValue`. */
+    maxLabel?: React.ReactNode;
+    /** Slider width. Defaults to `'100%'` so it fills its parent. */
+    width?: number | `${number}%`;
+    /** Design-token modes for theming. */
+    modes?: Modes;
+    /** Style override for the outer container. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for screen readers. */
+    accessibilityLabel?: string;
+}
+/**
+ * Slider — Figma node 5373:446 ("Slider").
+ *
+ * A horizontal, single-thumb slider driven entirely by design tokens. It maps a
+ * numeric range (`minValue`–`maxValue`) onto a track with a filled indicator, a
+ * draggable handle, a value bubble pinned above the handle, and optional min/max
+ * labels beneath the track. Built on `PanResponder` so the one code path works
+ * on iOS, Android and the web.
+ *
+ * The design only labels the range bounds, but a slider's purpose is to bind a
+ * value — so the live value is surfaced through the bubble (formatted via
+ * `formatOptions` / `formatValue`) and reported through `onChange` /
+ * `onChangeEnd`. Supports controlled and uncontrolled usage, web keyboard
+ * control, and an imperative {@link SliderHandle} `ref` for on-demand reads.
+ */
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<SliderHandle>>;
+export default Slider;
+//# sourceMappingURL=Slider.d.ts.map

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type SlotLayoutDirection = 'vertical' | 'horizontal';
 export type SlotProps = ViewProps & {
     /**
@@ -25,7 +26,7 @@ export type SlotProps = ViewProps & {
     /**
      * Mode configuration passed to the token resolver and cascaded to children.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
 };
 /**

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

@@ -1,4 +1,5 @@
 import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /**
  * Per-segment colours, resolved from the Figma `spiner/*` tokens. Consumers can
  * override any subset via the `colors` prop.
@@ -34,7 +35,7 @@ export type SpinnerProps = SpinnerBaseProps & {
     /** When false, renders a static resting spinner (also honoured for reduced motion). Defaults to true. */
     animating?: boolean;
     /** Design token modes forwarded to token lookups. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style override. */
     style?: StyleProp<ViewStyle>;
     /** Accessibility label announced to assistive tech. Defaults to "Loading". */

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type StatGroupItem = {
     /** Stable key for the item. Falls back to the label / index. */
     key?: React.Key;
@@ -24,7 +25,7 @@ export type StatGroupProps = {
      */
     children?: React.ReactNode;
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override container styles. */
     style?: StyleProp<ViewStyle>;
 };

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

@@ -1,4 +1,5 @@
 import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type StatItemLabelPosition = 'Top' | 'Bottom';
 export type StatItemProps = {
     /** The small descriptive label. */
@@ -14,7 +15,7 @@ export type StatItemProps = {
      */
     labelPosition?: StatItemLabelPosition;
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override container styles. */
     style?: StyleProp<ViewStyle>;
     /** Override the label text styles. */

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

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import { type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type StatusHeroProps = {
     /**
      * Custom media slot content.
@@ -20,7 +21,7 @@ export type StatusHeroProps = {
     /** Currency symbol or ISO code for the default MoneyValue */
     currency?: string;
     /** Mode configuration for design tokens */
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: ViewStyle;
 };
 /**

package/lib/typescript/src/components/Stepper/Step.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type StepStatus = 'number' | 'complete' | 'error' | 'warning';
 export type StepProps = {
     children?: React.ReactNode;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: ViewStyle;
     index?: number;
     showLine?: boolean;

package/lib/typescript/src/components/Stepper/StepLabel.d.ts

@@ -1,11 +1,12 @@
 import { type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type StepLabelProps = {
     title?: string;
     supportingText?: string;
     metaText?: string;
     subtitle?: boolean;
     meta?: boolean;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: ViewStyle;
 };
 export declare function StepLabel({ title, supportingText, metaText, subtitle, meta, modes, style, }: StepLabelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,12 +2,13 @@ import React from 'react';
 import { type ViewStyle } from 'react-native';
 import { Step } from './Step';
 import { StepLabel } from './StepLabel';
+import type { Modes } from '../../design-tokens';
 export { Step, StepLabel };
 export type { StepProps, StepStatus } from './Step';
 export type { StepLabelProps } from './StepLabel';
 export type StepperProps = {
     children?: React.ReactNode;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: ViewStyle;
 };
 export default function Stepper({ children, modes, style, }: StepperProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /**
  * Confidence levels supported by the indicator. Mirrors the Figma `Confidence`
  * mode collection exactly (`High` | `Medium` | `Low` | `None`).
@@ -33,7 +34,7 @@ export type StrengthIndicatorProps = {
      */
     confidence?: StrengthIndicatorConfidenceValue;
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override container styles. */
     style?: StyleProp<ViewStyle>;
 } & Omit<React.ComponentProps<typeof View>, 'style'>;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type TextInputProps as RNTextInputProps, type TextStyle, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type SuggestiveSearchOptionValue = string | number;
 export type SuggestiveSearchOption = {
     /** Stable, unique value used to identify the suggestion. */
@@ -98,7 +99,7 @@ export type SuggestiveSearchProps = {
     /** Replaces `supportText` when `isInvalid` is true. */
     errorMessage?: string;
     /** Modes for design token resolution. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Style overrides for the outermost wrapper. */
     style?: StyleProp<ViewStyle>;
     /** Style overrides for the input row. */