@qumra/fanar-native 0.1.0

package/lib/components/Display.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Animated, Image, Pressable, StyleSheet, View, } from 'react-native';
+import { Text } from './Text';
+import { useFanar } from '../theme/context';
+import { useSkeletonPulse } from '../lib/motion';
+import { TONE_SOFT, TONE_SOLID } from '../lib/tone';
+export function Badge({ children, tone = 'neutral', solid = false, size = 'md', dot, icon: Icon, style }) {
+    const { theme } = useFanar();
+    const c = (solid ? TONE_SOLID : TONE_SOFT)[tone];
+    const fg = theme.colorOf(c.fg, theme.color.ink);
+    const text = size === 'sm' ? theme.text.micro : theme.text.caption;
+    return (_jsxs(View, { style: [
+            styles.badge,
+            {
+                backgroundColor: theme.colorOf(c.bg, 'transparent'),
+                borderRadius: theme.radius.full,
+                paddingHorizontal: size === 'sm' ? 8 : 10,
+                paddingVertical: size === 'sm' ? 2 : 4,
+            },
+            style,
+        ], children: [dot && _jsx(View, { style: [styles.badgeDot, { backgroundColor: fg }] }), Icon && _jsx(Icon, { size: text, strokeWidth: 2.2, color: fg }), _jsx(Text, { size: text, weight: "bold", color: c.fg, leading: "tight", lines: 1, children: children })] }));
+}
+export function Counter({ value, style }) {
+    const { theme } = useFanar();
+    return (_jsx(View, { style: [
+            styles.counter,
+            { backgroundColor: theme.color.danger, borderRadius: theme.radius.full },
+            style,
+        ], children: _jsx(Text, { size: "micro", style: { textAlign: 'center' }, weight: "extraBold", color: "white", leading: "none", numeric: true, children: value }) }));
+}
+const AVATAR = {
+    xs: { box: 28, text: 11 },
+    sm: { box: 36, text: 13 },
+    md: { box: 44, text: 14 },
+    lg: { box: 56, text: 17 },
+};
+export function initials(name) {
+    return name
+        .trim()
+        .split(/\s+/)
+        .slice(0, 2)
+        .map((w) => w[0])
+        .join('');
+}
+export function Avatar({ name = '', source, size = 'md', square = false, style }) {
+    const { theme } = useFanar();
+    const { box, text } = AVATAR[size];
+    const radius = square ? theme.radius.field : theme.radius.full;
+    const shape = {
+        width: box,
+        height: box,
+        borderRadius: radius,
+        borderWidth: 1,
+        borderColor: theme.color.line,
+    };
+    if (source)
+        return (_jsx(Image, { accessibilityIgnoresInvertColors: true, source: typeof source === 'string' ? { uri: source } : source, style: [shape, style], resizeMode: "cover" }));
+    return (_jsx(View, { style: [shape, styles.center, { backgroundColor: theme.color.soft, borderColor: theme.color.soft2 }, style], children: _jsx(Text, { size: text, weight: "extraBold", color: "brand-ink", leading: "none", children: initials(name) }) }));
+}
+export function Card({ children, padded = false, flat = false, onPress, style }) {
+    const { theme } = useFanar();
+    const box = {
+        backgroundColor: flat ? 'transparent' : theme.color.surface,
+        borderWidth: flat ? 0 : 1,
+        borderColor: theme.color.line,
+        borderRadius: theme.radius.card,
+        padding: padded ? 20 : 0,
+        overflow: 'hidden',
+    };
+    if (!onPress)
+        return _jsx(View, { style: [box, style], children: children });
+    return (_jsx(Pressable, { accessibilityRole: "button", onPress: onPress, style: ({ pressed }) => [box, pressed && { backgroundColor: theme.color.hover }, style], children: children }));
+}
+export function CardHeader({ title, description, actions, style }) {
+    return (_jsxs(View, { style: [styles.headRow, style], children: [_jsxs(View, { style: styles.headText, children: [_jsx(Text, { size: "lead", weight: "extraBold", color: "ink", align: "start", children: title }), description ? (_jsx(Text, { size: "ui", color: "muted", align: "start", children: description })) : null] }), actions ? _jsx(View, { style: styles.headActions, children: actions }) : null] }));
+}
+export function PageHeader({ title, hint, actions, style }) {
+    return (_jsxs(View, { style: [styles.headRow, style], children: [_jsxs(View, { style: styles.headText, children: [_jsx(Text, { size: "h3", weight: "black", color: "ink", align: "start", children: title }), hint ? (_jsx(Text, { size: "ui", color: "muted", align: "start", children: hint })) : null] }), actions ? _jsx(View, { style: styles.pageActions, children: actions }) : null] }));
+}
+export function StatCard({ label, value, hint, icon: Icon, tone = 'brand', onPress, style }) {
+    const { theme } = useFanar();
+    const c = TONE_SOFT[tone];
+    return (_jsx(Card, { onPress: onPress, style: [{ padding: 16 }, style], children: _jsxs(View, { style: styles.statGap, children: [_jsxs(View, { style: styles.statRow, children: [Icon && (_jsx(View, { style: [
+                                styles.statIcon,
+                                { backgroundColor: theme.colorOf(c.bg, theme.color.hover), borderRadius: theme.radius.sm },
+                            ], children: _jsx(Icon, { size: 16, strokeWidth: 2.2, color: theme.colorOf(c.fg, theme.color.ink) }) })), _jsx(Text, { size: "ui", color: "muted", align: "start", style: styles.flex1, lines: 1, children: label })] }), _jsx(Text, { size: "h3", weight: "extraBold", leading: "none", numeric: true, align: "start", children: value }), hint ? (_jsx(Text, { size: "micro", color: "muted2", align: "start", children: hint })) : null] }) }));
+}
+const PROGRESS_FILL = {
+    neutral: 'muted2',
+    brand: 'brand',
+    amber: 'amber',
+    green: 'green-solid',
+    red: 'danger',
+    violet: 'violet-solid',
+};
+export function Progress({ value, max = 100, label, meta, tone = 'brand', style }) {
+    const { theme } = useFanar();
+    const safeMax = max > 0 ? max : 100;
+    const pct = Math.max(0, Math.min(100, (value / safeMax) * 100));
+    return (_jsxs(View, { style: [styles.progressWrap, style], children: [(label || meta) && (_jsxs(View, { style: styles.progressLabels, children: [label ? (_jsx(Text, { size: "caption", color: "muted", align: "start", style: styles.flex1, lines: 1, children: label })) : null, meta ? (_jsx(Text, { size: "caption", color: "muted", numeric: true, children: meta })) : null] })), _jsx(View, { accessibilityRole: "progressbar", accessibilityValue: { now: Math.round(pct), min: 0, max: 100 }, style: [styles.progressTrack, { backgroundColor: theme.color.hover, borderRadius: theme.radius.full }], children: _jsx(View, { style: {
+                        width: `${pct}%`,
+                        height: '100%',
+                        borderRadius: theme.radius.full,
+                        backgroundColor: theme.color[PROGRESS_FILL[tone]],
+                    } }) })] }));
+}
+export function ProgressSteps({ total, done, fill = 'mint', track, style, }) {
+    const { theme } = useFanar();
+    return (_jsx(View, { style: [styles.stepsRow, style], children: Array.from({ length: total }, (_, i) => (_jsx(View, { style: {
+                flex: 1,
+                height: 7,
+                borderRadius: theme.radius.full,
+                backgroundColor: i < done ? theme.color[fill] : (track ?? 'rgba(255,255,255,0.14)'),
+            } }, i))) }));
+}
+export function Skeleton({ variant = 'text', width, height, style }) {
+    const { theme } = useFanar();
+    const opacity = useSkeletonPulse();
+    const shape = variant === 'circle'
+        ? { width: width ?? 40, height: height ?? 40, borderRadius: theme.radius.full }
+        : variant === 'block'
+            ? { width: width ?? '100%', height: height ?? 80, borderRadius: theme.radius.field }
+            : { width: width ?? '100%', height: height ?? 14, borderRadius: theme.radius.xs };
+    return _jsx(Animated.View, { style: [shape, { backgroundColor: theme.color.skeleton, opacity }, style] });
+}
+export function Divider({ inset = 0, style }) {
+    const { theme } = useFanar();
+    return (_jsx(View, { style: [
+            { height: 1, backgroundColor: theme.color.line, marginHorizontal: inset },
+            style,
+        ] }));
+}
+const styles = StyleSheet.create({
+    badge: { flexDirection: 'row', alignItems: 'center', gap: 6, alignSelf: 'flex-start' },
+    badgeDot: { width: 6, height: 6, borderRadius: 3 },
+    counter: {
+        minWidth: 18,
+        height: 18,
+        paddingHorizontal: 6,
+        alignItems: 'center',
+        justifyContent: 'center',
+        textAlign: 'center',
+    },
+    center: { alignItems: 'center', justifyContent: 'center' },
+    headRow: { flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 },
+    headText: { flex: 1, minWidth: 0, gap: 4 },
+    headActions: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+    pageActions: { flexDirection: 'row', alignItems: 'center', gap: 10 },
+    statGap: { gap: 8 },
+    statRow: { flexDirection: 'row', alignItems: 'center', gap: 10 },
+    statIcon: { width: 30, height: 30, alignItems: 'center', justifyContent: 'center' },
+    flex1: { flex: 1 },
+    progressWrap: { gap: 6 },
+    progressLabels: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 12 },
+    progressTrack: { height: 6, overflow: 'hidden' },
+    stepsRow: { flexDirection: 'row', gap: 5, flex: 1, minWidth: 180 },
+});

