@webority/mobile-ui 0.106.0 → 0.107.0

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

@@ -1,7 +1,12 @@
 import type React from "react";
-import type { View as RNView, StyleProp, ViewStyle } from "react-native";
+import type { LayoutRectangle, View as RNView, StyleProp, ViewStyle } from "react-native";
 import type { HapticType } from "../../utils/hapticUtils.js";
-export type ModalPresentation = "centered" | "bottom" | "fullScreen";
+import type { PlacementAlign, PlacementPreference } from "../../utils/placement.js";
+export type ModalPresentation = "centered" | "bottom" | "fullScreen" | "anchored";
+export interface ModalLabels {
+    close: string;
+}
+export declare const DEFAULT_MODAL_LABELS: Readonly<ModalLabels>;
 /**
  * Grace period between `visible` flipping false and the native modal being
  * safely gone. Unmounting the tree (navigation reset, auth flip) before this
@@ -10,7 +15,7 @@ export type ModalPresentation = "centered" | "bottom" | "fullScreen";
 export declare const MODAL_DISMISS_GRACE_MS = 300;
 export interface ModalProps {
     visible: boolean;
-    onRequestClose: () => void;
+    onClose: () => void;
     presentation?: ModalPresentation;
     backdropOpacity?: number;
     backdropPressClose?: boolean;
@@ -45,6 +50,14 @@ export interface ModalProps {
      * to override the default.
      */
     haptic?: HapticType | false;
+    /** Chrome copy, merged over DEFAULT_MODAL_LABELS. */
+    labels?: Partial<ModalLabels>;
+    /** Window-coordinate rectangle the anchored presentation sits against. Required for "anchored". */
+    anchor?: LayoutRectangle;
+    /** Which side of the anchor the anchored presentation prefers. Default "auto". */
+    placement?: PlacementPreference;
+    /** Horizontal alignment of the anchored presentation against the anchor. Default "center". */
+    align?: PlacementAlign;
     testID?: string;
 }
 declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<RNView>>;

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

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

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

@@ -1,8 +1,15 @@
 import React from "react";
 import type { StyleProp, TextInputProps, TextStyle, ViewStyle } from "react-native";
+import type { Size } from "../../types/vocabulary.js";
 import type { HapticType } from "../../utils/index.js";
-export type NumberInputSize = "sm" | "md" | "lg";
+export type NumberInputSize = Extract<Size, "sm" | "md" | "lg">;
 export type NumberInputVariant = "inline" | "horizontal" | "stacked";
