@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/typescript/module/components/Markdown/parse.d.ts

@@ -0,0 +1,58 @@
+/**
+ * A deliberately small CommonMark subset, parsed without a dependency.
+ *
+ * The scope is what our own content actually contains — release notes, help
+ * text, descriptions written by people in a web editor — not a spec-complete
+ * renderer. Nested lists, tables, footnotes, HTML blocks and reference links
+ * are out of scope on purpose: supporting them means a parser nobody here can
+ * maintain, and content that needs them is a sign it should not be markdown.
+ *
+ * Kept separate from the component so the grammar can be tested as data, with
+ * no rendering involved.
+ */
+export type InlineNode = {
+    type: 'text';
+    value: string;
+} | {
+    type: 'strong';
+    children: InlineNode[];
+} | {
+    type: 'em';
+    children: InlineNode[];
+} | {
+    type: 'code';
+    value: string;
+} | {
+    type: 'strike';
+    children: InlineNode[];
+} | {
+    type: 'link';
+    href: string;
+    children: InlineNode[];
+};
+export type BlockNode = {
+    type: 'heading';
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    children: InlineNode[];
+} | {
+    type: 'paragraph';
+    children: InlineNode[];
+} | {
+    type: 'listItem';
+    ordered: boolean;
+    index: number;
+    depth: number;
+    children: InlineNode[];
+} | {
+    type: 'quote';
+    children: InlineNode[];
+} | {
+    type: 'codeBlock';
+    value: string;
+    language?: string;
+} | {
+    type: 'rule';
+};
+export declare const parseInline: (input: string) => InlineNode[];
+export declare const parseMarkdown: (source: string) => BlockNode[];
+//# sourceMappingURL=parse.d.ts.map

package/lib/typescript/module/components/Modal/Modal.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils.js';
+export type ModalPresentation = 'centered' | 'bottom' | 'fullScreen';
+/**
+ * Grace period between `visible` flipping false and the native modal being
+ * safely gone. Unmounting the tree (navigation reset, auth flip) before this
+ * elapses races Android's ReactModalHostView dismiss and NPE-crashes.
+ */
+export declare const MODAL_DISMISS_GRACE_MS = 300;
+export interface ModalProps {
+    visible: boolean;
+    onRequestClose: () => void;
+    presentation?: ModalPresentation;
+    backdropOpacity?: number;
+    backdropPressClose?: boolean;
+    animationDuration?: number;
+    accessibilityLabel?: string;
+    hardwareBackPress?: boolean;
+    children: React.ReactNode;
+    contentStyle?: StyleProp<ViewStyle>;
+    backdropStyle?: StyleProp<ViewStyle>;
+    /**
+     * Optional ref to the View that triggered the modal. When the modal closes,
+     * accessibility focus is restored to that View so screen-reader users land
+     * back where they invoked the dialog instead of at the top of the screen.
+     * Opt-in: when undefined, focus behaviour is unchanged.
+     */
+    restoreFocusRef?: React.RefObject<RNView | null>;
+    /**
+     * Fired once after the modal closes, MODAL_DISMISS_GRACE_MS after `visible`
+     * flips false — the earliest point it is safe to unmount the surrounding
+     * tree (navigate away, flip auth state) without racing the native dismiss
+     * on Android. Sequence follow-up work (or a follow-up modal) from here.
+     */
+    onDismissed?: () => void;
+    /**
+     * Haptic feedback for interactions. Pass false to disable; pass a HapticType
+     * to override the default.
+     */
+    haptic?: HapticType | false;
+    testID?: string;
+}
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<RNView>>;
+export { Modal };
+export default Modal;
+//# sourceMappingURL=Modal.d.ts.map

package/lib/typescript/module/components/Modal/index.d.ts

