@qumra/fanar-native 0.1.0

package/README.md

@@ -0,0 +1,83 @@
+# @qumra/fanar-native
+
+مكتبة مكوّنات قمرة لـReact Native — النظير النيتف لـ`@qumra/fanar`.
+
+نفس التوكنز، ونفس أسماء المكوّنات، ونفس أسماء الخصائص — بتنفيذ مكتوب
+لـReact Native لا مترجَم عنه. بلا تبعيّات وقت تشغيل.
+
+```tsx
+import { FanarProvider, Screen, Card, Button, Text } from '@qumra/fanar-native'
+
+<FanarProvider mode="system" lang="ar">
+  <Screen>
+    <Card padded>
+      <Text size="h3" weight="black">مرحباً</Text>
+      <Button variant="primary" onPress={save}>احفظ</Button>
+    </Card>
+  </Screen>
+</FanarProvider>
+```
+
+## التركيب
+
+```bash
+npm i @qumra/fanar-native
+```
+
+نظائر مطلوبة: `react` · `react-native` · `lucide-react-native` ·
+`react-native-safe-area-context` · `react-native-svg`.
+
+ثمّ:
+
+1. ركّب `<SafeAreaProvider>` عند جذر التطبيق.
+2. ركّب `<FanarProvider>` تحته.
+3. ضع ملفّات الأسكندرية الثمانية في `src/assets/fonts` وشغّل
+   `npx react-native-asset`. (أو مرّر `fonts={SYSTEM_FONT}` وخذ خطّ
+   النظام.)
+
+`DrawerMenu` **محتوى** لا مُلاحِظ: يرسم الأقسام ويصرف الاختيار، ولا
+يعرف شيئاً عن `@react-navigation/drawer`. مرّره إلى `drawerContent`.
+
+## الاتجاه
+
+`FanarProvider` يضع `direction` على View جذرٍ **`flex: 1`**، فكلّ ما تحته
+— الخصائص المنطقية، و`flexDirection: 'row'`، ومحاذاة النصّ، والأسهم
+المعكوسة — يتبع `lang` فوراً، بلا إعادة تشغيل. لذلك:
+
+- ضعه **فوق** `NavigationContainer`، لتقع الشاشات كلّها تحته.
+- لا تستدعِ `I18nManager.forceRTL(true)` لتطبيقٍ يبدّل لغته.
+- هيدر `react-navigation` وإيماءة الرجوع يقرآن `I18nManager` مباشرةً:
+  مرّر `<NavigationContainer direction={dir}>` (React Navigation 7)،
+  و`dir` من `useLang()`.
+
+## ما في الحزمة
+
+**الأساس** — `FanarProvider` · `useFanar` · `useTheme` · `useLang` ·
+`buildTheme` · `TOKENS` · `DARK_TOKENS` · `icon()`
+
+**النصّ والأزرار** — `Text` · `Button` · `IconButton`
+
+**العرض** — `Badge` · `Counter` · `Avatar` · `Card` · `CardHeader` ·
+`PageHeader` · `StatCard` · `Progress` · `ProgressSteps` · `Skeleton` ·
+`Divider`
+
+**الحقول** — `Field` · `Input` · `SearchInput` · `Textarea` · `Select` ·
+`Checkbox` · `Radio` · `RadioGroup` · `Switch` · `NumberStepper`
+
+**التنقّل** — `Tabs` · `FilterChips` · `Accordion` · `Timeline` ·
+`Stepper`
+
+**الطبقات** — `Sheet` · `SheetRow` · `Modal` · `Alert` · `EmptyState` ·
+`toast` · `ToastHost` · `Tooltip`
+
+**القشرة** — `Screen` · `AppHeader` · `BottomTabBar` · `DrawerMenu`
+
+**أسطح قمرة** — `Hero` · `PromptCard` · `ListRow` · `StepRow` ·
+`RuleGrid` · `Glow`
+
+**المال والتقييم** — `Money` · `MoneyProvider` · `useCurrency` ·
+`Stars` · `RatingInput`
+
+**اللغة** — `translate` · `phrase` · `DICT`
+
+`@qumra/fanar-native/tokens` — القيم وحدها، بلا مكوّنات.

