@elvora/react-native 1.0.0-rc.1

package/dist/index.d.cts

@@ -0,0 +1,1253 @@
+import * as react from 'react';
+import { ReactNode, ReactElement, RefObject } from 'react';
+import { ElvoraTheme, Direction, ButtonOwnProps, InputOwnProps, Orientation, ElvoraSize, ElvoraStatus, ElvoraTone, Placement, ErrorCorrection } from '@elvora/core';
+export { Direction, ElvoraSize, ElvoraStatus, ElvoraTheme, ElvoraTone, ElvoraVariant, IntentScale, Orientation, Placement, ThemeColors } from '@elvora/core';
+import { PressableProps, GestureResponderEvent, StyleProp, ViewStyle, TextStyle, View, TextInputProps, TextInput, ImageSourcePropType, ViewProps, FlexAlignType, ScrollView, ImageProps as ImageProps$1, ImageStyle } from 'react-native';
+import { IconName } from '@elvora/icons';
+
+interface ElvoraContextValue {
+    theme: ElvoraTheme;
+    direction: Direction;
+}
+interface ElvoraProviderProps {
+    theme?: ElvoraTheme;
+    direction?: Direction;
+    children: ReactNode;
+}
+declare function ElvoraProvider({ theme, direction, children }: ElvoraProviderProps): react.JSX.Element;
+declare function useElvoraContext(): ElvoraContextValue;
+declare function useTheme(): ElvoraTheme;
+
+interface ButtonProps extends ButtonOwnProps, Omit<PressableProps, 'children' | 'disabled' | 'style'> {
+    children?: ReactNode;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    onPress?: (event: GestureResponderEvent) => void;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+}
+/**
+ * React Native Button. Same headless contract as the web Button, rendered
+ * with `Pressable`. Identical variants/sizes/states.
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<View>>;
+
+interface IconButtonProps extends Omit<ButtonProps, 'children' | 'leftIcon' | 'rightIcon'> {
+    icon: ReactNode;
+    /** Required: announce icon-only button to screen readers. */
+    accessibilityLabel: string;
+}
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<View>>;
+
+interface InputProps extends InputOwnProps, Omit<TextInputProps, 'editable' | 'style'> {
+    style?: StyleProp<ViewStyle>;
+}
+/** React Native text input with Elvora styling. */
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<TextInput>>;
+
+interface TextareaProps extends InputProps {
+    rows?: number;
+}
+/** Multi-line input. Sets `multiline` and numberOfLines on the RN TextInput. */
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<TextInput>>;
+
+interface CheckboxProps extends Omit<PressableProps, 'onPress' | 'children'> {
+    size?: 'sm' | 'md' | 'lg';
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isChecked?: boolean;
+    defaultChecked?: boolean;
+    isIndeterminate?: boolean;
+    onChange?: (checked: boolean) => void;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<View>>;
+
+interface RadioGroupProps {
+    name: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    isDisabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function RadioGroup(props: RadioGroupProps): react.JSX.Element;
+interface RadioProps extends Omit<PressableProps, 'onPress' | 'children'> {
+    value: string;
+    isDisabled?: boolean;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<View>>;
+
+interface SwitchProps extends Omit<PressableProps, 'onPress' | 'children'> {
+    isDisabled?: boolean;
+    isChecked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<View>>;
+
+interface SelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface SelectProps extends InputOwnProps {
+    options: SelectOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * React Native Select. Opens a modal sheet with the option list — the most
+ * platform-appropriate variant for cross-platform consistency.
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<View>>;
+
+interface LabelProps {
+    isRequired?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+}
+/** Form label for React Native. */
+declare const Label: react.ForwardRefExoticComponent<LabelProps & react.RefAttributes<View>>;
+
+interface IconProps {
+    /** Icon name from `@elvora/icons`. */
+    name: IconName;
+    /** Pixel size for both width/height. Defaults to 16. */
+    size?: number;
+    /** Stroke or fill color. Defaults to `currentColor`-equivalent (black). */
+    color?: string;
+    /** Accessible label. When omitted, the icon is treated as decorative. */
+    label?: string;
+}
+/**
+ * Renders an icon from the Elvora icon set using `react-native-svg`. Install
+ * `react-native-svg` in your app for this to work.
+ */
+declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<unknown>>;
+
+interface DividerProps {
+    orientation?: Orientation;
+    thickness?: number;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/** Visual separator for React Native. */
+declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<View>>;
+
+interface AvatarProps {
+    src?: string | ImageSourcePropType;
+    alt?: string;
+    name?: string;
+    size?: ElvoraSize;
+    shape?: 'circle' | 'square';
+    fallback?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<View>>;
+
+interface BadgeProps {
+    status?: ElvoraStatus;
+    size?: Exclude<ElvoraSize, 'xl'>;
+    tone?: ElvoraTone;
+    isDot?: boolean;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<View>>;
+
+interface TagProps {
+    status?: ElvoraStatus;
+    size?: Exclude<ElvoraSize, 'xl'>;
+    tone?: ElvoraTone;
+    onClose?: () => void;
+    closeLabel?: string;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<View>>;
+
+interface SpinnerProps {
+    size?: ElvoraSize | number;
+    color?: string;
+    /** Accessible label. */
+    label?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<View>>;
+
+interface ProgressProps {
+    value?: number;
+    max?: number;
+    min?: number;
+    size?: Exclude<ElvoraSize, 'xl'>;
+    status?: ElvoraStatus;
+    label?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<View>>;
+
+interface TooltipProps {
+    label: ReactNode;
+    placement?: Placement;
+    /** Single child element. On long-press, the tooltip opens; tap dismisses. */
+    children: ReactElement;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * React Native Tooltip — opens on long-press with a centered overlay (most
+ * accessible cross-platform pattern; mobile has no hover state). For
+ * positioning relative to the trigger, use a dedicated popover library.
+ */
+declare function Tooltip({ label, children, style }: TooltipProps): react.JSX.Element;
+
+interface BoxProps extends ViewProps {
+    p?: number;
+    px?: number;
+    py?: number;
+    pt?: number;
+    pr?: number;
+    pb?: number;
+    pl?: number;
+    m?: number;
+    mx?: number;
+    my?: number;
+    mt?: number;
+    mr?: number;
+    mb?: number;
+    ml?: number;
+    w?: number | string;
+    h?: number | string;
+    bg?: string;
+    rounded?: number;
+    shadow?: ViewStyle;
+}
+/** Box — universal layout primitive for RN. Accepts shorthand style props. */
+declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<View>>;
+
+interface StackProps extends ViewProps {
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    gap?: number;
+    align?: FlexAlignType;
+    justify?: ViewStyle['justifyContent'];
+    wrap?: boolean;
+}
+/** Stack — flex container for RN. */
+declare const Stack: react.ForwardRefExoticComponent<StackProps & react.RefAttributes<View>>;
+declare const HStack: react.ForwardRefExoticComponent<Omit<StackProps, "direction"> & react.RefAttributes<View>>;
+declare const VStack: react.ForwardRefExoticComponent<Omit<StackProps, "direction"> & react.RefAttributes<View>>;
+
+interface GridProps extends ViewProps {
+    /** Number of columns. */
+    columns?: number;
+    /** Gap between cells. */
+    gap?: number;
+    children?: ReactNode;
+}
+interface GridItemProps extends ViewProps {
+    /** Number of columns this item spans. */
+    colSpan?: number;
+    children?: ReactNode;
+}
+/**
+ * Grid — simulates CSS Grid by laying out children in equal-width columns via
+ * flexbox rows. Pure React Native (no native grid module needed).
+ */
+declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<View>>;
+/** GridItem — the colSpan is read by the parent Grid. */
+declare const GridItem: react.ForwardRefExoticComponent<GridItemProps & react.RefAttributes<View>>;
+
+interface ContainerProps extends ViewProps {
+    maxWidth?: number;
+    padding?: number;
+    children?: ReactNode;
+}
+/** Container — centered, max-width container for RN. */
+declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<View>>;
+
+interface CardProps extends ViewProps {
+    variant?: 'outline' | 'elevated' | 'filled';
+    padding?: number;
+    children?: ReactNode;
+}
+/** Card — content container for RN. */
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<View>>;
+declare const CardHeader: react.ForwardRefExoticComponent<ViewProps & react.RefAttributes<View>>;
+declare const CardBody: react.ForwardRefExoticComponent<ViewProps & react.RefAttributes<View>>;
+declare const CardFooter: react.ForwardRefExoticComponent<ViewProps & react.RefAttributes<View>>;
+
+interface AlertProps extends ViewProps {
+    status?: ElvoraStatus;
+    tone?: ElvoraTone;
+    title?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    onClose?: () => void;
+    closeLabel?: string;
+}
+/** Alert — banner-style feedback for RN. */
+declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<View>>;
+
+interface SkeletonProps extends ViewProps {
+    width?: number | string;
+    height?: number | string;
+    rounded?: number;
+    /** Animate a pulse effect. Default true. */
+    animated?: boolean;
+}
+/** Skeleton — placeholder loading block for RN. */
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<View>>;
+
+interface EmptyProps extends ViewProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    action?: ReactNode;
+}
+/** Empty — placeholder for empty/no-data states. */
+declare const Empty: react.ForwardRefExoticComponent<EmptyProps & react.RefAttributes<View>>;
+
+type ResultStatus = ElvoraStatus | '404' | '500' | '403';
+interface ResultProps extends ViewProps {
+    status?: ResultStatus;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    icon?: ReactNode;
+    extra?: ReactNode;
+    children?: ReactNode;
+}
+/** Result — page-level status component for RN. */
+declare const Result: react.ForwardRefExoticComponent<ResultProps & react.RefAttributes<View>>;
+
+interface ModalProps extends Omit<ViewProps, 'children'> {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    showCloseButton?: boolean;
+    closeOnOverlayPress?: boolean;
+    closeLabel?: string;
+}
+/** Modal — centered overlay dialog for RN (uses native Modal). */
+declare const Modal: react.ForwardRefExoticComponent<ModalProps & react.RefAttributes<View>>;
+
+interface DrawerProps extends Omit<ViewProps, 'children'> {
+    isOpen: boolean;
+    onClose: () => void;
+    placement?: 'left' | 'right' | 'top' | 'bottom';
+    size?: number | string;
+    title?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    showCloseButton?: boolean;
+    closeOnOverlayPress?: boolean;
+    closeLabel?: string;
+}
+/** Drawer — edge-anchored overlay panel for RN. */
+declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<View>>;
+
+interface PopoverProps extends Omit<ViewProps, 'children'> {
+    /** The trigger element. */
+    trigger: ReactNode;
+    /** Popover content. */
+    children: ReactNode;
+    /** Controlled open. */
+    isOpen?: boolean;
+    /** Controlled change handler. */
+    onOpenChange?: (open: boolean) => void;
+    /** Where the popover anchors relative to the screen. */
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+}
+/**
+ * Popover — content overlay anchored to a trigger. RN doesn't expose a
+ * positioning API, so we use a centered modal-like sheet by default.
+ */
+declare const Popover: react.ForwardRefExoticComponent<PopoverProps & react.RefAttributes<View>>;
+
+interface ToastOptions {
+    id?: string;
+    status?: ElvoraStatus;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Duration in ms. `null` for sticky. */
+    duration?: number | null;
+    action?: ReactNode;
+}
+interface ToastApi {
+    show: (opts: ToastOptions) => string;
+    dismiss: (id: string) => void;
+    dismissAll: () => void;
+}
+interface ToastProviderProps {
+    children: ReactNode;
+    defaultDuration?: number;
+    placement?: 'top' | 'bottom';
+}
+/** ToastProvider — mount once at the root of the RN app. */
+declare function ToastProvider({ children, defaultDuration, placement }: ToastProviderProps): react.JSX.Element;
+/** useToast — must be inside ToastProvider. */
+declare function useToast(): ToastApi;
+
+interface TabsTab {
+    value: string;
+    label: ReactNode;
+    isDisabled?: boolean;
+}
+interface TabsProps extends ViewProps {
+    tabs: TabsTab[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    variant?: 'underline' | 'pill' | 'solid';
+    orientation?: Orientation;
+    /** Render function for each tab's panel content. */
+    renderPanel: (value: string) => ReactNode;
+}
+/**
+ * Tabs — RN-friendly tab strip + panel renderer. Doesn't need WAI-ARIA roles,
+ * uses native accessibility roles. Composition is data-driven rather than
+ * via slot components.
+ */
+declare function Tabs(props: TabsProps): react.JSX.Element;
+
+interface MenuItem {
+    value: string;
+    label: string;
+    isDisabled?: boolean;
+    hasSeparatorBefore?: boolean;
+}
+interface MenuProps {
+    trigger: ReactNode;
+    items: MenuItem[];
+    onSelect?: (value: string) => void;
+}
+/**
+ * Menu — opens a modal sheet from the trigger. Suitable for RN because there
+ * is no anchored-popover API; sheet-style menus are idiomatic.
+ */
+declare function Menu(props: MenuProps): react.JSX.Element;
+
+interface DropdownItem extends MenuItem {
+}
+interface DropdownProps {
+    trigger: ReactNode;
+    items: DropdownItem[];
+    onSelect?: (value: string) => void;
+}
+/** Dropdown — alias for Menu on RN where both use a modal sheet. */
+declare function Dropdown(props: DropdownProps): react.JSX.Element;
+
+interface BreadcrumbItem {
+    label: string;
+    onPress?: () => void;
+    isCurrent?: boolean;
+}
+interface BreadcrumbProps extends ViewProps {
+    items: BreadcrumbItem[];
+    separator?: ReactNode;
+}
+/** Breadcrumb — navigation trail for RN. */
+declare function Breadcrumb(props: BreadcrumbProps): react.JSX.Element;
+
+interface PaginationProps extends ViewProps {
+    total: number;
+    pageSize?: number;
+    current?: number;
+    defaultCurrent?: number;
+    onChange?: (page: number) => void;
+    siblingCount?: number;
+    showFirstLast?: boolean;
+    hideOnSinglePage?: boolean;
+}
+/** Pagination — RN paginator. */
+declare function Pagination(props: PaginationProps): react.JSX.Element | null;
+
+interface Step {
+    title: ReactNode;
+    description?: ReactNode;
+    status?: 'wait' | 'process' | 'finish' | 'error';
+}
+interface StepsProps extends Omit<ViewProps, 'onChange'> {
+    steps: Step[];
+    current?: number;
+    orientation?: 'horizontal' | 'vertical';
+    onChange?: (index: number) => void;
+}
+/** Steps — multi-step progress indicator for RN. */
+declare function Steps(props: StepsProps): react.JSX.Element;
+
+interface AnchorLink {
+    /** Vertical scroll offset (px) for this section. */
+    offset: number;
+    label: ReactNode;
+}
+interface AnchorProps extends ViewProps {
+    links: AnchorLink[];
+    /** Ref to the parent ScrollView used to scroll to each section. */
+    scrollRef: RefObject<ScrollView>;
+    activeIndex?: number;
+    smooth?: boolean;
+}
+/**
+ * Anchor — section jumper for RN. Caller passes a ref to their parent
+ * `<ScrollView>` and pre-computed offsets for each section. Active highlighting
+ * is opt-in via `activeIndex`.
+ */
+declare function Anchor(props: AnchorProps): react.JSX.Element;
+
+interface BackTopProps {
+    /** Ref to the ScrollView this button scrolls to top. */
+    scrollRef: RefObject<ScrollView>;
+    /** Current Y offset of the parent ScrollView (caller wires up `onScroll`). */
+    scrollY: number;
+    /** Show after the user has scrolled past this offset (default 400). */
+    visibilityHeight?: number;
+    bottom?: number;
+    right?: number;
+    label?: string;
+}
+/**
+ * BackTop — floating "scroll to top" button for RN. Caller passes a ref to the
+ * parent ScrollView plus the current scroll offset (e.g. from `onScroll` event).
+ */
+declare function BackTop(props: BackTopProps): react.JSX.Element | null;
+
+interface FormProps extends ViewProps {
+    layout?: 'vertical' | 'horizontal';
+    labelWidth?: number;
+    children?: ReactNode;
+}
+/** Form — RN container that owns shared layout + per-field error state. */
+declare function Form(props: FormProps): react.JSX.Element;
+interface FormFieldProps extends ViewProps {
+    name: string;
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: string;
+    isRequired?: boolean;
+    children?: ReactNode;
+}
+declare function FormField(props: FormFieldProps): react.JSX.Element;
+declare function useFormField(name: string): {
+    error: string | undefined;
+    setError: (e: string | undefined) => void;
+};
+
+interface NumberInputProps extends Omit<ViewProps, 'children'> {
+    value?: number | null;
+    defaultValue?: number | null;
+    onChangeValue?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isInvalid?: boolean;
+    placeholder?: string;
+}
+declare const NumberInput: react.ForwardRefExoticComponent<NumberInputProps & react.RefAttributes<View>>;
+
+interface SegmentedOption<V extends string = string> {
+    value: V;
+    label: ReactNode;
+    isDisabled?: boolean;
+}
+interface SegmentedProps<V extends string = string> extends ViewProps {
+    options: SegmentedOption<V>[];
+    value?: V;
+    defaultValue?: V;
+    onChange?: (value: V) => void;
+    size?: 'sm' | 'md' | 'lg';
+    isDisabled?: boolean;
+}
+declare function Segmented<V extends string = string>(props: SegmentedProps<V>): react.JSX.Element;
+
+interface SliderProps extends Omit<ViewProps, 'onChange'> {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    onChangeEnd?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    isDisabled?: boolean;
+}
+declare function Slider(props: SliderProps): react.JSX.Element;
+
+interface RateProps extends Omit<ViewProps, 'onChange'> {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    count?: number;
+    allowHalf?: boolean;
+    isDisabled?: boolean;
+    /** Custom character (string emoji or React node). Defaults to ★ */
+    character?: ReactNode;
+    size?: number;
+}
+declare function Rate(props: RateProps): react.JSX.Element;
+
+interface UploadFile {
+    id: string;
+    name: string;
+    size?: number;
+    uri?: string;
+    status?: 'pending' | 'uploading' | 'done' | 'error';
+    error?: string;
+}
+interface UploadProps extends ViewProps {
+    files?: UploadFile[];
+    defaultFiles?: UploadFile[];
+    onChange?: (files: UploadFile[]) => void;
+    /**
+     * Called when the user taps the picker area. Host app is expected to launch
+     * the platform file picker (e.g., expo-document-picker) and add the resulting
+     * files via `onChange`.
+     */
+    onPick?: () => void;
+    description?: ReactNode;
+    isDisabled?: boolean;
+}
+declare function Upload(props: UploadProps): react.JSX.Element;
+declare function makeUploadFile(name: string, opts?: Partial<UploadFile>): UploadFile;
+
+interface AutoCompleteOption {
+    value: string;
+    label?: string;
+}
+interface AutoCompleteProps extends Omit<ViewProps, 'children'> {
+    value?: string;
+    defaultValue?: string;
+    onChangeValue?: (value: string) => void;
+    options?: AutoCompleteOption[];
+    loadOptions?: (query: string) => Promise<AutoCompleteOption[]>;
+    onSelectOption?: (opt: AutoCompleteOption) => void;
+    placeholder?: string;
+    isDisabled?: boolean;
+}
+declare function AutoComplete(props: AutoCompleteProps): react.JSX.Element;
+
+interface ColorPickerProps extends Omit<ViewProps, 'onChange'> {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (hex: string) => void;
+    presets?: string[];
+    isDisabled?: boolean;
+    /** Custom trigger node (otherwise a swatch button is rendered). */
+    trigger?: ReactNode;
+}
+declare function ColorPicker(props: ColorPickerProps): react.JSX.Element;
+
+type DateValue = Date | null;
+interface DatePickerProps extends Omit<ViewProps, 'onChange'> {
+    value?: DateValue;
+    defaultValue?: DateValue;
+    onChange?: (value: DateValue) => void;
+    min?: Date;
+    max?: Date;
+    placeholder?: string;
+    isDisabled?: boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    format?: (d: Date) => string;
+}
+declare function DatePicker(props: DatePickerProps): react.JSX.Element;
+
+interface TimeValue {
+    hours: number;
+    minutes: number;
+    seconds?: number;
+}
+interface TimePickerProps extends Omit<ViewProps, 'onChange'> {
+    value?: TimeValue | null;
+    defaultValue?: TimeValue | null;
+    onChange?: (value: TimeValue | null) => void;
+    showSeconds?: boolean;
+    use12Hours?: boolean;
+    minuteStep?: number;
+    placeholder?: string;
+    isDisabled?: boolean;
+}
+declare function TimePicker(props: TimePickerProps): react.JSX.Element;
+
+interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+interface DateRangePickerProps extends Omit<ViewProps, 'onChange'> {
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onChange?: (value: DateRange) => void;
+    min?: Date;
+    max?: Date;
+    isDisabled?: boolean;
+    format?: (d: Date) => string;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    placeholder?: {
+        start?: string;
+        end?: string;
+    };
+}
+declare function DateRangePicker(props: DateRangePickerProps): react.JSX.Element;
+
+interface CascaderOption {
+    value: string;
+    label: ReactNode;
+    children?: CascaderOption[];
+    isDisabled?: boolean;
+}
+interface CascaderProps extends Omit<ViewProps, 'onChange'> {
+    options: CascaderOption[];
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[], path: CascaderOption[]) => void;
+    placeholder?: string;
+    displaySeparator?: string;
+    isDisabled?: boolean;
+}
+declare function Cascader(props: CascaderProps): react.JSX.Element;
+
+interface TreeNode$1 {
+    value: string;
+    label: ReactNode;
+    children?: TreeNode$1[];
+    isDisabled?: boolean;
+}
+interface TreeSelectProps extends Omit<ViewProps, 'onChange'> {
+    options: TreeNode$1[];
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    multiple?: boolean;
+    placeholder?: string;
+    defaultExpanded?: string[];
+    isDisabled?: boolean;
+}
+declare function TreeSelect(props: TreeSelectProps): react.JSX.Element;
+
+interface MentionItem {
+    value: string;
+    label?: string;
+}
+interface MentionsProps extends Omit<ViewProps, 'children'> {
+    value?: string;
+    defaultValue?: string;
+    onChangeText?: (v: string) => void;
+    options?: MentionItem[];
+    loadOptions?: (query: string) => Promise<MentionItem[]>;
+    trigger?: string;
+    isDisabled?: boolean;
+    textInputProps?: Omit<TextInputProps, 'value' | 'onChangeText'>;
+}
+declare function Mentions(props: MentionsProps): react.JSX.Element;
+
+interface TransferItem {
+    key: string;
+    label: ReactNode;
+    isDisabled?: boolean;
+}
+interface TransferProps extends Omit<ViewProps, 'onChange'> {
+    dataSource: TransferItem[];
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (targetKeys: string[]) => void;
+    titles?: [ReactNode, ReactNode];
+    showSearch?: boolean;
+    isDisabled?: boolean;
+}
+declare function Transfer(props: TransferProps): react.JSX.Element;
+
+type SortOrder = 'asc' | 'desc' | null;
+interface TableColumn<Row = Record<string, unknown>> {
+    key: string;
+    title: ReactNode;
+    dataIndex?: keyof Row | string;
+    render?: (value: unknown, row: Row, index: number) => ReactNode;
+    sortable?: boolean;
+    sorter?: (a: Row, b: Row) => number;
+    width?: number;
+    align?: 'left' | 'center' | 'right';
+}
+interface TableProps<Row = Record<string, unknown>> extends Omit<ViewProps, 'children'> {
+    columns: TableColumn<Row>[];
+    dataSource: Row[];
+    rowKey?: keyof Row | ((row: Row, index: number) => string | number);
+    size?: 'sm' | 'md' | 'lg';
+    bordered?: boolean;
+    striped?: boolean;
+    emptyState?: ReactNode;
+    onRowPress?: (row: Row, index: number) => void;
+}
+declare function Table<Row extends Record<string, unknown>>(props: TableProps<Row>): react.JSX.Element;
+
+interface TreeNode {
+    key: string;
+    label: ReactNode;
+    children?: TreeNode[];
+    isDisabled?: boolean;
+}
+interface TreeProps extends Omit<ViewProps, 'onSelect'> {
+    treeData: TreeNode[];
+    expandedKeys?: string[];
+    defaultExpandedKeys?: string[];
+    onExpand?: (keys: string[]) => void;
+    selectedKeys?: string[];
+    defaultSelectedKeys?: string[];
+    onSelect?: (keys: string[], info: {
+        node: TreeNode;
+    }) => void;
+    multiple?: boolean;
+}
+declare function Tree(props: TreeProps): react.JSX.Element;
+
+interface ListProps<Item = unknown> extends Omit<ViewProps, 'children'> {
+    dataSource: Item[];
+    renderItem: (item: Item, index: number) => ReactNode;
+    itemKey?: keyof Item | ((item: Item, index: number) => string | number);
+    header?: ReactNode;
+    footer?: ReactNode;
+    bordered?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    divided?: boolean;
+    emptyState?: ReactNode;
+}
+declare function List<Item>(props: ListProps<Item>): react.JSX.Element;
+
+interface DescriptionItem {
+    key: string;
+    label: ReactNode;
+    children: ReactNode;
+    span?: number;
+}
+interface DescriptionsProps extends Omit<ViewProps, 'children'> {
+    items: DescriptionItem[];
+    title?: ReactNode;
+    layout?: 'horizontal' | 'vertical';
+    bordered?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare function Descriptions(props: DescriptionsProps): react.JSX.Element;
+
+interface CalendarProps extends Omit<ViewProps, 'children'> {
+    value?: Date;
+    defaultValue?: Date;
+    onChange?: (date: Date) => void;
+    viewMonth?: Date;
+    onViewMonthChange?: (date: Date) => void;
+    dateCellRender?: (date: Date) => ReactNode;
+    isDateDisabled?: (date: Date) => boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    locale?: string;
+}
+declare function Calendar(props: CalendarProps): react.JSX.Element;
+
+interface StatisticProps extends ViewProps {
+    title?: ReactNode;
+    value: number | string;
+    precision?: number;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    groupSeparator?: boolean;
+    tone?: 'default' | 'success' | 'danger' | 'warning' | 'primary';
+}
+declare function Statistic(props: StatisticProps): react.JSX.Element;
+
+interface CarouselProps extends Omit<ViewProps, 'onChange'> {
+    items: ReactNode[];
+    current?: number;
+    defaultCurrent?: number;
+    onChange?: (index: number) => void;
+    autoplay?: number;
+    dots?: boolean;
+    loop?: boolean;
+    height?: number;
+    width?: number;
+}
+declare function Carousel(props: CarouselProps): react.JSX.Element;
+
+interface ImageProps extends Omit<ImageProps$1, 'source' | 'style'> {
+    src: string;
+    fallback?: string;
+    placeholder?: ReactNode;
+    /** Enable tap-to-preview overlay. */
+    preview?: boolean;
+    width?: number;
+    height?: number;
+    fit?: 'cover' | 'contain' | 'stretch' | 'center';
+    rounded?: boolean;
+    style?: ImageStyle;
+}
+declare function Image(props: ImageProps): react.JSX.Element;
+
+type TimelineItemStatus = 'default' | 'success' | 'danger' | 'warning' | 'info' | 'primary';
+interface TimelineItem {
+    key: string;
+    children: ReactNode;
+    label?: ReactNode;
+    status?: TimelineItemStatus;
+    dot?: ReactNode;
+}
+interface TimelineProps extends Omit<ViewProps, 'children'> {
+    items: TimelineItem[];
+    pending?: ReactNode;
+    reverse?: boolean;
+}
+declare function Timeline(props: TimelineProps): react.JSX.Element;
+
+interface CollapseItem {
+    key: string;
+    header: ReactNode;
+    children: ReactNode;
+    extra?: ReactNode;
+    isDisabled?: boolean;
+}
+interface CollapseProps extends Omit<ViewProps, 'children' | 'onChange'> {
+    items: CollapseItem[];
+    activeKeys?: string[];
+    defaultActiveKeys?: string[];
+    onChange?: (keys: string[]) => void;
+    accordion?: boolean;
+    bordered?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare function Collapse(props: CollapseProps): react.JSX.Element;
+
+interface AccordionItem extends CollapseItem {
+}
+interface AccordionProps extends Omit<CollapseProps, 'accordion' | 'items'> {
+    items: AccordionItem[];
+}
+declare function Accordion(props: AccordionProps): react.JSX.Element;
+
+interface TourStep {
+    title: ReactNode;
+    description?: ReactNode;
+    nextLabel?: ReactNode;
+    prevLabel?: ReactNode;
+}
+interface TourProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    steps: TourStep[];
+    current?: number;
+    defaultCurrent?: number;
+    onChange?: (index: number) => void;
+    onClose?: () => void;
+    finishLabel?: ReactNode;
+}
+/**
+ * Tour (native) — full-screen modal walkthrough. The web variant supports a
+ * spotlight on a DOM element; on native we render each step in a centered
+ * card since there is no DOM to highlight by selector.
+ */
+declare function Tour(props: TourProps): react.JSX.Element | null;
+
+interface FloatButtonProps {
+    icon?: ReactNode;
+    label?: string;
+    size?: number;
+    right?: number;
+    bottom?: number;
+    tone?: 'primary' | 'neutral' | 'danger' | 'success';
+    extended?: boolean;
+    onPress?: () => void;
+    isDisabled?: boolean;
+    accessibilityLabel?: string;
+    style?: ViewStyle;
+}
+declare function FloatButton(props: FloatButtonProps): react.JSX.Element;
+
+interface WatermarkProps extends ViewProps {
+    content: string;
+    color?: string;
+    rotate?: number;
+    gapX?: number;
+    gapY?: number;
+    fontSize?: number;
+    children?: ReactNode;
+}
+/**
+ * Watermark — repeats text diagonally across the children. Implemented with a
+ * grid of `<Text>` nodes since RN doesn't expose CSS background patterns.
+ */
+declare function Watermark(props: WatermarkProps): react.JSX.Element;
+
+interface QRCodeProps {
+    value: string;
+    size?: number;
+    level?: ErrorCorrection;
+    foreground?: string;
+    background?: string;
+    /** Optional centered node (e.g. logo). Should be roughly 18% of `size`. */
+    icon?: ReactNode;
+    style?: ViewStyle;
+}
+/**
+ * QRCode — renders a QR code as a stacked grid of `View` cells. Pure RN, no
+ * native deps. For very large codes consider rendering on the JS side and
+ * passing through `react-native-svg` for sharper printing.
+ */
+declare function QRCode(props: QRCodeProps): react.JSX.Element;
+
+interface SplitterProps {
+    first: ReactNode;
+    second: ReactNode;
+    direction?: 'horizontal' | 'vertical';
+    /** Controlled split (0..1). */
+    split?: number;
+    defaultSplit?: number;
+    onChange?: (split: number) => void;
+    minRatio?: number;
+    maxRatio?: number;
+    handleSize?: number;
+    style?: ViewStyle;
+}
+/**
+ * Splitter — drag-to-resize layout for two panes. Horizontal direction stacks
+ * left/right; vertical stacks top/bottom.
+ */
+declare function Splitter(props: SplitterProps): react.JSX.Element;
+
+interface AffixProps extends ViewProps {
+    /** No-op on RN — use sticky list headers instead. Pass-through wrapper. */
+    offsetTop?: number;
+    offsetBottom?: number;
+    onChange?: (affixed: boolean) => void;
+    children?: ReactNode;
+}
+/**
+ * Affix — on React Native there is no global scroll viewport so this is a
+ * pass-through wrapper. For sticky list headers use `FlatList`'s
+ * `stickyHeaderIndices` or `ScrollView`'s `stickyHeaderIndices` directly.
+ */
+declare function Affix(props: AffixProps): react.JSX.Element;
+
+interface SpeedDialAction {
+    key: string;
+    icon: ReactNode;
+    label: string;
+    onPress?: () => void;
+    isDisabled?: boolean;
+}
+interface SpeedDialProps {
+    icon: ReactNode;
+    actions: SpeedDialAction[];
+    right?: number;
+    bottom?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    accessibilityLabel?: string;
+}
+declare function SpeedDial(props: SpeedDialProps): react.JSX.Element;
+
+interface BackdropProps {
+    open: boolean;
+    onClose?: () => void;
+    tint?: string;
+    invisible?: boolean;
+    children?: ReactNode;
+}
+declare function Backdrop(props: BackdropProps): react.JSX.Element | null;
+
+interface ImageListItem {
+    key: string;
+    src?: string;
+    alt?: string;
+    node?: ReactNode;
+    caption?: ReactNode;
+}
+interface ImageListProps {
+    items: ImageListItem[];
+    cols?: number;
+    gap?: number;
+    rowHeight?: number;
+    style?: ViewStyle;
+}
+declare function ImageList(props: ImageListProps): react.JSX.Element;
+
+interface SimplePaginationProps extends ViewProps {
+    total: number;
+    pageSize?: number;
+    current?: number;
+    defaultCurrent?: number;
+    onChange?: (page: number) => void;
+}
+declare function SimplePagination(props: SimplePaginationProps): react.JSX.Element;
+interface MiniPaginationProps extends SimplePaginationProps {
+}
+declare function MiniPagination(props: MiniPaginationProps): react.JSX.Element;
+
+interface StepperStep {
+    key: string;
+    label: ReactNode;
+    description?: ReactNode;
+    content?: ReactNode;
+    optional?: boolean;
+}
+interface StepperProps extends Omit<ViewProps, 'children'> {
+    steps: StepperStep[];
+    active?: number;
+    defaultActive?: number;
+    onChange?: (index: number) => void;
+    orientation?: 'horizontal' | 'vertical';
+    showNavigation?: boolean;
+    nextLabel?: string;
+    prevLabel?: string;
+    finishLabel?: string;
+    onFinish?: () => void;
+}
+declare function Stepper(props: StepperProps): react.JSX.Element;
+
+interface ToggleButtonProps {
+    selected?: boolean;
+    defaultSelected?: boolean;
+    onChange?: (selected: boolean) => void;
+    isDisabled?: boolean;
+    size?: ElvoraSize;
+    value?: string;
+    children?: ReactNode;
+    style?: ViewStyle;
+}
+declare function ToggleButton(props: ToggleButtonProps): react.JSX.Element;
+
+type ButtonGroupOrientation = 'horizontal' | 'vertical';
+type ButtonGroupSelectionMode = 'none' | 'single' | 'multiple';
+interface ButtonGroupProps {
+    orientation?: ButtonGroupOrientation;
+    mode?: ButtonGroupSelectionMode;
+    value?: string | string[] | null;
+    defaultValue?: string | string[] | null;
+    onChange?: (value: string | string[] | null) => void;
+    allowDeselect?: boolean;
+    style?: ViewStyle;
+    children?: ReactNode;
+}
+declare function ButtonGroup(props: ButtonGroupProps): react.JSX.Element;
+
+interface ChipInputProps {
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (chips: string[]) => void;
+    placeholder?: string;
+    validate?: (value: string) => boolean;
+    unique?: boolean;
+    isDisabled?: boolean;
+    maxChips?: number;
+    style?: ViewStyle;
+    accessibilityLabel?: string;
+}
+declare function ChipInput(props: ChipInputProps): react.JSX.Element;
+
+interface ProTableToolbar {
+    title?: ReactNode;
+    actions?: ReactNode;
+}
+interface ProTableColumn<Row = Record<string, unknown>> extends TableColumn<Row> {
+    searchable?: boolean;
+}
+interface ProTableProps<Row = Record<string, unknown>> extends Omit<ViewProps, 'children'> {
+    columns: ProTableColumn<Row>[];
+    dataSource: Row[];
+    rowKey?: keyof Row | ((row: Row, index: number) => string | number);
+    toolbar?: ProTableToolbar;
+    search?: boolean;
+    searchPlaceholder?: string;
+    empty?: ReactNode;
+    onRowPress?: (row: Row, index: number) => void;
+}
+declare function ProTable<Row extends Record<string, unknown>>(props: ProTableProps<Row>): react.JSX.Element;
+
+type ProFormFieldType = 'text' | 'password' | 'email' | 'number' | 'textarea' | 'switch' | 'checkbox' | 'select' | 'custom';
+interface ProFormSelectOption {
+    value: string;
+    label: string;
+}
+interface ProFormField {
+    name: string;
+    label?: ReactNode;
+    type: ProFormFieldType;
+    placeholder?: string;
+    hint?: ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    defaultValue?: unknown;
+    options?: ProFormSelectOption[];
+    validate?: (value: unknown, values: Record<string, unknown>) => string | undefined;
+    render?: (ctx: {
+        value: unknown;
+        onChange: (v: unknown) => void;
+        error: string | undefined;
+        name: string;
+    }) => ReactNode;
+}
+interface ProFormProps extends Omit<ViewProps, 'children'> {
+    fields: ProFormField[];
+    initialValues?: Record<string, unknown>;
+    onSubmit?: (values: Record<string, unknown>) => void | Promise<void>;
+    submitLabel?: ReactNode;
+    resetLabel?: ReactNode;
+    isSubmitting?: boolean;
+}
+declare function ProForm(props: ProFormProps): react.JSX.Element;
+
+interface ProLayoutMenuItem {
+    key: string;
+    label: ReactNode;
+    icon?: IconName;
+    children?: ProLayoutMenuItem[];
+}
+interface ProLayoutUser {
+    name: string;
+    avatar?: string;
+    caption?: ReactNode;
+}
+interface ProLayoutProps extends Omit<ViewProps, 'children'> {
+    brand?: ReactNode;
+    menu?: ProLayoutMenuItem[];
+    selectedKey?: string;
+    onSelect?: (key: string) => void;
+    user?: ProLayoutUser;
+    header?: ReactNode;
+    footer?: ReactNode;
+    children?: ReactNode;
+}
+declare function ProLayout(props: ProLayoutProps): react.JSX.Element;
+
+type DataGridSortOrder = 'asc' | 'desc' | null;
+interface DataGridColumn<Row = Record<string, unknown>> {
+    key: string;
+    title: ReactNode;
+    dataIndex?: keyof Row | string;
+    width?: number;
+    render?: (value: unknown, row: Row, index: number) => ReactNode;
+    sortable?: boolean;
+    sorter?: (a: Row, b: Row) => number;
+    align?: 'left' | 'center' | 'right';
+}
+interface DataGridProps<Row = Record<string, unknown>> extends Omit<ViewProps, 'children'> {
+    columns: DataGridColumn<Row>[];
+    dataSource: Row[];
+    rowKey?: keyof Row | ((row: Row, index: number) => string | number);
+    rowHeight?: number;
+    height?: number;
+    empty?: ReactNode;
+    onRowPress?: (row: Row, index: number) => void;
+}
+declare function DataGrid<Row extends Record<string, unknown>>(props: DataGridProps<Row>): react.JSX.Element;
+
+export { Accordion, type AccordionItem, type AccordionProps, Affix, type AffixProps, Alert, type AlertProps, Anchor, type AnchorLink, type AnchorProps, AutoComplete, type AutoCompleteOption, type AutoCompleteProps, Avatar, type AvatarProps, BackTop, type BackTopProps, Backdrop, type BackdropProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonGroupSelectionMode, type ButtonProps, Calendar, type CalendarProps, Card, CardBody, CardFooter, CardHeader, type CardProps, Carousel, type CarouselProps, Cascader, type CascaderOption, type CascaderProps, Checkbox, type CheckboxProps, ChipInput, type ChipInputProps, Collapse, type CollapseItem, type CollapseProps, ColorPicker, type ColorPickerProps, Container, type ContainerProps, DataGrid, type DataGridColumn, type DataGridProps, type DataGridSortOrder, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateValue, type DescriptionItem, Descriptions, type DescriptionsProps, Divider, type DividerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, ElvoraProvider, type ElvoraProviderProps, Empty, type EmptyProps, FloatButton, type FloatButtonProps, Form, FormField, type FormFieldProps, type FormProps, Grid, GridItem, type GridItemProps, type GridProps, HStack, Icon, IconButton, type IconButtonProps, type IconProps, Image, ImageList, type ImageListItem, type ImageListProps, type ImageProps, Input, type InputProps, Label, type LabelProps, List, type ListProps, type MentionItem, Mentions, type MentionsProps, Menu, type MenuItem, type MenuProps, MiniPagination, type MiniPaginationProps, Modal, type ModalProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, Popover, type PopoverProps, ProForm, type ProFormField, type ProFormFieldType, type ProFormProps, type ProFormSelectOption, ProLayout, type ProLayoutMenuItem, type ProLayoutProps, type ProLayoutUser, ProTable, type ProTableColumn, type ProTableProps, type ProTableToolbar, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rate, type RateProps, Result, type ResultProps, type ResultStatus, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectOption, type SelectProps, SimplePagination, type SimplePaginationProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortOrder, SpeedDial, type SpeedDialAction, type SpeedDialProps, Spinner, type SpinnerProps, Splitter, type SplitterProps, Stack, type StackProps, Statistic, type StatisticProps, type Step, Stepper, type StepperProps, type StepperStep, Steps, type StepsProps, Switch, type SwitchProps, Table, type TableColumn, type TableProps, Tabs, type TabsProps, type TabsTab, Tag, type TagProps, Textarea, type TextareaProps, TimePicker, type TimePickerProps, type TimeValue, Timeline, type TimelineItem, type TimelineItemStatus, type TimelineProps, type ToastApi, type ToastOptions, ToastProvider, type ToastProviderProps, ToggleButton, type ToggleButtonProps, Tooltip, type TooltipProps, Tour, type TourProps, type TourStep, Transfer, type TransferItem, type TransferProps, Tree, type TreeNode as TreeDataNode, type TreeNode$1 as TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Upload, type UploadFile, type UploadProps, VStack, Watermark, type WatermarkProps, makeUploadFile, useElvoraContext, useFormField, useTheme, useToast };