@webority/mobile-ui 0.0.0-stage → 0.0.33

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,124 @@
+/**
+ * ProfilePicker — a round profile photo with a camera badge at its
+ * bottom-right; tapping it picks a new photo. The mobile counterpart of
+ * webority-ui's AppLogoPicker.
+ *
+ * Native picking stays in the app, exactly as in FilePicker: `sources` are
+ * the same `FilePickerSource` adapters (`pick(): Promise<PickedFileInput[]>`),
+ * 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
+ * the sheet even with a single source. With no source and nothing to remove
+ * the photo is display-only: no badge, and a tap does nothing. A freshly
+ * picked photo previews at
+ * once (optimistic) while the app uploads it and reflects the result back
+ * through `value`.
+ */
+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 { AvatarImageProps, AvatarTone } from '../Avatar';
+import type { FilePickerSource, PickedFileInput } from '../FilePicker';
+export type ProfilePickerSize = 'sm' | 'md' | 'lg' | number;
+export type ProfilePickerShape = 'circle' | 'rounded' | 'square';
+/**
+ * `stacked`: the photo alone, hint below. `inline`: a profile row, photo on
+ * the left with title / subtitle / hint beside it. `profile`: the same
+ * 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' | 'error' | '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 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;
+}
+export interface ProfilePickerProps {
+    /** Current photo URL or local URI, or null for none. */
+    value?: string | null;
+    /** Person's name: drives the initials shown when there is no photo. */
+    name?: string;
+    /** 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;
+    /**
+     * 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
+     * wired (the app owns removal). While it is offered, tapping the photo opens
+     * the sheet even with a single source.
+     */
+    onRemove?: () => void;
+    /** Spinner over the photo and no interaction, while the pick uploads. */
+    loading?: boolean;
+    disabled?: boolean;
+    /** Accepted mime globs. Default `['image/*']`. A pick with no type passes. */
+    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'. */
+    size?: ProfilePickerSize;
+    shape?: ProfilePickerShape;
+    /** Badge icon at the bottom-right. Default 'camera'. */
+    badgeIcon?: IconName;
+    /**
+     * Theme colour of the badge. Default `theme.components.profilePicker.defaultTone`,
+     * else 'primary'. `theme.components.profilePicker.badgeColor` replaces the
+     * tone's colour and `badgeIconColor` the icon's.
+     */
+    tone?: ProfilePickerTone;
+    /**
+     * Look of the badge: `solid` (default), `soft` or `outline`. Default
+     * `theme.components.profilePicker.defaultVariant`, else 'solid'.
+     */
+    variant?: ProfilePickerVariant;
+    /**
+     * Theme colour of the photo area when there is no photo: the initials disc
+     * and the empty person placeholder take a soft tint of the tone with the
+     * initials or icon in the tone, the Avatar's own `tone`. Unset keeps the
+     * Avatar's per-name palette and the grey placeholder. Default
+     * `theme.components.profilePicker.defaultAvatarTone`.
+     */
+    avatarTone?: AvatarTone;
+    /** Fill behind the initials or the placeholder icon; wins over `avatarTone`. */
+    avatarBackgroundColor?: string;
+    /** Colour of the initials or the placeholder icon; wins over `avatarTone`. */
+    avatarColor?: string;
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    /** App-supplied error; wins over a rejected pick's own message. */
+    error?: string;
+    layout?: ProfilePickerLayout;
+    /** Bold primary text beside / beneath the photo (inline and profile layouts). */
+    title?: React.ReactNode;
+    /** Muted secondary text beside / beneath the photo (inline and profile layouts). */
+    subtitle?: React.ReactNode;
+    /** Renders the photo, e.g. an authenticated image loader (see Avatar). */
+    ImageComponent?: React.ComponentType<AvatarImageProps>;
+    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. */
+    onError?: (message: string) => void;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const ProfilePicker: React.ForwardRefExoticComponent<ProfilePickerProps & React.RefAttributes<RNView>>;
+export { ProfilePicker };
+export default ProfilePicker;
+//# sourceMappingURL=ProfilePicker.d.ts.map

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

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

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

@@ -0,0 +1,33 @@
+import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
+import type { GradientDefinition } from '../../theme/types';
+export type ProgressBarTone = 'primary' | 'success' | 'warning' | 'error';
+export interface ProgressBarSegment {
+    /** Fraction of the full track (0–1). */
+    value: number;
+    /** Explicit colour; falls back to `tone`. */
+    color?: string;
+    tone?: ProgressBarTone;
+}
+export interface ProgressBarProps {
+    progress?: number;
+    indeterminate?: boolean;
+    height?: number;
+    radius?: number;
+    tone?: ProgressBarTone;
+    trackColor?: string;
+    barColor?: string;
+    /** Gradient fill for the determinate bar — a `GradientDefinition` or a theme gradient token name. */
+    gradient?: GradientDefinition | string;
+    /** Render a multi-colour breakdown bar (usage split) instead of a single progress fill. */
+    segments?: ProgressBarSegment[];
+    animated?: boolean;
+    style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    barStyle?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+    testID?: string;
+}
+declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<RNView>>;
+export { ProgressBar };
+export default ProgressBar;
+//# sourceMappingURL=ProgressBar.d.ts.map

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

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

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

