jfs-components 0.0.74 → 0.0.78

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/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/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

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * A parsed Lottie animation. The JSON object you get from
+ * `require('./animation.json')` or `fetch().then(r => r.json())`. We keep the
+ * type intentionally loose because both `lottie-react-native` and `lottie-react`
+ * accept slightly different shapes — `LottiePlayer` narrows back to the
+ * platform-specific type internally.
+ */
+export type LottieAnimationSource = Record<string, unknown>;
+export type LottiePlayerProps = {
+    /**
+     * Parsed Lottie animation JSON. Use `require('./animation.json')` in React
+     * Native or `import animation from './animation.json'` on web.
+     *
+     * URI sources (`{ uri: '...' }`) are intentionally not accepted here — web
+     * Lottie players require the animation data to be pre-parsed. Fetch and
+     * parse the JSON yourself before passing it in if you need a remote source.
+     */
+    source: LottieAnimationSource;
+    /**
+     * Override the rendered size. Pass a number for a square box, or
+     * `{ width, height }` for non-square.
+     *
+     * When omitted, size is resolved from the `media/width` and `media/height`
+     * design tokens (default `117 × 117`). The `Media / Output` collection
+     * exposes `L | M | S` modes (117 / 70 / 20) — pass
+     * `modes={{ 'Media / Output': 'M' }}` to render at 70×70, etc.
+     */
+    size?: number | {
+        width: number;
+        height: number;
+    };
+    /** Play the animation on mount. Defaults to `true`. */
+    autoPlay?: boolean;
+    /** Loop the animation. Defaults to `true`. */
+    loop?: boolean;
+    /** Mode configuration for design-token theming. */
+    modes?: Record<string, any>;
+    /** Style overrides applied to the underlying view. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label. Lottie is decorative by default. */
+    accessibilityLabel?: string;
+    testID?: string;
+};
+/**
+ * Renders a Lottie animation using the consumer's installed
+ * `lottie-react-native` (native) or `lottie-react` (web) — both are declared
+ * as **optional peer dependencies** of `jfs-components`, so installing the
+ * library does not pull them in. Add the relevant package to your app only
+ * if you actually use `LottiePlayer`:
+ *
+ * ```sh
+ * # React Native (iOS / Android)
+ * npm install lottie-react-native
+ * cd ios && pod install
+ *
+ * # Web (or react-native-web)
+ * npm install lottie-react
+ * ```
+ *
+ * The web build (`LottiePlayer.web.tsx`) is picked automatically by Metro /
+ * webpack via platform extensions — same pattern as `MediaCard/GlassFill`.
+ *
+ * Token-driven sizing: when `size` is omitted, `LottiePlayer` reads
+ * `media/width` and `media/height` from the Figma variables resolver, so the
+ * animation matches the surrounding component's `Media / Output` mode
+ * automatically. This is the same sizing contract `PageHero` and
+ * `LottieIntroBlock` use for their `media` slots.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import animation from './assets/loader.json';
+ *
+ * <LottiePlayer source={animation} />                    // 117 × 117 (default)
+ * <LottiePlayer source={animation} size={70} />          // 70 × 70
+ * <LottiePlayer source={animation} modes={{ 'Media / Output': 'S' }} />  // 20 × 20
+ * <PageHero media={<LottiePlayer source={animation} />} />
+ * ```
+ */
+declare function LottiePlayer({ source, size, autoPlay, loop, modes: propModes, style, accessibilityLabel, testID, }: LottiePlayerProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof LottiePlayer>;
+export default _default;
+//# sourceMappingURL=LottiePlayer.d.ts.map

package/lib/typescript/src/components/LottiePlayer/LottiePlayer.web.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type LottieAnimationSource = Record<string, unknown>;
+export type LottiePlayerProps = {
+    source: LottieAnimationSource;
+    size?: number | {
+        width: number;
+        height: number;
+    };
+    autoPlay?: boolean;
+    loop?: boolean;
+    modes?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+    testID?: string;
+};
+/**
+ * Web build of `LottiePlayer` — picked automatically by webpack /
+ * Metro-for-web via the `.web.tsx` platform extension. Uses `lottie-react`
+ * (which wraps `lottie-web`) and renders a plain DOM container.
+ *
+ * Public API mirrors `LottiePlayer.tsx` (native). See that file for the
+ * documented prop reference and usage patterns.
+ */
+declare function LottiePlayer({ source, size, autoPlay, loop, modes: propModes, style, accessibilityLabel, testID, }: LottiePlayerProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof LottiePlayer>;
+export default _default;
+//# sourceMappingURL=LottiePlayer.web.d.ts.map

package/lib/typescript/src/components/LottiePlayer/loadNativeLottieView.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type ViewStyle } from 'react-native';
+/** Props we forward to the underlying native Lottie view. */
+export type NativeLottieViewProps = {
+    source: Record<string, unknown>;
+    autoPlay?: boolean;
+    loop?: boolean;
+    style?: ViewStyle;
+};
+export declare function getNativeLottieView(): React.ComponentType<NativeLottieViewProps>;
+//# sourceMappingURL=loadNativeLottieView.d.ts.map

package/lib/typescript/src/components/LottiePlayer/loadWebLottieView.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CSSProperties } from 'react';
+/** Props we forward to the underlying web Lottie view. */
+export type WebLottieViewProps = {
+    animationData: Record<string, unknown>;
+    autoplay?: boolean;
+    loop?: boolean;
+    style?: CSSProperties;
+};
+export declare function getWebLottieView(): React.ComponentType<WebLottieViewProps>;
+//# sourceMappingURL=loadWebLottieView.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/PageHero/PageHero.d.ts