package/lib/art.d.ts

@@ -0,0 +1,8 @@
+import type { ImageSourcePropType } from 'react-native';
+declare const BRAND: Record<string, ImageSourcePropType>;
+declare const ART: Record<string, ImageSourcePropType>;
+export type BrandName = keyof typeof BRAND;
+export type ArtName = keyof typeof ART;
+export declare function art(name: string): ImageSourcePropType;
+export declare function hasArt(name: string): boolean;
+export { BRAND, ART };

package/lib/art.js

@@ -0,0 +1,29 @@
+const BRAND = {
+    facebook: require('./assets/brand/facebook.png'),
+    instagram: require('./assets/brand/instagram.png'),
+    tiktok: require('./assets/brand/tiktok.png'),
+    x: require('./assets/brand/x.png'),
+    twitter: require('./assets/brand/x.png'),
+    youtube: require('./assets/brand/youtube.png'),
+    snapchat: require('./assets/brand/snapchat.png'),
+    whatsapp: require('./assets/brand/whatsapp.png'),
+    vodafone: require('./assets/brand/vodafone.png'),
+    orange: require('./assets/brand/orange.png'),
+    etisalat: require('./assets/brand/etisalat.png'),
+    we: require('./assets/brand/we.png'),
+    'app-store': require('./assets/brand/app-store.png'),
+    'google-play': require('./assets/brand/google-play.png'),
+};
+const ART = {
+    avatar: require('./assets/art/avatar.png'),
+    empty: require('./assets/art/empty.png'),
+    'image-placeholder': require('./assets/art/image-placeholder.png'),
+    'plan-update': require('./assets/art/plan-update.png'),
+};
+export function art(name) {
+    return BRAND[name] ?? ART[name] ?? ART.avatar;
+}
+export function hasArt(name) {
+    return name in BRAND || name in ART;
+}
+export { BRAND, ART };