+export interface NumberInputLabels {
+    decrease: string;
+    increase: string;
+    input: string;
+}
+export declare const DEFAULT_NUMBER_INPUT_LABELS: Readonly<NumberInputLabels>;
 export interface NumberInputRef {
     focus: () => void;
     blur: () => void;
@@ -37,6 +44,7 @@ export interface NumberInputProps {
     unit?: string;
     /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
     haptic?: HapticType | false;
+    labels?: Partial<NumberInputLabels>;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;

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

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

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

@@ -1,7 +1,12 @@
 import type { ReactNode } from "react";
 import type { FocusEvent, StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { Size } from "../../types/vocabulary.js";
 import type { HapticType } from "../../utils/index.js";
-export type OTPInputSize = "sm" | "md" | "lg";
+export type OTPInputSize = Extract<Size, "sm" | "md" | "lg">;
+export interface OTPInputLabels {
+    field: (length: number) => string;
+}
+export declare const DEFAULT_OTP_INPUT_LABELS: Readonly<OTPInputLabels>;
 export interface OTPInputRef {
     focus: () => void;
     blur: () => void;
@@ -33,6 +38,7 @@ export interface OTPInputProps {
      * Haptic feedback for interactions. Off unless a HapticType is passed.
      */
     haptic?: HapticType | false;
+    labels?: Partial<OTPInputLabels>;
     /** Called when any cell takes focus. */
     onFocus?: (e: FocusEvent) => void;
     accessibilityLabel?: string;

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

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

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

@@ -9,13 +9,16 @@ export interface OnboardingPage {
     body: string;
 }
 export interface OnboardingPagerLabels {
-    skip?: string;
-    next?: string;
-    /** Spoken before the title of each page. Default `Step 2 of 3`. */
-    step?: (position: number, total: number) => string;
-    /** Names the page control for a screen reader. Default `Page`. */
-    pageControl?: string;
+    skip: string;
+    next: string;
+    /** Title of the final button. */
+    done: string;
+    /** Spoken before the title of each page. */
+    step: (position: number, total: number) => string;
+    /** Names the page control for a screen reader. */
+    pageControl: string;
 }
+export declare const DEFAULT_ONBOARDING_PAGER_LABELS: Readonly<OnboardingPagerLabels>;
 export interface OnboardingPagerProps {
     /** Three or four is the sweet spot; more than six are not shown. */
     pages: OnboardingPage[];
@@ -23,9 +26,7 @@ export interface OnboardingPagerProps {
     onDone: () => void;
     /** Skip was pressed, on any page. The app records that the intro was seen. */
     onSkip: () => void;
-    /** Title of the final button. Default `Get started`. */
-    doneLabel?: string;
-    labels?: OnboardingPagerLabels;
+    labels?: Partial<OnboardingPagerLabels>;
     /**
      * Pads the top and bottom by the device safe-area insets. Pass false when the pager sits
      * inside a screen that already handles them. Default true.

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

@@ -1,3 +1,3 @@
 export type { OnboardingPage, OnboardingPagerLabels, OnboardingPagerProps, } from "./OnboardingPager.js";
-export { default, OnboardingPager } from "./OnboardingPager.js";
+export { DEFAULT_ONBOARDING_PAGER_LABELS, default, OnboardingPager } from "./OnboardingPager.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -2,13 +2,13 @@
  * OptionSheet — the shared bottom-sheet option picker.
  *
  * The picker behind Select and InlineSelect, exported so an app can open the
- * same sheet from its own trigger: 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 or tick
- * icon / 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)`.
+ * same sheet from its own trigger: a slide-up sheet built on the library
+ * Modal's bottom presentation, with grab handle, optional title, optional
+ * client-side search, the option list (icon + label + description, single dot
+ * or tick icon / multi checkbox) and the multi-select Done footer. The Modal
+ * owns the open/close animations, the scrim and the dismissal; selection STATE
+ * stays with the caller; the sheet marks the rows of `value` and reports every
+ * tap on an enabled row through `onChange(value, option)`.
  *
  * Also the home of the canonical option types (`SelectValue`, `SelectOption`)
  * and accessor signatures shared by every option-picking component. Select
@@ -16,6 +16,7 @@
  */
 import type React from "react";
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { HapticType } from "../../utils/hapticUtils.js";
 export type SelectValue = string | number;
 export interface SelectOption {
     label: string;
@@ -25,38 +26,51 @@ export interface SelectOption {
     icon?: React.ReactNode;
 }
 /** A titled group of options; the sheet lists groups in order under a header row each. */
-export interface OptionSheetSection {
+export interface OptionSheetSection<T = SelectOption> {
     title: string;
-    options: ReadonlyArray<unknown>;
+    options: ReadonlyArray<T>;
 }
-/** What `renderOption` is told about the row it draws. */
-export interface OptionSheetRowState {
+/** What `renderOption` is told about the row it draws. `index` counts list rows, section headers included. */
+export interface OptionRenderState<T> {
+    option: T;
     selected: boolean;
     disabled: boolean;
+    index: number;
 }
-export interface OptionSheetProps {
-    open: boolean;
-    /** Requests close (backdrop tap, hardware back, multi Done). Caller flips `open`. */
+export interface OptionSheetLabels {
+    searchPlaceholder: string;
+    empty: string;
+    done: string;
+    closePicker: string;
+    fallbackName: string;
+    searchOptions: string;
+    clearSearch: string;
+    jumpToLetter: string;
+    jumpTo: (letter: string) => string;
+}
+export declare const DEFAULT_OPTION_SHEET_LABELS: Readonly<OptionSheetLabels>;
+export interface OptionSheetProps<T = SelectOption> {
+    visible: boolean;
+    /** Requests close (backdrop tap, hardware back, multi Done). Caller flips `visible`. */
     onClose: () => void;
     /**
-     * Called once after a close has finished: the exit animation is over and the
-     * native Modal is gone (on iOS, once its window has been dismissed). Present
-     * anything native (an image picker, the share sheet) from here; presented
-     * earlier, iOS attaches it to the closing window and dismisses it with it.
+     * Called once, after the close has finished: the Modal's exit is over and it
+     * is about to unmount (`MODAL_DISMISS_GRACE_MS` after `visible` turns false).
+     * Present anything native (an image picker, the share sheet) from here.
      */
     onAfterClose?: () => void;
-    /** Called with `true` when `open` turns on and `false` when it turns off, not again while it stays the same. */
-    onOpenChange?: (open: boolean) => void;
+    /** Called with `true` when `visible` turns on and `false` when it turns off, not again while it stays the same. */
+    onVisibleChange?: (visible: boolean) => void;
     /** Sheet heading. Also the modal's a11y label fallback. */
     title?: string;
-    options: ReadonlyArray<unknown>;
+    options: ReadonlyArray<T>;
     /**
      * 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>;
+    sections?: ReadonlyArray<OptionSheetSection<T>>;
     /** Draw the header row for a section yourself; the default is the title in the section ink. */
     renderSectionHeader?: (title: string) => React.ReactNode;
     /**
@@ -64,7 +78,7 @@ export interface OptionSheetProps {
      * pressable row, its accessibility state and the selected mark / checkbox
      * stay, so a custom row is still a button to a screen reader.
      */
-    renderOption?: (option: unknown, state: OptionSheetRowState) => React.ReactNode;
+    renderOption?: (state: OptionRenderState<T>) => 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
@@ -73,31 +87,28 @@ export interface OptionSheetProps {
      * 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;
+    /** Copy of the sheet: the search placeholder, the empty list text, the Done button and the accessibility names. */
+    labels?: Partial<OptionSheetLabels>;
+    /** Default `(o) => (o as SelectOption).label`. */
+    getOptionLabel?: (option: T) => string;
+    /** Default `(o) => (o as SelectOption).value`. */
+    getOptionValue?: (option: T) => SelectValue;
+    /** Default `(o) => (o as SelectOption).description`. */
+    getOptionDescription?: (option: T) => string | undefined;
+    /** Default `(o) => (o as SelectOption).disabled === true`. */
+    isOptionDisabled?: (option: T) => boolean;
+    /** Default `(o) => (o as SelectOption).icon`. */
+    getOptionIcon?: (option: T) => React.ReactNode;
     /**
      * A row that destroys something (ProfilePicker's "Remove photo"): its label
      * is painted in `colors.danger`. 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;
+    destructiveOf?: (option: T) => boolean;
+    /** The selected value, or the selected values in multi mode. Marks those rows. */
+    value?: SelectValue | ReadonlyArray<SelectValue>;
+    /** Tap on an enabled option, with its value and option. Caller updates state and (for single-select) closes. */
+    onChange: (value: SelectValue, option: T) => void;
     /** Multi mode: checkboxes + Done footer instead of the selected dot. */
     multi?: boolean;
     searchable?: boolean;
@@ -112,9 +123,14 @@ export interface OptionSheetProps {
     optionTextStyle?: StyleProp<TextStyle>;
     /** Extra style merged onto the selected option's label text — wins over `optionTextStyle` and the default selected colour. */
     selectedOptionTextStyle?: StyleProp<TextStyle>;
+    /** The haptic for the sheet's own open and dismiss; false turns it off. Default: the Modal's default. */
+    haptic?: HapticType | false;
     /** Test selector on the sheet panel. */
     testID?: string;
 }
-export declare const OptionSheet: React.FC<OptionSheetProps>;
+export declare function OptionSheet<T = SelectOption>(props: OptionSheetProps<T>): React.ReactElement;
+export declare namespace OptionSheet {
+    var displayName: string;
+}
 export default OptionSheet;
 //# sourceMappingURL=OptionSheet.d.ts.map

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

@@ -1,3 +1,3 @@
-export type { OptionSheetProps, OptionSheetRowState, OptionSheetSection, } from "./OptionSheet.js";
-export { default, OptionSheet } from "./OptionSheet.js";
+export type { OptionRenderState, OptionSheetLabels, OptionSheetProps, OptionSheetSection, } from "./OptionSheet.js";
+export { DEFAULT_OPTION_SHEET_LABELS, default, OptionSheet } from "./OptionSheet.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,15 @@
+import type { PagedListPaging } from "@webority/mobile-core/query";
+import type React from "react";
+export interface PagedListFooterLabels {
+    loadingMore: string;
+    retry: string;
+    failed: string;
+}
+export declare const DEFAULT_PAGED_LIST_FOOTER_LABELS: Readonly<PagedListFooterLabels>;
+export interface PagedListFooterProps {
+    paging: PagedListPaging;
+    labels?: Partial<PagedListFooterLabels>;
+    testID?: string;
+}
+export declare function PagedListFooter({ paging, labels: labelOverrides, testID }: PagedListFooterProps): React.ReactElement | null;
+//# sourceMappingURL=PagedListFooter.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { PagedListFooterLabels, PagedListFooterProps } from "./PagedListFooter.js";
+export { DEFAULT_PAGED_LIST_FOOTER_LABELS, PagedListFooter } from "./PagedListFooter.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -8,6 +8,17 @@ export interface PermissionPromptFallback {
     label: string;
     onPress: () => void;
 }
+export interface PermissionPromptLabels {
+    proceed: string;
+    cancel: string;
+    openSettings: string;
+    /** Whole record: a caller overriding `access` passes every kind. */
+    access: Readonly<Record<PermissionKind, string>>;
+    notAvailable: (access: string) => string;
+    offWithSettings: (access: string) => string;
+    off: (access: string) => string;
+}
+export declare const DEFAULT_PERMISSION_PROMPT_LABELS: Readonly<PermissionPromptLabels>;
 export interface PermissionPromptProps {
     kind: PermissionKind;
     /** What the feature is ("Scan a receipt"). Read first by a screen reader. */
@@ -22,6 +33,7 @@ export interface PermissionPromptProps {
     fallback?: PermissionPromptFallback;
     /** Haptic on each button press. Default `'selection'`. */
     haptic?: HapticType | false;
+    labels?: Partial<PermissionPromptLabels>;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }

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

@@ -1,5 +1,5 @@
-export type { PermissionPromptFallback, PermissionPromptProps } from "./PermissionPrompt.js";
-export { default, PermissionPrompt } from "./PermissionPrompt.js";
+export type { PermissionPromptFallback, PermissionPromptLabels, PermissionPromptProps } from "./PermissionPrompt.js";
+export { DEFAULT_PERMISSION_PROMPT_LABELS, default, PermissionPrompt } from "./PermissionPrompt.js";
 export type { PermissionPromptView, UsePermissionPromptOptions, UsePermissionPromptResult, } from "./usePermissionPrompt.js";
 export { usePermissionPrompt } from "./usePermissionPrompt.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,19 +1,32 @@
-import type { PhoneValidationKind } from "@webority/mobile-core";
+import type { PhoneCountry, PhoneValidationKind } from "@webority/mobile-core";
 import type { ReactNode } from "react";
 import type { StyleProp, TextInputProps, TextStyle, ViewStyle } from "react-native";
+import type { FieldVariant, Size } from "../../types/vocabulary.js";
 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";
+/** Every string the field draws that is not the app's own content. Override any key through `labels`. */
+export interface PhoneNumberInputLabels {
+    placeholder: string;
+    popular: string;
+    allCountries: string;
+    countrySheetTitle: string;
+    countrySearchPlaceholder: string;
+    invalid: string;
+    invalidMobile: string;
+    /** The country button's screen-reader name, given the dial code without the plus. */
+    countryButton: (callingCode: string) => string;
+}
+export declare const DEFAULT_PHONE_NUMBER_INPUT_LABELS: Readonly<PhoneNumberInputLabels>;
 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'. */
+    /** Dial prefix WITHOUT the plus, e.g. '1'. */
     code: string;
     label: string;
 }
 /**
- * The short list of countries apps ship to. No longer the picker's default
+ * A short list of countries, sorted by name. No longer the picker's default
  * (that is `ALL_CALLING_CODES`); pass it as `countries` to keep a short list.
  */
 export declare const DEFAULT_CALLING_CODES: ReadonlyArray<CallingCode>;
@@ -24,7 +37,7 @@ export declare const DEFAULT_CALLING_CODES: ReadonlyArray<CallingCode>;
  */
 export declare const ALL_CALLING_CODES: ReadonlyArray<CallingCode>;
 export interface PhoneNumberValue {
-    /** Dial prefix without the plus, e.g. '91'. */
+    /** Dial prefix without the plus, e.g. '1'. */
     callingCode: string;
     /** Digits only, no prefix. */
     nationalNumber: string;
@@ -69,7 +82,7 @@ export interface PhoneNumberInfo {
 export interface PhoneNumberInputProps extends Pick<TextInputProps, "returnKeyType" | "submitBehavior" | "onSubmitEditing" | "blurOnSubmit"> {
     value?: PhoneNumberValue;
     /**
-     * Controlled value as one E.164 string (`'+919876543210'`, `''` for empty),
+     * Controlled value as one E.164 string (`'+14155550123'`, `''` for empty),
      * for a form that stores the number as a string. The country is read from the
      * dial code (the longest calling code the list or the numbering plan
      * knows; a shared code such as +1 keeps the country already picked). Pass
@@ -84,8 +97,8 @@ export interface PhoneNumberInputProps extends Pick<TextInputProps, "returnKeyTy
     onChangeE164?: (e164: string, info: PhoneNumberInfo) => void;
     /**
      * 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`.
+     * E.164 number (`'+14155550123'`) resolves its own country, a bare national
+     * number resolves through `defaultCountry`.
      */
     defaultValue?: PhoneNumberValue | string;
     onChange?: (value: PhoneNumberValue) => void;
@@ -96,15 +109,11 @@ export interface PhoneNumberInputProps extends Pick<TextInputProps, "returnKeyTy
     /** The picker's list. Default `ALL_CALLING_CODES`, every country; `DEFAULT_CALLING_CODES` is the short shipping list. */
     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.
+     * ISOs to list first under their own heading (`labels.popular`), in this order,
+     * with the full list below under `labels.allCountries`. 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. */
@@ -115,8 +124,6 @@ export interface PhoneNumberInputProps extends Pick<TextInputProps, "returnKeyTy
     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
@@ -125,11 +132,13 @@ export interface PhoneNumberInputProps extends Pick<TextInputProps, "returnKeyTy
      */
     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.
+     * The country to start on when no `value` / `defaultValue` names one. Default:
+     * the region of the locale set through configureFormatters; with no region, the
+     * first country in the list. 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;
+    defaultCountry?: PhoneCountry;
     /**
      * Which numbers count as valid, by the country's numbering plan. `'any'`
      * (default) accepts fixed lines too; `'mobile'` is for an OTP or WhatsApp
@@ -177,11 +186,12 @@ export interface PhoneNumberInputProps extends Pick<TextInputProps, "returnKeyTy
     invalidMessage?: string | false;
     required?: boolean;
     disabled?: boolean;
-    size?: FieldBaseSize;
-    variant?: FieldBaseVariant;
+    size?: Extract<Size, "sm" | "md" | "lg">;
+    variant?: FieldVariant;
     /** Per-instance corner radius. Wins over the field size's radius. */
     borderRadius?: number;
-    countrySheetTitle?: string;
+    /** Strings the field draws itself: the placeholder, the picker's headings and search box, the invalid-number texts, the country button's name. */
+    labels?: Partial<PhoneNumberInputLabels>;
     haptic?: HapticType | false;
     /** Screen-reader name for the number field. Default: the label, else the placeholder. */
     accessibilityLabel?: string;
@@ -195,7 +205,7 @@ export interface PhoneNumberInputProps extends Pick<TextInputProps, "returnKeyTy
 /** `+<code><national>`, presentational only; the value stays structured. */
 export declare const formatE164: (value: PhoneNumberValue) => string;
 /**
- * Reads an E.164 string (`'+919876543210'`; a missing `+` is added) into the
+ * Reads an E.164 string (`'+14155550123'`; a missing `+` is added) into the
  * structured value. The country comes from the numbering plan, else from the
  * longest dial code among `countries`. `preferredIso` wins when it shares the
  * parsed dial code, so +1 numbers keep Canada when Canada was picked. Null when

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

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

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

@@ -13,9 +13,16 @@
  */
 import type 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;
+import type { FieldVariant, Size } from "../../types/vocabulary.js";
+export type PickerTriggerSize = Extract<Size, "sm" | "md" | "lg">;
+export type PickerTriggerVariant = FieldVariant;
+export interface PickerTriggerLabels {
+    placeholder: string;
+    selection: string;
+    noSelection: string;
+    clear: string;
+}
+export declare const DEFAULT_PICKER_TRIGGER_LABELS: Readonly<PickerTriggerLabels>;
 export interface PickerTriggerProps {
     /** The currently selected value rendered as the trigger's primary text. */
     value?: string;
@@ -56,6 +63,7 @@ export interface PickerTriggerProps {
     labelStyle?: StyleProp<TextStyle>;
     messageStyle?: StyleProp<TextStyle>;
     accessibilityLabel?: string;
+    labels?: Partial<PickerTriggerLabels>;
     testID?: string;
 }
 declare const PickerTrigger: React.ForwardRefExoticComponent<PickerTriggerProps & React.RefAttributes<RNView>>;

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

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

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

@@ -3,7 +3,7 @@
  * 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
+ * percentage, usually `useFormCompletion(watch(), 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
@@ -11,10 +11,16 @@
  */
 import type React from "react";
 import type { ImageSourcePropType, View as RNView, StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { Size, Tone } from "../../types/vocabulary.js";
 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;
+export type ProfileCompletionSize = Extract<Size, "sm" | "md" | "lg" | "xl">;
+export interface ProfileCompletionLabels {
+    summary: (title: string, percent: number) => string;
+    avatar: (title: string) => string;
+}
+export declare const DEFAULT_PROFILE_COMPLETION_LABELS: Readonly<ProfileCompletionLabels>;
 /**
  * How the ring is coloured. `'banded'` changes colour by thirds of progress
  * (red, amber, green); `'single'` keeps one colour at every progress.
@@ -33,8 +39,8 @@ export interface ProfileCompletionProps {
     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;
+    /** Avatar size: sm, md, lg or xl. Default md. The ring wraps it with `ringGap` of air. */
+    size?: ProfileCompletionSize;
     /**
      * 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
@@ -57,7 +63,7 @@ export interface ProfileCompletionProps {
      */
     ringVariant?: ProfileCompletionRingVariant;
     /** A fixed ring colour; also turns the bands off. Default `'primary'` in the single variant. */
-    tone?: ProgressRingTone;
+    tone?: Tone;
     /** Explicit ring colour; wins over `tone` and the progress bands. */
     ringColor?: string;
     /** Sweep the ring to a new progress. Default `true`. */
@@ -70,6 +76,8 @@ export interface ProfileCompletionProps {
     showCompleteBadge?: boolean;
     /** Content at the right edge: an Edit link, a percent badge. Stays its own accessibility element. */
     trailing?: React.ReactNode;
+    /** Spoken text overrides; each key falls back to the English default. */
+    labels?: Partial<ProfileCompletionLabels>;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     titleStyle?: StyleProp<TextStyle>;

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

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