@@ -0,0 +1,3 @@
+export type { ModalPresentation, ModalProps } from './Modal.js';
+export { default, MODAL_DISMISS_GRACE_MS, Modal } from './Modal.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/index.js';
+export type NumberInputSize = 'sm' | 'md' | 'lg';
+export type NumberInputVariant = 'inline' | 'horizontal' | 'stacked';
+export interface NumberInputRef {
+    focus: () => void;
+    blur: () => void;
+    clear: () => void;
+}
+export interface NumberInputProps {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    allowDecimal?: boolean;
+    precision?: number;
+    label?: string;
+    helperText?: string;
+    error?: string;
+    disabled?: boolean;
+    size?: NumberInputSize;
+    variant?: NumberInputVariant;
+    unit?: string;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    inputStyle?: StyleProp<TextStyle>;
+    buttonStyle?: StyleProp<ViewStyle>;
+    unitStyle?: StyleProp<TextStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    textInputProps?: Omit<TextInputProps, 'value' | 'onChangeText' | 'onBlur' | 'keyboardType' | 'editable'>;
+    testID?: string;
+}
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<NumberInputRef>>;
+export { NumberInput };
+export default NumberInput;
+//# sourceMappingURL=NumberInput.d.ts.map

package/lib/typescript/module/components/NumberInput/index.d.ts

@@ -0,0 +1,3 @@
+export type { NumberInputProps, NumberInputRef, NumberInputSize, NumberInputVariant } from './NumberInput.js';
+export { default, NumberInput } from './NumberInput.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/OTPInput/OTPInput.d.ts

@@ -0,0 +1,35 @@
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/index.js';
+export type OTPInputSize = 'sm' | 'md' | 'lg';
+export interface OTPInputRef {
+    focus: () => void;
+    blur: () => void;
+    clear: () => void;
+}
+export interface OTPInputProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    length?: number;
+    keyboardType?: 'number-pad' | 'default';
+    autoFocus?: boolean;
+    disabled?: boolean;
+    error?: boolean | string;
+    size?: OTPInputSize;
+    secure?: boolean;
+    /**
+     * Haptic feedback for interactions. Pass false to disable; pass a HapticType
+     * to override the default.
+     */
+    haptic?: HapticType | false;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    cellStyle?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+declare const OTPInput: import("react").ForwardRefExoticComponent<OTPInputProps & import("react").RefAttributes<OTPInputRef>>;
+export { OTPInput };
+export default OTPInput;
+//# sourceMappingURL=OTPInput.d.ts.map

package/lib/typescript/module/components/OTPInput/index.d.ts

@@ -0,0 +1,3 @@
+export type { OTPInputProps, OTPInputRef, OTPInputSize } from './OTPInput.js';
+export { default, OTPInput } from './OTPInput.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/OptionSheet/OptionSheet.d.ts

