@webority/mobile-ui 0.0.39 → 0.2.0

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

@@ -20,6 +20,20 @@ export interface RepeaterProps<T> {
     addLabel?: string;
     /** Per-row heading, e.g. `(i) => \`Line item ${i + 1}\``. */
     rowLabel?: (index: number) => string;
+    /**
+     * Draws your own header above each row's content, in place of the built-in
+     * one (the `rowLabel` heading and the remove button), so a card-style row can
+     * carry a title, a summary and its own remove control. Call `remove()` from
+     * it; it does nothing when `canRemove` is false.
+     */
+    renderRowHeader?: (args: RepeaterRenderArgs<T>) => React.ReactNode;
+    /**
+     * Called with the row's index and value when a row is removed, by the
+     * built-in button or by `remove()`, immediately BEFORE `onChange` with the
+     * shortened array. Use it to drop state you keep for that row. Not called
+     * when the removal is refused (`minRows`, `removable`, `disabled`).
+     */
+    onRemove?: (index: number, item: T) => void;
     /** Rows below this cannot be removed. Default 0. */
     minRows?: number;
     /** Add is hidden at this count. Omit for unlimited. */
@@ -38,6 +52,6 @@ export interface RepeaterProps<T> {
  * re-deriving splice/map logic, and keeps the min/max rules in one place where
  * they can't disagree between the add button and the remove button.
  */
-export declare const Repeater: <T>({ value, onChange, createRow, renderRow, addLabel, rowLabel, minRows, maxRows, removable, emptyText, disabled, haptic, style, testID }: RepeaterProps<T>) => React.ReactElement;
+export declare const Repeater: <T>({ value, onChange, createRow, renderRow, addLabel, rowLabel, renderRowHeader, onRemove, minRows, maxRows, removable, emptyText, disabled, haptic, style, testID }: RepeaterProps<T>) => React.ReactElement;
 export default Repeater;
 //# sourceMappingURL=Repeater.d.ts.map

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

@@ -36,6 +36,8 @@ export interface SearchBarProps extends Omit<TextInputProps, 'style' | 'value' |
     /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
     haptic?: HapticType | false;
     style?: StyleProp<ViewStyle>;
+    /** Style applied to the search text, after the library's own size, colour and font. */
+    inputStyle?: StyleProp<TextStyle>;
     accessibilityLabel?: string;
     testID?: string;
 }

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+export type SectionHeaderVariant = 'title' | 'caps' | 'sub';
+export interface SectionHeaderProps {
+    children?: React.ReactNode;
+    /** 'title' is the heading, 'caps' the quieter uppercase label, 'sub' a heading inside a card. */
+    variant?: SectionHeaderVariant;
+    /** Drop the room above, for the first heading of a block. */
+    flush?: boolean;
+    /** Draws the required marker after the heading and announces the heading as required. */
+    required?: boolean;
+    style?: StyleProp<TextStyle>;
+    testID?: string;
+}
+/** The heading between groups of fields in a form, a wizard step or a panel. */
+export declare const SectionHeader: React.FC<SectionHeaderProps>;
+export default SectionHeader;
+//# sourceMappingURL=SectionHeader.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { SectionHeaderProps, SectionHeaderVariant } from './SectionHeader.js';
+export { default, SectionHeader } from './SectionHeader.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -12,6 +12,7 @@
  * and vertical extent. It is a look, not a semantic change: the roles stay
  * radiogroup / radio, and screen navigation is still Tabs.
  */
+import type { ReactNode } from 'react';
 import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { RadiusScale } from '../../theme/types.js';
 import type { HapticType } from '../../utils/index.js';
@@ -41,6 +42,12 @@ export interface SegmentItem {
 }
 export interface SegmentedControlProps {
     segments: SegmentItem[];
+    /** A label above the control, drawn like a field label. A string also names the radiogroup when `accessibilityLabel` is not set. */
+    label?: ReactNode;
+    /** Helper line under the control. */
+    helperText?: ReactNode;
+    /** Error line under the control, in the error colour. Replaces `helperText`. */
+    error?: ReactNode;
     value?: SegmentValue;
     defaultValue?: SegmentValue;
     onChange?: (value: SegmentValue) => void;

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

@@ -40,7 +40,20 @@ interface BaseSelectProps<T = SelectOption> {
      * to override the default.
      */
     haptic?: HapticType | false;
-    label?: string;
+    /**
+     * A string, or a node for a symbol with a subscript. A node label needs an
+     * explicit `accessibilityLabel` (the trigger's screen-reader name); the
+     * sheet's heading then comes from `title`. A string label is the sheet's
+     * heading when `title` is unset.
+     */
+    label?: React.ReactNode;
+    /**
+     * Drawn beside the label, right after it and centred on its line (a
+     * glossary info button, say). A sibling of the label text, outside the
+     * trigger: it is not part of the label's accessibility text and pressing it
+     * does not open the sheet.
+     */
+    help?: React.ReactNode;
     /**
      * Heading shown at the top of the options bottom-sheet. Independent of
      * `label` (the field label above the trigger) — omit it for a sheet with no
@@ -53,7 +66,22 @@ interface BaseSelectProps<T = SelectOption> {
      * `'*'` in `colors.error`).
      */
     required?: boolean;
-    error?: string;
+    /** A string or a node. A non-empty value puts the trigger in the error state. */
+    error?: React.ReactNode;
+    /** Hint under the field, shown while there is no `error`. A string or a node. */
+    helperText?: React.ReactNode;
+    /**
+     * Fixed text drawn before the value: `'₹'`, `'+91'`. The same prop and look
+     * as Input's `prefix`, in the placeholder colour. Sits after `leftIcon`. A
+     * node (a symbol with a subscript) is drawn as is, with the same gap.
+     */
+    prefix?: React.ReactNode;
+    /**
+     * Lines the chosen value may take before it is truncated. Default `1`;
+     * `0` lets a long value (or a multi selection) wrap onto as many lines as
+     * it needs, and the field grows with it.
+     */
+    numberOfLines?: number;
     disabled?: boolean;
     size?: SelectSize;
     /**
@@ -82,6 +110,8 @@ interface BaseSelectProps<T = SelectOption> {
     /** Per-instance override for the trigger's corner radius. Wins over `components.select.borderRadius` and size defaults. */
     borderRadius?: number;
     accessibilityLabel?: string;
+    /** Style for the field label text above the trigger; the same prop as Input's and NumberInput's. */
+    labelStyle?: StyleProp<TextStyle>;
     style?: StyleProp<ViewStyle>;
     triggerStyle?: StyleProp<ViewStyle>;
     textStyle?: StyleProp<TextStyle>;

package/lib/typescript/module/components/Slider/valueText.d.ts

@@ -1,4 +1,7 @@
 import type { StyleProp, TextStyle } from 'react-native';
+import type { Theme } from '../../theme/types.js';
+/** The ink drawn on a slider's tone-coloured value bubble. */
+export declare const sliderToneInk: (theme: Theme, tone: "primary" | "success" | "warning" | "error") => string;
 /**
  * Shared between AmountSlider and SliderField: the number that counts to its
  * new value, and the edit-in-a-box logic that keeps a half-typed entry from

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

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
+import type { IconVariant } from '../AppIcon/AppIcon.js';
+import type { SlotIcon } from '../AppIcon/slotIcon.js';
+import type { IconBadgeTone } from '../IconBadge/index.js';
+export interface StatTileProps {
+    /** What the figure measures, drawn small above it. */
+    label: string;
+    /** The figure. A string or number is drawn in the heading style; a node is drawn as is. */
+    value: string | number | ReactNode;
+    /** Leading icon in a tinted circle: an AppIcon name, `{ name, variant }`, a render fn or any node. */
+    icon?: SlotIcon;
+    /** Iconsax style for `icon` given as a name. Default `'linear'`. */
+    iconVariant?: IconVariant;
+    /** Tone of the icon circle. Default `'primary'`. */
+    tone?: IconBadgeTone;
+    /** A small line under the figure (a period, a delta). */
+    caption?: ReactNode;
+    /** Makes the tile pressable, with the button role. */
+    onPress?: () => void;
+    /** Draws a placeholder of the same footprint while the figure loads. */
+    loading?: boolean;
+    /** Announced instead of the label and figure. Defaults to `"label, value"` for a text figure. */
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const StatTile: import("react").ForwardRefExoticComponent<StatTileProps & import("react").RefAttributes<RNView>>;
+export { StatTile };
+export default StatTile;
+//# sourceMappingURL=StatTile.d.ts.map

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

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

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

@@ -50,6 +50,13 @@ export interface StepperProps {
      * active step.
      */
     formatCaption?: (index: number | null, total: number, step: StepperStep | undefined) => string;
+    /**
+     * `segmented` only: whether the caption above the bars is drawn. Pass false
+     * to show the bars alone, for a screen that already says which step it is
+     * on. The progressbar's accessibility label and value are unchanged.
+     * Default true.
+     */
+    showCaption?: boolean;
     /**
      * 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

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

@@ -2,6 +2,8 @@ import type { PressableProps, View as RNView, StyleProp, ViewStyle } from 'react
 import type { HapticType } from '../../utils/hapticUtils.js';
 export type SwitchSize = 'sm' | 'md' | 'lg';
 export type SwitchTone = 'primary' | 'success' | 'warning' | 'error';
+/** `inline`: the control, then the text beside it. `row`: the text on the left, the control on the right, the whole row pressable. */
+export type SwitchLayout = 'inline' | 'row';
 export interface SwitchProps extends Omit<PressableProps, 'style' | 'children' | 'onPress'> {
     value?: boolean;
     defaultValue?: boolean;
@@ -10,6 +12,23 @@ export interface SwitchProps extends Omit<PressableProps, 'style' | 'children' |
     size?: SwitchSize;
     tone?: SwitchTone;
     label?: string;
+    /** Secondary line under the label. */
+    description?: string;
+    /** Error line under the label (and description). */
+    error?: string;
+    /**
+     * Lines the label (and the description) may take before truncating with an
+     * ellipsis. Default: no limit, the text wraps in full. `0` also means no limit.
+     */
+    labelLines?: number;
+    /**
+     * `'inline'` (default): the control with the text beside it. `'row'`: the
+     * label and description on the left (taking the free width), the control on
+     * the right, and the whole row, at least 44 high, is the switch's press
+     * target and accessibility element. Without a label or description `'row'`
+     * draws the bare control, as `'inline'` does.
+     */
+    layout?: SwitchLayout;
     accessibilityLabel?: string;
     haptic?: HapticType | false;
     /**

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

@@ -1,3 +1,3 @@
-export type { SwitchProps, SwitchSize, SwitchTone } from './Switch.js';
+export type { SwitchLayout, SwitchProps, SwitchSize, SwitchTone } from './Switch.js';
 export { default, Switch } from './Switch.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,11 +1,15 @@
 import React from 'react';
 import type { TextProps as RNTextProps, Text as RNTextRef, StyleProp, TextStyle } from 'react-native';
 import type { FontWeightKey } from '../../theme/index.js';
-import type { TypographyScale } from '../../theme/types.js';
+import type { Theme, TypographyScale } from '../../theme/types.js';
 export type TextVariant = 'display' | 'h1' | 'h2' | 'h3' | 'title' | 'body' | 'bodySmall' | 'caption' | 'label' | 'overline';
-export type TextColor = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'disabled' | 'link' | 'success' | 'warning' | 'error' | 'info';
+export type TextColor = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'disabled' | 'link' | 'textStrong' | 'success' | 'warning' | 'error' | 'info';
 export interface TextProps extends Omit<RNTextProps, 'style'> {
-    variant?: TextVariant;
+    /**
+     * A built-in variant, or the name of one registered in `theme.textVariants`.
+     * An unknown name falls back to `body`.
+     */
+    variant?: TextVariant | (string & {});
     /** Text role token, semantic tone, or a raw colour string. Defaults per variant. */
     color?: TextColor | (string & {});
     /** Override the variant's weight. */
@@ -18,6 +22,7 @@ export interface TextProps extends Omit<RNTextProps, 'style'> {
     children?: React.ReactNode;
     style?: StyleProp<TextStyle>;
 }
+export declare const resolveColor: (theme: Theme, color: string) => string;
 declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<RNTextRef>>;
 export { Text };
 export default Text;

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

@@ -37,6 +37,12 @@ export interface ToastProps {
     toast: ToastItem;
     index: number;
     onDismiss: (id: string) => void;
+    /**
+     * When the toast was first shown (ms since epoch). Auto-dismiss counts from
+     * here, so a toast that remounts in another host (a modal opened or closed)
+     * keeps its remaining time. Defaults to the moment this component mounts.
+     */
+    shownAt?: number;
 }
 declare const Toast: React.FC<ToastProps>;
 export { Toast };

package/lib/typescript/module/components/Toast/ToastProvider.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { ToastOptions, ToastPosition } from './Toast.js';
+import type { HapticType } from '../../utils/hapticUtils.js';
+import type { ToastOptions, ToastPosition, ToastVariant } from './Toast.js';
 export interface ToastApi {
     show: (opts: ToastOptions) => string;
     hide: (id: string) => void;
@@ -10,8 +11,30 @@ export interface ToastProviderProps {
     maxVisible?: number;
     topOffset?: number;
     bottomOffset?: number;
+    /**
+     * How long a toast stays, in milliseconds, when its own `duration` is left
+     * out. `0` keeps it until dismissed. Without it the theme's
+     * `components.toast.defaultDurationMs` applies (3000 by default).
+     */
+    defaultDuration?: number;
+    /**
+     * Haptic per variant, for a toast whose own `haptic` is left out. A variant
+     * left out of the map keeps its built-in haptic (`notificationError` for
+     * `error`, `notificationSuccess` for `success`, `notificationWarning` for
+     * `warning`, `selection` otherwise). A variant set to `false` is silent, and
+     * `false` for the whole prop silences every toast.
+     */
+    haptics?: ToastHaptics;
 }
+export type ToastHaptics = Partial<Record<ToastVariant, HapticType | false>> | false;
 export declare const ToastProvider: React.FC<ToastProviderProps>;
+/**
+ * Renders the provider's toasts inside a react-native Modal. A Modal is its own
+ * native window on iOS and Android, so toasts drawn at the app root sit beneath
+ * it. Place one as the last child of the Modal's content; the most recently
+ * mounted host draws the toasts and every other host, and the root, draws none.
+ */
+export declare const ToastHost: React.FC;
 export declare const useToast: () => ToastApi;
 interface ToastGlobal {
     show: (opts: ToastOptions) => string;

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

@@ -1,5 +1,5 @@
 export type { ToastAction, ToastItem, ToastOptions, ToastPosition, ToastProps, ToastVariant } from './Toast.js';
 export { default, Toast } from './Toast.js';
-export type { ToastApi, ToastProviderProps } from './ToastProvider.js';
-export { ToastProvider, toast, useToast } from './ToastProvider.js';
+export type { ToastApi, ToastHaptics, ToastProviderProps } from './ToastProvider.js';
+export { ToastHost, ToastProvider, toast, useToast } from './ToastProvider.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -6,7 +6,7 @@ export type { AnimatePresenceProps, PresencePreset } from './AnimatePresence/ind
 export { AnimatePresence } from './AnimatePresence/index.js';
 export type { AppBarAction, AppBarProps, AppBarVariant } from './AppBar/index.js';
 export { AppBar } from './AppBar/index.js';
-export type { AsyncBlockProps } from './AsyncBlock/index.js';
+export type { AsyncBlockErrorVariant, AsyncBlockProps } from './AsyncBlock/index.js';
 export { AsyncBlock } from './AsyncBlock/index.js';
 export type { AuthedImageCacheMeta, AuthedImageProps } from './AuthedImage/index.js';
 export { AuthedImage, authedImageCacheStats, clearAuthedImageCache, getAuthedImageCacheLimit, setAuthedImageCacheLimit } from './AuthedImage/index.js';
@@ -16,25 +16,25 @@ export type { AvatarGroupOverflowVariant, AvatarGroupProps, AvatarGroupSpacing,
 export { Avatar, AvatarGroup } from './Avatar/index.js';
 export type { BadgeAnchor, BadgeProps, BadgeTone, BadgeVariant } from './Badge/index.js';
 export { Badge } from './Badge/index.js';
-export type { BannerAction, BannerProps, BannerVariant } from './Banner/index.js';
+export type { BannerAction, BannerActionSize, BannerActionTone, BannerActionVariant, BannerProps, BannerRole, BannerVariant } from './Banner/index.js';
 export { Banner } from './Banner/index.js';
 export type { BottomNavigationCenterAction, BottomNavigationElevation, BottomNavigationIndicatorPosition, BottomNavigationIndicatorRadius, BottomNavigationProps, BottomNavigationRadius, BottomNavigationVariant, TabBadge, TabConfig, TabIcon, TabIconProps } from './BottomNavigation/index.js';
 export { BottomNavigation } from './BottomNavigation/index.js';
-export type { BottomSheetContextValue, BottomSheetProps, BottomSheetRef } from './BottomSheet/index.js';
+export type { BottomSheetContextValue, BottomSheetPresentation, BottomSheetProps, BottomSheetRef } from './BottomSheet/index.js';
 export { BottomSheet, useBottomSheet } from './BottomSheet/index.js';
 export type { BoxProps, RowProps, SpacerProps, StackProps } from './Box/index.js';
 export { Box, Row, Spacer, Stack } from './Box/index.js';
 export type { ButtonProps, ButtonSize, ButtonTone, ButtonVariant } from './Button/index.js';
 export { Button } from './Button/index.js';
-export type { CardElevation, CardPadding, CardProps, CardRadius, CardVariant } from './Card/index.js';
+export type { CardElevation, CardPadding, CardProps, CardRadius, CardTextAction, CardVariant } from './Card/index.js';
 export { Card } from './Card/index.js';
 export type { CarouselProps, CarouselRef, PaginationStyle } from './Carousel/index.js';
 export { Carousel } from './Carousel/index.js';
 export type { CheckboxProps, CheckboxSize, CheckboxTone } from './Checkbox/index.js';
 export { Checkbox } from './Checkbox/index.js';
-export type { ChipProps, ChipSize, ChipTone, ChipVariant } from './Chip/index.js';
+export type { ChipProps, ChipSelectionMode, ChipSize, ChipTone, ChipVariant } from './Chip/index.js';
 export { Chip } from './Chip/index.js';
-export type { ChoiceGroupDirection, ChoiceGroupIndicatorPosition, ChoiceGroupProps, ChoiceGroupSize, ChoiceGroupVariant, ChoiceOption, ChoiceOptionState } from './ChoiceGroup/index.js';
+export type { ChoiceGroupDirection, ChoiceGroupIndicatorPosition, ChoiceGroupProps, ChoiceGroupSelectionMode, ChoiceGroupSize, ChoiceGroupVariant, ChoiceOption, ChoiceOptionState } from './ChoiceGroup/index.js';
 export { ChoiceGroup } from './ChoiceGroup/index.js';
 export type { ConfettiHandle, ConfettiOrigin, ConfettiPhysics, ConfettiPreset, ConfettiProps, ConfettiShape, ConfettiSpeed } from './Confetti/index.js';
 export { Confetti } from './Confetti/index.js';
@@ -42,7 +42,9 @@ export type { DatePickerMode, DatePickerProps } from './DatePicker/index.js';
 export { DatePicker } from './DatePicker/index.js';
 export type { DateRange, DateRangePickerProps } from './DateRangePicker/index.js';
 export { DateRangePicker } from './DateRangePicker/index.js';
-export type { DescriptionItem, DescriptionsProps, DescriptionsSize } from './Descriptions/index.js';
+export type { DecimalInputProps, DecimalRules } from './DecimalInput/index.js';
+export { cleanDecimalText, DecimalInput, parseDecimalText } from './DecimalInput/index.js';
+export type { DescriptionItem, DescriptionsProps, DescriptionsSize, DescriptionsVariant } from './Descriptions/index.js';
 export { Descriptions } from './Descriptions/index.js';
 export type { DialogAction, DialogProps, DialogVariant } from './Dialog/index.js';
 export { Dialog } from './Dialog/index.js';
@@ -64,6 +66,8 @@ export type { ForceUpdateDialogProps } from './ForceUpdateDialog/index.js';
 export { ForceUpdateDialog } from './ForceUpdateDialog/index.js';
 export type { FormFieldLayout, FormFieldProps } from './FormField/index.js';
 export { FormField } from './FormField/index.js';
+export type { IconBadgeProps, IconBadgeSize, IconBadgeTone } from './IconBadge/index.js';
+export { IconBadge } from './IconBadge/index.js';
 export type { IconButtonProps, IconButtonShape, IconButtonSize, IconButtonTone, IconButtonVariant } from './IconButton/index.js';
 export { IconButton } from './IconButton/index.js';
 export type { GalleryImage, ImageGalleryProps } from './ImageGallery/index.js';
@@ -72,11 +76,11 @@ export type { InlineSelectProps, InlineSelectSize } from './InlineSelect/index.j
 export { InlineSelect } from './InlineSelect/index.js';
 export type { InputAction, InputProps, InputSize, InputSlotIcon, InputSlotState, InputVariant } from './Input/index.js';
 export { Input } from './Input/index.js';
-export type { KeyboardAwareScrollViewProps } from './KeyboardAwareScrollView/index.js';
+export type { KeyboardAwareScrollViewProps, KeyboardAwareScrollViewRef } from './KeyboardAwareScrollView/index.js';
 export { KeyboardAwareScrollView } from './KeyboardAwareScrollView/index.js';
 export type { KeyboardToolbarProps } from './KeyboardToolbar/index.js';
 export { KeyboardToolbar } from './KeyboardToolbar/index.js';
-export type { ListItemProps, ListItemSize } from './ListItem/index.js';
+export type { ListItemAction, ListItemProps, ListItemSize } from './ListItem/index.js';
 export { ListItem } from './ListItem/index.js';
 export type { LoaderOverlayProps } from './LoaderOverlay/index.js';
 export { LoaderOverlay, loader, useLoader } from './LoaderOverlay/index.js';
@@ -84,12 +88,16 @@ export type { MarkdownProps } from './Markdown/index.js';
 export { Markdown } from './Markdown/index.js';
 export type { ModalPresentation, ModalProps } from './Modal/index.js';
 export { MODAL_DISMISS_GRACE_MS, Modal } from './Modal/index.js';
+export type { NotationProps, NotationRun } from './Notation/index.js';
+export { Notation, parseNotation, sym } from './Notation/index.js';
 export type { NumberInputProps, NumberInputRef, NumberInputSize, NumberInputVariant } from './NumberInput/index.js';
 export { NumberInput } from './NumberInput/index.js';
+export type { OptionSheetProps, OptionSheetRowState, OptionSheetSection } from './OptionSheet/index.js';
+export { OptionSheet } from './OptionSheet/index.js';
 export type { OTPInputProps, OTPInputRef, OTPInputSize } from './OTPInput/index.js';
 export { OTPInput } from './OTPInput/index.js';
-export type { CallingCode, PhoneNumberInputLabelMode, PhoneNumberInputProps, PhoneNumberInputRef, PhoneNumberValidation, PhoneNumberValue } from './PhoneNumberInput/index.js';
-export { DEFAULT_CALLING_CODES, formatE164, PhoneNumberInput } from './PhoneNumberInput/index.js';
+export type { CallingCode, PhoneNumberInfo, PhoneNumberInputLabelMode, PhoneNumberInputProps, PhoneNumberInputRef, PhoneNumberValidation, PhoneNumberValue } from './PhoneNumberInput/index.js';
+export { ALL_CALLING_CODES, DEFAULT_CALLING_CODES, formatE164, PhoneNumberInput, parseE164 } from './PhoneNumberInput/index.js';
 export type { PickerTriggerProps, PickerTriggerSize, PickerTriggerVariant } from './PickerTrigger/index.js';
 export { PickerTrigger } from './PickerTrigger/index.js';
 export type { ProfileCompletionAvatarTone, ProfileCompletionProps, ProfileCompletionRingVariant } from './ProfileCompletion/index.js';
@@ -110,6 +118,8 @@ export type { BlockMarkdownAction, EditorSelection, EditorState, InlineMarkdownA
 export { applyMarkdownAction, RichTextEditor } from './RichTextEditor/index.js';
 export type { SearchBarProps, SearchBarSize, SearchBarVariant } from './SearchBar/index.js';
 export { SearchBar } from './SearchBar/index.js';
+export type { SectionHeaderProps, SectionHeaderVariant } from './SectionHeader/index.js';
+export { SectionHeader } from './SectionHeader/index.js';
 export type { SegmentedControlProps, SegmentedControlRadius, SegmentedControlSize, SegmentedControlTone, SegmentedControlVariant, SegmentIcon, SegmentIconState, SegmentItem, SegmentValue } from './SegmentedControl/index.js';
 export { SegmentedControl } from './SegmentedControl/index.js';
 export type { SelectOption, SelectProps, SelectSize, SelectValue } from './Select/index.js';
@@ -124,13 +134,15 @@ export type { SlideToConfirmProps, SlideToConfirmSize, SlideToConfirmTone } from
 export { SlideToConfirm } from './SlideToConfirm/index.js';
 export type { SpinnerProps, SpinnerSize, SpinnerVariant } from './Spinner/index.js';
 export { Spinner } from './Spinner/index.js';
+export type { StatTileProps } from './StatTile/index.js';
+export { StatTile } from './StatTile/index.js';
 export type { StatusBadgeProps, StatusBadgeSize, StatusBadgeTone, StatusBadgeVariant } from './StatusBadge/index.js';
 export { StatusBadge } from './StatusBadge/index.js';
 export type { StepperPressMode, StepperProps, StepperStep, StepperTone, StepperVariant } from './Stepper/index.js';
 export { Stepper } from './Stepper/index.js';
 export type { SwipeableAction, SwipeableProps, SwipeableTone } from './Swipeable/index.js';
 export { Swipeable } from './Swipeable/index.js';
-export type { SwitchProps, SwitchSize, SwitchTone } from './Switch/index.js';
+export type { SwitchLayout, SwitchProps, SwitchSize, SwitchTone } from './Switch/index.js';
 export { Switch } from './Switch/index.js';
 export type { TabItem, TabItemIcon, TabItemIconState, TabsAlign, TabsProps, TabsRadius, TabsSize, TabsVariant } from './Tabs/index.js';
 export { Tabs } from './Tabs/index.js';
@@ -142,8 +154,8 @@ export type { TimelineItem, TimelineOrientation, TimelineProps, TimelineStatus,
 export { Timeline } from './Timeline/index.js';
 export type { MinuteStep, Period, TimeFormat, TimePickerProps, TimeValue } from './TimePicker/index.js';
 export { TimePicker } from './TimePicker/index.js';
-export type { ToastApi, ToastOptions, ToastPosition, ToastProps, ToastProviderProps, ToastVariant } from './Toast/index.js';
-export { Toast, ToastProvider, toast, useToast } from './Toast/index.js';
+export type { ToastApi, ToastHaptics, ToastOptions, ToastPosition, ToastProps, ToastProviderProps, ToastVariant } from './Toast/index.js';
+export { Toast, ToastHost, ToastProvider, toast, useToast } from './Toast/index.js';
 export type { TooltipPlacement, TooltipProps, TooltipTrigger } from './Tooltip/index.js';
 export { Tooltip } from './Tooltip/index.js';
 export type { TourCloseReason, TourLabels, TourProps, TourSeenStore, TourStep } from './Tour/index.js';

package/lib/typescript/module/form/FormContext.d.ts

@@ -15,12 +15,21 @@ export interface FormProps<Values extends FormValues = FormValues> {
  * prop was declared at the base type, `useForm<MyValues>()` could not be handed
  * to `<Form>` by ANY consumer, which is most of the reason to type a form at
  * all. Untyped callers are unaffected: `Values` defaults to `FormValues`.
+ *
+ * @deprecated Part of the deprecated `useForm` engine. With react-hook-form,
+ * pass `control` to `HookFormField`, or wrap the form in react-hook-form's
+ * `FormProvider`.
  */
 export declare const Form: {
     <Values extends FormValues = FormValues>({ form, children }: FormProps<Values>): React.ReactElement;
     displayName: string;
 };
-/** Read the surrounding form. Throws if there is no `<Form>` ancestor. */
+/**
+ * Read the surrounding form. Throws if there is no `<Form>` ancestor.
+ *
+ * @deprecated Part of the deprecated `useForm` engine. Use react-hook-form's
+ * `useFormContext` instead.
+ */
 export declare function useFormContext<Values extends FormValues = FormValues>(): FormApi<Values>;
 /** Read the surrounding form, or null when there is no `<Form>` ancestor. */
 export declare function useOptionalFormContext(): FormApi<FormValues> | null;

package/lib/typescript/module/form/HookFormField.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { FieldPath, FieldPathValue, FieldValues, UseControllerProps } from 'react-hook-form';
+import { type FormFieldProps } from '../components/FormField/FormField.js';
+import { type HookFieldProps } from './useHookFormField.js';
+/** The label, helper text and layout `FormField` draws around the control. */
+type FieldChromeProps = Omit<FormFieldProps, 'name' | 'children' | 'error'>;
+export type HookFormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformedValues = TFieldValues> = FieldChromeProps & UseControllerProps<TFieldValues, TName, TTransformedValues> & {
+    /**
+     * A text input element (`<Input />`, `<PhoneNumberInput />`) gets `value`,
+     * `onChangeText`, `onBlur`, `error` and a ref injected. Any other control
+     * takes the render-prop form:
+     * `{(field) => <Select value={field.value} onChange={field.onChange} error={field.error} />}`.
+     * A render-prop control that is passed `error` draws it itself, so the
+     * frame leaves its own copy out; one that is not passed `error` has the
+     * message drawn under it by the frame.
+     */
+    children: React.ReactElement | ((field: HookFieldProps<FieldPathValue<TFieldValues, TName>>) => React.ReactNode);
+    /**
+     * Whether the frame leaves out its own error line because the control
+     * draws the message. Default: `true` for an element child, and for a
+     * render-prop child whose returned element is given an `error` prop;
+     * `false` otherwise. Set it to override that.
+     */
+    hideError?: boolean;
+};
+/**
+ * A library field bound to react-hook-form: `FormField`'s label, helper text,
+ * required marker and error line around a control wired through
+ * `useController`. `control` may be omitted inside a `FormProvider`.
+ *
+ * ```tsx
+ * const { control, handleSubmit } = useForm({ defaultValues: { email: '' } });
+ *
+ * <HookFormField control={control} name="email" label="Email" rules={{ required: 'Enter your email' }}>
+ *   <Input keyboardType="email-address" autoComplete="email" />
+ * </HookFormField>
+ * ```
+ */
+export declare const HookFormField: {
+    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformedValues = TFieldValues>(props: HookFormFieldProps<TFieldValues, TName, TTransformedValues>): React.ReactElement;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=HookFormField.d.ts.map

package/lib/typescript/module/form/index.d.ts

@@ -1,5 +1,7 @@
 export type { FormProps } from './FormContext.js';
 export { Form, useFormContext, useOptionalFormContext } from './FormContext.js';
+export type { HookFormFieldProps } from './HookFormField.js';
+export { HookFormField } from './HookFormField.js';
 export { deletePath, getPath, setPath } from './path.js';
 import * as rules from './rules.js';
 export type { FieldInputProps, FieldRules, FieldState, FocusableNode, FormApi, FormConfig, FormErrors, FormTouched, FormValidateFn, FormValues, SubmitHelpers, ValidateOn, ValidationResult, ValidationRule, ValidationSchema } from './types.js';
@@ -8,5 +10,7 @@ export { useField, useFieldArray } from './useField.js';
 export { useForm } from './useForm.js';
 export type { FormCompletion, UseFormCompletionOptions } from './useFormCompletion.js';
 export { isFieldFilled, useFormCompletion } from './useFormCompletion.js';
+export type { HookFieldProps } from './useHookFormField.js';
+export { useHookFormField } from './useHookFormField.js';
 export { rules };
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/form/useField.d.ts

@@ -6,6 +6,9 @@ import type { FieldInputProps } from './types.js';
  *   <Input value={email.value} onChangeText={email.onChangeText} onBlur={email.onBlur} error={email.error} />
  *   <Select value={country.value} onChange={country.onChange} error={country.error} />
  *   <Switch value={!!agree.value} onChange={agree.onChange} />
+ *
+ * @deprecated Part of the deprecated `useForm` engine. Use `useHookFormField`
+ * with react-hook-form instead.
  */
 export declare function useField<V = unknown>(name: string): FieldInputProps<V>;
 export interface FieldArrayApi<T = unknown> {
@@ -22,6 +25,9 @@ export interface FieldArrayApi<T = unknown> {
  * Manage a repeating list field (phone numbers, line items, etc.) by name.
  * Each helper writes the whole array back through the form so validation and
  * dirty-tracking stay correct.
+ *
+ * @deprecated Part of the deprecated `useForm` engine. Use react-hook-form's
+ * `useFieldArray` instead.
  */
 export declare function useFieldArray<T = unknown>(name: string): FieldArrayApi<T>;
 //# sourceMappingURL=useField.d.ts.map

package/lib/typescript/module/form/useForm.d.ts

@@ -5,6 +5,10 @@ import type { FormApi, FormConfig, FormValues } from './types.js';
  * function), gates error display behind touched/submit, and on a failed submit
  * focuses the first errored field. The returned object is rebuilt every render
  * so `<Form>` consumers re-render on state changes.
+ *
+ * @deprecated Build new forms with react-hook-form's `useForm` and bind the
+ * library's fields through `HookFormField` (or `useHookFormField` for a custom
+ * control). See docs/forms.md. This engine stays until a major release removes it.
  */
 export declare function useForm<Values extends FormValues = FormValues>(config: FormConfig<Values>): FormApi<Values>;
 //# sourceMappingURL=useForm.d.ts.map

package/lib/typescript/module/form/useHookFormField.d.ts

@@ -0,0 +1,32 @@
+import type React from 'react';
+import { type FieldPath, type FieldPathValue, type FieldValues, type UseControllerProps } from 'react-hook-form';
+/**
+ * What a library field needs from a react-hook-form field, under the names the
+ * fields already take: text inputs read `onChangeText`, every other control
+ * (Select, Switch, DatePicker, Slider and the rest) reads `onChange`.
+ */
+export interface HookFieldProps<V = unknown> {
+    name: string;
+    value: V;
+    /** The field's validation message, when react-hook-form holds one. */
+    error: string | undefined;
+    touched: boolean;
+    dirty: boolean;
+    onChange: (value: V) => void;
+    onChangeText: (text: string) => void;
+    onBlur: () => void;
+    /** Pass to the input so `setFocus` and focus-on-error reach it. */
+    ref: React.RefCallback<unknown>;
+}
+/**
+ * Binds one react-hook-form field (through `useController`) and returns it in
+ * the shape the library's fields take. `control` may be omitted inside a
+ * react-hook-form `FormProvider`.
+ *
+ * ```tsx
+ * const country = useHookFormField({ control, name: 'country', rules: { required: 'Pick one' } });
+ * <Select value={country.value} onChange={country.onChange} error={country.error} options={...} />
+ * ```
+ */
+export declare function useHookFormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformedValues = TFieldValues>(props: UseControllerProps<TFieldValues, TName, TTransformedValues>): HookFieldProps<FieldPathValue<TFieldValues, TName>>;
+//# sourceMappingURL=useHookFormField.d.ts.map