package/lib/components/Drawer.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type LucideIcon } from '../icons';
+export interface DrawerItem {
+    key: string;
+    label: string;
+    isNew?: boolean;
+    danger?: boolean;
+    chip?: string | number;
+}
+export interface DrawerSection {
+    key: string;
+    label: string;
+    icon: LucideIcon | string;
+    badge?: number;
+    items: DrawerItem[];
+}
+export interface DrawerMenuProps {
+    sections: DrawerSection[];
+    onSelect: (sectionKey: string, itemKey: string) => void;
+    defaultOpen?: string | null;
+    header?: ReactNode;
+    footer?: ReactNode;
+    newLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function DrawerMenu({ sections, onSelect, defaultOpen, header, footer, newLabel, style, }: DrawerMenuProps): import("react").JSX.Element;

package/lib/components/Drawer.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Pressable, ScrollView, StyleSheet, View } from 'react-native';
+import { Text } from './Text';
+import { Badge, Counter, Divider } from './Display';
+import { useFanar } from '../theme/context';
+import { ChevronDown, ChevronLeft, ChevronRight } from '../icons';
+import { NavIcon } from '../qumra/NavIcon';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+export function DrawerMenu({ sections, onSelect, defaultOpen = null, header, footer, newLabel, style, }) {
+    const { theme, dir } = useFanar();
+    const insets = useSafeAreaInsets();
+    const [open, setOpen] = useState(defaultOpen);
+    const Chevron = dir === 'rtl' ? ChevronLeft : ChevronRight;
+    return (_jsxs(View, { style: [styles.root, { backgroundColor: theme.color.surface, paddingTop: insets.top }, style], children: [header ? (_jsxs(_Fragment, { children: [_jsx(View, { style: styles.header, children: header }), _jsx(Divider, {})] })) : null, _jsx(ScrollView, { style: styles.flex1, contentContainerStyle: [styles.body, { paddingBottom: insets.bottom + 16 }], showsVerticalScrollIndicator: false, children: sections.map((section) => {
+                    const on = section.key === open;
+                    return (_jsxs(View, { children: [_jsxs(Pressable, { accessibilityRole: "button", accessibilityState: { expanded: on }, accessibilityLabel: section.label, onPress: () => setOpen(on ? null : section.key), style: ({ pressed }) => [
+                                    styles.section,
+                                    {
+                                        borderRadius: theme.radius.field,
+                                        backgroundColor: on
+                                            ? theme.color.soft
+                                            : pressed
+                                                ? theme.color.hover
+                                                : 'transparent',
+                                    },
+                                ], children: [_jsxs(View, { style: styles.iconWrap, children: [_jsx(NavIcon, { icon: section.icon, size: 21, active: on, strokeWidth: on ? 2.4 : 2, color: theme.color.ink2, activeColor: theme.color.brand }), !!section.badge && _jsx(Counter, { value: section.badge, style: styles.badge })] }), _jsx(Text, { size: "body", weight: on ? 'extraBold' : 'semiBold', color: on ? 'brand-ink' : 'ink2', align: "start", lines: 1, style: styles.flex1, children: section.label }), _jsx(ChevronDown, { size: 16, strokeWidth: 2.2, color: theme.color.muted2, style: on ? styles.flipped : undefined })] }), on && (_jsx(View, { style: [
+                                    styles.items,
+                                    { borderColor: theme.color.line },
+                                    dir === 'rtl' ? styles.itemsRtl : styles.itemsLtr,
+                                ], children: section.items.map((item) => (_jsxs(Pressable, { accessibilityRole: "menuitem", onPress: () => onSelect(section.key, item.key), style: ({ pressed }) => [
+                                        styles.item,
+                                        {
+                                            borderRadius: theme.radius.sm,
+                                            backgroundColor: pressed
+                                                ? item.danger
+                                                    ? theme.color['red-bg']
+                                                    : theme.color.hover
+                                                : 'transparent',
+                                        },
+                                    ], children: [_jsx(Text, { size: "ui", weight: "medium", color: item.danger ? 'red' : 'ink2', align: "start", lines: 1, style: styles.flex1, children: item.label }), item.isNew && newLabel ? (_jsx(Badge, { tone: "green", size: "sm", children: newLabel })) : null, item.chip !== undefined ? (_jsx(Text, { size: "micro", color: "muted2", numeric: true, children: item.chip })) : null, _jsx(Chevron, { size: 14, strokeWidth: 2, color: theme.color.muted2 })] }, item.key))) }))] }, section.key));
+                }) }), footer ? (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(View, { style: [styles.footer, { paddingBottom: insets.bottom + 12 }], children: footer })] })) : null] }));
+}
+const styles = StyleSheet.create({
+    root: { flex: 1 },
+    flex1: { flex: 1 },
+    header: { padding: 16 },
+    body: { padding: 10, gap: 2 },
+    section: { flexDirection: 'row', alignItems: 'center', gap: 12, height: 48, paddingHorizontal: 12 },
+    iconWrap: { width: 22, alignItems: 'center', justifyContent: 'center' },
+    badge: { position: 'absolute', top: -8, insetInlineEnd: -10 },
+    flipped: { transform: [{ rotate: '180deg' }] },
+    items: { marginTop: 2, marginBottom: 6, gap: 1, borderStartWidth: 1 },
+    itemsRtl: { marginEnd: 23, paddingEnd: 12 },
+    itemsLtr: { marginStart: 23, paddingStart: 12 },
+    item: { flexDirection: 'row', alignItems: 'center', gap: 8, height: 42, paddingHorizontal: 10 },
+    footer: { paddingHorizontal: 16, paddingTop: 12 },
+});

