jfs-components 0.1.2 → 0.1.8

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import { type ViewStyle, type StyleProp, type ImageSourcePropType } from 'react-native';
+import type { Modes } from '../../design-tokens';
+/**
+ * A single metric column inside the card's stats row: a small title, a bold
+ * value and an optional muted caption.
+ */
+export interface PdpCcCardMetric {
+    /** Small label rendered above the value (e.g. `"Weight"`). */
+    title?: string;
+    /** The prominent value (e.g. `"24K"`). */
+    value?: string;
+    /** Optional muted caption rendered below the value. */
+    caption?: string;
+}
+export interface PdpCcCardProps {
+    /**
+     * Image source for the default media slot. Accepts a URL string or any RN
+     * `ImageSourcePropType`. Ignored when `media` is provided.
+     */
+    imageSource?: ImageSourcePropType | string;
+    /** Default media image width. Defaults to the Figma spec (`100`). */
+    imageWidth?: number;
+    /** Default media image height. Defaults to the Figma spec (`60`). */
+    imageHeight?: number;
+    /**
+     * Full override for the media slot (top of the card). Takes precedence over
+     * `imageSource`. `modes` cascade into it automatically.
+     */
+    media?: React.ReactNode;
+    /** Headline title (26px black). */
+    title?: string;
+    /** Subtitle rendered below the title (14px medium). */
+    subtitle?: string;
+    /**
+     * The metric columns rendered in the stats row. Vertical dividers are
+     * inserted automatically between adjacent metrics. Defaults to two sample
+     * metrics.
+     */
+    metrics?: PdpCcCardMetric[];
+    /** CTA button label. Defaults to `"button"`. */
+    buttonLabel?: string;
+    /**
+     * Registry icon name for the button's leading glyph. Defaults to
+     * `'ic_add_circle'`. Pass `null` to hide the leading icon.
+     */
+    buttonIcon?: string | null;
+    /** CTA press handler. */
+    onButtonPress?: () => void;
+    /** Full override for the CTA. Takes precedence over `buttonLabel`. */
+    button?: React.ReactNode;
+    /** Toggles the CTA button. Defaults to `true`. */
+    showButton?: boolean;
+    /** Press handler for the whole card. When set, the card becomes pressable. */
+    onPress?: () => void;
+    /** Card width. Defaults to the Figma spec (`344`). Pass `'100%'` to fill the parent. */
+    width?: number | `${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;
+}
+/**
+ * PdpCcCard — Figma node 5352:935 ("PDP cc card").
+ *
+ * A centered white product/PDP card composed from the shared design-system
+ * primitives so it stays in sync with the rest of the library:
+ *
+ *  - **Media** — a top image slot (`Image`, rounded via `image/radius`). Pass
+ *    `imageSource` for the default image or `media` for a full slot override.
+ *  - **Title** — a centered headline + subtitle rendered through the shared
+ *    {@link Title} component (`title/*`, `pageSubtitle/*` tokens).
+ *  - **Metrics** — a row of {@link PdpCcCardMetric} columns (title / value /
+ *    caption) separated by vertical `Divider`s (`metricdata/*` tokens).
+ *  - **CTA** — a small tonal {@link Button} (`Button / Size: S`,
+ *    `AppearanceBrand: Secondary`, `Emphasis: Medium`) with a leading icon.
+ *
+ * All defaults can be overridden via `modes`.
+ */
+declare function PdpCcCard({ imageSource, imageWidth, imageHeight, media, title, subtitle, metrics, buttonLabel, buttonIcon, onButtonPress, button, showButton, onPress, width, modes, style, accessibilityLabel, }: PdpCcCardProps): import("react/jsx-runtime").JSX.Element;
+export default PdpCcCard;
+//# sourceMappingURL=PdpCcCard.d.ts.map

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

@@ -0,0 +1,56 @@
+import { type ViewStyle, type StyleProp } from 'react-native';
+export type GlassTint = 'dark' | 'light';
+export interface GlassFillProps {
+    /**
+     * Visual tint of the glass surface. Maps to `BlurView`'s `blurType`
+     * (`'dark'` | `'light'`) and drives the iOS
+     * `reducedTransparencyFallbackColor` so the surface degrades gracefully
+     * when "Reduce Transparency" is enabled in system accessibility settings.
+     */
+    tint?: GlassTint;
+    /**
+     * Blur strength as a 0–100 "intensity" value. Internally mapped to
+     * `@react-native-community/blur`'s `blurAmount`. When `progressive` is set,
+     * this is the strength at the BOTTOM of the ramp (the strongest point); the
+     * ramp is kept intentionally gentle so the surface reads as subtle glass
+     * rather than a heavy frosted block.
+     */
+    intensity?: number;
+    /**
+     * Token-derived color tint laid OVER the live blur. Painted as a
+     * translucent overlay so the glass keeps its color signature even when the
+     * platform blur quality varies (or realtime blur is unavailable).
+     */
+    overlayColor?: string;
+    /**
+     * Render a *progressive* (variable) blur instead of a uniform one: fully
+     * clear at the top, easing into a soft blur toward the bottom. Implemented
+     * by stacking two `MaskedView` + `BlurView` layers (a faint base + a
+     * slightly stronger accent near the bottom), each revealed via an eased
+     * multi-stop SVG gradient mask so the blur swells smoothly rather than
+     * along a hard seam. Works on iOS and Android with no extra native module.
+     */
+    progressive?: boolean;
+    /** Container style overrides. Defaults to `StyleSheet.absoluteFill`. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Glass / frosted surface for native (iOS + Android).
+ *
+ * Why this lives in its own platform-split file (mirrors `MediaCard/GlassFill`):
+ *   - `@react-native-community/blur` is a native-only module; importing it on
+ *     web throws because it references native components not registered there.
+ *     Metro's platform-extension resolution picks `GlassFill.tsx` for native
+ *     and `GlassFill.web.tsx` for web, keeping the web bundle native-free.
+ *   - Centralizes the `intensity` (0–100) -> `blurAmount` (0–32) mapping so the
+ *     Figma `blur/minimal` token semantics survive across platforms.
+ *
+ * On iOS (with the pod installed) this is a real `UIVisualEffectView` (true
+ * OS-level live blur). On Android it uses the community blur view. When the
+ * native module isn't linked in the running binary, the component degrades to
+ * a translucent tinted scrim (`reducedTransparencyFallbackColor` / fallback
+ * color) instead of rendering the "Unimplemented component" placeholder.
+ */
+declare function GlassFill({ tint, intensity, overlayColor, progressive, style, }: GlassFillProps): import("react/jsx-runtime").JSX.Element;
+export default GlassFill;
+//# sourceMappingURL=GlassFill.d.ts.map

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

@@ -0,0 +1,27 @@
+import { type ViewStyle, type StyleProp } from 'react-native';
+export type GlassTint = 'dark' | 'light';
+export interface GlassFillProps {
+    tint?: GlassTint;
+    intensity?: number;
+    overlayColor?: string;
+    /**
+     * Render a *progressive* (variable) blur: fully clear at the top, easing
+     * into a soft blur toward the bottom. On web this mirrors the native
+     * technique — two `backdrop-filter` layers, each clipped with an eased
+     * multi-stop `mask-image` linear-gradient so the effective blur swells
+     * smoothly toward the bottom.
+     */
+    progressive?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Web counterpart of `GlassFill`.
+ *
+ * `@react-native-community/blur` ships no web implementation, so on web we
+ * render a translucent `View` with `backdrop-filter: blur()`. Native bundles
+ * pick up `GlassFill.tsx` instead via Metro's platform resolver; the web
+ * bundle picks up this file, so the native-only module is never imported here.
+ */
+declare function GlassFill({ tint, intensity, overlayColor, progressive, style, }: GlassFillProps): import("react/jsx-runtime").JSX.Element;
+export default GlassFill;
+//# sourceMappingURL=GlassFill.web.d.ts.map

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/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,5 @@
-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 {
     /**
@@ -26,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/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/TextInput/TextInput.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { type StyleProp, type ViewStyle, type TextInputProps as RNTextInputProps, type TextStyle } from 'react-native';
+import { TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextInputProps as RNTextInputProps, type TextStyle } from 'react-native';
 import type { Modes } from '../../design-tokens';
-type TextInputProps = {
+declare const TextInputBase: React.ForwardRefExoticComponent<{
     placeholder?: string;
     value?: string;
     onChangeText?: (text: string) => void;
@@ -15,31 +15,8 @@ type TextInputProps = {
     onBlur?: (e: any) => void;
     accessibilityLabel?: string;
     accessibilityHint?: string;
-} & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
-declare function TextInput({ placeholder, value, onChangeText, leadingIconName, leading, trailing, modes, style, inputStyle, onFocus, onBlur, accessibilityLabel, accessibilityHint, ...rest }: TextInputProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TextInput {
-    var Search: typeof TextInputSearch;
-}
-/**
- * TextInput.Search component that mirrors the Figma "textInput.search" component.
- *
- * This is a convenience variant that pre-configures the TextInput with:
- *  - Default search icon in the leading slot
- *  - No trailing slot
- *  - Default placeholder text "Search"
- *
- * @component
- * @param {Object} props
- * @param {string} [props.placeholder='Search'] - Placeholder text (defaults to "Search")
- * @param {string} [props.value=''] - Current value of the input
- * @param {Function} [props.onChangeText] - Callback function called when text changes
- * @param {React.ReactNode} [props.leading] - Optional leading slot (defaults to search icon)
- * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
- * @param {Object} [props.style] - Optional container style overrides
- * @param {Object} [props.inputStyle] - Optional text input style overrides
- * @param {Object} [props.rest] - Additional props passed to the underlying TextInput
- */
-type TextInputSearchProps = {
+} & Omit<RNTextInputProps, "style" | "value" | "onFocus" | "onBlur" | "placeholder" | "onChangeText"> & React.RefAttributes<RNTextInput>>;
+declare const TextInputSearch: React.ForwardRefExoticComponent<{
     placeholder?: string;
     value?: string;
     onChangeText?: (text: string) => void;
@@ -51,7 +28,10 @@ type TextInputSearchProps = {
     accessibilityHint?: string;
     onFocus?: (e: any) => void;
     onBlur?: (e: any) => void;
-} & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
-declare function TextInputSearch({ placeholder, value, onChangeText, leading, modes, style, inputStyle, accessibilityLabel, accessibilityHint, onFocus, onBlur, ...rest }: TextInputSearchProps): import("react/jsx-runtime").JSX.Element;
+} & Omit<RNTextInputProps, "style" | "value" | "onFocus" | "onBlur" | "placeholder" | "onChangeText"> & React.RefAttributes<RNTextInput>>;
+type TextInputComponent = typeof TextInputBase & {
+    Search: typeof TextInputSearch;
+};
+declare const TextInput: TextInputComponent;
 export default TextInput;
 //# sourceMappingURL=TextInput.d.ts.map

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

@@ -0,0 +1,100 @@
+import React from 'react';
+import { type TextStyle, type StyleProp } from 'react-native';
+import type { Modes } from '../../design-tokens';
+/**
+ * A single coloured run inside a {@link TextSegment}. Each run can carry its own
+ * `modes`, so individual fragments of the same paragraph can resolve different
+ * design tokens (most commonly a different `text/foreground` colour) while still
+ * flowing — and wrapping — inline as one continuous line of text.
+ */
+export type TextSegmentRun = {
+    /** The text for this run. Include trailing/leading spaces yourself when you want spacing between runs (inline text has no gap concept). */
+    text: string;
+    /**
+     * Per-run mode overrides. Merged on top of the parent `TextSegment` modes, so
+     * a run only needs to specify what differs (e.g. `{ 'Text Appearance': 'Primary' }`
+     * to recolour just that fragment). Everything else is inherited.
+     */
+    modes?: Modes;
+    /** Optional per-run style override applied last, on top of the token-resolved style. */
+    style?: StyleProp<TextStyle>;
+};
+export type TextSegmentProps = {
+    /**
+     * Declarative, data-driven way to compose a multi-colour string. Each entry
+     * becomes an inline run. This is the simplest API when the segments are known
+     * up front:
+     *
+     * ```tsx
+     * <TextSegment segments={[
+     *   { text: 'Upsell message ' },
+     *   { text: 'JioFinance+', modes: { 'Text Appearance': 'Primary' } },
+     * ]} />
+     * ```
+     *
+     * When both `segments` and `children` are provided, `children` win.
+     */
+    segments?: TextSegmentRun[];
+    /**
+     * Compositional alternative to {@link TextSegmentProps.segments}. Pass library
+     * `Text` elements (or plain strings) as children and they are rendered nested
+     * inside the same paragraph so they wrap together. The parent `modes` cascade
+     * down to every child via `cloneChildrenWithModes`, and each child may still
+     * override with its own `modes`:
+     *
+     * ```tsx
+     * <TextSegment>
+     *   <Text>Upsell message </Text>
+     *   <Text modes={{ 'Text Appearance': 'Primary' }}>JioFinance+</Text>
+     * </TextSegment>
+     * ```
+     */
+    children?: React.ReactNode;
+    /** Horizontal alignment of the whole paragraph. */
+    textAlign?: 'Left' | 'Center';
+    /** Clamp the paragraph to this many lines (truncates with an ellipsis). Applies to the whole composed line, not per-run. */
+    numberOfLines?: number;
+    /** Mode configuration used for the base style and cascaded to every run/child. */
+    modes?: Modes;
+    /** Style override applied to the outer paragraph (e.g. width constraints to force wrapping). */
+    style?: StyleProp<TextStyle>;
+};
+/**
+ * TextSegment — composes several differently-styled text runs into a single
+ * paragraph that wraps as one continuous line.
+ *
+ * On the web you would reach for `<span>`s inside a `<p>`; the React Native
+ * equivalent is nesting `<Text>` inside a parent `<Text>`. That nesting is the
+ * whole trick: sibling `<View>`s would lay out as flex blocks and break onto
+ * rigid rows, but nested `<Text>` nodes flow inline and wrap naturally at word
+ * boundaries — exactly like a real paragraph — while each nested run keeps its
+ * own colour/weight resolved from its own `modes`.
+ *
+ * Two equivalent ways to author content:
+ *  - **`segments` prop** — declarative array of `{ text, modes }` runs.
+ *  - **`children`** — pass library `Text` elements (or strings); the parent
+ *    `modes` cascade down and each child may override its own.
+ *
+ * @example Data-driven
+ * ```tsx
+ * <TextSegment
+ *   segments={[
+ *     { text: 'Upsell message ' },
+ *     { text: 'JioFinance+', modes: { 'Text Appearance': 'Primary' } },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Compositional
+ * ```tsx
+ * <TextSegment numberOfLines={2}>
+ *   <Text>Pay with </Text>
+ *   <Text modes={{ 'Text Appearance': 'Primary' }}>JioFinance+</Text>
+ *   <Text> and earn rewards on every transaction.</Text>
+ * </TextSegment>
+ * ```
+ */
+declare function TextSegment({ segments, children, textAlign, numberOfLines, modes, style, }: TextSegmentProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof TextSegment>;
+export default _default;
+//# sourceMappingURL=TextSegment.d.ts.map