jfs-components 0.1.2 → 0.1.8

package/lib/module/utils/react-utils.js

@@ -72,6 +72,27 @@ export function cloneChildrenWithModes(children, modes, forcedModes) {
   return React.Children.toArray(result);
 }
 
+/**
+ * Combines several refs (object refs and/or callback refs) into a single
+ * callback ref. Useful when a component needs to keep its own internal ref to a
+ * node while still honouring a ref forwarded by the consumer.
+ *
+ * @example
+ * const inputRef = useRef<RNTextInput>(null)
+ * <RNTextInput ref={mergeRefs(inputRef, forwardedRef)} />
+ */
+export function mergeRefs(...refs) {
+  return value => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
+}
+
 /**
  * Flattens React children, extracting them from Fragments.
  * Useful for Group components that need to process individual items (e.g., for layout or styling)

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type ViewStyle } from 'react-native';
+import { View, type ViewStyle } from 'react-native';
 import type { Modes } from '../../design-tokens';
 export type AmountInputProps = {
     /**
@@ -20,5 +20,6 @@ export type AmountInputProps = {
  *
  * @component
  */
-export default function AmountInput({ moneyValueSlot, noteInputSlot, modes: propModes, style, }: AmountInputProps): import("react/jsx-runtime").JSX.Element;
+declare const AmountInput: React.ForwardRefExoticComponent<AmountInputProps & React.RefAttributes<View>>;
+export default AmountInput;
 //# sourceMappingURL=AmountInput.d.ts.map

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+import type { Modes } from '../../design-tokens';
+/**
+ * A single benefit row rendered with the shared `ListItem` primitive: a
+ * leading icon, a title and an optional right-aligned trailing value.
+ */
+export interface BenefitCardItem {
+    /** Registry icon name for the leading glyph (e.g. `'ic_jewellery_diamond'`). */
+    icon?: string;
+    /** Per-item override for the leading icon color. Defaults to the brand token. */
+    iconColor?: string;
+    /** Full override for the leading node. Takes precedence over `icon`. */
+    leading?: React.ReactNode;
+    /** Row title (e.g. `"JioPoints"`). */
+    title: string;
+    /** Optional right-aligned trailing value (e.g. `"Up to 2000 pts"`). */
+    trailingText?: string;
+    /** Full override for the trailing node. Takes precedence over `trailingText`. */
+    trailing?: React.ReactNode;
+    /** Makes the row pressable. */
+    onPress?: () => void;
+}
+export interface BenefitCardProps {
+    /** Header section title (e.g. `"You will earn"`). */
+    headerTitle?: string;
+    /**
+     * Highlighted item shown directly under the header title (icon + title +
+     * optional trailing value). Rendered above the divider.
+     */
+    headerItem?: BenefitCardItem;
+    /**
+     * Toggles the whole header section (title + item + divider). Mirrors the
+     * Figma `showHeader` property. Defaults to `true`.
+     */
+    showHeader?: boolean;
+    /** Body section title (e.g. `"Upgrade to JioFinance+ and earn more"`). */
+    bodyTitle?: string;
+    /**
+     * Body benefit rows. Ignored when `children` is provided (the slot wins).
+     */
+    items?: BenefitCardItem[];
+    /**
+     * Real slot for the body "list wrap". When provided, these children render
+     * instead of `items`; `modes` (plus the `List Item Style: Minimal` style)
+     * cascade into every child automatically.
+     */
+    children?: React.ReactNode;
+    /** CTA button label. Defaults to `"Upgrade"`. */
+    buttonLabel?: string;
+    /** CTA press handler. */
+    onButtonPress?: () => void;
+    /** Full override for the CTA. Takes precedence over `buttonLabel`. */
+    button?: React.ReactNode;
+    /**
+     * Toggles the CTA button. Mirrors the Figma `showButton` property.
+     * 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;
+}
+/**
+ * BenefitCard — Figma node 5352:1077 ("Benefit Card").
+ *
+ * A white, rounded card that summarises the rewards a user will earn. It is
+ * composed entirely from the shared design-system primitives so it stays in
+ * sync with the rest of the library:
+ *
+ *  - **Header** — a section title + a single highlighted {@link ListItem}
+ *    (leading `Icon`, title, right-aligned trailing value) followed by a
+ *    `Divider`.
+ *  - **Body** — a section title + a column of benefit {@link ListItem}s. The
+ *    list is a real slot: pass `children` to fully control it, or `items` for
+ *    the declarative path.
+ *  - **CTA** — a small {@link Button} (Figma `Button / Size = S`).
+ *
+ * The list rows resolve through the `List Item Style: Minimal` mode (12px /
+ * regular title, 4px gap, no padding) and the leading icons use the
+ * `AppearanceBrand: Secondary` brand color, exactly matching the design. All
+ * three defaults can be overridden via `modes`.
+ */
+declare function BenefitCard({ headerTitle, headerItem, showHeader, bodyTitle, items, children, buttonLabel, onButtonPress, button, showButton, onPress, width, modes, style, accessibilityLabel, }: BenefitCardProps): import("react/jsx-runtime").JSX.Element;
+export default BenefitCard;
+//# sourceMappingURL=BenefitCard.d.ts.map

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

@@ -0,0 +1,137 @@
+import React from 'react';
+import { type ViewStyle, type StyleProp, type ImageSourcePropType } from 'react-native';
+import { type TextSegmentRun } from '../TextSegment/TextSegment';
+import type { Modes } from '../../design-tokens';
+/**
+ * A single coloured chip rendered in the card header. Each badge resolves its
+ * own design tokens through `modes`, so different appearances (brand, tonal,
+ * etc.) can sit side-by-side in the same group.
+ */
+export interface CcCardBadge {
+    /** Visible label text. */
+    label: string;
+    /** Per-badge mode overrides (e.g. `{ AppearanceBrand: 'Tertiary' }`). */
+    modes?: Modes;
+    /** Background color override (wins over the token-resolved value). */
+    color?: string;
+    /** Label color override (wins over the token-resolved value). */
+    labelColor?: string;
+}
+/**
+ * A single benefit row in the card's list, rendered through the shared
+ * {@link ListItem} primitive (leading icon + title).
+ */
+export interface CcCardListItem {
+    /**
+     * Registry icon name for the leading glyph. Defaults to `'ic_card'`. Pass
+     * `null` to omit the leading icon.
+     */
+    icon?: string | null;
+    /** Per-row override for the leading icon color. */
+    iconColor?: string;
+    /** Full override for the leading node. Takes precedence over `icon`. */
+    leading?: React.ReactNode;
+    /** Row title (e.g. `"4 domestic + 2 intl. lounge access yearly"`). */
+    title: string;
+    /** Makes the row pressable. */
+    onPress?: () => void;
+}
+export interface CcCardProps {
+    /**
+     * Compact variant. Renders only the leading media slot (an `Avatar` by
+     * default) followed by the footer **without** its CTA button — a condensed
+     * representation of the card. Mirrors the Figma `compact` property.
+     */
+    compact?: boolean;
+    /** Toggles the header badge row. Defaults to `true`. */
+    showHeader?: boolean;
+    /** Leading (left) badge group. */
+    badges?: CcCardBadge[];
+    /** Trailing (right-aligned) badge group. */
+    trailingBadges?: CcCardBadge[];
+    /** Full override for the header. Takes precedence over `badges`/`trailingBadges`. */
+    header?: React.ReactNode;
+    /**
+     * 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 (`88`). */
+    imageWidth?: number;
+    /** Default media image height. Defaults to the Figma spec (`54`). */
+    imageHeight?: number;
+    /** Product title rendered next to the media slot (non-compact only). */
+    title?: string;
+    /** Product subtitle rendered below the title (non-compact only). */
+    subtitle?: string;
+    /**
+     * Full override for the media slot's visual. Whatever you pass here is
+     * rendered **in both the compact and non-compact variants** — e.g. pass an
+     * `Avatar` and it stays an avatar in both, pass an `Image` and it stays an
+     * image in both. `modes` cascade into it automatically. Defaults to an
+     * `Image` driven by `imageSource`.
+     */
+    media?: React.ReactNode;
+    /** Benefit rows rendered in the list. Defaults to three sample rows. */
+    items?: CcCardListItem[];
+    /** Toggles the upsell nudge row. Defaults to `true`. */
+    showNudge?: boolean;
+    /**
+     * Declarative content for the nudge's inline text. Defaults to a sample
+     * "Upsell message JioFinance+" string with the last run brand-coloured.
+     */
+    nudgeSegments?: TextSegmentRun[];
+    /** Avatar image source shown at the start of the nudge row. */
+    nudgeAvatarSource?: ImageSourcePropType | string;
+    /** Full override for the nudge row. Takes precedence over the declarative props. */
+    nudge?: React.ReactNode;
+    /** Small muted label above the footer title (`ccCard/headline/*`). */
+    headline?: string;
+    /** Bold footer value (`ccCard/title/*`). */
+    description?: string;
+    /** Muted caption rendered inline after the description (`ccCard/subtitle/*`). */
+    footerSubtitle?: string;
+    /** Full override for the footer text block. */
+    footer?: React.ReactNode;
+    /** CTA button label. Defaults to `"Button"`. */
+    buttonLabel?: string;
+    /** CTA press handler. */
+    onButtonPress?: () => void;
+    /** Full override for the CTA. Takes precedence over `buttonLabel`. */
+    button?: React.ReactNode;
+    /** Toggles the CTA button (non-compact). 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 (`343`). 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;
+}
+/**
+ * CcCard — Figma node 5434:1992 ("Cc Card").
+ *
+ * A white, rounded credit-card product card composed entirely from the shared
+ * design-system primitives so it stays in sync with the rest of the library:
+ *
+ *  - **Header** — two {@link Badge} groups (a leading group + a right-aligned
+ *    trailing group), e.g. `Pre-qualified` / `Lifetime free`.
+ *  - **Media** — a product `Image` + a {@link Title} (title + subtitle resolved
+ *    through the `context7: Card` mode → 14px/12px).
+ *  - **List** — a column of benefit {@link ListItem}s (`List Item Style:
+ *    Minimal`) with leading icons.
+ *  - **Nudge** — an inline upsell row: an {@link Avatar} + a {@link TextSegment}.
+ *  - **Footer** — a headline + description + subtitle text block alongside a
+ *    small {@link Button} (`Button / Size: S`, `AppearanceBrand: Secondary`).
+ *
+ * The {@link CcCardProps.compact} variant collapses the card to just the
+ * leading avatar slot + the footer text block (no CTA button). All defaults can
+ * be overridden via `modes`.
+ */
+declare function CcCard({ compact, showHeader, badges, trailingBadges, header, imageSource, imageWidth, imageHeight, title, subtitle, media, items, showNudge, nudgeSegments, nudgeAvatarSource, nudge, headline, description, footerSubtitle, footer, buttonLabel, onButtonPress, button, showButton, onPress, width, modes, style, accessibilityLabel, }: CcCardProps): import("react/jsx-runtime").JSX.Element;
+export default CcCard;
+//# sourceMappingURL=CcCard.d.ts.map

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

@@ -1,4 +1,5 @@
-import { type StyleProp, type ViewStyle } from 'react-native';
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
 import type { Modes } from '../../design-tokens';
 export interface CheckboxProps {
     /** Whether the checkbox is checked (controlled) */
@@ -26,6 +27,6 @@ export interface CheckboxProps {
  * @component
  * @param {CheckboxProps} props
  */
-declare function Checkbox({ checked: controlledChecked, defaultChecked, onValueChange, disabled, modes, style, accessibilityLabel, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<View>>;
 export default Checkbox;
 //# sourceMappingURL=Checkbox.d.ts.map

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import { View, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
 import type { Modes } from '../../design-tokens';
 export type CheckboxItemProps = {
     /** Whether the checkbox is checked (controlled). */
@@ -68,6 +68,6 @@ export type CheckboxItemProps = {
  * />
  * ```
  */
-declare function CheckboxItem({ checked: controlledChecked, defaultChecked, onValueChange, disabled, label, control, endSlot, endSlotWidth, modes, style, labelStyle, accessibilityLabel, }: CheckboxItemProps): import("react/jsx-runtime").JSX.Element;
+declare const CheckboxItem: React.ForwardRefExoticComponent<CheckboxItemProps & React.RefAttributes<View>>;
 export default CheckboxItem;
 //# sourceMappingURL=CheckboxItem.d.ts.map

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

@@ -0,0 +1,88 @@
+import React from 'react';
+import { type ImageSourcePropType, type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+/**
+ * A single product/plan column rendered as a selection card at the top of the
+ * table. The card order maps 1:1 to each {@link CompareTableRow}'s `values`.
+ */
+export type CompareTableColumn = {
+    /** Product / plan name shown under the image. */
+    label?: string;
+    /** Thumbnail / logo image. Accepts a URL string or an RN image source. */
+    imageSource?: ImageSourcePropType | string;
+    /** CTA link text (e.g. "View details"). Omit to hide the link. */
+    actionLabel?: string;
+    /** Handler for the CTA link. Implies the link is shown. */
+    onActionPress?: () => void;
+    /** When provided, renders a tappable close icon to remove the column. */
+    onRemove?: () => void;
+    /** Stable key. Falls back to the label / index. */
+    key?: React.Key;
+};
+/**
+ * Value rendered inside a comparison cell.
+ * - `string` / `number` → rendered as value text.
+ * - `false` → renders the muted "not available" cross icon.
+ * - any React element → rendered as-is (e.g. a `Badge`, `MoneyValue`, icon…).
+ * - `null` / `undefined` / `true` → empty cell.
+ */
+export type CompareTableCellValue = string | number | boolean | null | undefined | React.ReactElement;
+export type CompareTableRow = {
+    /** One value per column, in the same order as `columns`. */
+    values: CompareTableCellValue[];
+    /** Stable key. Falls back to the index. */
+    key?: React.Key;
+};
+/**
+ * A collapsible section. Each section renders as an `Accordion` whose body is a
+ * comparison table that spans the same columns as the selection cards.
+ */
+export type CompareTableSection = {
+    /** Accordion header label, e.g. "Fees & charges". */
+    title: string;
+    /** Optional full-width header row shown at the top of the table body. */
+    header?: string;
+    /** Comparison rows; each row's `values` map 1:1 to `columns`. */
+    rows: CompareTableRow[];
+    /** Initial expanded state. Defaults to `true` for the first section. */
+    defaultExpanded?: boolean;
+    /** Stable key. Falls back to the title / index. */
+    key?: React.Key;
+};
+export type CompareTableProps = {
+    /**
+     * Product / plan columns rendered as selection cards. Their order maps 1:1
+     * to each row's `values` array. Supports any number of columns.
+     */
+    columns?: CompareTableColumn[];
+    /** Collapsible comparison sections. */
+    sections?: CompareTableSection[];
+    /**
+     * When provided, renders an "Add a card" tile after the columns. Hidden once
+     * `columns.length` reaches `maxColumns`.
+     */
+    onAddColumn?: () => void;
+    /** Label for the add-a-card tile. @default 'Add a card' */
+    addColumnLabel?: string;
+    /** Maximum number of columns before the add tile is hidden. @default 4 */
+    maxColumns?: number;
+    /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
+    modes?: Modes;
+    /** Override the outer container style. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * CompareTable renders a product comparison surface: a row of selection cards
+ * (one per column) followed by one or more collapsible sections, each holding a
+ * comparison table whose cells line up beneath their column.
+ *
+ * The selection card is an internal sub-component and is intentionally not
+ * exported — it should only be used through `CompareTable`. Implementation of
+ * Figma node `5568:3496` (`Compare table`) with sub-component `5568:3487`
+ * (`selectioncard`).
+ *
+ * @component
+ */
+declare function CompareTable({ columns, sections, onAddColumn, addColumnLabel, maxColumns, modes, style, }: CompareTableProps): import("react/jsx-runtime").JSX.Element;
+export default CompareTable;
+//# sourceMappingURL=CompareTable.d.ts.map

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

@@ -0,0 +1,118 @@
+import React from 'react';
+import { type ImageSourcePropType, type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+/**
+ * A single slot in the {@link ComparisonBar}. Each item is either empty (the
+ * "Add" state — a tappable `+` capsule) or filled with an image (the
+ * "Image Added" state — the image plus a dismiss capsule in the corner).
+ *
+ * The presence of {@link ComparisonBarItem.imageSource} is what toggles the
+ * state: provide a source to show the image, leave it `undefined`/`null` to
+ * show the empty add slot. This keeps the component fully controlled — the
+ * `ComparisonBar` never owns the image state itself, so the consumer decides
+ * (e.g. after opening a file/asset picker) when and how an item flips between
+ * the two states.
+ */
+export type ComparisonBarItem = {
+    /**
+     * Stable identifier for this slot. Returned to callbacks so the consumer
+     * can target the exact item that was interacted with. Falls back to the
+     * array index when omitted.
+     */
+    id?: string | number;
+    /**
+     * Image to render in the slot. When provided the slot renders in the
+     * "Image Added" state; when omitted/`null` it renders the empty "Add" state.
+     * Accepts the same shapes as the library `Image` component (remote URL
+     * string, `{ uri }`, or a `require()`d asset).
+     */
+    imageSource?: ImageSourcePropType | string | null;
+    /** Accessibility label for the slot. Defaults to a generic add/remove label. */
+    accessibilityLabel?: string;
+};
+export type ComparisonBarProps = {
+    /**
+     * The slots rendered before the Compare button. Each entry controls its own
+     * add/image state via {@link ComparisonBarItem.imageSource}.
+     */
+    items: ComparisonBarItem[];
+    /**
+     * Fired when an empty (Add) slot is tapped. The consumer is expected to react
+     * by opening whatever picker is appropriate and then updating that item's
+     * `imageSource` to flip it into the "Image Added" state — the component does
+     * not know how images are sourced. Receives the item's `id` (or index when no
+     * id was supplied) and the slot index.
+     */
+    onItemPress?: (id: ComparisonBarItem['id'], index: number) => void;
+    /**
+     * Fired when a filled slot is tapped. For better mobile ergonomics the
+     * *entire* filled slot is the remove target (the dismiss capsule is just a
+     * visual affordance), so a fingertip anywhere on the item triggers this. The
+     * consumer is expected to clear that item's `imageSource` to return it to the
+     * "Add" state. Receives the item's `id` (or index) and the slot index.
+     */
+    onItemRemove?: (id: ComparisonBarItem['id'], index: number) => void;
+    /** Fired when the Compare button is pressed. */
+    onCompare?: () => void;
+    /** Label for the trailing action button. Defaults to `"Compare"`. */
+    compareLabel?: string;
+    /**
+     * Explicitly controls the Compare button's *functional* disabled state — a
+     * truly disabled button is non-interactive (its `onPress` never fires), not
+     * just dimmed. Note that `modes` only affects appearance, so dimming the
+     * button via tokens does NOT stop taps; that is what this prop is for.
+     *
+     * When provided (a boolean), it always wins over
+     * {@link ComparisonBarProps.disableCompareWhenEmpty}. Leave it `undefined`
+     * to fall back to the auto behavior.
+     */
+    compareDisabled?: boolean;
+    /**
+     * When `true` (default) the Compare button is automatically (and truly)
+     * disabled while no slot has an image — there is nothing to compare yet. Set
+     * to `false` to keep it tappable even when empty. Ignored when
+     * {@link ComparisonBarProps.compareDisabled} is set explicitly.
+     */
+    disableCompareWhenEmpty?: boolean;
+    /** Mode configuration passed to the token resolver. */
+    modes?: Modes;
+    /** Style overrides for the outer floating card. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * ComparisonBar — a floating card that lets a user assemble a set of items to
+ * compare, then trigger the comparison.
+ *
+ * Each slot is fully controlled via its `imageSource`: an empty slot shows a
+ * tappable `+` (the "Add" state) and a filled slot shows the image with a
+ * dismiss capsule (the "Image Added" state). The component never sources or
+ * stores images itself — when an empty slot is pressed it fires `onItemPress`
+ * with the item's id/index so the consumer can open whatever picker is
+ * appropriate and then update that item's `imageSource` to flip its state.
+ * Tapping a filled slot (anywhere on it — a mobile-friendly hit target, with
+ * the dismiss capsule as a visual affordance) fires `onItemRemove` so the
+ * consumer can clear the source again.
+ *
+ * @example
+ * ```tsx
+ * const [items, setItems] = useState<ComparisonBarItem[]>([
+ *   { id: 'a' }, { id: 'b' }, { id: 'c' }, { id: 'd' },
+ * ])
+ *
+ * <ComparisonBar
+ *   items={items}
+ *   onItemPress={async (id) => {
+ *     const uri = await openImagePicker()
+ *     setItems(prev => prev.map(it => it.id === id ? { ...it, imageSource: uri } : it))
+ *   }}
+ *   onItemRemove={(id) =>
+ *     setItems(prev => prev.map(it => it.id === id ? { ...it, imageSource: null } : it))
+ *   }
+ *   onCompare={runComparison}
+ * />
+ * ```
+ */
+declare function ComparisonBar({ items, onItemPress, onItemRemove, onCompare, compareLabel, compareDisabled, disableCompareWhenEmpty, modes: propModes, style, }: ComparisonBarProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ComparisonBar>;
+export default _default;
+//# sourceMappingURL=ComparisonBar.d.ts.map

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

@@ -14,6 +14,25 @@ export type DropdownInputOption = {
     /** Whether the option is non-selectable. */
     disabled?: boolean;
 };
+/**
+ * Imperative handle exposed via `ref`. Lets the consumer drive the dropdown
+ * from outside — e.g. close it when an Android hardware/system button is
+ * pressed, or open it programmatically from a sibling control.
+ */
+export type DropdownInputHandle = {
+    /** Opens the options menu (no-op when disabled / read-only). */
+    open: () => void;
+    /** Closes the options menu. */
+    close: () => void;
+    /** Toggles the options menu open/closed. */
+    toggle: () => void;
+    /** Moves focus to the trigger (web). */
+    focus: () => void;
+    /** Removes focus from the trigger (web). */
+    blur: () => void;
+    /** Measures the trigger in window coordinates. */
+    measureInWindow: (callback: (x: number, y: number, width: number, height: number) => void) => void;
+};
 export type DropdownInputProps = {
     /** Label rendered above the input. */
     label?: string;
@@ -104,6 +123,6 @@ export type DropdownInputProps = {
     /** 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;
+declare const DropdownInput: React.ForwardRefExoticComponent<DropdownInputProps & React.RefAttributes<DropdownInputHandle>>;
 export default DropdownInput;
 //# sourceMappingURL=DropdownInput.d.ts.map

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type StyleProp, type TextInputProps as RNTextInputProps, type TextStyle, type ViewStyle } from 'react-native';
+import { TextInput as RNTextInput, type StyleProp, type TextInputProps as RNTextInputProps, type TextStyle, type ViewStyle } from 'react-native';
 import type { Modes } from '../../design-tokens';
 export type FormFieldType = 'text' | 'password' | 'email' | 'search' | 'number' | 'phone' | 'url';
 export type FormFieldProps = {
@@ -80,6 +80,6 @@ export type FormFieldProps = {
     /** Test identifier. */
     testID?: string;
 };
-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;
+declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<RNTextInput>>;
 export default FormField;
 //# sourceMappingURL=FormField.d.ts.map

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type StyleProp, type ViewStyle, type TextStyle, type TextInputProps as RNTextInputProps } from 'react-native';
+import { TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextStyle, type TextInputProps as RNTextInputProps } from 'react-native';
 import type { Modes } from '../../design-tokens';
 export type InputSearchProps = {
     supportText?: boolean;
@@ -22,5 +22,26 @@ export type InputSearchProps = {
     accessibilityLabel?: string;
     accessibilityHint?: string;
 } & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
-export default function InputSearch({ supportText, supportTextLabel, supportTextIcon, modes, containerStyle, placeholder, value, onChangeText, onFocus, onBlur, leading, trailing, inputStyle, ...rest }: InputSearchProps): import("react/jsx-runtime").JSX.Element;
+declare const InputSearch: React.ForwardRefExoticComponent<{
+    supportText?: boolean;
+    supportTextLabel?: string;
+    /**
+     * Icon name from the icon registry to render inside the support text
+     * (e.g. 'ic_info', 'ic_cart'). Defaults to 'ic_info'.
+     */
+    supportTextIcon?: string;
+    modes?: Modes;
+    containerStyle?: StyleProp<ViewStyle>;
+    placeholder?: string;
+    value?: string;
+    onChangeText?: (text: string) => void;
+    onFocus?: (e: any) => void;
+    onBlur?: (e: any) => void;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+    inputStyle?: StyleProp<TextStyle>;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+} & Omit<RNTextInputProps, "style" | "value" | "onFocus" | "onBlur" | "placeholder" | "onChangeText"> & React.RefAttributes<RNTextInput>>;
+export default InputSearch;
 //# sourceMappingURL=InputSearch.d.ts.map

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

@@ -1,4 +1,5 @@
-import { type StyleProp, type ViewStyle, type TextStyle, type TextInputProps } from 'react-native';
+import React from 'react';
+import { TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextStyle, type TextInputProps } from 'react-native';
 import type { Modes } from '../../design-tokens';
 export type NoteInputProps = {
     /** The value of the text input */
@@ -20,5 +21,21 @@ export type NoteInputProps = {
  * NoteInput component representing an interactive "Add note" badge style field.
  * Allows the user to click, clears the placeholder text, and shows a blinking cursor when focused.
  */
-export default function NoteInput({ value, placeholder, onChangeText, modes, style, textStyle, state: explicitState, onFocus, onBlur, ...rest }: NoteInputProps): import("react/jsx-runtime").JSX.Element;
+declare const NoteInput: React.ForwardRefExoticComponent<{
+    /** The value of the text input */
+    value?: string;
+    /** The placeholder when empty ("Add note" by default) */
+    placeholder?: string;
+    /** Callback when text changes */
+    onChangeText?: (text: string) => void;
+    /** Design token modes (e.g., {'InputState': 'Idle', 'Color Mode': 'Light'}) */
+    modes?: Modes;
+    /** Custom container style */
+    style?: StyleProp<ViewStyle>;
+    /** Custom text input style */
+    textStyle?: StyleProp<TextStyle>;
+    /** State of the component */
+    state?: "Editing" | "Idle";
+} & Omit<TextInputProps, "style" | "value" | "placeholder" | "onChangeText"> & React.RefAttributes<RNTextInput>>;
+export default NoteInput;
 //# sourceMappingURL=NoteInput.d.ts.map