jfs-components 0.0.73 → 0.0.77

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/ActionFooter/ActionFooter.d.ts

@@ -3,50 +3,55 @@ import { type ViewStyle, type StyleProp } from 'react-native';
 export type ActionFooterProps = {
     /**
      * Content to render inside the action footer slot.
-     * Typically includes IconButton and Button components.
+     * Typically includes `IconButton` and `Button` components.
+     * `IconButton` children keep their intrinsic square size; everything else
+     * is auto-stretched to share the remaining horizontal space equally.
      */
     children?: React.ReactNode;
     /**
      * Mode configuration passed to the token resolver.
-     * Pass the same modes to children components for consistent theming.
+     * Automatically merged into every slot child via {@link cloneChildrenWithModes}
+     * so callers don't have to thread modes down by hand.
      */
     modes?: Record<string, any>;
     /**
-     * Optional style overrides for the container
+     * Optional style overrides for the outer container.
      */
     style?: StyleProp<ViewStyle>;
     /**
-     * Accessibility label for the footer region
+     * Accessibility label for the footer region (announced for the toolbar).
      */
     accessibilityLabel?: string;
 };
 /**
- * ActionFooter component that provides a fixed footer container for action buttons.
+ * ActionFooter — a sticky bottom container for primary screen actions.
  *
- * This component is designed to hold action items like IconButton and Button components
- * at the bottom of a screen. It includes a shadow for visual separation from content above.
+ * Layout contract:
+ *   - The outer container stretches horizontally (`alignSelf: 'stretch'`) so
+ *     it fills the parent regardless of whether the parent is a flex column,
+ *     a ScrollView contentContainer, or a plain View.
+ *   - The inner slot is a single row sized by its tallest child. It does NOT
+ *     use `flex: 1` — that previously caused the row to collapse to zero on
+ *     the first Yoga pass on native, taking the button labels with it.
+ *   - `IconButton` children keep their intrinsic square size.
+ *   - Every other child is auto-stretched with the Yoga-safe stretch style
+ *     above so two `<Button>` siblings render at equal width on iOS, Android,
+ *     and Web.
  *
- * The `modes` prop is automatically passed to all slot children. If a child has its own
- * `modes` prop, it will be merged with the parent's modes (child modes take precedence).
- *
- * @component
- * @param {Object} props - Component props
- * @param {React.ReactNode} [props.children] - Action elements to display (e.g., IconButton, Button)
- * @param {Object} [props.modes={}] - Mode configuration for design tokens (automatically passed to children)
- * @param {Object} [props.style] - Optional style overrides
- * @param {string} [props.accessibilityLabel] - Accessibility label for the footer region
+ * The `modes` prop is automatically pushed down to every slot child via
+ * {@link cloneChildrenWithModes}; explicit child-level modes win over the
+ * parent's modes.
  *
  * @example
  * ```tsx
- * // Basic usage - modes are automatically passed to all children.
- * // Non-IconButton children (e.g., Button) are auto-stretched to fill.
  * <ActionFooter modes={modes}>
  *   <IconButton iconName="ic_split" />
- *   <Button label="Request" />
- *   <Button label="Pay" />
+ *   <Button label="Request" modes={{ AppearanceBrand: 'Secondary' }} />
+ *   <Button label="Pay" modes={{ AppearanceBrand: 'Primary' }} />
  * </ActionFooter>
  * ```
  */
 declare function ActionFooter({ children, modes, style, accessibilityLabel, }: ActionFooterProps): import("react/jsx-runtime").JSX.Element;
-export default ActionFooter;
+declare const _default: React.MemoExoticComponent<typeof ActionFooter>;
+export default _default;
 //# sourceMappingURL=ActionFooter.d.ts.map

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

