jfs-components 0.0.73 → 0.0.74

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { type ImageSourcePropType, type StyleProp, type ViewStyle } from 'react-native';
+export type AccountCardState = 'connected' | 'add';
+export type AccountCardProps = {
+    /**
+     * Visual variant of the card.
+     *  - `'connected'` (default): renders a card preview image, a `title` and a
+     *    `subtitle` below it (e.g. account name + masked number).
+     *  - `'add'`: renders an empty placeholder field with a centred `+` icon
+     *    and only the `title`. Use this for the "Add new account" affordance
+     *    that pairs with a list of connected `AccountCard`s.
+     */
+    state?: AccountCardState;
+    /** Title rendered below the image / placeholder. */
+    title?: string;
+    /**
+     * Subtitle rendered below the title (e.g. masked account number).
+     * Only displayed when `state === 'connected'`.
+     */
+    subtitle?: string;
+    /**
+     * Card preview image. Only used when `state === 'connected'` and
+     * `cardSlot` is not provided. Accepts a URL string or any
+     * `ImageSourcePropType` (e.g. `require('./card.png')`).
+     */
+    imageSource?: ImageSourcePropType | string;
+    /**
+     * Aspect ratio (width / height) of the image / placeholder area.
+     * Defaults to the Figma reference ratio (`125 / 82` ≈ `1.524`).
+     */
+    imageRatio?: number;
+    /**
+     * Override the entire image / placeholder area with a custom node
+     * (e.g. a smaller `DebitCard`, a brand logo, a remote image).
+     * Receives `modes` automatically through `cloneChildrenWithModes`.
+     */
+    cardSlot?: React.ReactNode;
+    /**
+     * Icon name shown inside the "Add" placeholder. Defaults to `'ic_add'`.
+     * Only used when `state === 'add'`.
+     */
+    addIcon?: string;
+    /**
+     * Press handler. Applied to the whole card so the entire surface is a
+     * single touch target — particularly important for the `'add'` state,
+     * which behaves like a button.
+     */
+    onPress?: () => void;
+    /** Disable interaction (also dims the card). */
+    disabled?: boolean;
+    /** Design token modes (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label (defaults to `title`). */
+    accessibilityLabel?: string;
+    /** Accessibility hint forwarded to the underlying `Pressable`. */
+    accessibilityHint?: string;
+};
+/**
+ * `AccountCard` — a compact card preview used to represent a linked
+ * financial account in lists / grids.
+ *
+ * Two visual states are supported via the `state` prop:
+ *
+ *  1. `'connected'` (default): renders a small card-art preview, a bold
+ *     `title` and a regular-weight `subtitle` (e.g. masked account number).
+ *  2. `'add'`: renders a soft-tinted placeholder field with a centred `+`
+ *     icon and the `title` underneath, intended as the "add new account"
+ *     entry-point at the end of a list of connected accounts.
+ *
+ * All values resolve through the `accountCard/*` design tokens with
+ * sensible Figma defaults so the card renders correctly out of the box.
+ *
+ * @component
+ * @param {AccountCardProps} props
+ */
+declare function AccountCard({ state, title, subtitle, imageSource, imageRatio, cardSlot, addIcon, onPress, disabled, modes, style, accessibilityLabel, accessibilityHint, }: AccountCardProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof AccountCard>;
+export default _default;
+//# sourceMappingURL=AccountCard.d.ts.map

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

@@ -53,7 +53,14 @@ export type CardBankAccountProps = {
      * `false`/`null` to hide it entirely.
      */
     footer?: React.ReactNode | false | null;
-    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    /**
+     * Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`).
+     *
+     * Defaults to `{ 'Button / Size': 'S', AppearanceBrand: 'Secondary',
+     * Emphasis: 'Medium' }` so the footer button matches the Figma reference
+     * out of the box. Caller-supplied modes are merged on top and can
+     * override any of the default keys.
+     */
     modes?: Record<string, any>;
     /** Container style override. */
     style?: StyleProp<ViewStyle>;
@@ -74,6 +81,6 @@ export type CardBankAccountProps = {
  * @component
  * @param {CardBankAccountProps} props
  */
-declare function CardBankAccount({ institutionName, institutionAvatar, badge, headerSlot, items, children, buttonLabel, onButtonPress, footer, modes, style, accessibilityLabel, }: CardBankAccountProps): import("react/jsx-runtime").JSX.Element;
+declare function CardBankAccount({ institutionName, institutionAvatar, badge, headerSlot, items, children, buttonLabel, onButtonPress, footer, modes: propModes, style, accessibilityLabel, }: CardBankAccountProps): import("react/jsx-runtime").JSX.Element;
 export default CardBankAccount;
 //# sourceMappingURL=CardBankAccount.d.ts.map

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

@@ -12,9 +12,21 @@ export type CheckboxItemProps = {
     /** The label text rendered next to the checkbox. */
     label?: React.ReactNode;
     /**
-     * Optional content rendered on the right side (e.g. a `Button`). When provided,
+     * Position of the checkbox control relative to the label.
+     * - `'leading'` (default): checkbox is rendered on the left, then label, then optional `endSlot` on the right.
+     * - `'trailing'`: optional `endSlot` is rendered on the left, then label, then checkbox on the right.
+     *
+     * Matches the Figma "Control" variant on the Checkbox Item component.
+     */
+    control?: 'leading' | 'trailing';
+    /**
+     * Optional content rendered in the row's end slot (e.g. a `Button`). When provided,
      * it receives the same `modes` as the parent. Wrapped in a fixed-width container
      * matching the Figma `endSlot` design.
+     *
+     * Placement depends on `control`:
+     * - With `control="leading"` the slot appears on the right edge (after the label).
+     * - With `control="trailing"` the slot appears on the left edge (before the label).
      */
     endSlot?: React.ReactNode;
     /** Width of the end slot container in pixels. Defaults to 80 to match the Figma reference. */
@@ -33,6 +45,9 @@ export type CheckboxItemProps = {
  * single horizontal pressable row. Pressing anywhere on the row (outside of the
  * `endSlot`) toggles the checkbox, mirroring the typical native form pattern.
  *
+ * Use the `control` prop to swap the checkbox between the leading (left, default)
+ * and trailing (right) edge of the row. The `endSlot` flips to the opposite edge.
+ *
  * Mirrors the Figma "Checkbox Item" component and uses the `checkboxItem/*`
  * design tokens for typography and spacing.
  *
@@ -47,10 +62,11 @@ export type CheckboxItemProps = {
  *   label="Fixed deposit • 0245"
  *   checked={checked}
  *   onValueChange={setChecked}
+ *   control="leading"
  *   modes={{ 'Color Mode': 'Light' }}
  * />
  * ```
  */
-declare function CheckboxItem({ checked: controlledChecked, defaultChecked, onValueChange, disabled, label, endSlot, endSlotWidth, modes, style, labelStyle, accessibilityLabel, }: CheckboxItemProps): import("react/jsx-runtime").JSX.Element;
+declare function CheckboxItem({ checked: controlledChecked, defaultChecked, onValueChange, disabled, label, control, endSlot, endSlotWidth, modes, style, labelStyle, accessibilityLabel, }: CheckboxItemProps): import("react/jsx-runtime").JSX.Element;
 export default CheckboxItem;
 //# sourceMappingURL=CheckboxItem.d.ts.map

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+export type DropdownItemProps = {
+    /** Display text for the item. Ignored when `children` is provided. */
+    label?: string;
+    /**
+     * Value associated with the item. Used by the parent `Dropdown` /
+     * `DropdownInput` to identify the selected item. Optional when the item
+     * is purely informational or used outside of a selection context.
+     */
+    value?: string | number | null;
+    /** Whether the item is currently selected (renders the trailing check). */
+    selected?: boolean;
+    /** Whether the item is disabled and non-interactive. */
+    disabled?: boolean;
+    /** Optional element rendered before the label (icon, avatar, etc.). */
+    leading?: React.ReactNode;
+    /**
+     * Optional element rendered after the label. When omitted and `selected`
+     * is true, a check icon is rendered automatically.
+     */
+    trailing?: React.ReactNode;
+    /** Press handler. Receives the item's `value` if provided. */
+    onPress?: (value: DropdownItemProps['value']) => void;
+    /** Optional custom child content (overrides `label`). */
+    children?: React.ReactNode;
+    /** Modes for design token resolution. */
+    modes?: Record<string, any>;
+    /** Style overrides for the item container. */
+    style?: StyleProp<ViewStyle>;
+    /** Style overrides for the item label text. */
+    labelStyle?: StyleProp<TextStyle>;
+    /** Accessibility label (defaults to label / inferred from children). */
+    accessibilityLabel?: string;
+    /** Accessibility hint. */
+    accessibilityHint?: string;
+};
+export declare function DropdownItem({ label, value, selected, disabled, leading, trailing, onPress, children, modes: propModes, style, labelStyle, accessibilityLabel, accessibilityHint, }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
+export type DropdownProps = {
+    /** Dropdown items, typically `<DropdownItem />` children. */
+    children?: React.ReactNode;
+    /**
+     * Maximum height of the popup before its content becomes scrollable.
+     * Defaults to no limit.
+     */
+    maxHeight?: number;
+    /** Modes for design token resolution. */
+    modes?: Record<string, any>;
+    /** Style overrides for the popup container. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the menu surface. */
+    accessibilityLabel?: string;
+};
+/**
+ * `Dropdown` is the visual surface (popup) that contains a list of
+ * `DropdownItem`s. It is responsible for the background, rounded corners,
+ * elevation/shadow, and clipping. Use it standalone for menu UIs, or rely on
+ * `DropdownInput` which composes it into a form-field experience.
+ */
+export declare function Dropdown({ children, maxHeight, modes: propModes, style, accessibilityLabel, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export default Dropdown;
+//# sourceMappingURL=Dropdown.d.ts.map

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type DropdownInputOptionValue = string | number;
+export type DropdownInputOption = {
+    /** Stable, unique value used to identify the option. */
+    value: DropdownInputOptionValue;
+    /** Human-readable label rendered in the menu and selected display. */
+    label: string;
+    /** Optional element rendered before the label inside the item. */
+    leading?: React.ReactNode;
+    /** Optional element rendered after the label inside the item. */
+    trailing?: React.ReactNode;
+    /** Whether the option is non-selectable. */
+    disabled?: boolean;
+};
+export type DropdownInputProps = {
+    /** Label rendered above the input. */
+    label?: string;
+    /** Placeholder text shown when no value is selected. */
+    placeholder?: string;
+    /**
+     * Data-driven list of options. Mutually compatible with `children`; if
+     * both are provided the `items` are rendered first.
+     */
+    items?: DropdownInputOption[];
+    /**
+     * Currently selected value (controlled). When `value` is `undefined` the
+     * component operates in uncontrolled mode and keeps its own state.
+     */
+    value?: DropdownInputOptionValue | null;
+    /** Initial selected value for uncontrolled mode. */
+    defaultValue?: DropdownInputOptionValue | null;
+    /** Called when the selected value changes. */
+    onValueChange?: (value: DropdownInputOptionValue | null, option?: DropdownInputOption) => void;
+    /**
+     * Custom slot of `<DropdownItem />` children. Used when finer-grained
+     * control is needed (icons, custom layouts, etc.). When provided alongside
+     * `items`, both are rendered (items first).
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom renderer for the trigger label. Receives the currently-selected
+     * option (if any) and a boolean indicating whether the field has a value.
+     */
+    renderValue?: (option: DropdownInputOption | undefined, hasValue: boolean) => React.ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state for uncontrolled mode. */
+    defaultOpen?: boolean;
+    /** Called whenever the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Preferred placement for the popup. The component falls back to the
+     * opposite side automatically when there isn't enough room.
+     * @default 'bottom'
+     */
+    placement?: 'bottom' | 'top' | 'auto';
+    /** Renders a required asterisk next to the label. */
+    isRequired?: boolean;
+    /** Disables interaction and dims the field. */
+    isDisabled?: boolean;
+    /** Marks the field as invalid and shows `errorMessage`. */
+    isInvalid?: boolean;
+    /** Renders the field in read-only mode (non-interactive but not disabled). */
+    isReadOnly?: boolean;
+    /** Helper text displayed below the input. */
+    supportText?: string;
+    /** Replaces `supportText` when `isInvalid` is true. */
+    errorMessage?: string;
+    /**
+     * Maximum height of the popup before it becomes scrollable. Helpful for
+     * long lists. Defaults to 240 (roughly 5 items).
+     */
+    menuMaxHeight?: number;
+    /**
+     * Pixel offset between the trigger and the popup. Defaults to 4 so the
+     * popup visually peeks below the input.
+     */
+    menuOffset?: number;
+    /**
+     * When true, the popup width matches the trigger width. When false, the
+     * popup uses its intrinsic content width but never exceeds the trigger.
+     * @default true
+     */
+    matchTriggerWidth?: boolean;
+    /** Whether tapping the backdrop closes the menu. */
+    closeOnBackdropPress?: boolean;
+    /** Modes for design token resolution. */
+    modes?: Record<string, any>;
+    /** Style overrides for the outermost wrapper. */
+    style?: StyleProp<ViewStyle>;
+    /** Style overrides for the input row. */
+    inputStyle?: StyleProp<ViewStyle>;
+    /** Style overrides for the popup container. */
+    menuStyle?: StyleProp<ViewStyle>;
+    /** Accessibility label. Defaults to the visible label / placeholder. */
+    accessibilityLabel?: string;
+    /** Accessibility hint. */
+    accessibilityHint?: string;
+    /** Called when the trigger receives focus (web only). */
+    onFocus?: (e: any) => void;
+    /** Called when the trigger loses focus (web only). */
+    onBlur?: (e: any) => void;
+};
+declare function DropdownInput({ label, placeholder, items, value, defaultValue, onValueChange, children, renderValue, open, defaultOpen, onOpenChange, placement, isRequired, isDisabled, isInvalid, isReadOnly, supportText, errorMessage, menuMaxHeight, menuOffset, matchTriggerWidth, closeOnBackdropPress, modes: propModes, style, inputStyle, menuStyle, accessibilityLabel, accessibilityHint, onFocus, onBlur, }: DropdownInputProps): import("react/jsx-runtime").JSX.Element;
+export default DropdownInput;
+//# sourceMappingURL=DropdownInput.d.ts.map

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

@@ -1,27 +1,84 @@
 import React from 'react';
-import { type StyleProp, type ViewStyle } from 'react-native';
-export type FormFieldType = 'text' | 'password' | 'email' | 'search';
+import { type StyleProp, type TextInputProps as RNTextInputProps, type TextStyle, type ViewStyle } from 'react-native';
+export type FormFieldType = 'text' | 'password' | 'email' | 'search' | 'number' | 'phone' | 'url';
 export type FormFieldProps = {
-    label?: string | undefined;
-    placeholder?: string | undefined;
-    value?: string | undefined;
-    onChangeText?: ((text: string) => void) | undefined;
-    type?: FormFieldType | undefined;
+    /** Label rendered above the input. */
+    label?: string;
+    /** Placeholder text shown when the input is empty. */
+    placeholder?: string;
+    /** Current value of the input (controlled). */
+    value?: string;
+    /** Called when the input text changes. */
+    onChangeText?: (text: string) => void;
+    /**
+     * Logical input type. Mapped to keyboard, secure entry and capitalization.
+     * @default 'text'
+     */
+    type?: FormFieldType;
+    /**
+     * Field name. When used inside `<Form>`, this is the key used to look up
+     * server-side `validationErrors` and to notify the form when the value
+     * changes so the error can clear.
+     */
+    name?: string;
+    /**
+     * Optional element rendered before the input text (Figma slot "start").
+     * No leading element is rendered by default — the Figma FormField design
+     * does not include one.
+     */
     leading?: React.ReactNode;
+    /**
+     * Optional element rendered after the input text (Figma slot "end").
+     * Typically used for an inline button (e.g. "Apply", "Show") or a status
+     * icon.
+     */
     trailing?: React.ReactNode;
-    leadingIconName?: string | undefined;
-    isRequired?: boolean | undefined;
-    isDisabled?: boolean | undefined;
-    isInvalid?: boolean | undefined;
-    supportText?: string | undefined;
-    errorMessage?: string | undefined;
-    modes?: Record<string, any> | undefined;
+    /**
+     * Convenience prop to render a built-in icon as the leading element.
+     * Ignored when `leading` is provided. Defaults to `undefined` — meaning
+     * no leading icon, matching the Figma design.
+     */
+    leadingIconName?: string;
+    /** Shows a required asterisk next to the label. */
+    isRequired?: boolean;
+    /** Disables interaction and dims the field. Resolves to "Read Only" state. */
+    isDisabled?: boolean;
+    /** Marks the field as invalid and shows `errorMessage`. */
+    isInvalid?: boolean;
+    /**
+     * Renders the field in read-only mode (non-interactive but not dimmed).
+     * Resolves to the "Read Only" state.
+     */
+    isReadOnly?: boolean;
+    /** Helper text displayed below the input. */
+    supportText?: string;
+    /** Replaces `supportText` when `isInvalid` is true. */
+    errorMessage?: string;
+    /** Maximum number of characters accepted. */
+    maxLength?: number;
+    /** When true, focuses the input on mount. */
+    autoFocus?: boolean;
+    /** Modes for design token resolution. */
+    modes?: Record<string, any>;
+    /** Style overrides for the outermost wrapper. */
     style?: StyleProp<ViewStyle>;
-    onFocus?: ((e: any) => void) | undefined;
-    onBlur?: ((e: any) => void) | undefined;
-    accessibilityLabel?: string | undefined;
-    accessibilityHint?: string | undefined;
+    /** Style overrides for the input row container. */
+    inputStyle?: StyleProp<ViewStyle>;
+    /** Style overrides for the input text. */
+    inputTextStyle?: StyleProp<TextStyle>;
+    /** Called when the input receives focus. */
+    onFocus?: RNTextInputProps['onFocus'];
+    /** Called when the input loses focus. */
+    onBlur?: RNTextInputProps['onBlur'];
+    /** Called when the user submits the input (e.g. presses return). */
+    onSubmitEditing?: RNTextInputProps['onSubmitEditing'];
+    /** Accessibility label. Defaults to `label` or `placeholder`. */
+    accessibilityLabel?: string;
+    /** Accessibility hint. */
+    accessibilityHint?: string;
+    /** Test identifier. */
+    testID?: string;
 };
-declare function FormField({ label, placeholder, value, onChangeText, type, leading, trailing, leadingIconName, isRequired, isDisabled, isInvalid, supportText, errorMessage, modes, style, onFocus, onBlur, accessibilityLabel, accessibilityHint, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function FormField({ label, placeholder, value, onChangeText, type, name, leading, trailing, leadingIconName, isRequired, isDisabled, isInvalid, isReadOnly, supportText, errorMessage, maxLength, autoFocus, modes: propModes, style, inputStyle, inputTextStyle, onFocus, onBlur, onSubmitEditing, accessibilityLabel, accessibilityHint, testID, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
 export default FormField;
 //# sourceMappingURL=FormField.d.ts.map

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type LottieIntroBlockProps = {
+    /** Headline text shown below the media area. */
+    title?: string;
+    /** Whether to render the supportive paragraph below the title. */
+    showSupportText?: boolean;
+    /** Body/supportive text shown below the title. */
+    supportText?: string;
+    /** Whether to render the action button at the bottom. */
+    showButton?: 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;
+    /**
+     * Custom slot for the media area (Lottie animation, illustration, or image).
+     * Should render at the design size of 117x117. If omitted, a neutral
+     * placeholder of the same size is rendered so the layout stays stable.
+     * `modes` are automatically cascaded into this slot.
+     */
+    media?: React.ReactNode;
+    /**
+     * 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;
+};
+/**
+ * LottieIntroBlock displays a centered onboarding/intro block composed of a
+ * media slot (typically a Lottie animation or illustration) above a title,
+ * an optional supportive paragraph, and an optional action button.
+ *
+ * All visual values are resolved from Figma design tokens via
+ * `getVariableByName`. Slots cascade the active `modes` to their children
+ * through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LottieIntroBlock
+ *   title="Let's get to know how your financial health is doing"
+ *   supportText="From assets to taxes, stay on top of everything in one simple view."
+ *   buttonLabel="Get started"
+ *   onButtonPress={() => navigate('NextScreen')}
+ *   media={<MyLottiePlayer source={animationSource} />}
+ * />
+ * ```
+ */
+declare function LottieIntroBlock({ title, showSupportText, supportText, showButton, buttonLabel, onButtonPress, media, buttonSlot, modes: propModes, style, testID, }: LottieIntroBlockProps): import("react/jsx-runtime").JSX.Element;
+export default LottieIntroBlock;
+//# sourceMappingURL=LottieIntroBlock.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/Text/Text.d.ts

@@ -1,7 +1,17 @@
+import React from 'react';
 import { type TextStyle, type StyleProp } from 'react-native';
 export type TextProps = {
-    /** The text content to display. */
+    /**
+     * The text content to display. You may also pass content as JSX children
+     * (e.g. `<Text>Hello</Text>`) — when both are provided, `children` wins.
+     */
     text?: string;
+    /**
+     * Child nodes (string, number, or nested <Text>/<RNText> elements). This
+     * mirrors the standard React Native `<Text>` API so the component is a
+     * near-drop-in replacement.
+     */
+    children?: React.ReactNode;
     /** Horizontal alignment of the text. */
     textAlign?: 'Left' | 'Center';
     /** Modes configuration for design token resolution. */
@@ -11,6 +21,6 @@ export type TextProps = {
     /** Number of lines to limit the text to. */
     numberOfLines?: number;
 };
-declare function Text({ text, textAlign, modes, style, numberOfLines, }: TextProps): import("react/jsx-runtime").JSX.Element;
+declare function Text({ text, children, textAlign, modes, style, numberOfLines, }: TextProps): import("react/jsx-runtime").JSX.Element;
 export default Text;
 //# sourceMappingURL=Text.d.ts.map

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Pressable } from 'react-native';
+import { Pressable, ViewStyle } from 'react-native';
 export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 export type TooltipProps = {
     children: ReactNode;
@@ -21,6 +21,17 @@ export declare function TooltipTrigger({ children, asChild, ...props }: TooltipT
 export type TooltipContentProps = {
     children: ReactNode;
     sideOffset?: number;
+    /**
+     * Vertical spacing between slot children, in pixels.
+     * The content area acts as a vertical slot: any children passed in
+     * (text, icons, custom views, etc.) are stacked top-to-bottom with this gap.
+     */
+    gap?: number;
+    /**
+     * Cross-axis alignment of slot children.
+     * Defaults to `flex-start` so multi-line/multi-element content lines up on the left.
+     */
+    alignItems?: ViewStyle['alignItems'];
 };
-export declare function TooltipContent({ children, sideOffset }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function TooltipContent({ children, sideOffset, gap, alignItems, }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tooltip.d.ts.map