package/lib/components/Feedback.d.ts

@@ -0,0 +1,43 @@
+import { type ReactNode } from 'react';
+export type ToastTone = 'success' | 'error' | 'info' | 'warning';
+export interface ToastInput {
+    title: string;
+    description?: string;
+    tone?: ToastTone;
+    duration?: number;
+    action?: {
+        label: string;
+        onPress: () => void;
+    };
+}
+export interface ToastItem extends ToastInput {
+    id: number;
+}
+declare function dismiss(id: number): void;
+export declare const toast: {
+    show: (input: ToastInput) => number;
+    success: (title: string, description?: string) => number;
+    error: (title: string, description?: string) => number;
+    info: (title: string, description?: string) => number;
+    warning: (title: string, description?: string) => number;
+    dismiss: typeof dismiss;
+    clear: () => void;
+};
+export declare function useToasts(): {
+    show: (input: ToastInput) => number;
+    success: (title: string, description?: string) => number;
+    error: (title: string, description?: string) => number;
+    info: (title: string, description?: string) => number;
+    warning: (title: string, description?: string) => number;
+    dismiss: typeof dismiss;
+    clear: () => void;
+    toasts: ToastItem[];
+};
+export declare function ToastHost({ bottomOffset }: {
+    bottomOffset?: number;
+}): import("react").JSX.Element | null;
+export declare function Tooltip({ text, children }: {
+    text: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/lib/components/Feedback.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Animated, Platform, Pressable, StyleSheet, View } from 'react-native';
+import { Text } from './Text';
+import { useFanar } from '../theme/context';
+import { EASE_OUT } from '../lib/motion';
+import { DURATION } from '../theme/theme';
+import { AlertTriangle, Check, Info, X } from '../icons';
+let seq = 0;
+let items = [];
+const listeners = new Set();
+let hosts = 0;
+function emit() {
+    for (const l of listeners)
+        l(items);
+}
+function push(input) {
+    const id = ++seq;
+    items = [...items, { ...input, id }];
+    emit();
+    return id;
+}
+function dismiss(id) {
+    items = items.filter((t) => t.id !== id);
+    emit();
+}
+export const toast = {
+    show: (input) => push(input),
+    success: (title, description) => push({ title, description, tone: 'success' }),
+    error: (title, description) => push({ title, description, tone: 'error', duration: 6000 }),
+    info: (title, description) => push({ title, description, tone: 'info' }),
+    warning: (title, description) => push({ title, description, tone: 'warning' }),
+    dismiss,
+    clear: () => {
+        items = [];
+        emit();
+    },
+};
+export function useToasts() {
+    const [list, setList] = useState(items);
+    useEffect(() => {
+        listeners.add(setList);
+        return () => {
+            listeners.delete(setList);
+        };
+    }, []);
+    return { toasts: list, ...toast };
+}
+const TONE = {
+    success: { icon: Check, fg: 'green' },
+    error: { icon: AlertTriangle, fg: 'red-100' },
+    info: { icon: Info, fg: 'mint' },
+    warning: { icon: AlertTriangle, fg: 'amber' },
+};
+function ToastCard({ item }) {
+    const { theme, p } = useFanar();
+    const enter = useRef(new Animated.Value(0)).current;
+    const tone = TONE[item.tone ?? 'info'];
+    const Icon = tone.icon;
+    useEffect(() => {
+        Animated.timing(enter, {
+            toValue: 1,
+            duration: DURATION.toast,
+            easing: EASE_OUT,
+            useNativeDriver: true,
+        }).start();
+        const ms = item.duration ?? 4000;
+        if (ms <= 0)
+            return;
+        const timer = setTimeout(() => dismiss(item.id), ms);
+        return () => clearTimeout(timer);
+    }, [enter, item.id, item.duration]);
+    return (_jsxs(Animated.View, { style: [
+            styles.toast,
+            theme.shadow.toast,
+            {
+                backgroundColor: theme.color.night,
+                borderRadius: theme.radius.card,
+                opacity: enter,
+                transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [12, 0] }) }],
+            },
+        ], accessibilityLiveRegion: "polite", accessibilityRole: "alert", children: [_jsx(Icon, { size: 17, strokeWidth: 2.2, color: theme.color[tone.fg] }), _jsxs(View, { style: styles.toastText, children: [_jsx(Text, { size: "ui", weight: "extraBold", color: "white", align: "start", children: item.title }), item.description ? (_jsx(Text, { size: "caption", color: "hero-meta", align: "start", leading: "relaxed", children: item.description })) : null] }), item.action && (_jsx(Pressable, { accessibilityRole: "button", onPress: item.action.onPress, hitSlop: 8, children: _jsx(Text, { size: "caption", weight: "extraBold", color: "mint", children: item.action.label }) })), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: p('close'), hitSlop: 10, onPress: () => dismiss(item.id), children: _jsx(X, { size: 15, strokeWidth: 2.4, color: theme.color['hero-dim'] }) })] }));
+}
+export function ToastHost({ bottomOffset = 0 }) {
+    const { toasts } = useToasts();
+    useEffect(() => {
+        hosts += 1;
+        if (__DEV__ && hosts > 1)
+            console.warn('[fanar-native] ToastHost اتركّب أكتر من مرة — كل رسالة هتظهر مرّتين.');
+        return () => {
+            hosts -= 1;
+        };
+    }, []);
+    if (!toasts.length)
+        return null;
+    return (_jsx(View, { pointerEvents: "box-none", style: [styles.host, { bottom: bottomOffset + 16 }], children: toasts.map((t) => (_jsx(ToastCard, { item: t }, t.id))) }));
+}
+export function Tooltip({ text, children }) {
+    const { theme } = useFanar();
+    const [open, setOpen] = useState(false);
+    const fade = useRef(new Animated.Value(0)).current;
+    const close = useCallback(() => {
+        Animated.timing(fade, { toValue: 0, duration: DURATION.fade, useNativeDriver: true }).start(() => setOpen(false));
+    }, [fade]);
+    useEffect(() => {
+        if (!open)
+            return;
+        Animated.timing(fade, { toValue: 1, duration: DURATION.fade, useNativeDriver: true }).start();
+        const timer = setTimeout(close, 2200);
+        return () => clearTimeout(timer);
+    }, [open, fade, close]);
+    return (_jsxs(View, { children: [_jsx(Pressable, { onLongPress: () => setOpen(true), delayLongPress: 350, accessibilityHint: text, children: children }), open && (_jsx(Animated.View, { pointerEvents: "none", style: [
+                    styles.tip,
+                    theme.shadow.tip,
+                    { backgroundColor: theme.color.night, borderRadius: theme.radius.sm, opacity: fade },
+                ], children: _jsx(Text, { size: "caption", weight: "semiBold", color: "white", children: text }) }))] }));
+}
+const styles = StyleSheet.create({
+    host: {
+        position: 'absolute',
+        insetInlineStart: 16,
+        insetInlineEnd: 16,
+        gap: 8,
+        ...Platform.select({ android: { elevation: 12 }, default: {} }),
+    },
+    toast: { flexDirection: 'row', alignItems: 'center', gap: 10, padding: 14 },
+    toastText: { flex: 1, gap: 2 },
+    tip: {
+        position: 'absolute',
+        bottom: '100%',
+        marginBottom: 6,
+        paddingHorizontal: 10,
+        paddingVertical: 6,
+        alignSelf: 'center',
+    },
+});