@@ -0,0 +1,107 @@
+/**
+ * OptionSheet — the shared bottom-sheet option picker.
+ *
+ * Internal primitive behind Select and InlineSelect: RN Modal-backed slide-up
+ * sheet with backdrop fade, grab handle, optional title, optional client-side
+ * search, the option list (icon + label + description, single dot / multi
+ * checkbox) and the multi-select Done footer. Owns the open/close animations
+ * and the search query; selection STATE stays with the caller — the sheet
+ * only reports `onSelect(option)` and asks `isSelected(value)`.
+ *
+ * Also the home of the canonical option types (`SelectValue`, `SelectOption`)
+ * and accessor signatures shared by every option-picking component. Select
+ * re-exports them so the public import path is unchanged.
+ */
+import React from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+export type SelectValue = string | number;
+export interface SelectOption {
+    label: string;
+    value: SelectValue;
+    description?: string;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+}
+/** A titled group of options; the sheet lists groups in order under a header row each. */
+export interface OptionSheetSection {
+    title: string;
+    options: ReadonlyArray<unknown>;
+}
+/** What `renderOption` is told about the row it draws. */
+export interface OptionSheetRowState {
+    selected: boolean;
+    disabled: boolean;
+}
+export interface OptionSheetProps {
+    open: boolean;
+    /** Requests close (backdrop tap, hardware back, multi Done). Caller flips `open`. */
+    onClose: () => void;
+    /** Sheet heading. Also the modal's a11y label fallback. */
+    title?: string;
+    options: ReadonlyArray<unknown>;
+    /**
+     * Group the options under header rows instead of listing `options` flat
+     * (`options` is still read for nothing but is kept required so every caller
+     * names its list once). Search filters inside each group and drops a group
+     * that empties. PhoneNumberInput uses this for "Popular" over "All countries".
+     */
+    sections?: ReadonlyArray<OptionSheetSection>;
+    /** Draw the header row for a section yourself; the default is the title in the section ink. */
+    renderSectionHeader?: (title: string) => React.ReactNode;
+    /**
+     * Replace the row's content (icon + label + description) with your own. The
+     * pressable row, its accessibility state and the selected dot / checkbox
+     * stay, so a custom row is still a button to a screen reader.
+     */
+    renderOption?: (option: unknown, state: OptionSheetRowState) => React.ReactNode;
+    /**
+     * A rail of letters down the right edge; a tap jumps the list to the first
+     * option whose label starts with that letter. For a long list sorted by
+     * label (a country picker); with `sections` it indexes the LAST group, the
+     * full list, so a pinned group above does not catch the jump. Hidden while
+     * a search query is typed. Default false.
+     */
+    alphabetIndex?: boolean;
+    /** Placeholder of the search box. Default 'Search…'. */
+    searchPlaceholder?: string;
+    /** Copy shown when nothing matches. Default 'No options'. */
+    emptyText?: string;
+    labelOf: (option: unknown) => string;
+    /**
+     * Named `getValue`, not `valueOf`. Every object literal inherits
+     * `Object.prototype.valueOf`, so a prop of that name makes even
+     * `{ open: false }` fail to satisfy `Partial<OptionSheetProps>`, which poisons
+     * any wrapper or props-merge over this component. Its siblings labelOf,
+     * disabledOf and iconOf are safe; only this one collides.
+     */
+    getValue: (option: unknown) => SelectValue;
+    disabledOf: (option: unknown) => boolean;
+    /**
+     * A row that destroys something (ProfilePicker's "Remove photo"): its label
+     * is painted in `colors.error`. The row itself, its icon and its description
+     * are untouched, so the caller passes a matching icon. Default: none.
+     */
+    destructiveOf?: (option: unknown) => boolean;
+    descriptionOf: (option: unknown) => string | undefined;
+    iconOf: (option: unknown) => React.ReactNode;
+    isSelected: (value: SelectValue) => boolean;
+    /** Tap on an enabled option. Caller updates state and (for single-select) closes. */
+    onSelect: (option: unknown) => void;
+    /** Multi mode: checkboxes + Done footer instead of the selected dot. */
+    multi?: boolean;
+    searchable?: boolean;
+    /** Caret/selection colour of the search input — callers mirror their focus colour. Default: `colors.border.focus`. */
+    searchSelectionColor?: string;
+    accessibilityLabel?: string;
+    /** Style for every option row container (padding, background, etc.). Wins over the row defaults. */
+    optionStyle?: StyleProp<ViewStyle>;
+    /** Extra style merged onto the selected option row — wins over `optionStyle` and the default selected fill. */
+    selectedOptionStyle?: StyleProp<ViewStyle>;
+    /** Style for every option's label text. Wins over the label defaults. */
+    optionTextStyle?: StyleProp<TextStyle>;
+    /** Extra style merged onto the selected option's label text — wins over `optionTextStyle` and the default selected colour. */
+    selectedOptionTextStyle?: StyleProp<TextStyle>;
+}
+export declare const OptionSheet: React.FC<OptionSheetProps>;
+export default OptionSheet;
+//# sourceMappingURL=OptionSheet.d.ts.map

package/lib/typescript/module/components/PhoneNumberInput/PhoneNumberInput.d.ts