package/lib/components/Button.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+import { type PressableProps, type StyleProp, type ViewStyle } from 'react-native';
+import type { ColorToken } from '../tokens';
+import type { LucideIcon } from '../icons';
+export type ButtonVariant = 'primary' | 'accent' | 'soft' | 'outline' | 'ghost' | 'danger' | 'link';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface ButtonProps extends Omit<PressableProps, 'style' | 'children'> {
+    children?: ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    icon?: LucideIcon;
+    iconEnd?: LucideIcon;
+    loading?: boolean;
+    block?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Button({ children, variant, size, icon: Icon, iconEnd: IconEnd, loading, block, disabled, style, accessibilityLabel, ...rest }: ButtonProps): import("react").JSX.Element;
+export interface IconButtonProps extends Omit<PressableProps, 'style' | 'children'> {
+    icon: LucideIcon;
+    size?: number;
+    iconSize?: number;
+    color?: ColorToken | 'white';
+    background?: ColorToken | 'transparent';
+    active?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+}
+export declare function IconButton({ icon: Icon, size, iconSize, color, background, active, disabled, style, children, ...rest }: IconButtonProps): import("react").JSX.Element;

package/lib/components/Button.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActivityIndicator, Animated, Pressable, StyleSheet, View, } from 'react-native';
+import { Text } from './Text';
+import { useFanar } from '../theme/context';
+import { usePressScale } from '../lib/motion';
+const SIZES = {
+    sm: { height: 36, padding: 14, gap: 6, text: 13, radius: 7, weight: 'bold', spinner: 14, square: 36 },
+    md: { height: 44, padding: 16, gap: 8, text: 14, radius: 9, weight: 'bold', spinner: 15, square: 40 },
+    lg: { height: 48, padding: 20, gap: 8, text: 15, radius: 12, weight: 'bold', spinner: 17, square: 48 },
+    xl: { height: 56, padding: 22, gap: 16, text: 20, radius: 9, weight: 'extraBold', spinner: 20, square: 56 },
+};
+const VARIANTS = {
+    primary: { bg: 'brand', border: 'brand', fg: 'white', pressed: 'brand-hover' },
+    accent: { bg: 'amber', border: 'amber', fg: 'amber-900', pressed: 'amber-hover' },
+    soft: { bg: 'soft', border: 'soft2', fg: 'brand-ink', pressed: 'soft2' },
+    outline: { bg: 'surface', border: 'border', fg: 'ink2', pressed: 'hover' },
+    ghost: { bg: 'transparent', border: 'transparent', fg: 'ink2', pressed: 'hover' },
+    danger: { bg: 'danger', border: 'danger', fg: 'white', pressed: 'danger-hover' },
+    link: { bg: 'transparent', border: 'transparent', fg: 'brand-ink', pressed: 'transparent', underline: true, bare: true },
+};
+export function Button({ children, variant = 'primary', size = 'md', icon: Icon, iconEnd: IconEnd, loading = false, block = false, disabled, style, accessibilityLabel, ...rest }) {
+    const { theme } = useFanar();
+    const s = SIZES[size];
+    const v = VARIANTS[variant];
+    const off = disabled || loading;
+    const press = usePressScale(!off);
+    const fg = theme.colorOf(v.fg, v.fg === 'white' ? '#ffffff' : theme.color.ink2);
+    const iconOnly = !children && (!!Icon || !!IconEnd);
+    const base = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: s.gap,
+        height: v.bare ? undefined : s.height,
+        paddingHorizontal: v.bare || iconOnly ? 0 : s.padding,
+        width: iconOnly ? s.square : block ? '100%' : undefined,
+        borderRadius: v.bare ? 0 : s.radius,
+        borderWidth: v.bare ? 0 : 1,
+        opacity: off ? 0.5 : 1,
+    };
+    const iconSize = Math.round(s.text * 1.05);
+    return (_jsx(Animated.View, { style: [press.style, block && styles.block, style], children: _jsx(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: !!off, busy: loading }, accessibilityLabel: accessibilityLabel, disabled: off, onPressIn: press.onPressIn, onPressOut: press.onPressOut, style: ({ pressed }) => [
+                base,
+                {
+                    backgroundColor: theme.colorOf(pressed && !off ? v.pressed : v.bg, 'transparent'),
+                    borderColor: theme.colorOf(v.border, 'transparent'),
+                },
+            ], ...rest, children: loading ? (_jsx(ActivityIndicator, { size: "small", color: fg })) : (_jsxs(_Fragment, { children: [Icon && _jsx(Icon, { size: iconSize, strokeWidth: 2.2, color: fg }), children != null &&
+                        (typeof children === 'string' || typeof children === 'number' ? (_jsx(Text, { size: s.text, weight: s.weight, color: v.fg, lines: 1, leading: "tight", style: v.underline ? styles.underline : undefined, children: children })) : (_jsx(View, { style: styles.slot, children: children }))), IconEnd && _jsx(IconEnd, { size: iconSize, strokeWidth: 2.2, color: fg })] })) }) }));
+}
+const styles = StyleSheet.create({
+    block: { width: '100%' },
+    slot: { flexDirection: 'row', alignItems: 'center' },
+    underline: { textDecorationLine: 'underline' },
+});
+export function IconButton({ icon: Icon, size = 36, iconSize, color = 'ink2', background = 'transparent', active = false, disabled, style, children, ...rest }) {
+    const { theme } = useFanar();
+    const press = usePressScale(!disabled);
+    const fg = active ? theme.color.brand : theme.colorOf(color, theme.color.ink2);
+    return (_jsx(Animated.View, { style: [press.style, style], children: _jsxs(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: !!disabled, selected: active }, disabled: disabled, onPressIn: press.onPressIn, onPressOut: press.onPressOut, hitSlop: size < 44 ? Math.ceil((44 - size) / 2) : undefined, style: ({ pressed }) => [
+                {
+                    width: size,
+                    height: size,
+                    borderRadius: size / 2,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    opacity: disabled ? 0.5 : 1,
+                    backgroundColor: active
+                        ? theme.color.soft
+                        : pressed
+                            ? theme.color.hover
+                            : theme.colorOf(background, 'transparent'),
+                },
+            ], ...rest, children: [_jsx(Icon, { size: iconSize ?? Math.round(size * 0.55), strokeWidth: 2.2, color: fg }), children] }) }));
+}

