jfs-components 0.0.72 → 0.0.74

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

@@ -0,0 +1,90 @@
+import React from 'react';
+import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { type ButtonProps } from '../Button/Button';
+type CoverageRingBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
+export type CoverageRingProps = CoverageRingBaseProps & {
+    /**
+     * Current count (numerator). Together with `total`, drives both the ring
+     * progress and the default `valueLabel` (`"{value} of {total}"`). Clamped
+     * to `[0, total]`.
+     */
+    value?: number;
+    /**
+     * Maximum count (denominator). Drives the ring fill ratio along with
+     * `value`. Must be greater than 0; a non-positive total collapses to 0%.
+     */
+    total?: number;
+    /**
+     * Small caption rendered above the value inside the ring (e.g. "Benefits
+     * availed"). Maps to the Figma `circularProgressBar/supportText/*` tokens.
+     */
+    supportText?: string;
+    /**
+     * Optional override for the formatted value rendered inside the ring.
+     * Defaults to `"{value} of {total}"` so the visual matches the Figma
+     * "Coverage Ring" reference.
+     */
+    valueLabel?: string;
+    /**
+     * Visible label of the default action button. Ignored when `action` is
+     * provided. Defaults to `"Learn more"` to match the Figma reference.
+     */
+    actionLabel?: string;
+    /** Press handler for the default action button. */
+    onActionPress?: () => void;
+    /**
+     * Forward extra props to the default action button (e.g. `disabled`,
+     * `accessibilityHint`, `icon`). Use this for tweaks; for a fully custom
+     * action node, pass it as `action` instead.
+     */
+    actionProps?: Partial<ButtonProps>;
+    /**
+     * Render-prop slot for the action area. When provided, takes precedence
+     * over `actionLabel`/`onActionPress`/`actionProps` and the default button
+     * is skipped entirely.
+     *
+     * Use `children` instead if you prefer a JSX-style slot — both are
+     * supported and produce identical output.
+     */
+    action?: React.ReactNode;
+    /**
+     * Alternative slot for the action area. Identical to `action`; provided
+     * for ergonomic JSX:
+     *
+     * ```tsx
+     * <CoverageRing value={4} total={7} supportText="Benefits availed">
+     *   <CustomCTA />
+     * </CoverageRing>
+     * ```
+     */
+    children?: React.ReactNode;
+    /** Design token modes forwarded to token lookups and slot children. */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Override the support-text style inside the ring. */
+    supportTextStyle?: StyleProp<TextStyle>;
+    /** Override the value-label style inside the ring. */
+    valueStyle?: StyleProp<TextStyle>;
+    /** Accessibility label for the entire component. */
+    accessibilityLabel?: string;
+};
+/**
+ * `CoverageRing` renders a single-purpose insight: how many items out of a
+ * total have been covered (e.g. "4 of 7 benefits availed"), paired with a
+ * call-to-action button below the ring.
+ *
+ * It composes the existing {@link CircularProgressBar} (in its `M` size so
+ * there is room for a caption + value inside the ring) and {@link Button}
+ * (in its `S`, Secondary brand variant) — both driven by the same design
+ * tokens used by the rest of the design system.
+ *
+ * The ring fill is derived from `value / total`, so the percentage, the
+ * displayed `"{value} of {total}"` label and the support caption stay in
+ * sync automatically. There is no separate `progress` prop.
+ *
+ * @component
+ */
+declare function CoverageRing({ value, total, supportText, valueLabel, actionLabel, onActionPress, actionProps, action, children, modes: propModes, style, supportTextStyle, valueStyle, accessibilityLabel, ...rest }: CoverageRingProps): import("react/jsx-runtime").JSX.Element;
+export default CoverageRing;
+//# sourceMappingURL=CoverageRing.d.ts.map

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

