jfs-components 0.0.77 → 0.0.79

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

@@ -4,6 +4,12 @@ import { type WebAccessibilityProps } from '../../utils/web-platform-utils';
 export type AccordionProps = {
     /** The accordion header title */
     title?: string;
+    /**
+     * When `true`, the header always uses the filled background treatment
+     * (Figma Hover / Open Hover visuals). Defaults to `false` (transparent at
+     * rest, filled only while hovered or pressed).
+     */
+    contained?: boolean;
     /** Initial expanded state. Defaults to false (collapsed) */
     defaultExpanded?: boolean;
     /** Controlled expanded state. When provided, the component becomes controlled */
@@ -30,29 +36,17 @@ export type AccordionProps = {
 /**
  * Accordion component that mirrors the Figma "Accordion" component.
  *
- * This component supports:
- *  - **Expandable/collapsible content** with smooth animation
- *  - **States**: Idle, Hover, Open, Disabled
- *  - **Slot** for custom content
- *  - **Design-token driven styling** via `getVariableByName` and `modes`
+ * Supports two visual treatments via the `contained` prop:
+ *  - **`contained={false}`** (default) — transparent header at rest; filled
+ *    background on hover / press.
+ *  - **`contained={true}`** — header always uses the filled background.
  *
- * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
- *  - Slot "content" → `children`
+ * Interaction states (Idle, Hover, Open, Disabled) are resolved automatically
+ * from `expanded`, `disabled`, hover, and `contained` — consumers should not
+ * pass `'Accordion States'` in `modes`.
  *
  * @component
- * @param {Object} props
- * @param {string} [props.title='Accordion title'] - The accordion header title
- * @param {boolean} [props.defaultExpanded=false] - Initial expanded state
- * @param {boolean} [props.expanded] - Controlled expanded state
- * @param {Function} [props.onExpandedChange] - Callback fired when expanded state changes
- * @param {boolean} [props.disabled=false] - Whether the accordion is disabled
- * @param {React.ReactNode} [props.children] - Content to display when expanded
- * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
- * @param {Object} [props.style] - Optional container style overrides
- * @param {string} [props.accessibilityLabel] - Accessibility label for the accordion. If not provided, uses title
- * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
-declare function Accordion({ title, defaultExpanded, expanded: controlledExpanded, onExpandedChange, disabled, children, modes, style, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+declare function Accordion({ title, contained, defaultExpanded, expanded: controlledExpanded, onExpandedChange, disabled, children, modes, style, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: AccordionProps): import("react/jsx-runtime").JSX.Element;
 export default Accordion;
 //# sourceMappingURL=Accordion.d.ts.map

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+/**
+ * Anchor point on the main content where the attached `badge` is centered.
+ * Mirrors the nine Figma `position` variants (corners, edge midpoints, center).
+ */
+export type AttachedPosition = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
+export type AttachedProps = Omit<ViewProps, 'children'> & {
+    /**
+     * Main content the badge attaches to (the Figma "main slot"). Any node —
+     * typically an `IconCapsule`, `Avatar`, image, etc. `modes` are cascaded to
+     * every child via {@link cloneChildrenWithModes}.
+     */
+    children?: React.ReactNode;
+    /**
+     * The element attached on top of `children` (the Figma "slot"). Centered on
+     * the anchor point given by `position` so it straddles the edge/corner.
+     * `modes` are cascaded into it as well.
+     */
+    badge?: React.ReactNode;
+    /**
+     * Anchor point for the `badge` relative to the main content.
+     * @default 'bottom-right'
+     */
+    position?: AttachedPosition;
+    /**
+     * How the anchor point is computed for diagonal (corner) positions:
+     * - `false` (default): treat the main content as a **square** — corner
+     *   anchors sit on the bounding-box corners.
+     * - `true`: treat the main content as a **circle** inscribed in its bounding
+     *   box — corner anchors sit on the circle's circumference (the 45° point),
+     *   so badges hug round content like a circular `IconCapsule` or `Avatar`.
+     *
+     * Edge (`top`/`bottom`/`left`/`right`) and `center` anchors are unaffected,
+     * since the circle meets the bounding box at those points.
+     * @default false
+     */
+    circular?: boolean;
+    /** Mode configuration cascaded to the token resolver and all children. */
+    modes?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * Attached — overlays a small `badge` on top of arbitrary main content,
+ * centered on one of nine anchor points (corners, edge midpoints, or center).
+ *
+ * The badge straddles the chosen anchor regardless of either element's size:
+ * both the main content and the badge are measured via `onLayout`, then the
+ * badge is absolutely positioned so its center lands exactly on the anchor.
+ *
+ * @example
+ * ```tsx
+ * <Attached position="bottom-right" badge={<InstitutionBadge modes={modes} />} modes={modes}>
+ *   <IconCapsule iconName="ic_card" modes={modes} />
+ * </Attached>
+ * ```
+ */
+declare function Attached({ children, badge, position, circular, modes: propModes, style, ...rest }: AttachedProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Attached>;
+export default _default;
+//# sourceMappingURL=Attached.d.ts.map

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

@@ -1,6 +1,11 @@
 import React from 'react';
 import { type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
 export interface CardProps {
+    /**
+     * Content rendered in the header slot at the top of the card (e.g. a brand logo).
+     * Sits above the media slot, with its own padding.
+     */
+    header?: React.ReactNode;
     /**
      * The content to be rendered in the media slot (e.g. an Image).
      * This content is wrapped in a container that respects the `aspectRatio`.
@@ -28,16 +33,18 @@ export interface CardProps {
  * Card component implementation from Figma node 765:6186.
  *
  * Supports a `media` slot (with aspect ratio) and a content area.
+ * Supports an optional `header` slot (e.g. a brand logo), a `media` slot
+ * (with aspect ratio) and a content area.
  * Usage:
  * ```tsx
- * <Card media={<Image source={...} />} modes={modes}>
+ * <Card header={<GoldLogo />} media={<Image source={...} />} modes={modes}>
  *   <Card.SupportText>Support text</Card.SupportText>
  *   <Card.Title>Title</Card.Title>
  *   <Card.SupportText>Support text</Card.SupportText>
  * </Card>
  * ```
  */
-export declare function Card({ media, children, modes, mediaAspectRatio, style, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ header, media, children, modes, mediaAspectRatio, style, }: CardProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Card {
     var Title: ({ children, style, modes: propModes }: CardTextProps) => import("react/jsx-runtime").JSX.Element;
     var SupportText: ({ children, style, modes: propModes }: CardTextProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,63 @@
+import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+export type ExpandableCheckboxProps = {
+    /** Long text label rendered next to the checkbox. */
+    label?: string;
+    /** Whether the checkbox is checked (controlled). */
+    checked?: boolean;
+    /** Initial checked state (uncontrolled). */
+    defaultChecked?: boolean;
+    /** Callback fired when the checked state changes. */
+    onValueChange?: (checked: boolean) => void;
+    /** Whether the row is expanded to reveal the full label (controlled). */
+    expanded?: boolean;
+    /** Initial expanded state (uncontrolled). Defaults to `false` (Idle). */
+    defaultExpanded?: boolean;
+    /** Callback fired when the expanded state changes. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Whether the entire row is disabled. */
+    disabled?: boolean;
+    /** Label for the toggle button shown when the row is collapsed. */
+    readMoreLabel?: string;
+    /** Label for the toggle button shown when the row is expanded. */
+    readLessLabel?: string;
+    /** Number of lines to show when collapsed. Defaults to `1`. */
+    collapsedLines?: number;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Override outer container styles. */
+    style?: StyleProp<ViewStyle>;
+    /** Override the label text styles. */
+    labelStyle?: StyleProp<TextStyle>;
+    /** Accessibility label for the checkbox. Falls back to `label`. */
+    accessibilityLabel?: string;
+};
+/**
+ * ExpandableCheckbox composes a `Checkbox`, a long-form label and a
+ * "Read more" / "Read less" toggle. Mirrors the Figma "Expandable Checkbox"
+ * component with two states:
+ *
+ *  - **Idle (collapsed)** — checkbox + truncated label + toggle button arranged
+ *    in a horizontal row (cross-axis centered).
+ *  - **Open (expanded)** — checkbox + full multi-line label, with the toggle
+ *    button right-aligned beneath the row.
+ *
+ * The checkbox and the toggle button have independent press handlers — pressing
+ * the toggle does not affect the checked state, and toggling the checkbox does
+ * not collapse / expand the row.
+ *
+ * @component
+ * @param {ExpandableCheckboxProps} props
+ *
+ * @example
+ * ```tsx
+ * <ExpandableCheckbox
+ *   label="By checking this box, I (a) acknowledge and (b) agree to the full terms…"
+ *   defaultChecked
+ *   onValueChange={setAccepted}
+ *   modes={{ 'Color Mode': 'Light' }}
+ * />
+ * ```
+ */
+declare function ExpandableCheckbox({ label, checked: controlledChecked, defaultChecked, onValueChange, expanded: controlledExpanded, defaultExpanded, onExpandedChange, disabled, readMoreLabel, readLessLabel, collapsedLines, modes, style, labelStyle, accessibilityLabel, }: ExpandableCheckboxProps): import("react/jsx-runtime").JSX.Element;
+export default ExpandableCheckbox;
+//# sourceMappingURL=ExpandableCheckbox.d.ts.map

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type FullscreenModalProps = {
+    /** Small eyebrow line above the headline. */
+    eyebrow?: string;
+    /** Large hero headline. */
+    headline?: string;
+    /** Supporting paragraph shown below the headline. */
+    supportingText?: string;
+    /** Secondary line below the supporting paragraph (e.g. a price / timeline). */
+    priceText?: string;
+    /**
+     * Media rendered full-bleed behind the hero text and driven by the parallax
+     * scroll effect. Bring any renderer — most commonly a `LottiePlayer`, but an
+     * `Image`, `Video`, or `SvgXml` works too. Size it to fill the hero box
+     * (`heroHeight` tall, full modal width) and let it `cover` so that as the
+     * hero collapses in height the art is cropped, never distorted. `modes` are
+     * cascaded into it.
+     */
+    heroMedia?: React.ReactNode;
+    /** Resting height of the hero region. Defaults to 420. */
+    heroHeight?: number;
+    /**
+     * Collapsed height the hero shrinks to at full scroll. Defaults to
+     * `heroHeight * 0.45`. Only the height changes — the width is always full.
+     */
+    heroMinHeight?: number;
+    /** Enable the scroll-driven hero collapse. Defaults to true. */
+    parallax?: boolean;
+    /** Whether to render the floating close button (top-right). Defaults to true. */
+    showClose?: boolean;
+    /** Press handler for the close button. */
+    onClose?: () => void;
+    /** Accessibility label for the close button. */
+    closeAccessibilityLabel?: string;
+    /**
+     * Fully custom footer content rendered inside the sticky `ActionFooter`.
+     * When provided, `primaryActionLabel` / `disclaimer` are ignored.
+     */
+    footer?: React.ReactNode;
+    /** Label for the default primary action button in the footer. */
+    primaryActionLabel?: string;
+    /** Press handler for the default primary action button. */
+    onPrimaryAction?: () => void;
+    /** Disclaimer text shown below the default primary action button. */
+    disclaimer?: string;
+    /** Solid backdrop color for the scrollable body. Defaults to a near-black. */
+    backgroundColor?: string;
+    /** Body content (typically `Section`s). `modes` are cascaded automatically. */
+    children?: React.ReactNode;
+    /** Mode configuration. `context5` is always forced to `'Fullscreen Modal'`. */
+    modes?: Record<string, any>;
+    /** Style overrides for the outer container. */
+    style?: StyleProp<ViewStyle>;
+    /** Style overrides for the scroll body wrapper (the dark content area). */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+};
+/**
+ * FullscreenModal — a full-screen takeover surface with a parallax media hero,
+ * a scrollable body, a floating close button, and a sticky `ActionFooter`.
+ *
+ * The component always themes itself with `context5: 'Fullscreen Modal'`
+ * (non-overridable) so every nested component (Section, ListItem, Button,
+ * Disclaimer, …) resolves the white-on-dark "fullscreen modal" token values.
+ * That mode is cascaded into `children`, the footer, and the hero text via
+ * `cloneChildrenWithModes` / the merged `modes` object.
+ *
+ * ### Parallax
+ * As the user scrolls up, the hero collapses by **height only** (from
+ * `heroHeight` to `heroMinHeight`) — its **full width is always preserved**.
+ * The `heroMedia` is pinned to the top at a fixed size and `cover`-cropped by
+ * the collapsing clip, so it keeps a perfect aspect ratio the whole time
+ * (never scaled or squished). Because it collapses slower than the content
+ * scrolls, the media lags behind for the parallax depth cue. Disable with
+ * `parallax={false}`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <FullscreenModal
+ *   eyebrow="Upgrade to JioFinance+"
+ *   headline="Get more from your money."
+ *   supportingText="JioFinance+ is your upgraded financial experience…"
+ *   priceText="₹999/year · ₹0 until 2027"
+ *   heroMedia={<LottiePlayer source={hero} size={{ width: 360, height: 420 }} />}
+ *   primaryActionLabel="Upgrade for free"
+ *   disclaimer="By upgrading, we'll check your eligibility with Experian."
+ *   onPrimaryAction={() => upgrade()}
+ *   onClose={() => navigation.goBack()}
+ * >
+ *   <Section title="Key Benefits" slotDirection="column" slot={…} />
+ *   <Section title="Compare plans" slotDirection="column" slot={…} />
+ * </FullscreenModal>
+ * ```
+ */
+declare function FullscreenModal({ eyebrow, headline, supportingText, priceText, heroMedia, heroHeight, heroMinHeight, parallax, showClose, onClose, closeAccessibilityLabel, footer, primaryActionLabel, onPrimaryAction, disclaimer, backgroundColor, children, modes: propModes, style, contentContainerStyle, testID, }: FullscreenModalProps): import("react/jsx-runtime").JSX.Element;
+export default FullscreenModal;
+//# sourceMappingURL=FullscreenModal.d.ts.map

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

@@ -6,8 +6,16 @@ type ListItemProps = {
     title?: string;
     supportText?: string;
     showSupportText?: boolean;
+    /** Leading slot (Figma "leading"). Defaults to an `IconCapsule` when omitted. */
     leading?: React.ReactNode;
     supportSlot?: React.ReactNode;
+    /** Trailing slot (Figma "trailing"), e.g. `MoneyValue` or `Button`. Horizontal layout only. */
+    trailing?: React.ReactNode;
+    /**
+     * @deprecated Renamed to `trailing` for a symmetric `leading` / `trailing`
+     * slot API. Still honored for backward compatibility; `trailing` wins when
+     * both are provided. Will be removed in a future major version.
+     */
     endSlot?: React.ReactNode;
     /** Whether to show the NavArrow on the far right (Horizontal layout only). Defaults to true. */
     navArrow?: boolean;
@@ -33,9 +41,11 @@ type ListItemProps = {
  *  - **design-token driven styling** via `getVariableByName` and `modes`
  *
  * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
+ * dedicated React "slot" prop. The leading and trailing edges share a
+ * symmetric `leading` / `trailing` slot API:
+ *  - Slot "leading" → `leading`
  *  - Slot "support text" → `supportSlot`
- *  - Slot "end" → `endSlot`
+ *  - Slot "trailing" → `trailing`
  *
  * @component
  * @param {Object} props
@@ -43,9 +53,9 @@ type ListItemProps = {
  * @param {string} [props.title='Title'] - Primary title used in the horizontal layout.
  * @param {string} [props.supportText='Support Text'] - Support text used in both layouts when `supportSlot` is not provided.
  * @param {boolean} [props.showSupportText=true] - Toggles rendering of the support text in Horizontal layout.
- * @param {React.ReactNode} [props.leading] - Optional leading element. Defaults to `IconCapsule`.
+ * @param {React.ReactNode} [props.leading] - Optional leading slot. Defaults to `IconCapsule`.
  * @param {React.ReactNode} [props.supportSlot] - Optional custom slot used instead of the default support text block.
- * @param {React.ReactNode} [props.endSlot] - Optional custom trailing slot (Figma Slot "end").
+ * @param {React.ReactNode} [props.trailing] - Optional trailing slot (Figma Slot "trailing"). Horizontal layout only.
  * @param {boolean} [props.navArrow=true] - Whether to show NavArrow on the far right (Horizontal layout only).
  * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens.
  * @param {Function} [props.onPress] - When provided, the entire item becomes pressable (navigation variant).
@@ -67,7 +77,7 @@ type ListItemProps = {
  *    handlers stay referentially stable across renders.
  *  - The component is wrapped in `React.memo`.
  */
-declare function ListItemImpl({ layout, title, supportText, showSupportText, leading, supportSlot, endSlot, navArrow, modes, onPress, style, contentStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ListItemImpl({ layout, title, supportText, showSupportText, leading, supportSlot, trailing, endSlot, navArrow, modes, onPress, style, contentStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 declare const ListItem: React.MemoExoticComponent<typeof ListItemImpl>;
 export default ListItem;
 //# sourceMappingURL=ListItem.d.ts.map

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

@@ -0,0 +1,81 @@
+import { type StyleProp, type TextInputProps as RNTextInputProps, type TextStyle, type ViewStyle } from 'react-native';
+/**
+ * Visual state of the textarea. Mirrors the `FormField States` collection so
+ * MessageField slots into the same theming pipeline as FormField. The state
+ * is always derived from props (`isInvalid`, `isDisabled`, `isReadOnly` and
+ * focus) and is locked in `modes['FormField States']` — passing that key in
+ * `modes` is intentionally ignored to keep interactive behaviour and visual
+ * state in sync.
+ */
+export type MessageFieldState = 'Idle' | 'Active' | 'Read Only' | 'Error' | 'Disabled';
+export type MessageFieldProps = {
+    /** Label rendered above the textarea. */
+    label?: string;
+    /** Placeholder text shown when the textarea is empty. */
+    placeholder?: string;
+    /**
+     * Current value of the textarea (controlled). When provided, the consumer
+     * is responsible for updating it via `onChangeText`.
+     */
+    value?: string;
+    /** Initial value when used uncontrolled. Ignored when `value` is provided. */
+    defaultValue?: string;
+    /** Called whenever the text changes. Fires for both controlled and uncontrolled use. */
+    onChangeText?: (text: string) => void;
+    /**
+     * Form field name. When the field is rendered inside a `<Form>`, this is
+     * the key used to look up server-side `validationErrors` and to clear
+     * the error when the value changes.
+     */
+    name?: string;
+    /**
+     * Maximum number of characters accepted. Drives the counter when
+     * `showCounter` is not explicitly false.
+     */
+    maxLength?: number;
+    /**
+     * Controls visibility of the character counter.
+     * - Default: counter is shown when `maxLength` is provided.
+     * - `true`: always show counter (shows `<count>/<maxLength>` when
+     *   `maxLength` is set, or just `<count>` otherwise).
+     * - `false`: never show counter.
+     */
+    showCounter?: boolean;
+    /**
+     * Number of visible text rows. When provided, overrides the default
+     * `messageField/textarea/height` token to derive the textarea height as
+     * `rows * lineHeight + 2 * padding`.
+     */
+    rows?: number;
+    /** Renders a required indicator (asterisk) next to the label. */
+    isRequired?: boolean;
+    /** Disables interaction and dims the field. */
+    isDisabled?: boolean;
+    /** Marks the field as invalid and resolves to the `Error` state token mode. */
+    isInvalid?: boolean;
+    /** Read-only, non-interactive but not dimmed. */
+    isReadOnly?: boolean;
+    /** Auto-focus the textarea on mount. */
+    autoFocus?: boolean;
+    /** Modes for design token resolution (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Style overrides for the outermost wrapper. */
+    style?: StyleProp<ViewStyle>;
+    /** Style overrides for the textarea container (border/padding/etc). */
+    textareaStyle?: StyleProp<ViewStyle>;
+    /** Style overrides for the input text. */
+    inputStyle?: StyleProp<TextStyle>;
+    /** Accessibility label. Defaults to `label` or `placeholder`. */
+    accessibilityLabel?: string;
+    /** Accessibility hint. */
+    accessibilityHint?: string;
+    /** Test identifier. */
+    testID?: string;
+    /** Called when the textarea receives focus. */
+    onFocus?: RNTextInputProps['onFocus'];
+    /** Called when the textarea loses focus. */
+    onBlur?: RNTextInputProps['onBlur'];
+};
+declare function MessageField({ label, placeholder, value, defaultValue, onChangeText, name, maxLength, showCounter, rows, isRequired, isDisabled, isInvalid, isReadOnly, autoFocus, modes: propModes, style, textareaStyle, inputStyle, accessibilityLabel, accessibilityHint, testID, onFocus, onBlur, }: MessageFieldProps): import("react/jsx-runtime").JSX.Element;
+export default MessageField;
+//# sourceMappingURL=MessageField.d.ts.map

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

@@ -1,16 +1,21 @@
 import React from 'react';
-import { View, type ViewStyle } from 'react-native';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type SafePressableProps } from '../../utils/web-platform-utils';
 type NavArrowDirection = 'Back' | 'Forward' | 'Down';
-type NavArrowProps = {
+type NavArrowProps = SafePressableProps & {
     /** Direction of the arrow: 'Back' (left chevron), 'Forward' (right chevron), or 'Down' */
     direction?: NavArrowDirection;
     /** Modes used to resolve design tokens */
     modes?: Record<string, any>;
     /** Optional additional container style */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Accessibility label for the arrow */
     accessibilityLabel?: string;
-} & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityLabel'>;
+    /** Called when the arrow is pressed. Expands the hit area to at least 44×44. */
+    onPress?: () => void;
+    /** Disables press interaction when `onPress` is provided */
+    disabled?: boolean;
+};
 /**
  * NavArrow component that displays a chevron arrow for navigation.
  *
@@ -25,7 +30,7 @@ type NavArrowProps = {
  *    on (tokens, direction, style).
  *  - Wrapped in `React.memo`.
  */
-declare function NavArrow({ direction, modes, style, accessibilityLabel, ...rest }: NavArrowProps): import("react/jsx-runtime").JSX.Element;
+declare function NavArrow({ direction, modes, style, accessibilityLabel, onPress, disabled, ...rest }: NavArrowProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof NavArrow>;
 export default _default;
 //# sourceMappingURL=NavArrow.d.ts.map

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * A single plan column header (the label column has no header of its own).
+ */
+export type PlanComparisonColumn = {
+    /** Header text for the plan column. */
+    label: string;
+    /**
+     * Render the header in the brand accent colour (gold) — use it to
+     * highlight the recommended / upsell plan.
+     * @default false
+     */
+    brand?: boolean;
+};
+/**
+ * Value rendered inside a plan cell.
+ * - `string` / `number` → rendered as value text.
+ * - `false` → renders the muted "not available" cross icon.
+ * - any React node → rendered as-is (e.g. a `Badge`, `MoneyValue`, icon…).
+ * - `null` / `undefined` / `true` → empty cell.
+ */
+export type PlanComparisonCellValue = string | number | boolean | null | undefined | React.ReactElement;
+export type PlanComparisonRow = {
+    /** Feature label shown in the first (left) column. */
+    label: string;
+    /**
+     * Show an info icon after the label. When `onInfoPress` is provided the
+     * icon becomes tappable; otherwise it is purely decorative.
+     */
+    showInfo?: boolean;
+    /** Handler for the info icon. Implies `showInfo`. */
+    onInfoPress?: () => void;
+    /**
+     * One value per plan column, in the same order as `columns`. See
+     * {@link PlanComparisonCellValue} for how each value is rendered.
+     */
+    values: PlanComparisonCellValue[];
+    /** Stable key. Falls back to the label / index. */
+    key?: React.Key;
+};
+export type PlanComparisonCardProps = {
+    /**
+     * Plan column headers (excludes the leading label column). The order here
+     * maps 1:1 to each row's `values` array.
+     */
+    columns?: PlanComparisonColumn[];
+    /** Feature rows compared across the plan columns. */
+    rows?: PlanComparisonRow[];
+    /**
+     * Minimum flex-grow on the label column when the table is given extra
+     * horizontal space. Plan columns always size to their content and never
+     * shrink below it.
+     * @default 0
+     */
+    labelColumnFlex?: number;
+    /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
+    modes?: Record<string, any>;
+    /** Override the outer container style. */
+    style?: StyleProp<ViewStyle>;
+};
+declare function PlanComparisonCard({ columns, rows, labelColumnFlex, modes, style, }: PlanComparisonCardProps): import("react/jsx-runtime").JSX.Element;
+export default PlanComparisonCard;
+//# sourceMappingURL=PlanComparisonCard.d.ts.map

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+export type SlotLayoutDirection = 'vertical' | 'horizontal';
+export type SlotProps = ViewProps & {
+    /**
+     * Content laid out inside the slot. `modes` are cascaded to every child via
+     * {@link cloneChildrenWithModes}.
+     */
+    children?: React.ReactNode;
+    /**
+     * Main-axis direction for slot children. Matches the Figma Slot variant:
+     * - `vertical` (default): stacks children in a column
+     * - `horizontal`: arranges children in a row
+     */
+    layoutDirection?: SlotLayoutDirection;
+    /**
+     * Alignment along the cross axis.
+     * Defaults to `stretch` for vertical and `flex-start` for horizontal.
+     */
+    alignCrossAxis?: ViewStyle['alignItems'];
+    /**
+     * Distribution along the main axis (maps to `justifyContent`).
+     */
+    justifyMainAxis?: ViewStyle['justifyContent'];
+    /**
+     * Mode configuration passed to the token resolver and cascaded to children.
+     */
+    modes?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * Slot — a token-driven layout container for grouped slot content.
+ *
+ * Use `Slot` instead of a raw `View` when you need a vertical or horizontal
+ * stack with design-token gap spacing and automatic `modes` propagation to
+ * children. Typical usage is nesting a column of actions inside a
+ * direction-locked parent such as `ActionFooter`:
+ *
+ * @example
+ * ```tsx
+ * <ActionFooter modes={modes}>
+ *   <Slot layoutDirection="vertical" modes={modes}>
+ *     <Button label="Continue" modes={primaryModes} />
+ *     <Disclaimer disclaimer="Terms apply." modes={modes} />
+ *   </Slot>
+ * </ActionFooter>
+ * ```
+ */
+declare function Slot({ children, layoutDirection, alignCrossAxis, justifyMainAxis, modes: propModes, style, ...rest }: SlotProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Slot>;
+export default _default;
+//# sourceMappingURL=Slot.d.ts.map

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

@@ -6,11 +6,14 @@ export type StepProps = {
     modes?: Record<string, any>;
     style?: ViewStyle;
     index?: number;
+    showLine?: boolean;
     connectorStyle?: ViewStyle;
     title?: string;
     supportingText?: string;
+    metaText?: string;
     subtitle?: boolean;
+    meta?: boolean;
     status?: StepStatus;
 };
-export declare function Step({ children, modes, style, index, connectorStyle, title, supportingText, subtitle, status, }: StepProps): import("react/jsx-runtime").JSX.Element;
+export declare function Step({ children, modes, style, index, showLine, connectorStyle, title, supportingText, metaText, subtitle, meta, status, }: StepProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Step.d.ts.map

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

@@ -2,8 +2,11 @@ import { type ViewStyle } from 'react-native';
 export type StepLabelProps = {
     title?: string;
     supportingText?: string;
+    metaText?: string;
+    subtitle?: boolean;
+    meta?: boolean;
     modes?: Record<string, any>;
     style?: ViewStyle;
 };
-export declare function StepLabel({ title, supportingText, modes, style, }: StepLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepLabel({ title, supportingText, metaText, subtitle, meta, modes, style, }: StepLabelProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=StepLabel.d.ts.map

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

@@ -3,7 +3,9 @@ import { type ViewStyle } from 'react-native';
 import { Step } from './Step';
 import { StepLabel } from './StepLabel';
 export { Step, StepLabel };
-type StepperProps = {
+export type { StepProps, StepStatus } from './Step';
+export type { StepLabelProps } from './StepLabel';
+export type StepperProps = {
     children?: React.ReactNode;
     modes?: Record<string, any>;
     style?: ViewStyle;