package/lib/components/Disclosure.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type LucideIcon } from '../icons';
+export interface AccordionItem {
+    key: string;
+    title: string;
+    description?: string;
+    icon?: LucideIcon;
+    content: ReactNode;
+}
+export interface AccordionProps {
+    items: AccordionItem[];
+    defaultOpen?: string | null;
+    single?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Accordion({ items, defaultOpen, single, style }: AccordionProps): import("react").JSX.Element;
+export interface TimelineStep {
+    key: string;
+    title: string;
+    time?: string;
+    note?: string;
+    done?: boolean;
+    active?: boolean;
+    icon?: LucideIcon;
+}
+export declare function Timeline({ steps, nowLabel, style }: {
+    steps: TimelineStep[];
+    nowLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element;
+export interface StepperStep {
+    key: string;
+    label: string;
+}
+export declare function Stepper({ steps, current, onPick, style, }: {
+    steps: StepperStep[];
+    current: number;
+    onPick?: (index: number) => void;
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element;

package/lib/components/Disclosure.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { LayoutAnimation, Platform, Pressable, StyleSheet, UIManager, View } from 'react-native';
+import { Text } from './Text';
+import { useFanar } from '../theme/context';
+import { Check, ChevronDown } from '../icons';
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental)
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+export function Accordion({ items, defaultOpen = null, single = true, style }) {
+    const { theme } = useFanar();
+    const [open, setOpen] = useState(defaultOpen ? [defaultOpen] : []);
+    const toggle = (key) => {
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+        setOpen((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : single ? [key] : [...prev, key]);
+    };
+    return (_jsx(View, { style: [
+            {
+                backgroundColor: theme.color.surface,
+                borderWidth: 1,
+                borderColor: theme.color.line,
+                borderRadius: theme.radius.card,
+                overflow: 'hidden',
+            },
+            style,
+        ], children: items.map((it, i) => {
+            const on = open.includes(it.key);
+            const Icon = it.icon;
+            return (_jsxs(View, { style: i < items.length - 1
+                    ? { borderBottomWidth: 1, borderBottomColor: theme.color.line }
+                    : undefined, children: [_jsxs(Pressable, { accessibilityRole: "button", accessibilityState: { expanded: on }, onPress: () => toggle(it.key), style: ({ pressed }) => [styles.accHead, pressed && { backgroundColor: theme.color.hover }], children: [Icon && (_jsx(View, { style: [styles.accIcon, { backgroundColor: theme.color.soft, borderRadius: theme.radius.sm }], children: _jsx(Icon, { size: 16, strokeWidth: 2.2, color: theme.color['brand-ink'] }) })), _jsxs(View, { style: styles.accText, children: [_jsx(Text, { size: "body", weight: "extraBold", align: "start", children: it.title }), it.description ? (_jsx(Text, { size: "caption", color: "muted", align: "start", children: it.description })) : null] }), _jsx(ChevronDown, { size: 17, strokeWidth: 2.2, color: theme.color.muted2, style: on ? styles.flipped : undefined })] }), on && (_jsx(View, { style: styles.accBody, children: typeof it.content === 'string' ? (_jsx(Text, { size: "ui", color: "ink2", align: "start", leading: 1.85, children: it.content })) : (it.content) }))] }, it.key));
+        }) }));
+}
+export function Timeline({ steps, nowLabel, style }) {
+    const { theme } = useFanar();
+    return (_jsx(View, { style: style, children: steps.map((s, i) => {
+            const last = i === steps.length - 1;
+            const on = s.done || s.active;
+            const Icon = s.icon;
+            return (_jsxs(View, { style: styles.tlRow, children: [_jsxs(View, { style: styles.tlRail, children: [_jsx(View, { style: [
+                                    styles.tlDot,
+                                    {
+                                        borderRadius: theme.radius.full,
+                                        backgroundColor: s.done ? theme.color.brand : theme.color.surface,
+                                        borderColor: on ? theme.color.brand : theme.color.border,
+                                    },
+                                ], children: s.done ? (_jsx(Check, { size: 14, strokeWidth: 3, color: "#ffffff" })) : Icon ? (_jsx(Icon, { size: 13, strokeWidth: 2.2, color: s.active ? theme.color['brand-ink'] : theme.color.muted2 })) : (_jsx(View, { style: {
+                                        width: 8,
+                                        height: 8,
+                                        borderRadius: 4,
+                                        backgroundColor: s.active ? theme.color.brand : theme.color.border,
+                                    } })) }), !last && (_jsx(View, { style: [
+                                    styles.tlLine,
+                                    { backgroundColor: s.done ? theme.color.brand : theme.color.line },
+                                ] }))] }), _jsxs(View, { style: [styles.tlBody, last && styles.tlBodyLast], children: [_jsxs(View, { style: styles.tlHead, children: [_jsx(Text, { size: "body", weight: "extraBold", color: on ? 'ink' : 'muted2', align: "start", children: s.title }), s.active && nowLabel ? (_jsx(View, { style: [styles.tlNow, { backgroundColor: theme.color.soft, borderRadius: theme.radius.full }], children: _jsx(Text, { size: "micro", weight: "extraBold", color: "brand-ink", children: nowLabel }) })) : null, s.time ? (_jsx(Text, { size: "micro", color: "muted2", numeric: true, children: s.time })) : null] }), s.note ? (_jsx(Text, { size: "caption", color: "muted", align: "start", leading: "relaxed", children: s.note })) : null] })] }, s.key));
+        }) }));
+}
+export function Stepper({ steps, current, onPick, style, }) {
+    const { theme } = useFanar();
+    return (_jsx(View, { style: [styles.stList, style], children: steps.map((s, i) => {
+            const done = i < current;
+            const on = i <= current;
+            const pickable = !!onPick && done;
+            return (_jsxs(View, { style: styles.stItem, children: [_jsxs(View, { style: styles.stRow, children: [_jsx(View, { style: [
+                                    styles.stLine,
+                                    { backgroundColor: i === 0 ? 'transparent' : done || i === current ? theme.color.brand : theme.color.line },
+                                ] }), _jsx(Pressable, { accessibilityRole: pickable ? 'button' : 'text', accessibilityState: { selected: i === current, disabled: !pickable }, disabled: !pickable, onPress: () => onPick?.(i), style: [
+                                    styles.stDot,
+                                    {
+                                        borderRadius: theme.radius.full,
+                                        backgroundColor: on ? theme.color.brand : theme.color.surface,
+                                        borderColor: on ? theme.color.brand : theme.color.border,
+                                    },
+                                ], children: done ? (_jsx(Check, { size: 15, strokeWidth: 3, color: "#ffffff" })) : (_jsx(Text, { size: "caption", weight: "extraBold", color: on ? 'white' : 'muted', numeric: true, children: i + 1 })) }), _jsx(View, { style: [
+                                    styles.stLine,
+                                    { backgroundColor: i === steps.length - 1 ? 'transparent' : done ? theme.color.brand : theme.color.line },
+                                ] })] }), _jsx(Text, { size: "caption", weight: "bold", color: on ? 'ink' : 'muted', align: "center", leading: "tight", lines: 2, children: s.label })] }, s.key));
+        }) }));
+}
+const styles = StyleSheet.create({
+    accHead: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 14 },
+    accIcon: { width: 32, height: 32, alignItems: 'center', justifyContent: 'center' },
+    accText: { flex: 1, minWidth: 0, gap: 2 },
+    accBody: { paddingHorizontal: 16, paddingBottom: 16, paddingTop: 2 },
+    flipped: { transform: [{ rotate: '180deg' }] },
+    tlRow: { flexDirection: 'row', gap: 12 },
+    tlRail: { alignItems: 'center' },
+    tlDot: { width: 28, height: 28, borderWidth: 2, alignItems: 'center', justifyContent: 'center' },
+    tlLine: { width: 2, flex: 1, minHeight: 32 },
+    tlBody: { flex: 1, minWidth: 0, gap: 2, paddingBottom: 20 },
+    tlBodyLast: { paddingBottom: 0 },
+    tlHead: { flexDirection: 'row', alignItems: 'center', gap: 10, flexWrap: 'wrap' },
+    tlNow: { paddingHorizontal: 8, paddingVertical: 2 },
+    stList: { flexDirection: 'row', alignItems: 'flex-start', gap: 4 },
+    stItem: { flex: 1, alignItems: 'center', gap: 8, minWidth: 0 },
+    stRow: { flexDirection: 'row', alignItems: 'center', gap: 4, width: '100%' },
+    stLine: { height: 2, flex: 1, borderRadius: 1 },
+    stDot: { width: 32, height: 32, borderWidth: 2, alignItems: 'center', justifyContent: 'center' },
+});

package/lib/components/Display.d.ts

@@ -0,0 +1,88 @@
+import { type ReactNode } from 'react';
+import { type ImageSourcePropType, type StyleProp, type ViewStyle } from 'react-native';
+import { type Tone } from '../lib/tone';
+import type { ColorToken } from '../tokens';
+import type { LucideIcon } from '../icons';
+export interface BadgeProps {
+    children: ReactNode;
+    tone?: Tone;
+    solid?: boolean;
+    size?: 'sm' | 'md';
+    dot?: boolean;
+    icon?: LucideIcon;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Badge({ children, tone, solid, size, dot, icon: Icon, style }: BadgeProps): import("react").JSX.Element;
+export declare function Counter({ value, style }: {
+    value: number | string;
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element;
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg';
+export declare function initials(name: string): string;
+export interface AvatarProps {
+    name?: string;
+    source?: ImageSourcePropType | string;
+    size?: AvatarSize;
+    square?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Avatar({ name, source, size, square, style }: AvatarProps): import("react").JSX.Element;
+export interface CardProps {
+    children: ReactNode;
+    padded?: boolean;
+    flat?: boolean;
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Card({ children, padded, flat, onPress, style }: CardProps): import("react").JSX.Element;
+export interface CardHeaderProps {
+    title: string;
+    description?: string;
+    actions?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function CardHeader({ title, description, actions, style }: CardHeaderProps): import("react").JSX.Element;
+export interface PageHeaderProps {
+    title: string;
+    hint?: string;
+    actions?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function PageHeader({ title, hint, actions, style }: PageHeaderProps): import("react").JSX.Element;
+export interface StatCardProps {
+    label: string;
+    value: string | number;
+    hint?: string;
+    icon?: LucideIcon;
+    tone?: Tone;
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function StatCard({ label, value, hint, icon: Icon, tone, onPress, style }: StatCardProps): import("react").JSX.Element;
+export interface ProgressProps {
+    value: number;
+    max?: number;
+    label?: string;
+    meta?: string;
+    tone?: Tone;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Progress({ value, max, label, meta, tone, style }: ProgressProps): import("react").JSX.Element;
+export declare function ProgressSteps({ total, done, fill, track, style, }: {
+    total: number;
+    done: number;
+    fill?: ColorToken;
+    track?: string;
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element;
+export interface SkeletonProps {
+    variant?: 'text' | 'block' | 'circle';
+    width?: number | `${number}%`;
+    height?: number;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Skeleton({ variant, width, height, style }: SkeletonProps): import("react").JSX.Element;
+export declare function Divider({ inset, style }: {
+    inset?: number;
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element;