@@ -21,6 +21,23 @@ export type PageHeroProps = {
      * `modes` are automatically cascaded into this slot.
      */
     buttonSlot?: React.ReactNode;
+    /**
+     * Optional media element shown above the text block (eyebrow + headline).
+     *
+     * Intentionally typed as `React.ReactNode` so the consumer can bring any
+     * renderer they like — `<Image />`, `<IconCapsule />`, a Lottie player
+     * (`lottie-react-native` / `@lottiefiles/dotlottie-react`), an `<SvgXml />`
+     * from `react-native-svg`, a `<Video />` from `react-native-video`, a
+     * gradient view, or a custom illustration. The library deliberately does
+     * NOT wrap Lottie / video runtimes (they require native modules + pod
+     * autolinking on every consumer's app), so PageHero just allocates a
+     * token-sized container and lets the slot render whatever it wants.
+     *
+     * The slot is rendered inside a `width × height` box driven by
+     * `media/width` and `media/height` tokens (default 117×117). `modes` are
+     * automatically cascaded into the slot via `cloneChildrenWithModes`.
+     */
+    media?: React.ReactNode;
     /** Mode configuration for design-token theming. */
     modes?: Record<string, any>;
     /** Style overrides applied to the outer container. */
@@ -29,12 +46,14 @@ export type PageHeroProps = {
 };
 /**
  * PageHero displays a centered hero block typically used at the top of a page
- * or feature screen. It contains an eyebrow line, a large headline, an optional
- * supporting line (e.g. price/timeline), and an optional action button.
+ * or feature screen. It contains an optional media slot (illustration / image
+ * / Lottie / SVG / video — consumer's choice), an eyebrow line, a large
+ * headline, an optional supporting line (e.g. price / timeline), and an
+ * optional action button.
  *
  * All visual values are resolved from Figma design tokens via
- * `getVariableByName`. The button slot cascades the active `modes` to its
- * children through `cloneChildrenWithModes`.
+ * `getVariableByName`. Slots cascade the active `modes` to their children
+ * through `cloneChildrenWithModes`.
  *
  * @component
  * @example
@@ -45,9 +64,16 @@ export type PageHeroProps = {
  *   supportingText="₹999/year · ₹0 until 2027"
  *   buttonLabel="Renew for free"
  *   onButtonPress={() => navigate('Upgrade')}
+ *   media={
+ *     <Image
+ *       imageSource={require('./assets/upgrade.png')}
+ *       width={117}
+ *       height={117}
+ *     />
+ *   }
  * />
  * ```
  */
-declare function PageHero({ eyebrow, headline, supportingText, showSupportingText, buttonLabel, onButtonPress, showButton, buttonSlot, modes: propModes, style, testID, }: PageHeroProps): import("react/jsx-runtime").JSX.Element;
+declare function PageHero({ eyebrow, headline, supportingText, showSupportingText, buttonLabel, onButtonPress, showButton, buttonSlot, media, modes: propModes, style, testID, }: PageHeroProps): import("react/jsx-runtime").JSX.Element;
 export default PageHero;
 //# sourceMappingURL=PageHero.d.ts.map