@@ -27,8 +27,14 @@ export type AvatarProps = {
     accessibilityLabel?: string;
     onPress?: () => void;
     disabled?: boolean;
+    /**
+     * Explicit per-instance loading override. When `true`, renders a
+     * same-size circular skeleton instead of the avatar. Defaults to
+     * inheriting from the surrounding `<SkeletonGroup>`.
+     */
+    loading?: boolean;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel'>;
-declare function Avatar({ monogram, style, modes, imageSource, accessibilityLabel: _accessibilityLabel, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+declare function Avatar({ monogram, style, modes, imageSource, accessibilityLabel: _accessibilityLabel, loading, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Avatar>;
 export default _default;
 //# sourceMappingURL=Avatar.d.ts.map

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

@@ -10,7 +10,13 @@ type BadgeProps = {
     accessibilityLabel?: string;
     style?: ViewStyle;
     labelStyle?: TextStyle;
+    /**
+     * Explicit per-instance loading override. When `true`, renders a
+     * badge-shaped skeleton placeholder instead of the badge. Defaults to
+     * inheriting from the surrounding `<SkeletonGroup>`.
+     */
+    loading?: boolean;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityLabel' | 'accessibilityRole'>;
-declare function Badge({ label, modes, onPress, accessibilityLabel, style, labelStyle, ...rest }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+declare function Badge({ label, modes, onPress, accessibilityLabel, style, labelStyle, loading, ...rest }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 export default Badge;
 //# sourceMappingURL=Badge.d.ts.map

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

@@ -40,6 +40,13 @@ export type ButtonProps = SafePressableProps & {
      * Web-specific accessibility props (only used on web platform)
      */
     webAccessibilityProps?: WebAccessibilityProps;
+    /**
+     * Explicit per-instance loading override. When `true`, the button renders
+     * as a pill-shaped skeleton of the same size; when `false`, the
+     * surrounding `<SkeletonGroup>` is ignored. Defaults to inheriting from
+     * the group.
+     */
+    loading?: boolean;
 };
 /**
  * Button component that maps directly to the Figma design using design tokens.
@@ -76,7 +83,7 @@ export type ButtonProps = SafePressableProps & {
  *    advantage of this should pass stable `modes` (the default `EMPTY_MODES`
  *    is already stable) and stable callback props.
  */
-declare function ButtonImpl({ label, children, renderContent, leading, trailing, icon, modes, onPress, disabled, style, labelStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function ButtonImpl({ label, children, renderContent, leading, trailing, icon, modes, onPress, disabled, style, labelStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, loading, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 declare const Button: React.MemoExoticComponent<typeof ButtonImpl>;
 export default Button;
 //# sourceMappingURL=Button.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/IconButton/IconButton.d.ts

@@ -54,8 +54,14 @@ type IconButtonProps = SafePressableProps & {
      * Web-specific accessibility props (only used on web platform)
      */
     webAccessibilityProps?: WebAccessibilityProps;
+    /**
+     * Explicit per-instance loading override. When `true`, renders a
+     * same-size pill-shaped skeleton instead of the button. Defaults to
+     * inheriting from the surrounding `<SkeletonGroup>`.
+     */
+    loading?: boolean;
 };
-declare function IconButton({ iconName, source, modes, onPress, disabled, style, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, isToggle, activeIcon, activeSource, inactiveIcon, inactiveSource, isActive, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function IconButton({ iconName, source, modes, onPress, disabled, style, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, isToggle, activeIcon, activeSource, inactiveIcon, inactiveSource, isActive, loading, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof IconButton>;
 export default _default;
 //# sourceMappingURL=IconButton.d.ts.map

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

@@ -38,8 +38,15 @@ export type ImageProps = {
     /** Hide from the a11y tree (e.g. when image is purely decorative). */
     accessibilityElementsHidden?: boolean | undefined;
     importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants' | undefined;
+    /**
+     * Explicit per-instance loading override. When `true`, the image renders as
+     * a skeleton placeholder at the same box size; when `false`, the
+     * surrounding `<SkeletonGroup>` is ignored. Defaults to inheriting from
+     * the group.
+     */
+    loading?: boolean | undefined;
 };
-declare function Image({ imageSource, ratio, resizeMode, width, height, borderRadius, style, accessibilityLabel, accessibilityElementsHidden, importantForAccessibility, }: ImageProps): import("react/jsx-runtime").JSX.Element;
+declare function Image({ imageSource, ratio, resizeMode, width, height, borderRadius, style, accessibilityLabel, accessibilityElementsHidden, importantForAccessibility, loading, }: ImageProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Image>;
 export default _default;
 //# sourceMappingURL=Image.d.ts.map