@@ -0,0 +1,117 @@
+import React from 'react';
+import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+/**
+ * Per-segment data definition for the data-driven `segments` prop.
+ *
+ * Each segment renders one arc on the donut ring. `value` controls the
+ * arc's angular share (its weight relative to the sum of all values).
+ * Use `modes` per segment to override the default `Appearance / DataViz`
+ * mode (the parent injects per-index defaults of `Senary`, `Primary`,
+ * `Secondary`, `Tertiary`, `Quaternary`, `Quinary`, then cycles).
+ */
+export type DonutChartSegmentData = {
+    /** Stable React key. */
+    key?: React.Key;
+    /** Segment's angular weight (relative to the sum of all segment values). */
+    value: number;
+    /** Hard-override the segment color. Bypasses `dataViz/bg` token resolution. */
+    color?: string;
+    /**
+     * Per-segment design token mode overrides. Merged on top of parent
+     * `modes` and the per-index `Appearance / DataViz` defaults.
+     */
+    modes?: Record<string, any>;
+    /** Per-segment accessibility label. */
+    accessibilityLabel?: string;
+};
+export type DonutChartProps = {
+    /**
+     * Data-driven segment list. Used when no `children` slot is provided.
+     * Defaults to six equal segments themed across the
+     * `Appearance / DataViz` palette.
+     */
+    segments?: DonutChartSegmentData[];
+    /**
+     * Optional center value text (large/bold). Pass `null`/`false` to hide.
+     * Accepts a string or any `ReactNode` for full control.
+     */
+    value?: React.ReactNode;
+    /**
+     * Optional center label text (smaller, beneath the value). Pass
+     * `null`/`false` to hide. Accepts a string or any `ReactNode`.
+     */
+    label?: React.ReactNode;
+    /**
+     * Slot for custom center content. When provided, it replaces the
+     * default `value`/`label` text wrap entirely.
+     */
+    children?: React.ReactNode;
+    /** Outer diameter in px. Defaults to 194 (matching the Figma reference). */
+    size?: number;
+    /**
+     * Ring stroke width in px. Defaults to 18% of `size` so the donut keeps
+     * the same visual proportions across sizes.
+     */
+    strokeWidth?: number;
+    /**
+     * Visual gap between adjacent segments expressed in degrees of arc.
+     * Defaults to 0 (segments touch). Use small values (1–4°) for
+     * separation when many segments are present.
+     */
+    gap?: number;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Override container styles. */
+    style?: StyleProp<ViewStyle>;
+    /** Override default value text styles. */
+    valueStyle?: StyleProp<TextStyle>;
+    /** Override default label text styles. */
+    labelStyle?: StyleProp<TextStyle>;
+    /** Accessibility label announced for the whole donut chart. */
+    accessibilityLabel?: string;
+};
+type DonutChartSegmentProps = {
+    /** Angular weight relative to the sum of sibling segment values. */
+    value: number;
+    /** Hard-override segment color (bypasses tokens). */
+    color?: string;
+    /**
+     * Design token modes for the segment. Merged with parent `modes` and
+     * the per-index `Appearance / DataViz` defaults.
+     */
+    modes?: Record<string, any>;
+    /** Per-segment accessibility label. */
+    accessibilityLabel?: string;
+};
+/**
+ * Inert helper used purely to author donut segments declaratively as
+ * `DonutChart.Segment` slot children. The parent reads its props and
+ * renders the actual SVG arcs — this component never renders anything by
+ * itself.
+ */
+declare function DonutChartSegment(_: DonutChartSegmentProps): any;
+/**
+ * `DonutChart` renders a circular ring split into categorical segments.
+ * It is the segmented counterpart of `CircularProgressBar`: there is **no
+ * track background** behind the segments — the colored ring *is* the
+ * data, and each slice is a sibling category rather than a directional or
+ * temporal value.
+ *
+ * The default 6-segment layout receives per-index `Appearance / DataViz`
+ * defaults (segment 1 → `Senary`, 2 → `Primary`, 3 → `Secondary`, 4 →
+ * `Tertiary`, 5 → `Quaternary`, 6 → `Quinary`) so the wheel reads as one
+ * concept split into six color-coded categories. Override `modes` per
+ * segment to remix appearances, or set `Emphasis / DataViz` on the
+ * parent `modes` to dim or brighten the whole wheel at once.
+ *
+ * @component
+ * @param {DonutChartProps} props
+ */
+declare function DonutChart({ segments, value, label, children, size, strokeWidth: strokeWidthProp, gap, modes: propModes, style, valueStyle, labelStyle, accessibilityLabel, }: DonutChartProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DonutChart {
+    var Segment: typeof DonutChartSegment;
+}
+export { DonutChartSegment };
+export type { DonutChartSegmentProps };
+export default DonutChart;
+//# sourceMappingURL=DonutChart.d.ts.map

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * One row of the `DonutChartSummary`. Each item drives BOTH a donut
+ * segment and the matching legend row, so the segment and indicator
+ * always share the same color by construction.
+ */
+export type DonutChartSummaryItem = {
+    /** Stable React key. Falls back to the item label / index. */
+    key?: React.Key;
+    /** The descriptive label rendered next to the indicator dot. */
+    label?: React.ReactNode;
+    /**
+     * The data point — drives the segment's angular share. Same
+     * semantics as `DonutChartSegmentData.value`. When the legend's
+     * right-side text is shown, the resolution order is:
+     * `displayValue` → `formatValue(value)` → hide.
+     */
+    value: number;
+    /**
+     * Optional override for the legend row's right-side text. Falls
+     * back to `formatValue(value)` if a parent-level `formatValue` is
+     * provided; otherwise the value slot is hidden (matches the Figma
+     * `data` boolean toggle on `MetricLegendItem`). Pass `null` or
+     * `false` to explicitly hide on a per-item basis.
+     */
+    displayValue?: React.ReactNode;
+    /**
+     * Hard-override the shared color used for both the donut segment
+     * and the legend indicator. Bypasses `dataViz/bg` token resolution.
+     */
+    color?: string;
+    /**
+     * Per-item design token mode overrides. Merged on top of parent
+     * `modes` and the per-index `Appearance / DataViz` defaults
+     * (`Senary`, `Primary`, `Secondary`, `Tertiary`, `Quaternary`,
+     * `Quinary`, then cycles).
+     */
+    modes?: Record<string, any>;
+    /** Accessibility label for the segment + legend row pairing. */
+    accessibilityLabel?: string;
+};
+export type DonutChartSummaryProps = {
+    /**
+     * Data-driven rows. Each entry produces a donut segment AND a
+     * matching `MetricLegendItem` — the count of legend rows is locked
+     * in step with the count of donut segments by construction.
+     */
+    items?: DonutChartSummaryItem[];
+    /**
+     * Optional formatter applied to each item's numeric `value` when
+     * the item does not provide an explicit `displayValue`. Useful for
+     * the common "format every weight the same way" case
+     * (e.g. `(v) => `${v}%``).
+     */
+    formatValue?: (value: number) => React.ReactNode;
+    /** Center value text inside the donut (large/bold). */
+    centerValue?: React.ReactNode;
+    /** Center label text inside the donut (smaller, beneath the value). */
+    centerLabel?: React.ReactNode;
+    /**
+     * Slot for fully-custom donut center content. When provided it
+     * replaces the default `centerValue`/`centerLabel` text wrap.
+     */
+    donutCenter?: React.ReactNode;
+    /** Outer donut diameter in px. Defaults to 194 (Figma reference). */
+    donutSize?: number;
+    /** Donut ring stroke width in px. Defaults to ~18% of `donutSize`. */
+    donutStrokeWidth?: number;
+    /**
+     * Visual gap between adjacent donut segments expressed in degrees
+     * of arc. Defaults to 0 (segments touch).
+     */
+    donutGap?: number;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Override outer container styles. */
+    style?: StyleProp<ViewStyle>;
+    /** Override the legend container styles. */
+    legendStyle?: StyleProp<ViewStyle>;
+    /** Accessibility label announced for the whole summary. */
+    accessibilityLabel?: string;
+};
+/**
+ * `DonutChartSummary` pairs a `DonutChart` with a vertical list of
+ * `MetricLegendItem` rows. The component takes a single `items` array,
+ * so the number of legend rows is locked in step with the number of
+ * donut segments by construction — every segment has exactly one
+ * legend row, and they share the same color through the same
+ * `Appearance / DataViz` cascade as the standalone `DonutChart`.
+ *
+ * The default 4-item layout receives per-index `Appearance / DataViz`
+ * defaults (item 1 → `Senary`, 2 → `Primary`, 3 → `Secondary`, 4 →
+ * `Tertiary`, then cycles). Override `modes` per item to remix, or set
+ * `Emphasis / DataViz` on the parent `modes` to dim or brighten the
+ * whole component at once.
+ *
+ * @component
+ * @param {DonutChartSummaryProps} props
+ */
+declare function DonutChartSummary({ items, formatValue, centerValue, centerLabel, donutCenter, donutSize, donutStrokeWidth, donutGap, modes: propModes, style, legendStyle, accessibilityLabel, }: DonutChartSummaryProps): import("react/jsx-runtime").JSX.Element;
+export default DonutChartSummary;
+//# sourceMappingURL=DonutChartSummary.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/LinearProgress/LinearProgress.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+export type LinearProgressProps = {
+    /** Progress value between 0 and 1. Values are clamped. */
+    value?: number;
+    /** Design token modes for theming */
+    modes?: Record<string, any>;
+    /** Override container styles (the track wrapper) */
+    style?: StyleProp<ViewStyle>;
+    /** Override the track styles */
+    trackStyle?: StyleProp<ViewStyle>;
+    /** Override the indicator styles */
+    indicatorStyle?: StyleProp<ViewStyle>;
+} & Omit<React.ComponentProps<typeof View>, 'style'>;
+declare const LinearProgress: ({ value, modes, style, trackStyle, indicatorStyle, ...rest }: LinearProgressProps) => import("react/jsx-runtime").JSX.Element;
+export default LinearProgress;
+//# sourceMappingURL=LinearProgress.d.ts.map

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

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