@webority/mobile-ui 0.0.38 → 0.1.0

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

@@ -3,15 +3,20 @@ import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-nati
 import type { FieldInputProps } from '../../form/types';
 export type FormFieldLayout = 'stacked' | 'inline';
 export interface FormFieldProps {
-    label?: string;
-    helperText?: string;
+    /** A string, or a node for a symbol with a subscript. A node label needs an explicit `accessibilityLabel`. */
+    label?: React.ReactNode;
+    /** Drawn beside the label, right after it (a glossary info button, say); not part of the label's accessibility text. */
+    help?: React.ReactNode;
+    /** A string or a node. */
+    helperText?: React.ReactNode;
     /**
      * When truthy: helperText is hidden, error is shown in the error colour,
-     * and the container reports the invalid state to assistive tech.
+     * and the container reports the invalid state to assistive tech (a node
+     * error is shown but reaches assistive tech only through its live region).
      * Ignored when `name` connects to a <Form> with an element child (the child
-     * renders its own error then).
+     * renders its own error then). A string or a node.
      */
-    error?: string;
+    error?: React.ReactNode;
     /**
      * Appends the required marker to the label. Marker text + colour come from
      * `theme.components.field.{requiredMarker,requiredMarkerColor}` (default
@@ -29,6 +34,11 @@ export interface FormFieldProps {
     children: React.ReactNode | ((field: FieldInputProps) => React.ReactNode);
     /** 'stacked' (default): label above input. 'inline': label left, input right. */
     layout?: FormFieldLayout;
+    /**
+     * Lines the helper text and the error may take before truncating with an
+     * ellipsis. Default: no limit, both wrap in full. `0` also means no limit.
+     */
+    helperLines?: number;
     labelStyle?: StyleProp<TextStyle>;
     helperStyle?: StyleProp<TextStyle>;
     errorStyle?: StyleProp<TextStyle>;

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

@@ -0,0 +1,30 @@
+import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
+import type { IconVariant } from '../AppIcon/AppIcon';
+import type { SlotIcon } from '../AppIcon/slotIcon';
+export type IconBadgeSize = 'sm' | 'md' | 'lg';
+export type IconBadgeTone = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+export interface IconBadgeProps {
+    /**
+     * The icon: an AppIcon name (`icon="shield-tick"`), `{ name, variant }`, a
+     * render fn `({ color, size }) => node`, or any node, rendered as is. A name
+     * is drawn in the tone colour at the badge's icon size.
+     */
+    icon: SlotIcon;
+    /** Iconsax style for `icon` given as a name. A `{ name, variant }` icon keeps its own variant. Default `'linear'`. */
+    iconVariant?: IconVariant;
+    /** Circle and icon size: sm 32 / 16, md 40 / 20, lg 56 / 28. Default `'md'`. */
+    size?: IconBadgeSize;
+    /** Colour of the tinted fill and the icon. Default `'primary'`. */
+    tone?: IconBadgeTone;
+    /**
+     * Announces the badge as an image with this name. Without it the badge is
+     * decorative: hidden from screen readers.
+     */
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const IconBadge: import("react").ForwardRefExoticComponent<IconBadgeProps & import("react").RefAttributes<RNView>>;
+export { IconBadge };
+export default IconBadge;
+//# sourceMappingURL=IconBadge.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { IconBadgeProps, IconBadgeSize, IconBadgeTone } from './IconBadge';
+export { IconBadge } from './IconBadge';
+//# sourceMappingURL=index.d.ts.map

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

@@ -1,6 +1,7 @@
-import React from 'react';
 import type { GestureResponderEvent, View as RNView, StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils';
+import type { IconVariant } from '../AppIcon/AppIcon';
+import type { SlotIcon } from '../AppIcon/slotIcon';
 export type IconButtonTone = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral';
 /**
  * `glass` is a frosted white fill with a bright rim and dark ink, for a
@@ -11,13 +12,19 @@ export type IconButtonTone = 'primary' | 'secondary' | 'success' | 'warning' | '
 export type IconButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost' | 'glass';
 export type IconButtonSize = 'sm' | 'md' | 'lg';
 export type IconButtonShape = 'circle' | 'rounded';
-interface IconRenderProps {
-    color: string;
-    size: number;
-}
 export interface IconButtonProps {
-    /** Icon node, or a render fn `({ color, size }) => node` so IconButton can theme + size it. */
-    icon: React.ReactNode | ((props: IconRenderProps) => React.ReactNode);
+    /**
+     * The icon: an AppIcon name (`icon="heart"`) or `{ name, variant }`, drawn
+     * in the button's ink colour at its size; a render fn
+     * `({ color, size, disabled }) => node` so IconButton can theme + size it;
+     * or any node, rendered as is.
+     */
+    icon: SlotIcon;
+    /**
+     * Iconsax style for `icon` given as a name. A `{ name, variant }` icon keeps
+     * its own variant. Default `'linear'`.
+     */
+    iconVariant?: IconVariant;
     onPress?: (e: GestureResponderEvent) => void;
     /** Required — icon-only controls need an accessible name. */
     accessibilityLabel: string;
@@ -34,7 +41,7 @@ export interface IconButtonProps {
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }
-declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<RNView>>;
+declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<RNView>>;
 export { IconButton };
 export default IconButton;
 //# sourceMappingURL=IconButton.d.ts.map

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

@@ -49,12 +49,26 @@ export interface InputAction {
     testID?: string;
 }
 export interface InputProps extends Omit<TextInputProps, 'style'> {
-    label?: string;
+    /**
+     * A string, or a node for a symbol with a subscript. A node label needs an
+     * explicit `accessibilityLabel` (the field's screen-reader name), the same
+     * rule as ListItem's node title.
+     */
+    label?: React.ReactNode;
+    /**
+     * Drawn beside the static label, right after it and centred on its line
+     * (a glossary info button, say). A sibling of the label text: it is not part
+     * of the label's accessibility text, never shrinks it, and pressing it does
+     * not focus the field. Only drawn with the static label (`labelMode="top"`).
+     */
+    help?: React.ReactNode;
     placeholder?: string;
     value?: string;
     onChangeText?: (text: string) => void;
-    error?: string;
-    helperText?: string;
+    /** A string or a node. A non-empty value puts the field in the error state and replaces the helper. */
+    error?: React.ReactNode;
+    /** A string or a node. */
+    helperText?: React.ReactNode;
     /** See {@link InputType}. Default `'input'`. */
     type?: InputType;
     /** Setting this alone also puts the field in password mode (same as `type="password"`). */
@@ -86,6 +100,22 @@ export interface InputProps extends Omit<TextInputProps, 'style'> {
     unit?: string;
     /** Style applied to the unit text. */
     unitStyle?: StyleProp<TextStyle>;
+    /**
+     * Fixed text drawn before the value in the leading slot: `'₹'`, `'+91'`,
+     * `'https://'`. The mirror of `unit`: the field's font size in the
+     * placeholder colour, so it reads as part of the field rather than of what
+     * was typed. Sits after `leftIcon` when both are set. A node (a symbol with
+     * a subscript) is drawn as is, on the same line and with the same gap; it
+     * owns its own type, and `prefixStyle` does not reach into it.
+     */
+    prefix?: React.ReactNode;
+    /** Style applied to the prefix text. */
+    prefixStyle?: StyleProp<TextStyle>;
+    /**
+     * Shows the value in normal ink and lets it be selected and copied, but not
+     * edited. Unlike `disabled`, the field is not dimmed and stays focusable.
+     */
+    readOnly?: boolean;
     /** A button beside the box; see {@link InputAction}. */
     action?: InputAction;
     /** Style applied to the action button. */

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

@@ -1,35 +1,32 @@
-import React from 'react';
-import type { ScrollViewProps } from 'react-native';
-import { ScrollView } from 'react-native';
+import type { KeyboardAwareScrollViewProps as ControllerScrollViewProps, KeyboardAwareScrollViewRef } from 'react-native-keyboard-controller';
 export type SafeAreaEdge = 'top' | 'bottom' | 'left' | 'right';
-export interface KeyboardAwareScrollViewProps extends ScrollViewProps {
+export type { KeyboardAwareScrollViewRef };
+export interface KeyboardAwareScrollViewProps extends ControllerScrollViewProps {
     /** Gap kept between the focused field and the top of the keyboard. Default 24. */
-    extraScrollHeight?: number;
-    /** Disable the keyboard-following behaviour (still a normal ScrollView). Default false. */
-    disabled?: boolean;
+    bottomOffset?: number;
     /** Safe-area edges to pad. Default ['bottom']. */
     safeAreaEdges?: SafeAreaEdge[];
     /** Standard RefreshControl pass-through convenience. Ignored when `refreshControl` is set. */
     refreshing?: boolean;
     onRefresh?: () => void;
-    /** iOS keyboard animation duration to match when scrolling. Default 250. */
-    keyboardOpeningTime?: number;
-    /** Adds the extra bottom inset a tab bar needs. Default false. */
-    viewIsInsideTabBar?: boolean;
-    /** Scroll back to a fixed offset when the keyboard hides. */
-    resetScrollToCoords?: {
-        x: number;
-        y: number;
-    };
+    /**
+     * A tap on empty space inside the content closes the keyboard and blurs the
+     * focused field. Taps that a field, button or any other pressable claims are
+     * left alone. Default false. Needed on Android edge-to-edge, where the
+     * ScrollView's own tap-out dismissal never fires because React Native sees no
+     * keyboard metrics.
+     */
+    dismissOnTapOutside?: boolean;
 }
 /**
- * A ScrollView that keeps the focused input visible above the keyboard — no
- * native dependency. On keyboard show it pads the content by the keyboard
- * height and scrolls the focused TextInput so its bottom sits `extraScrollHeight`
- * above the keyboard, but only when it would otherwise be covered (so already-
- * visible fields don't jump). The classic measure-and-scroll approach, in pure RN.
+ * react-native-keyboard-controller's `KeyboardAwareScrollView` with the
+ * library's defaults: the focused field kept 24 above the keyboard, safe-area
+ * padding, a themed pull-to-refresh, and taps and scrolls that keep the
+ * keyboard open. The controller follows the keyboard frame by frame on the UI
+ * thread, so nothing here listens to keyboard events. Needs the app's
+ * `KeyboardProvider` at the root.
  */
-declare const KeyboardAwareScrollView: React.ForwardRefExoticComponent<KeyboardAwareScrollViewProps & React.RefAttributes<ScrollView>>;
+declare const KeyboardAwareScrollView: import("react").ForwardRefExoticComponent<KeyboardAwareScrollViewProps & import("react").RefAttributes<KeyboardAwareScrollViewRef>>;
 export { KeyboardAwareScrollView };
 export default KeyboardAwareScrollView;
 //# sourceMappingURL=KeyboardAwareScrollView.d.ts.map

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

@@ -1,3 +1,3 @@
-export type { KeyboardAwareScrollViewProps } from './KeyboardAwareScrollView';
+export type { KeyboardAwareScrollViewProps, KeyboardAwareScrollViewRef } from './KeyboardAwareScrollView';
 export { KeyboardAwareScrollView } from './KeyboardAwareScrollView';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,15 +1,18 @@
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 export interface KeyboardToolbarProps {
     /** Label for the dismiss button. Default 'Done'. */
     doneLabel?: string;
-    /** Show the prev/next chevrons. Default: true when prev/next handlers resolve. */
+    /** Show the prev/next chevrons. Default true. */
     showNavigation?: boolean;
-    /** Override the dismiss action. Default: `Keyboard.dismiss()`. */
+    /** Override the dismiss action. Default: `KeyboardController.dismiss()`. */
     onDone?: () => void;
-    /** Override "next field". Default: the surrounding `<Form>`'s `focusNext`. */
+    /**
+     * Override "next field". Default: the surrounding `<Form>`'s `focusNext`,
+     * otherwise the next text input on screen (`KeyboardController.setFocusTo`).
+     */
     onNext?: () => void;
-    /** Override "previous field". Default: the surrounding `<Form>`'s `focusPrev`. */
+    /** Override "previous field"; the same defaults as `onNext`, backwards. */
     onPrev?: () => void;
     /** Custom content rendered between the nav chevrons and the Done button. */
     leading?: React.ReactNode;
@@ -17,11 +20,13 @@ export interface KeyboardToolbarProps {
     testID?: string;
 }
 /**
- * An accessory bar pinned just above the keyboard — pure RN, no native
- * dependency. Shows a Done (dismiss) button and optional prev/next chevrons
- * that, inside a `<Form>`, walk the registered field order. Render it at the
- * screen root (a `flex: 1` ancestor) so its `bottom: keyboardHeight` offset
- * lands it on top of the keyboard. Renders nothing while the keyboard is hidden.
+ * An accessory bar that rides on top of the keyboard. Shows a Done (dismiss)
+ * button and prev/next chevrons that, inside a `<Form>`, walk the registered
+ * field order and otherwise move between the text inputs on screen. Render it
+ * at the screen root, after the content; it sits at the bottom edge and
+ * react-native-keyboard-controller's `KeyboardStickyView` lifts it with the
+ * keyboard frame by frame. Renders nothing while the keyboard is hidden. Needs
+ * the app's `KeyboardProvider` at the root.
  */
 declare const KeyboardToolbar: React.FC<KeyboardToolbarProps>;
 export { KeyboardToolbar };

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

@@ -1,20 +1,57 @@
 import React from 'react';
 import type { GestureResponderEvent, View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/hapticUtils';
+import type { SlotIcon } from '../AppIcon/slotIcon';
+import type { ButtonProps } from '../Button';
+import type { IconBadgeTone } from '../IconBadge';
 import type { SwipeableAction } from '../Swipeable';
 export type ListItemSize = 'sm' | 'md' | 'lg';
+/** One button of the `actions` row, drawn with the library Button at size `sm`. */
+export interface ListItemAction {
+    label: string;
+    onPress: () => void;
+    /** Default `'outline'`. */
+    variant?: ButtonProps['variant'];
+    tone?: ButtonProps['tone'];
+    /** Icon before the label, any `SlotIcon`. */
+    icon?: SlotIcon;
+    disabled?: boolean;
+    testID?: string;
+}
 export interface ListItemProps {
-    title: string;
+    /**
+     * Text, drawn in the row's title style, or any node drawn as is (a title
+     * with an inline badge). A node title needs `accessibilityLabel`.
+     */
+    title: React.ReactNode;
     /**
      * When true, renders the component as its authored skeleton placeholder shape.
      * The placeholder mirrors the real layout's footprint so the UI doesn't reflow
      * when data arrives. Use this while the data driving the component is being fetched.
      */
     loading?: boolean;
-    subtitle?: string;
+    /** Text in the subtitle style, or any node drawn as is. */
+    subtitle?: React.ReactNode;
     description?: string;
+    /** Lines a text title may take before it is truncated. Default 1; 0 for no limit. */
+    titleLines?: number;
+    /** Lines a text subtitle may take before it is truncated. Default 1; 0 for no limit. */
+    subtitleLines?: number;
     left?: React.ReactNode;
+    /**
+     * A leading icon in a tinted circle (an IconBadge sized to the row). Drawn in
+     * the left slot when `left` is not given; `left` wins when both are set.
+     */
+    icon?: SlotIcon;
+    /** Tone of the `icon` circle. Default `'primary'`. */
+    iconTone?: IconBadgeTone;
     right?: React.ReactNode;
+    /**
+     * A row of buttons under the item: a node drawn as is, or an array of
+     * `ListItemAction` drawn as small Buttons. They sit outside the row's press
+     * target, so pressing one never fires `onPress`.
+     */
+    actions?: React.ReactNode | ListItemAction[];
     onPress?: (event: GestureResponderEvent) => void;
     /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
     haptic?: HapticType | false;

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

@@ -1,4 +1,4 @@
 export type { SwipeableAction } from '../Swipeable';
-export type { ListItemProps, ListItemSize } from './ListItem';
+export type { ListItemAction, ListItemProps, ListItemSize } from './ListItem';
 export { default, ListItem } from './ListItem';
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface NotationRun {
+    text: string;
+    /** The subscript that follows `text`, when the run is a symbol. */
+    sub?: string;
+}
+export interface NotationProps {
+    /** Engine text where an underscore marks a subscript ("N_SG exceeds N_C"). Needs a parent Text. */
+    text?: string;
+    /** One symbol: the base, drawn with `sub` small after it. Renders its own Text. */
+    base?: string;
+    sub?: string;
+    /** Follows the symbol after a space. */
+    desc?: string;
+    testID?: string;
+}
+/** The text split into runs: `{ text }` for prose, `{ text, sub }` for a symbol and its subscript. */
+export declare const parseNotation: (text: string | null | undefined) => NotationRun[];
+/**
+ * A symbol of a standard with its subscript drawn small. React Native has no <sub>, and a nested
+ * Text cannot be shifted down, so the subscript is smaller and sits on the baseline.
+ */
+export declare const Notation: React.FC<NotationProps>;
+/** A symbol as the standard prints it: `sym('C', 'IP')` is C with a small IP, then `desc` if given. */
+export declare const sym: (base: string, sub?: string, desc?: string) => React.ReactElement;
+export default Notation;
+//# sourceMappingURL=Notation.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { NotationProps, NotationRun } from './Notation';
+export { default, Notation, parseNotation, sym } from './Notation';
+//# sourceMappingURL=index.d.ts.map

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

@@ -17,9 +17,17 @@ export interface NumberInputProps {
     step?: number;
     allowDecimal?: boolean;
     precision?: number;
-    label?: string;
-    helperText?: string;
-    error?: string;
+    /**
+     * A string, or a node for a symbol with a subscript. A node label needs an
+     * explicit `accessibilityLabel` (the input's screen-reader name).
+     */
+    label?: React.ReactNode;
+    /** Drawn beside the label, right after it (a glossary info button, say); not part of the label's accessibility text. */
+    help?: React.ReactNode;
+    /** A string or a node. */
+    helperText?: React.ReactNode;
+    /** A string or a node. A non-empty value puts the field in the error state and replaces the helper. */
+    error?: React.ReactNode;
     disabled?: boolean;
     size?: NumberInputSize;
     variant?: NumberInputVariant;

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

@@ -14,6 +14,12 @@ export interface OTPInputProps {
     length?: number;
     keyboardType?: 'number-pad' | 'default';
     autoFocus?: boolean;
+    /**
+     * Milliseconds to wait before `autoFocus` focuses the first cell. Raise it
+     * (about 350) on a screen that is pushed with a transition, so the Android
+     * keyboard does not open behind the incoming screen. Default 0.
+     */
+    autoFocusDelay?: number;
     disabled?: boolean;
     error?: boolean | string;
     size?: OTPInputSize;

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

@@ -1,7 +1,8 @@
 /**
  * OptionSheet — the shared bottom-sheet option picker.
  *
- * Internal primitive behind Select and InlineSelect: RN Modal-backed slide-up
+ * 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 / multi
  * checkbox) and the multi-select Done footer. Owns the open/close animations
@@ -36,6 +37,13 @@ export interface OptionSheetProps {
     open: boolean;
     /** Requests close (backdrop tap, hardware back, multi Done). Caller flips `open`. */
     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.
+     */
+    onAfterClose?: () => void;
     /** Sheet heading. Also the modal's a11y label fallback. */
     title?: string;
     options: ReadonlyArray<unknown>;
@@ -101,6 +109,8 @@ 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>;
+    /** Test selector on the sheet panel. */
+    testID?: string;
 }
 export declare const OptionSheet: React.FC<OptionSheetProps>;
 export default OptionSheet;

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

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

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

@@ -1,6 +1,6 @@
 import type { PhoneValidationKind } from '@webority/mobile-core';
 import type { ReactNode } from 'react';
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
 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. */
@@ -13,12 +13,16 @@ export interface CallingCode {
     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.
+ * The countries the fleet actually ships to. 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>;
+/**
+ * Every country the numbering plan knows (245), sorted by English name: the
+ * default `countries`. Built once from `getPhoneCountries()` and
+ * `PHONE_COUNTRY_NAMES`; narrow it with `hiddenCountries` or pass your own list.
+ */
+export declare const ALL_CALLING_CODES: ReadonlyArray<CallingCode>;
 export interface PhoneNumberValue {
     /** Dial prefix without the plus, e.g. '91'. */
     callingCode: string;
@@ -53,8 +57,31 @@ export interface PhoneNumberInputRef {
     /** The selected country entry, when the current ISO is in `countries`. */
     getCountry: () => CallingCode | undefined;
 }
-export interface PhoneNumberInputProps {
+/** What `onChangeE164` reports beside the E.164 string. */
+export interface PhoneNumberInfo {
+    /** The selected country entry, when its ISO is in `countries`. */
+    country: CallingCode | undefined;
+    /** National digits only, no prefix. */
+    national: string;
+    /** Validity under the `validation` prop. */
+    valid: boolean;
+}
+export interface PhoneNumberInputProps extends Pick<TextInputProps, 'returnKeyType' | 'submitBehavior' | 'onSubmitEditing' | 'blurOnSubmit'> {
     value?: PhoneNumberValue;
+    /**
+     * Controlled value as one E.164 string (`'+919876543210'`, `''` 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
+     * `onChangeE164` to receive changes. Ignored when `value` is set.
+     */
+    e164?: string;
+    /**
+     * Fires on every change with the E.164 string (`''` while no digits are
+     * typed) and the country, national digits and validity. Works beside `e164`
+     * or an uncontrolled field; `onChange` still fires too.
+     */
+    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
@@ -66,6 +93,7 @@ export interface PhoneNumberInputProps {
     onComplete?: (e164: string) => void;
     /** Fires whenever validity flips, after the first render. Forms read this instead of a ref. */
     onValidityChange?: (valid: boolean) => void;
+    /** 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
@@ -93,7 +121,7 @@ export interface PhoneNumberInputProps {
      * 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.
+     * a short list is a glance, not a hunt.
      */
     showAlphabetIndex?: boolean;
     /**
@@ -163,6 +191,14 @@ export interface PhoneNumberInputProps {
 }
 /** `+<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
+ * 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
+ * the string has no digits or no dial code matches.
+ */
+export declare const parseE164: (e164: string, countries: ReadonlyArray<CallingCode>, preferredIso?: string) => PhoneNumberValue | null;
 /**
  * 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

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

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

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

@@ -21,12 +21,14 @@ export interface PickerTriggerProps {
     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;
+    /** Static label rendered above the field. A string, or a node (a node needs an explicit `accessibilityLabel`). */
+    label?: React.ReactNode;
+    /** Drawn beside the label, right after it (a glossary info button, say); outside the trigger, so pressing it does not open the picker. */
+    help?: React.ReactNode;
+    /** Helper text shown below the field. Hidden when `error` is set. A string or a node. */
+    helperText?: React.ReactNode;
+    /** Error message shown below the field (and red-borders the field). A string or a node. */
+    error?: React.ReactNode;
     /**
      * Appends the required marker to the label. Marker text + colour come from
      * `theme.components.field.{requiredMarker,requiredMarkerColor}` (default

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

@@ -17,7 +17,7 @@
 import React from 'react';
 import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils';
-import type { IconName } from '../AppIcon';
+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;
@@ -72,8 +72,8 @@ export interface ProfilePickerProps {
     /** A preset (sm 72, md 120, lg 160) or an exact diameter. Default 'md'. */
     size?: ProfilePickerSize;
     shape?: ProfilePickerShape;
-    /** Badge icon at the bottom-right. Default 'camera'. */
-    badgeIcon?: IconName;
+    /** Badge icon at the bottom-right: a name, or `{ name, variant }` for another Iconsax style. Default 'camera'. */
+    badgeIcon?: IconName | SlotIconRef;
     /**
      * Theme colour of the badge. Default `theme.components.profilePicker.defaultTone`,
      * else 'primary'. `theme.components.profilePicker.badgeColor` replaces the

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

@@ -1,3 +1,4 @@
+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' | 'error';
@@ -10,6 +11,10 @@ export interface ProgressBarSegment {
 }
 export interface ProgressBarProps {
     progress?: number;
+    /** Text or node drawn above the bar. */
+    label?: ReactNode;
+    /** Shows the percent (`Math.round(progress * 100)%`) at the right of the label row. Determinate only. */
+    showPercent?: boolean;
     indeterminate?: boolean;
     height?: number;
     radius?: number;

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

@@ -16,6 +16,10 @@ export interface RadioProps extends Omit<PressableProps, 'style' | 'children' |
     onChange?: (value: RadioValue) => void;
     disabled?: boolean;
     label?: string;
+    /** Secondary line under the label. */
+    description?: string;
+    /** Error line under the label (and description); also draws the empty ring in the error colour. */
+    error?: string;
     size?: RadioSize;
     tone?: RadioTone;
     accessibilityLabel?: string;