@@ -0,0 +1,178 @@
+import type { PhoneValidationKind } from '@webority/mobile-core';
+import type { ReactNode } from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/index.js';
+import type { FieldBaseSize, FieldBaseVariant } from '../FieldBase/index.js';
+/** How the label sits: static above the box, or floating up from inside it. */
+export type PhoneNumberInputLabelMode = 'top' | 'float';
+export interface CallingCode {
+    /** ISO 3166-1 alpha-2, used as the option's identity and as the numbering plan to validate against. */
+    iso: string;
+    /** Dial prefix WITHOUT the plus, e.g. '91'. */
+    code: string;
+    label: string;
+}
+/**
+ * A deliberately short default list: the countries the fleet actually ships to.
+ * Consumers needing the full set build it from `getPhoneCountries()` and
+ * `PHONE_COUNTRY_NAMES` in mobile-core (see the showcase); shipping 245 entries
+ * by default is weight almost nobody uses.
+ */
+export declare const DEFAULT_CALLING_CODES: ReadonlyArray<CallingCode>;
+export interface PhoneNumberValue {
+    /** Dial prefix without the plus, e.g. '91'. */
+    callingCode: string;
+    /** Digits only, no prefix. */
+    nationalNumber: string;
+    /** ISO of the selected country. */
+    iso: string;
+}
+/**
+ * What counts as a valid number. `'any'` is the country's numbering plan as
+ * libphonenumber knows it (a fixed line passes). `'mobile'` also rejects fixed
+ * lines: in India a 10-digit number starting with 1 to 5 is a real landline
+ * and no OTP will ever reach it. `false` turns validation off; `isValid()` then
+ * only asks whether a number was typed.
+ */
+export type PhoneNumberValidation = PhoneValidationKind | false;
+/** What a `ref` on the field can do, beyond the TextInput basics. */
+export interface PhoneNumberInputRef {
+    focus: () => void;
+    blur: () => void;
+    /** Clears the national number; the country stays. */
+    clear: () => void;
+    isFocused: () => boolean;
+    /** The structured value as the field holds it. */
+    getValue: () => PhoneNumberValue;
+    /** `+<code><national>`, digits only. */
+    getE164: () => string;
+    /** The national number grouped the way the country writes it (`'98765 43210'`). */
+    getFormatted: () => string;
+    /** Validity under the `validation` prop. */
+    isValid: () => boolean;
+    /** The selected country entry, when the current ISO is in `countries`. */
+    getCountry: () => CallingCode | undefined;
+}
+export interface PhoneNumberInputProps {
+    value?: PhoneNumberValue;
+    /**
+     * Starting value for uncontrolled use. A structured value, or a string: an
+     * E.164 number (`'+919876543210'`) resolves its own country, a bare national
+     * number resolves through `defaultIso`.
+     */
+    defaultValue?: PhoneNumberValue | string;
+    onChange?: (value: PhoneNumberValue) => void;
+    /** Fires with `+<code><national>` the moment the number becomes valid under `validation`. */
+    onComplete?: (e164: string) => void;
+    /** Fires whenever validity flips, after the first render. Forms read this instead of a ref. */
+    onValidityChange?: (valid: boolean) => void;
+    countries?: ReadonlyArray<CallingCode>;
+    /**
+     * ISOs to list first under their own heading, in this order, with the full
+     * list below under `allCountriesTitle`. A popular country appears in both
+     * groups, the way a contacts app pins favourites.
+     */
+    popularCountries?: ReadonlyArray<string>;
+    /** Heading of the popular group. Default 'Popular'. */
+    popularCountriesTitle?: string;
+    /** Heading of the full list when `popularCountries` is set. Default 'All countries'. */
+    allCountriesTitle?: string;
+    /** ISOs to leave out of the picker; a pasted number for one is taken as digits. */
+    hiddenCountries?: ReadonlyArray<string>;
+    /** Show the country's flag emoji before the code and in the picker rows. Default true. */
+    showFlag?: boolean;
+    /** Draw the flag yourself (an SVG, an image) in place of the emoji; used in the trigger and the rows. */
+    renderFlag?: (country: CallingCode) => ReactNode;
+    /** Draw a picker row's content yourself; the row stays a button with its selected dot. */
+    renderCountry?: (country: CallingCode, state: {
+        selected: boolean;
+    }) => ReactNode;
+    /** Placeholder of the picker's search box. Default 'Search…'. */
+    countrySearchPlaceholder?: string;
+    /**
+     * A to Z rail down the picker's right edge; a tap jumps to the first country
+     * starting with that letter (in the full list when `popularCountries` pins a
+     * group above it). Default: on once the list has more than 20 entries, since
+     * the 8-country default is a glance, not a hunt.
+     */
+    showAlphabetIndex?: boolean;
+    /**
+     * ISO to start on when no `value` / `defaultValue` names one. Default 'IN'.
+     * Read at mount only, like every default prop: a controlled `value`
+     * overrides it, and changing it later does nothing until the field remounts.
+     */
+    defaultIso?: string;
+    /**
+     * Which numbers count as valid, by the country's numbering plan. `'any'`
+     * (default) accepts fixed lines too; `'mobile'` is for an OTP or WhatsApp
+     * field; `false` turns validation off.
+     */
+    validation?: PhoneNumberValidation;
+    /**
+     * Hard stop on national digits, below the country's own. The field already
+     * stops where a subscriber's number ends (10 for India, 9 for the UAE; under
+     * `validation="mobile"` the mobile length alone), and the keyboard refuses
+     * the digit after it rather than the field trimming it later. Set this only
+     * to stop earlier still.
+     */
+    maxLength?: number;
+    /** Group the digits as the country writes them while typing. Default true. The value stays digits. */
+    formatAsYouType?: boolean;
+    /** Keeps the country fixed: the code still shows, the picker does not open, the chevron is hidden. */
+    countryLocked?: boolean;
+    label?: string;
+    /**
+     * How the label sits, the same two modes as Input. Default `'top'`, the
+     * field family's static label above the box; `'float'` rests it over the
+     * number (past the country code) and rises it to the box's top edge on
+     * focus or once a number is typed.
+     */
+    labelMode?: PhoneNumberInputLabelMode;
+    labelStyle?: StyleProp<TextStyle>;
+    placeholder?: string;
+    helperText?: string;
+    /** The app's own error text. Always wins over the built-in invalid-number message. */
+    error?: string;
+    /**
+     * Text under the field once the typed number is not a real number for the
+     * country under `validation`. Shown after the user leaves the field with
+     * digits in it, or as soon as the number reaches the country's full length
+     * while still invalid; never while a short number is still being typed, and
+     * a cleared field earns that grace again. Default `'Enter a valid mobile
+     * number'` under `validation="mobile"`, else `'Enter a valid number'`;
+     * a string replaces the text, `false` turns the message off. Nothing shows
+     * under `validation={false}`, and `error` always wins.
+     */
+    invalidMessage?: string | false;
+    required?: boolean;
+    disabled?: boolean;
+    size?: FieldBaseSize;
+    variant?: FieldBaseVariant;
+    /** Per-instance corner radius. Wins over `theme.components.phoneNumberInput.borderRadius` and the field default. */
+    borderRadius?: number;
+    countrySheetTitle?: string;
+    haptic?: HapticType | false;
+    /** Screen-reader name for the number field. Default: the label, else the placeholder. */
+    accessibilityLabel?: string;
+    /** Screen-reader name for the country button. Default: `Country code, currently +<code>`. */
+    countryAccessibilityLabel?: string;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/** `+<code><national>`, presentational only; the value stays structured. */
+export declare const formatE164: (value: PhoneNumberValue) => string;
+/**
+ * Country calling code + national number, kept as a structured value rather than
+ * one string. A single free-text phone field is where "+91", "0091", "091" and
+ * "9876543210" all arrive for the same number and the backend has to guess.
+ *
+ * Validation, formatting and the digit ceiling all come from the country's
+ * numbering plan via mobile-core (libphonenumber), not from a length table: a
+ * 9-digit Indian number is incomplete, a 10-digit one starting with 5 is a
+ * landline, and `validation="mobile"` tells the two apart.
+ */
+export declare const PhoneNumberInput: import("react").ForwardRefExoticComponent<PhoneNumberInputProps & import("react").RefAttributes<PhoneNumberInputRef>>;
+export default PhoneNumberInput;
+//# sourceMappingURL=PhoneNumberInput.d.ts.map

package/lib/typescript/module/components/PhoneNumberInput/index.d.ts

@@ -0,0 +1,3 @@
+export type { CallingCode, PhoneNumberInputLabelMode, PhoneNumberInputProps, PhoneNumberInputRef, PhoneNumberValidation, PhoneNumberValue } from './PhoneNumberInput.js';
+export { DEFAULT_CALLING_CODES, default, formatE164, PhoneNumberInput } from './PhoneNumberInput.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/PickerTrigger/PickerTrigger.d.ts

@@ -0,0 +1,60 @@
+/**
+ * PickerTrigger — the tappable input field that opens a modal picker.
+ *
+ * Standalone read-only field built on FieldBase, used by DatePicker,
+ * TimePicker and DateRangePicker (and any consumer-built picker) to render
+ * the closed-state row that matches Input / Select pixel-for-pixel.
+ *
+ * The component is purely visual + interactive — it does not own picker
+ * state. Consumers either:
+ *   - Use the built-in trigger mode on a picker, which composes this
+ *     internally and manages its own open/close.
+ *   - Render PickerTrigger themselves alongside a controlled picker.
+ */
+import React from 'react';
+import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { FieldBaseSize, FieldBaseVariant } from '../FieldBase/index.js';
+export type PickerTriggerSize = FieldBaseSize;
+export type PickerTriggerVariant = FieldBaseVariant;
+export interface PickerTriggerProps {
+    /** The currently selected value rendered as the trigger's primary text. */
+    value?: string;
+    /** Shown when `value` is empty. Falls back to "Select…". */
+    placeholder?: string;
+    /** Static label rendered above the field. */
+    label?: string;
+    /** Helper text shown below the field. Hidden when `error` is set. */
+    helperText?: string;
+    /** Error message shown below the field (and red-borders the field). */
+    error?: string;
+    /**
+     * Appends the required marker to the label. Marker text + colour come from
+     * `theme.components.field.{requiredMarker,requiredMarkerColor}` (default
+     * `'*'` in `colors.error`).
+     */
+    required?: boolean;
+    /** Tap handler — typically opens the modal picker. */
+    onPress: () => void;
+    /** Render a clear (×) affordance when `value` is non-empty. */
+    clearable?: boolean;
+    /** Called when the clear affordance is pressed. */
+    onClear?: () => void;
+    /** Leading icon slot (e.g. calendar / clock). */
+    leadingIcon?: React.ReactNode;
+    /** Trailing slot — defaults to a chevron when unset. Pass `null` to suppress. */
+    trailing?: React.ReactNode;
+    disabled?: boolean;
+    size?: PickerTriggerSize;
+    variant?: PickerTriggerVariant;
+    style?: StyleProp<ViewStyle>;
+    triggerStyle?: StyleProp<ViewStyle>;
+    valueStyle?: StyleProp<TextStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    messageStyle?: StyleProp<TextStyle>;
+    accessibilityLabel?: string;
+    testID?: string;
+}
+declare const PickerTrigger: React.ForwardRefExoticComponent<PickerTriggerProps & React.RefAttributes<RNView>>;
+export { PickerTrigger };
+export default PickerTrigger;
+//# sourceMappingURL=PickerTrigger.d.ts.map

package/lib/typescript/module/components/PickerTrigger/index.d.ts

@@ -0,0 +1,3 @@
+export type { PickerTriggerProps, PickerTriggerSize, PickerTriggerVariant } from './PickerTrigger.js';
+export { default, PickerTrigger } from './PickerTrigger.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/ProfileCompletion/ProfileCompletion.d.ts

@@ -0,0 +1,84 @@
+/**
+ * ProfileCompletion: the profile header that shows how complete a profile
+ * is. The avatar sits inside a ProgressRing on the left; title, subtitle
+ * and description stack on the right, with an optional trailing slot (an
+ * Edit link). The form itself stays in the app: pass `progress` as a
+ * percentage, usually `useFormCompletion(form.values, fields).percent`, and
+ * the ring sweeps to it.
+ *
+ * No card and no radius of its own: the app wraps it in a Card when the
+ * design wants one.
+ */
+import type React from 'react';
+import type { ImageSourcePropType, View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { AvatarImageProps, AvatarTone } from '../Avatar/index.js';
+import type { ProgressRingTone } from '../ProgressRing/index.js';
+/** The Avatar's own tone set; kept under this name for the component's public surface. */
+export type ProfileCompletionAvatarTone = AvatarTone;
+/**
+ * How the ring is coloured. `'banded'` changes colour by thirds of progress
+ * (red, amber, green); `'single'` keeps one colour at every progress.
+ */
+export type ProfileCompletionRingVariant = 'banded' | 'single';
+export interface ProfileCompletionProps {
+    /** Percentage of the profile filled in, 0 to 100. Clamped; `NaN` reads as 0. */
+    progress: number;
+    /** The profile's name. */
+    title: string;
+    /** A second line under the title: a type, a role, a tenure. Drawn small and uppercase. */
+    subtitle?: string;
+    /** A sentence under the subtitle. */
+    description?: string;
+    /** Avatar image; falls back to the title's initials. */
+    source?: ImageSourcePropType;
+    /** Custom image renderer, the Avatar's own `ImageComponent` contract. */
+    ImageComponent?: React.ComponentType<AvatarImageProps>;
+    /** Avatar diameter in pixels. Default `56`. The ring wraps it with `ringGap` of air. */
+    size?: number;
+    /**
+     * Colour scheme of the initials circle: a soft tinted fill with the tone's
+     * ink, the same recipe as the soft Button. `'neutral'` (default) is the
+     * quiet grey on primary text, so the ring carries the colour. The
+     * Avatar's per-name palette colour is not used here.
+     */
+    avatarTone?: ProfileCompletionAvatarTone;
+    /** Fill behind the initials; wins over `avatarTone`. */
+    avatarBackgroundColor?: string;
+    /** Colour of the initials; wins over `avatarTone`. */
+    avatarColor?: string;
+    /** Ring stroke width. Default `theme.components.progressRing.strokeWidth`, then `3`. */
+    ringWidth?: number;
+    /** Air between the avatar's edge and the ring's inner edge. Default `1`. */
+    ringGap?: number;
+    /**
+     * `'banded'` (default) colours the ring by progress: `error` below a
+     * third, `warning` to two thirds, `success` from there
+     * (`theme.components.progressRing.colorStops`). `'single'` draws it in one
+     * colour, `tone` (default `'primary'`), at every progress.
+     */
+    ringVariant?: ProfileCompletionRingVariant;
+    /** A fixed ring colour; also turns the bands off. Default `'primary'` in the single variant. */
+    tone?: ProgressRingTone;
+    /** Explicit ring colour; wins over `tone` and the progress bands. */
+    ringColor?: string;
+    /** Sweep the ring to a new progress. Default `true`. */
+    animated?: boolean;
+    /**
+     * At 100%, a round tick badge on the ring's bottom right, in the ring's own
+     * colour: green in the banded variant, `tone` or `ringColor` otherwise.
+     * Default `true`; `false` leaves the full ring on its own.
+     */
+    showCompleteBadge?: boolean;
+    /** Content at the right edge: an Edit link, a percent badge. Stays its own accessibility element. */
+    trailing?: React.ReactNode;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    titleStyle?: StyleProp<TextStyle>;
+    subtitleStyle?: StyleProp<TextStyle>;
+    descriptionStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+declare const ProfileCompletion: React.ForwardRefExoticComponent<ProfileCompletionProps & React.RefAttributes<RNView>>;
+export { ProfileCompletion };
+export default ProfileCompletion;
+//# sourceMappingURL=ProfileCompletion.d.ts.map

package/lib/typescript/module/components/ProfileCompletion/index.d.ts

@@ -0,0 +1,3 @@
+export type { ProfileCompletionAvatarTone, ProfileCompletionProps, ProfileCompletionRingVariant } from './ProfileCompletion.js';
+export { default, ProfileCompletion } from './ProfileCompletion.js';
+//# sourceMappingURL=index.d.ts.map