@webority/mobile-ui 0.104.1 → 0.107.0

package/lib/typescript/commonjs/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";
 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/commonjs/components/OptionSheet/index.d.ts

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

package/lib/typescript/commonjs/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/commonjs/components/PagedListFooter/index.d.ts

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

package/lib/typescript/commonjs/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/commonjs/components/PermissionPrompt/index.d.ts

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

package/lib/typescript/commonjs/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";
 import type { HapticType } from "../../utils";
-import type { FieldBaseSize, FieldBaseVariant } from "../FieldBase";
 /** 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/commonjs/components/PhoneNumberInput/index.d.ts

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

package/lib/typescript/commonjs/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";
-export type PickerTriggerSize = FieldBaseSize;
-export type PickerTriggerVariant = FieldBaseVariant;
+import type { FieldVariant, Size } from "../../types/vocabulary";
+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/commonjs/components/PickerTrigger/index.d.ts

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

package/lib/typescript/commonjs/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";
 import type { AvatarImageProps, AvatarTone } from "../Avatar";
-import type { ProgressRingTone } from "../ProgressRing";
 /** 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/commonjs/components/ProfileCompletion/index.d.ts

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

package/lib/typescript/commonjs/components/ProfilePicker/ProfilePicker.d.ts

@@ -4,7 +4,7 @@
  * webority-ui's AppLogoPicker.
  *
  * Native picking stays in the app, exactly as in FilePicker: `sources` are
- * the same `FilePickerSource` adapters (`pick(): Promise<PickedFileInput[]>`),
+ * the same `FilePickerSource` adapters (`pick(): Promise<PickedFile[]>`),
  * so the library adds no dependency. One source launches straight away;
  * several open the shared OptionSheet. Removing the photo is a row in that
  * same sheet, not a control drawn over the photo, so a removable photo opens
@@ -14,13 +14,15 @@
  * once (optimistic) while the app uploads it and reflects the result back
  * through `value`.
  */
+import type { PickedFile } from "@webority/mobile-core/pickers";
 import type React from "react";
 import type { View as RNView, StyleProp, ViewStyle } from "react-native";
+import type { FillVariant, Size, Tone } from "../../types/vocabulary";
 import type { HapticType } from "../../utils";
 import type { IconName, SlotIconRef } from "../AppIcon";
 import type { AvatarImageProps, AvatarTone } from "../Avatar";
-import type { FilePickerSource, PickedFileInput } from "../FilePicker";
-export type ProfilePickerSize = "sm" | "md" | "lg" | number;
+import type { FilePickerSource } from "../FilePicker";
+export type ProfilePickerSize = Extract<Size, "sm" | "md" | "lg">;
 export type ProfilePickerShape = "circle" | "rounded" | "square";
 /**
  * `stacked`: the photo alone, hint below. `inline`: a profile row, photo on
@@ -28,24 +30,23 @@ export type ProfilePickerShape = "circle" | "rounded" | "square";
  * identity block centred beneath the photo.
  */
 export type ProfilePickerLayout = "stacked" | "inline" | "profile";
-/** Theme colour of the camera badge; the same set StatusBadge and Chip use. */
-export type ProfilePickerTone = "primary" | "success" | "warning" | "danger" | "info" | "neutral";
 /**
  * Look of the camera badge. `solid`: the tone fills it, the icon in the
  * tone's ink. `soft`: a light tint of the tone, the icon in the tone. `outline`:
  * the page colour with a ring and icon in the tone. StatusBadge's three names.
  */
-export type ProfilePickerVariant = "solid" | "soft" | "outline";
+export type ProfilePickerVariant = Extract<FillVariant, "solid" | "soft" | "outline">;
 export interface ProfilePickerLabels {
-    /** A11y label of the photo button. Default 'Change profile photo'. */
-    pick?: string;
-    /** Label of the "Remove photo" row in the sheet. Default 'Remove photo'. */
-    remove?: string;
-    /** Source chooser sheet title. Default 'Change photo'. */
-    sheetTitle?: string;
-    errorTooLarge?: (maxSizeMB: number) => string;
-    errorWrongType?: string;
+    /** A11y label of the photo button. */
+    pick: string;
+    /** Label of the "Remove photo" row in the sheet. */
+    remove: string;
+    /** Source chooser sheet title. */
+    sheetTitle: string;
+    errorTooLarge: (maxSizeMB: number) => string;
+    errorWrongType: string;
 }