@@ -0,0 +1,53 @@
+/**
+ * ProgressRing: the circular sibling of ProgressBar.
+ *
+ * A track circle and a fill arc drawn with react-native-svg, the arc's
+ * length driven by one animated value so a progress change sweeps
+ * smoothly from the old fraction to the new one. Starts at 12 o'clock and
+ * runs clockwise. Whatever is passed as `children` sits centred inside the
+ * ring (an Avatar, an icon, a percentage), so the ring can wrap a picture
+ * without the picture knowing about it.
+ *
+ * Determinate only: an unknown-duration wait is Spinner's job.
+ */
+import type React from 'react';
+import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
+export type ProgressRingTone = 'primary' | 'success' | 'warning' | 'error';
+export interface ProgressRingProps {
+    /** Fraction of the ring filled, 0 to 1, clamped. Default `0`. */
+    progress?: number;
+    /** Outer diameter in pixels. Default `48`. */
+    size?: number;
+    /** Stroke width of the track and the fill. Default `theme.components.progressRing.strokeWidth`, then `4`. */
+    strokeWidth?: number;
+    /** Fill colour when no `ringColor` is set. Default `'primary'`. */
+    tone?: ProgressRingTone;
+    /** Track colour override. Default `theme.components.progressRing.trackColor`, then `theme.colors.surface.disabled`. */
+    trackColor?: string;
+    /** Fill colour override; wins over `tone`. */
+    ringColor?: string;
+    /**
+     * Colour the fill by how far it has got: `error` below the first stop,
+     * `warning` to the second, `success` from there (stops default to a third
+     * and two thirds, `theme.components.progressRing.colorStops`). The colour
+     * rides the same animated value as the arc, so it flips exactly when the
+     * sweep crosses a stop. Ignored when `ringColor` is set. Default `false`.
+     */
+    colorByProgress?: boolean;
+    /**
+     * Animate progress changes. Default `true`. A reduced-motion setting on
+     * the device snaps the ring to the new value regardless.
+     */
+    animated?: boolean;
+    /** Rounded ends on the fill arc. Default `true`. */
+    rounded?: boolean;
+    /** Content centred inside the ring. */
+    children?: React.ReactNode;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const ProgressRing: React.ForwardRefExoticComponent<ProgressRingProps & React.RefAttributes<RNView>>;
+export { ProgressRing };
+export default ProgressRing;
+//# sourceMappingURL=ProgressRing.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { ProgressRingProps, ProgressRingTone } from './ProgressRing';
+export { default, ProgressRing } from './ProgressRing';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,33 @@
+import type { PressableProps, View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils';
+export type RadioSize = 'sm' | 'md' | 'lg';
+export type RadioTone = 'primary' | 'success' | 'warning' | 'error';
+export type RadioValue = string | number;
+export interface RadioGroupContextValue {
+    selectedValue: RadioValue | undefined;
+    onChange: (value: RadioValue) => void;
+    disabled: boolean;
+}
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | null>;
+export declare const useRadioGroup: () => RadioGroupContextValue | null;
+export interface RadioProps extends Omit<PressableProps, 'style' | 'children' | 'onPress'> {
+    value: RadioValue;
+    selected?: boolean;
+    onChange?: (value: RadioValue) => void;
+    disabled?: boolean;
+    label?: string;
+    size?: RadioSize;
+    tone?: RadioTone;
+    accessibilityLabel?: string;
+    haptic?: HapticType | false;
+    style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    circleStyle?: StyleProp<ViewStyle>;
+    dotStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<RNView>>;
+export { Radio };
+export default Radio;
+//# sourceMappingURL=Radio.d.ts.map

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

@@ -0,0 +1,24 @@
+/**
+ * RadioDot — the bare animated radio indicator (ring + spring-scaled dot).
+ *
+ * Extracted from Radio so custom option templates (ChoiceGroup `renderOption`,
+ * bespoke cards) can embed the standard indicator without rebuilding the
+ * animation or the disabled/selected colour rules. Purely visual — no press
+ * handling, no a11y role; the parent control owns those.
+ */
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export type RadioDotSize = 'sm' | 'md' | 'lg';
+export interface RadioDotProps {
+    selected: boolean;
+    /** Fill colour of the inner dot + selected ring. Default `colors.primary`. */
+    color?: string;
+    disabled?: boolean;
+    /** Named size reads `theme.components.radio[size]`; a number is the outer diameter in px (inner = half). */
+    size?: RadioDotSize | number;
+    style?: StyleProp<ViewStyle>;
+    dotStyle?: StyleProp<ViewStyle>;
+}
+export declare const RadioDot: React.FC<RadioDotProps>;
+export default RadioDot;
+//# sourceMappingURL=RadioDot.d.ts.map

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { RadioValue } from './Radio';
+export interface RadioGroupProps {
+    value?: RadioValue;
+    defaultValue?: RadioValue;
+    onChange?: (value: RadioValue) => void;
+    children: React.ReactNode;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const RadioGroup: React.FC<RadioGroupProps>;
+export { RadioGroup };
+export default RadioGroup;
+//# sourceMappingURL=RadioGroup.d.ts.map

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

@@ -0,0 +1,7 @@
+export type { RadioGroupContextValue, RadioProps, RadioSize, RadioTone, RadioValue } from './Radio';
+export { default, Radio, RadioGroupContext, useRadioGroup } from './Radio';
+export type { RadioDotProps, RadioDotSize } from './RadioDot';
+export { RadioDot } from './RadioDot';
+export type { RadioGroupProps } from './RadioGroup';
+export { RadioGroup } from './RadioGroup';
+//# sourceMappingURL=index.d.ts.map