package/lib/components/Form.d.ts

@@ -0,0 +1,92 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type TextInputProps, type ViewStyle } from 'react-native';
+import { type LucideIcon } from '../icons';
+export type FieldSize = 'sm' | 'md' | 'lg';
+export interface FieldProps {
+    label?: string;
+    required?: boolean;
+    meta?: string;
+    error?: string;
+    hint?: string;
+    size?: FieldSize;
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Field({ label, required, meta, error, hint, size, children, style }: FieldProps): import("react").JSX.Element;
+export interface InputProps extends Omit<TextInputProps, 'style'> {
+    label?: string;
+    required?: boolean;
+    meta?: string;
+    error?: string;
+    invalid?: boolean;
+    hint?: string;
+    size?: FieldSize;
+    icon?: LucideIcon;
+    suffix?: string;
+    action?: ReactNode;
+    numeric?: boolean;
+    style?: StyleProp<ViewStyle>;
+    inputStyle?: StyleProp<ViewStyle>;
+}
+export declare function Input({ label, required, meta, error, invalid: invalidProp, hint, size, icon: Icon, suffix, action, numeric, editable, style, inputStyle, onFocus, onBlur, accessibilityLabel, ...rest }: InputProps): import("react").JSX.Element;
+export interface SearchInputProps extends Omit<InputProps, 'icon' | 'action'> {
+    onClear?: () => void;
+}
+export declare function SearchInput({ value, onClear, onChangeText, ...rest }: SearchInputProps): import("react").JSX.Element;
+export interface TextareaProps extends Omit<InputProps, 'size' | 'suffix' | 'icon' | 'action'> {
+    minHeight?: number;
+}
+export declare function Textarea({ label, required, meta, error, hint, minHeight, numeric, editable, style, onFocus, onBlur, accessibilityLabel, ...rest }: TextareaProps): import("react").JSX.Element;
+export interface ChoiceProps {
+    label?: string;
+    description?: string;
+    checked: boolean;
+    onChange: (next: boolean) => void;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Checkbox(props: ChoiceProps): import("react").JSX.Element;
+export declare function Radio(props: ChoiceProps): import("react").JSX.Element;
+export interface RadioGroupProps<T extends string> {
+    legend?: string;
+    value: T;
+    options: {
+        value: T;
+        label: string;
+        description?: string;
+        disabled?: boolean;
+    }[];
+    onChange: (next: T) => void;
+    inline?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function RadioGroup<T extends string>({ legend, value, options, onChange, inline, style }: RadioGroupProps<T>): import("react").JSX.Element;
+export interface SwitchProps {
+    value: boolean;
+    onValueChange: (next: boolean) => void;
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+    activeColor?: string;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Switch({ value, onValueChange, label, description, disabled, activeColor, style }: SwitchProps): import("react").JSX.Element;
+export interface SelectOption<T extends string> {
+    value: T;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps<T extends string> {
+    label?: string;
+    required?: boolean;
+    error?: string;
+    hint?: string;
+    size?: FieldSize;
+    value?: T;
+    placeholder?: string;
+    options: SelectOption<T>[];
+    onChange: (next: T) => void;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Select<T extends string>({ label, required, error, hint, size, value, placeholder, options, onChange, disabled, style, }: SelectProps<T>): import("react").JSX.Element;