+export declare const DEFAULT_PROFILE_PICKER_LABELS: Readonly<ProfilePickerLabels>;
 export interface ProfilePickerProps {
     /** Current photo URL or local URI, or null for none. */
     value?: string | null;
@@ -54,7 +55,7 @@ export interface ProfilePickerProps {
     /** Native picking adapters (same shape as FilePicker's). One launches directly; several open a chooser. */
     sources: ReadonlyArray<FilePickerSource>;
     /** Receives the validated pick. Upload it and pass the resulting URL back as `value`. */
-    onPick?: (file: PickedFileInput) => void;
+    onPick?: (file: PickedFile) => void;
     /**
      * Clears the photo. Removal is a row at the end of the sheet: a just-picked
      * photo always offers it; an existing `value` offers it only when this is
@@ -69,7 +70,7 @@ export interface ProfilePickerProps {
     accept?: ReadonlyArray<string>;
     /** Size cap in MB, enforced when the source reports a size. */
     maxSizeMB?: number;
-    /** A preset (sm 72, md 120, lg 160) or an exact diameter. Default 'md'. */
+    /** A preset: sm 72, md 120, lg 160. Default 'md'. */
     size?: ProfilePickerSize;
     shape?: ProfilePickerShape;
     /** Badge icon at the bottom-right: a name, or `{ name, variant }` for another Iconsax style. Default 'camera'. */
@@ -78,7 +79,7 @@ export interface ProfilePickerProps {
      * Theme colour of the badge. Default `theme.settings.components["profile-picker"].defaultTone`,
      * else 'primary'.
      */
-    tone?: ProfilePickerTone;
+    tone?: Tone;
     /**
      * Look of the badge: `solid` (default), `soft` or `outline`. Default
      * `theme.settings.components["profile-picker"].defaultVariant`, else 'solid'.
@@ -103,12 +104,12 @@ export interface ProfilePickerProps {
     error?: React.ReactNode;
     layout?: ProfilePickerLayout;
     /** Bold primary text beside / beneath the photo (inline and profile layouts). */
-    title?: React.ReactNode;
+    title?: string;
     /** Muted secondary text beside / beneath the photo (inline and profile layouts). */
-    subtitle?: React.ReactNode;
+    subtitle?: string;
     /** Renders the photo, e.g. an authenticated image loader (see Avatar). */
     ImageComponent?: React.ComponentType<AvatarImageProps>;
-    labels?: ProfilePickerLabels;
+    labels?: Partial<ProfilePickerLabels>;
     /** Haptic on an accepted pick and on remove; errors use `notificationError`. Pass false to disable. */
     haptic?: HapticType | false;
     /** Called with the message of a rejected or failed pick. */

package/lib/typescript/commonjs/components/ProfilePicker/index.d.ts

@@ -1,3 +1,3 @@
-export type { ProfilePickerLabels, ProfilePickerLayout, ProfilePickerProps, ProfilePickerShape, ProfilePickerSize, ProfilePickerTone, ProfilePickerVariant, } from "./ProfilePicker";
-export { default, ProfilePicker } from "./ProfilePicker";
+export type { ProfilePickerLabels, ProfilePickerLayout, ProfilePickerProps, ProfilePickerShape, ProfilePickerSize, ProfilePickerVariant, } from "./ProfilePicker";
+export { DEFAULT_PROFILE_PICKER_LABELS, default, ProfilePicker } from "./ProfilePicker";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/ProgressBar/ProgressBar.d.ts

@@ -1,13 +1,17 @@
 import type { ReactNode } from "react";
 import type { View as RNView, StyleProp, ViewStyle } from "react-native";
 import type { GradientDefinition } from "../../theme/types";
-export type ProgressBarTone = "primary" | "success" | "warning" | "danger";
+import type { Tone } from "../../types/vocabulary";
+export interface ProgressBarLabels {
+    loading: string;
+}
+export declare const DEFAULT_PROGRESS_BAR_LABELS: Readonly<ProgressBarLabels>;
 export interface ProgressBarSegment {
     /** Fraction of the full track (0–1). */
     value: number;
     /** Explicit colour; falls back to `tone`. */
     color?: string;
-    tone?: ProgressBarTone;
+    tone?: Tone;
 }
 export interface ProgressBarProps {
     progress?: number;
@@ -18,7 +22,7 @@ export interface ProgressBarProps {
     indeterminate?: boolean;
     height?: number;
     radius?: number;
-    tone?: ProgressBarTone;
+    tone?: Tone;
     trackColor?: string;
     barColor?: string;
     /** Gradient fill for the determinate bar — a `GradientDefinition` or a theme gradient token name. */
@@ -30,6 +34,7 @@ export interface ProgressBarProps {
     containerStyle?: StyleProp<ViewStyle>;
     barStyle?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
+    labels?: Partial<ProgressBarLabels>;
     testID?: string;
 }
 declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<RNView>>;

package/lib/typescript/commonjs/components/ProgressBar/index.d.ts

@@ -1,3 +1,3 @@
-export type { ProgressBarProps, ProgressBarSegment, ProgressBarTone } from "./ProgressBar";
-export { default, ProgressBar } from "./ProgressBar";
+export type { ProgressBarLabels, ProgressBarProps, ProgressBarSegment } from "./ProgressBar";
+export { DEFAULT_PROGRESS_BAR_LABELS, default, ProgressBar } from "./ProgressBar";
 //# sourceMappingURL=index.d.ts.map