@qumra/fanar-native 0.1.0

package/lib/components/Overlay.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Animated, Modal as RNModal, PanResponder, Pressable, ScrollView, StyleSheet, useWindowDimensions, View, } from 'react-native';
+import { Text } from './Text';
+import { Button, IconButton } from './Button';
+import { useFanar } from '../theme/context';
+import { EASE_OUT } from '../lib/motion';
+import { DURATION } from '../theme/theme';
+import { TONE_SOFT } from '../lib/tone';
+import { ChevronLeft, ChevronRight, X } from '../icons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+export function Sheet({ open, title, onClose, onBack, action, children, maxHeightRatio = 0.82, scroll = true, style, }) {
+    const { theme, p, dir } = useFanar();
+    const { height } = useWindowDimensions();
+    const { bottom } = useSafeAreaInsets();
+    const slide = useRef(new Animated.Value(0)).current;
+    const drag = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.timing(slide, {
+            toValue: open ? 1 : 0,
+            duration: DURATION.sheet,
+            easing: EASE_OUT,
+            useNativeDriver: true,
+        }).start();
+        if (open)
+            drag.setValue(0);
+    }, [open, slide, drag]);
+    const pan = useRef(PanResponder.create({
+        onMoveShouldSetPanResponder: (_, g) => g.dy > 6 && Math.abs(g.dy) > Math.abs(g.dx),
+        onPanResponderMove: (_, g) => {
+            if (g.dy > 0)
+                drag.setValue(g.dy);
+        },
+        onPanResponderRelease: (_, g) => {
+            if (g.dy > 90 || g.vy > 0.5)
+                onClose();
+            else
+                Animated.timing(drag, { toValue: 0, duration: 140, useNativeDriver: true }).start();
+        },
+    })).current;
+    const translateY = Animated.add(slide.interpolate({ inputRange: [0, 1], outputRange: [height, 0] }), drag);
+    const Body = scroll ? ScrollView : View;
+    return (_jsx(RNModal, { visible: open, transparent: true, animationType: "none", onRequestClose: onClose, statusBarTranslucent: true, children: _jsxs(View, { style: [styles.sheetRoot, { direction: dir }], children: [_jsx(Animated.View, { style: [StyleSheet.absoluteFill, { opacity: slide }], children: _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: p('close'), onPress: onClose, style: [StyleSheet.absoluteFill, styles.scrim] }) }), _jsxs(Animated.View, { style: [
+                        styles.sheet,
+                        theme.shadow.sheet,
+                        {
+                            backgroundColor: theme.color.surface,
+                            borderTopLeftRadius: 20,
+                            borderTopRightRadius: 20,
+                            maxHeight: height * maxHeightRatio,
+                            paddingBottom: bottom,
+                            transform: [{ translateY }],
+                            borderTopWidth: 1,
+                            borderTopColor: theme.dark ? 'rgba(255,255,255,0.08)' : theme.color.line,
+                        },
+                        style,
+                    ], children: [_jsx(View, { ...pan.panHandlers, style: styles.grabArea, children: _jsx(View, { style: [styles.grabber, { backgroundColor: theme.color.border }] }) }), (title || onBack || action) && (_jsxs(View, { style: styles.sheetHead, children: [_jsxs(View, { style: styles.sheetHeadStart, children: [onBack && (_jsx(IconButton, { icon: dir === 'rtl' ? ChevronRight : ChevronLeft, size: 32, iconSize: 18, color: "muted", onPress: onBack, accessibilityLabel: p('back') })), title ? (_jsx(Text, { size: "h4", weight: "black", align: "start", lines: 1, style: styles.flex1, children: title })) : null] }), _jsxs(View, { style: styles.sheetHeadEnd, children: [action, _jsx(IconButton, { icon: X, size: 36, iconSize: 17, color: "muted", background: "bg", onPress: onClose, accessibilityLabel: p('close') })] })] })), _jsx(Body, { style: styles.flex1, ...(scroll
+                                ? {
+                                    contentContainerStyle: styles.sheetBody,
+                                    showsVerticalScrollIndicator: false,
+                                    keyboardShouldPersistTaps: 'handled',
+                                }
+                                : {}), children: children })] })] }) }));
+}
+export function SheetRow({ icon: Icon, label, meta, danger, onPress, style }) {
+    const { theme } = useFanar();
+    const fg = danger ? theme.color.red : theme.color.ink2;
+    return (_jsxs(Pressable, { accessibilityRole: "menuitem", onPress: onPress, style: ({ pressed }) => [
+            styles.sheetRow,
+            {
+                borderRadius: theme.radius.field,
+                backgroundColor: pressed ? (danger ? theme.color['red-bg'] : theme.color.hover) : 'transparent',
+            },
+            style,
+        ], children: [Icon && _jsx(Icon, { size: 17, strokeWidth: 2, color: fg }), _jsx(Text, { size: "body", weight: "semiBold", color: danger ? 'red' : 'ink2', align: "start", style: styles.flex1, lines: 1, children: label }), meta ? (_jsx(Text, { size: "caption", color: "muted2", children: meta })) : null] }));
+}
+const MODAL_WIDTH = { sm: 380, md: 520, lg: 720 };
+export function Modal({ open, title, description, onClose, size = 'md', footer, children }) {
+    const { theme, p, dir } = useFanar();
+    const { width } = useWindowDimensions();
+    const fade = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.timing(fade, {
+            toValue: open ? 1 : 0,
+            duration: DURATION.fade,
+            easing: EASE_OUT,
+            useNativeDriver: true,
+        }).start();
+    }, [open, fade]);
+    return (_jsx(RNModal, { visible: open, transparent: true, animationType: "none", onRequestClose: onClose, statusBarTranslucent: true, children: _jsxs(Animated.View, { style: [styles.modalRoot, { opacity: fade, direction: dir }], children: [_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: p('close'), onPress: onClose, style: [StyleSheet.absoluteFill, styles.scrim] }), _jsxs(View, { accessibilityViewIsModal: true, style: [
+                        styles.modal,
+                        theme.shadow.modal,
+                        {
+                            backgroundColor: theme.color.surface,
+                            borderRadius: theme.radius.section,
+                            width: Math.min(MODAL_WIDTH[size], width - 32),
+                        },
+                    ], children: [(title || description) && (_jsxs(View, { style: styles.modalHead, children: [_jsxs(View, { style: styles.flex1, children: [title ? (_jsx(Text, { size: "h4", weight: "black", align: "start", children: title })) : null, description ? (_jsx(Text, { size: "ui", color: "muted", align: "start", style: styles.modalDesc, children: description })) : null] }), _jsx(IconButton, { icon: X, size: 36, iconSize: 17, color: "muted", background: "bg", onPress: onClose, accessibilityLabel: p('close') })] })), children ? _jsx(View, { style: styles.modalBody, children: children }) : null, footer ? _jsx(View, { style: styles.modalFoot, children: footer }) : null] })] }) }));
+}
+export function Alert({ tone = 'amber', title, children, icon: Icon, action, style }) {
+    const { theme } = useFanar();
+    const c = TONE_SOFT[tone];
+    return (_jsxs(View, { accessibilityRole: "alert", style: [
+            styles.alert,
+            {
+                backgroundColor: theme.colorOf(c.bg, theme.color.hover),
+                borderColor: theme.colorOf(c.line, theme.color.line),
+                borderRadius: theme.radius.field,
+            },
+            style,
+        ], children: [Icon && _jsx(Icon, { size: 16, strokeWidth: 2, color: theme.colorOf(c.fg, theme.color.ink) }), _jsxs(View, { style: styles.flex1, children: [title ? (_jsx(Text, { size: "ui", weight: "extraBold", color: c.fg, align: "start", children: title })) : null, typeof children === 'string' ? (_jsx(Text, { size: "caption", color: c.fg, align: "start", leading: "relaxed", children: children })) : (children)] }), action] }));
+}
+export function EmptyState({ icon: Icon, title, description, actionLabel, onAction, style }) {
+    const { theme } = useFanar();
+    return (_jsxs(View, { style: [styles.empty, style], children: [Icon && (_jsx(View, { style: [styles.emptyIcon, { backgroundColor: theme.color.soft, borderRadius: theme.radius.section }], children: _jsx(Icon, { size: 26, strokeWidth: 1.8, color: theme.color.brand }) })), _jsx(Text, { size: "lead", weight: "extraBold", align: "center", children: title }), description ? (_jsx(Text, { size: "ui", color: "muted", align: "center", leading: "relaxed", style: styles.emptyDesc, children: description })) : null, actionLabel && onAction ? (_jsx(Button, { size: "sm", variant: "soft", onPress: onAction, style: styles.emptyAction, children: actionLabel })) : null] }));
+}
+const styles = StyleSheet.create({
+    sheetRoot: { flex: 1, justifyContent: 'flex-end' },
+    scrim: { backgroundColor: 'rgba(0,0,0,0.5)' },
+    sheet: { overflow: 'hidden' },
+    grabArea: { paddingTop: 12, paddingBottom: 6, alignItems: 'center' },
+    grabber: { width: 44, height: 6, borderRadius: 3 },
+    sheetHead: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 12,
+        paddingHorizontal: 20,
+        paddingBottom: 12,
+    },
+    sheetHeadStart: { flexDirection: 'row', alignItems: 'center', gap: 8, flex: 1, minWidth: 0 },
+    sheetHeadEnd: { flexDirection: 'row', alignItems: 'center', gap: 12 },
+    sheetBody: { paddingHorizontal: 12, paddingBottom: 16 },
+    sheetRow: { flexDirection: 'row', alignItems: 'center', gap: 12, height: 48, paddingHorizontal: 12 },
+    flex1: { flex: 1 },
+    modalRoot: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 16 },
+    modal: { overflow: 'hidden' },
+    modalHead: { flexDirection: 'row', alignItems: 'flex-start', gap: 12, padding: 20, paddingBottom: 12 },
+    modalDesc: { marginTop: 4 },
+    modalBody: { paddingHorizontal: 20, paddingBottom: 20 },
+    modalFoot: { flexDirection: 'row', justifyContent: 'flex-end', gap: 10, padding: 16 },
+    alert: { flexDirection: 'row', alignItems: 'flex-start', gap: 10, padding: 12, borderWidth: 1 },
+    empty: { alignItems: 'center', gap: 8, paddingVertical: 40, paddingHorizontal: 24 },
+    emptyIcon: { width: 56, height: 56, alignItems: 'center', justifyContent: 'center', marginBottom: 4 },
+    emptyDesc: { maxWidth: 340 },
+    emptyAction: { marginTop: 8 },
+});

package/lib/components/Rating.d.ts

@@ -0,0 +1,18 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+export declare const MAX = 5;
+export interface StarsProps {
+    value: number;
+    size?: number;
+    showValue?: boolean;
+    count?: number;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Stars({ value, size, showValue, count, style }: StarsProps): import("react").JSX.Element;
+export interface RatingInputProps {
+    value: number;
+    onChange: (next: number) => void;
+    disabled?: boolean;
+    label?: string;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function RatingInput({ value, onChange, disabled, label, style }: RatingInputProps): import("react").JSX.Element;

package/lib/components/Rating.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, StyleSheet, View } from 'react-native';
+import { Text } from './Text';
+import { useFanar } from '../theme/context';
+import { Star } from '../icons';
+export const MAX = 5;
+export function Stars({ value, size = 14, showValue, count, style }) {
+    const { theme } = useFanar();
+    const filled = Math.round(value);
+    return (_jsxs(View, { accessible: true, accessibilityRole: "image", accessibilityLabel: `${value} / ${MAX}`, style: [styles.row, style], children: [Array.from({ length: MAX }, (_, i) => (_jsx(Star, { size: size, strokeWidth: 2, color: i < filled ? theme.color.amber : theme.color.muted2, fill: i < filled ? theme.color.amber : 'transparent' }, i))), showValue && (_jsx(Text, { size: "caption", weight: "bold", color: "muted", numeric: true, style: styles.value, children: value.toFixed(1) })), count !== undefined && (_jsxs(Text, { size: "caption", color: "muted2", numeric: true, children: ["(", count, ")"] }))] }));
+}
+export function RatingInput({ value, onChange, disabled, label, style }) {
+    const { theme } = useFanar();
+    return (_jsx(View, { accessibilityRole: "radiogroup", accessibilityLabel: label, style: [styles.inputRow, style], children: Array.from({ length: MAX }, (_, i) => {
+            const n = i + 1;
+            const on = n <= value;
+            return (_jsx(Pressable, { accessibilityRole: "radio", accessibilityState: { checked: n === value, disabled: !!disabled }, accessibilityLabel: `${n} / ${MAX}`, disabled: disabled, onPress: () => onChange(n), style: ({ pressed }) => [
+                    styles.starBtn,
+                    {
+                        borderRadius: theme.radius.sm,
+                        backgroundColor: pressed && !disabled ? theme.color.hover : 'transparent',
+                        opacity: disabled ? 0.6 : 1,
+                    },
+                ], children: _jsx(Star, { size: 22, strokeWidth: 2, color: on ? theme.color.amber : theme.color.muted2, fill: on ? theme.color.amber : 'transparent' }) }, n));
+        }) }));
+}
+const styles = StyleSheet.create({
+    row: { flexDirection: 'row', alignItems: 'center', gap: 2 },
+    value: { marginStart: 8 },
+    inputRow: { flexDirection: 'row', alignItems: 'center', gap: 4 },
+    starBtn: { width: 36, height: 36, alignItems: 'center', justifyContent: 'center' },
+});

package/lib/components/Shell.d.ts

@@ -0,0 +1,54 @@
+import { type ReactNode } from 'react';
+import { type ImageSourcePropType, type StyleProp, type ViewStyle } from 'react-native';
+import type { LucideIcon } from '../icons';
+export interface ScreenProps {
+    children: ReactNode;
+    scroll?: boolean;
+    padded?: boolean;
+    gap?: number;
+    tabBarSpace?: boolean;
+    refreshing?: boolean;
+    onRefresh?: () => void;
+    background?: 'bg' | 'surface';
+    header?: ReactNode;
+    footer?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+}
+export declare function Screen({ children, scroll, padded, gap, tabBarSpace, refreshing, onRefresh, background, header, footer, style, contentStyle, }: ScreenProps): import("react").JSX.Element;
+export interface HeaderAction {
+    key: string;
+    icon: LucideIcon;
+    label: string;
+    onPress: () => void;
+    active?: boolean;
+    badge?: number;
+}
+export type HeaderMark = ImageSourcePropType | string | LucideIcon;
+export interface AppHeaderProps {
+    logo?: HeaderMark;
+    onPressLogo?: () => void;
+    logoActive?: boolean;
+    avatar?: HeaderMark;
+    onPressAvatar?: () => void;
+    avatarActive?: boolean;
+    actions?: HeaderAction[];
+    title?: string;
+    leading?: ReactNode;
+    safeTop?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function AppHeader({ logo, onPressLogo, logoActive, avatar, onPressAvatar, avatarActive, actions, title, leading, safeTop, style, }: AppHeaderProps): import("react").JSX.Element;
+export interface TabBarItem {
+    key: string;
+    label: string;
+    icon: LucideIcon | string;
+    badge?: number;
+}
+export interface BottomTabBarProps {
+    items: TabBarItem[];
+    value: string;
+    onChange: (key: string) => void;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function BottomTabBar({ items, value, onChange, style }: BottomTabBarProps): import("react").JSX.Element;

package/lib/components/Shell.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Image, Pressable, RefreshControl, ScrollView, StatusBar, StyleSheet, View, } from 'react-native';
+import { Text } from './Text';
+import { Counter } from './Display';
+import { useFanar } from '../theme/context';
+import { NavIcon } from '../qumra/NavIcon';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+export function Screen({ children, scroll = true, padded = true, gap = 16, tabBarSpace = false, refreshing, onRefresh, background = 'bg', header, footer, style, contentStyle, }) {
+    const { theme } = useFanar();
+    const insets = useSafeAreaInsets();
+    const content = [
+        {
+            paddingHorizontal: padded ? 16 : 0,
+            paddingTop: 16,
+            paddingBottom: (tabBarSpace ? 76 : 16) + insets.bottom,
+            gap,
+        },
+        contentStyle,
+    ];
+    return (_jsxs(View, { style: [styles.flex1, { backgroundColor: theme.color[background] }, style], children: [_jsx(StatusBar, { barStyle: theme.dark ? 'light-content' : 'dark-content', backgroundColor: theme.color.surface }), header, scroll ? (_jsx(ScrollView, { style: styles.flex1, contentContainerStyle: content, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", refreshControl: onRefresh ? (_jsx(RefreshControl, { refreshing: !!refreshing, onRefresh: onRefresh, tintColor: theme.color.brand, colors: [theme.color.brand], progressBackgroundColor: theme.color.surface })) : undefined, children: children })) : (_jsx(View, { style: [styles.flex1, content], children: children })), footer] }));
+}
+function isIconMark(v) {
+    return (typeof v === 'function' ||
+        (typeof v === 'object' && v !== null && '$$typeof' in v));
+}
+function Mark({ src, size, color, style, }) {
+    if (isIconMark(src)) {
+        const Glyph = src;
+        return _jsx(Glyph, { size: size, color: color });
+    }
+    return (_jsx(Image, { accessibilityIgnoresInvertColors: true, source: typeof src === 'string' ? { uri: src } : src, style: style, resizeMode: "cover" }));
+}
+export function AppHeader({ logo, onPressLogo, logoActive, avatar, onPressAvatar, avatarActive, actions = [], title, leading, safeTop = true, style, }) {
+    const { theme, p } = useFanar();
+    const insets = useSafeAreaInsets();
+    return (_jsx(View, { style: [
+            styles.header,
+            {
+                paddingTop: safeTop ? 12 : 0,
+                backgroundColor: theme.color.surface,
+                borderBottomWidth: 1,
+                borderBottomColor: theme.color.line,
+            },
+            style,
+        ], children: _jsxs(View, { style: styles.headerRow, children: [logo ? (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: p('switchStore'), accessibilityState: { expanded: logoActive }, onPress: onPressLogo, style: [
+                        styles.logo,
+                        {
+                            borderRadius: theme.radius.field,
+                            borderColor: logoActive ? theme.color.brand : theme.color.line,
+                            backgroundColor: theme.color.bg,
+                        },
+                    ], children: _jsx(Mark, { src: logo, size: 20, color: theme.color.ink2, style: styles.logoImg }) })) : null, leading ? _jsx(View, { style: styles.leading, children: leading }) : null, title ? (_jsx(Text, { size: "h4", weight: "black", align: "start", lines: 1, style: styles.flex1, children: title })) : (_jsx(View, { style: [styles.actions, !!leading && styles.actionsCompact], children: actions.map((a) => (_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: a.label, accessibilityState: { selected: a.active }, onPress: a.onPress, style: ({ pressed }) => [
+                            styles.iconBtn,
+                            {
+                                borderRadius: theme.radius.full,
+                                backgroundColor: a.active
+                                    ? theme.color.soft
+                                    : pressed
+                                        ? theme.color.hover
+                                        : 'transparent',
+                            },
+                        ], children: [_jsx(a.icon, { size: 25, strokeWidth: 2, color: a.active ? theme.color.brand : theme.color.ink2 }), !!a.badge && _jsx(Counter, { value: a.badge, style: styles.badge })] }, a.key))) })), avatar ? (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: p('profile'), onPress: onPressAvatar, style: [
+                        styles.avatar,
+                        { borderColor: avatarActive ? theme.color.brand : 'transparent' },
+                    ], children: _jsx(Mark, { src: avatar, size: 20, color: theme.color.ink2, style: styles.avatarImg }) })) : null] }) }));
+}
+export function BottomTabBar({ items, value, onChange, style }) {
+    const { theme } = useFanar();
+    return (_jsx(View, { accessibilityRole: "tablist", style: [
+            styles.tabBar,
+            {
+                backgroundColor: theme.color.surface,
+                borderTopWidth: 1,
+                borderTopColor: theme.color.line,
+            },
+            style,
+        ], children: items.map((it) => {
+            const on = it.key === value;
+            return (_jsxs(Pressable, { accessibilityRole: "tab", accessibilityState: { selected: on }, accessibilityLabel: it.label, onPress: () => onChange(it.key), style: styles.tab, children: [_jsxs(View, { style: styles.tabIcon, children: [_jsx(NavIcon, { icon: it.icon, size: 22, active: on, strokeWidth: on ? 2.4 : 2, color: theme.color.muted2, activeColor: theme.color.brand }), !!it.badge && _jsx(Counter, { value: it.badge, style: styles.tabBadge })] }), _jsx(Text, { size: "micro", weight: on ? 'bold' : 'medium', color: on ? 'brand' : 'muted2', leading: "none", children: it.label })] }, it.key));
+        }) }));
+}
+const styles = StyleSheet.create({
+    flex1: { flex: 1 },
+    header: { paddingBottom: 8 },
+    headerRow: { height: 36, flexDirection: 'row', alignItems: 'center', gap: 8, paddingHorizontal: 14 },
+    logo: { width: 36, height: 36, borderWidth: 1, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' },
+    logoImg: { width: '100%', height: '100%' },
+    leading: { flex: 1, flexShrink: 1, minWidth: 0 },
+    actions: { flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around' },
+    actionsCompact: { flex: 0, flexShrink: 0, justifyContent: 'flex-end' },
+    iconBtn: { height: 36, minWidth: 36, paddingHorizontal: 8, alignItems: 'center', justifyContent: 'center' },
+    badge: { position: 'absolute', top: 0, insetInlineEnd: 6, },
+    avatar: { width: 36, height: 36, borderRadius: 18, borderWidth: 1, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' },
+    avatarImg: { width: '100%', height: '100%' },
+    tabBar: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', paddingTop: 6, paddingBottom: 6 },
+    tab: { flex: 1, alignItems: 'center', gap: 4, paddingVertical: 3 },
+    tabIcon: { height: 26, alignItems: 'center', justifyContent: 'center' },
+    tabBadge: { position: 'absolute', top: -2, insetInlineEnd: 4 },
+});

package/lib/components/Surfaces.d.ts

@@ -0,0 +1,64 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type LucideIcon } from '../icons';
+export declare function RuleGrid({ spacing, opacity, count }: {
+    spacing?: number;
+    opacity?: number;
+    count?: number;
+}): import("react").JSX.Element;
+export declare function Glow({ size, color, top, bottom, start, end, }: {
+    size?: number;
+    color?: string;
+    top?: number;
+    bottom?: number;
+    start?: number;
+    end?: number;
+}): import("react").JSX.Element;
+export interface HeroProps {
+    tag?: string;
+    tagIcon?: LucideIcon;
+    title: string;
+    body?: string;
+    metric?: string;
+    metricNote?: string;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Hero({ tag, tagIcon: TagIcon, title, body, metric, metricNote, children, style }: HeroProps): import("react").JSX.Element;
+export interface PromptCardProps {
+    icon?: LucideIcon;
+    title: string;
+    body?: string;
+    action?: ReactNode;
+    prompts?: {
+        key: string;
+        text: string;
+        icon?: LucideIcon;
+    }[];
+    onPickPrompt?: (key: string) => void;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function PromptCard({ icon: Icon, title, body, action, prompts, onPickPrompt, style }: PromptCardProps): import("react").JSX.Element;
+export interface ListRowProps {
+    icon?: LucideIcon | string;
+    leading?: ReactNode;
+    title: string;
+    subtitle?: string;
+    meta?: ReactNode;
+    trailing?: ReactNode;
+    onPress?: () => void;
+    chevron?: boolean;
+    danger?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function ListRow({ icon: Icon, leading, title, subtitle, meta, trailing, onPress, chevron, danger, style, }: ListRowProps): import("react").JSX.Element;
+export interface StepRowProps {
+    icon?: LucideIcon | string;
+    title: string;
+    why?: string;
+    done?: boolean;
+    action?: ReactNode;
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function StepRow({ icon, title, why, done, action, onPress, style }: StepRowProps): import("react").JSX.Element;

package/lib/components/Surfaces.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Pressable, StyleSheet, View } from 'react-native';
+import { Text } from './Text';
+import { useFanar } from '../theme/context';
+import { Check, ChevronLeft, ChevronRight, qumraIconFor } from '../icons';
+import { NavIcon } from '../qumra/NavIcon';
+import { QUMRA_ICONS, QumraIcon } from '../qumra/QumraIcon';
+const brandIconName = (name) => qumraIconFor(name) ?? (name in QUMRA_ICONS ? name : undefined);
+export function RuleGrid({ spacing = 72, opacity = 0.045, count = 8 }) {
+    return (_jsx(View, { pointerEvents: "none", style: StyleSheet.absoluteFill, children: Array.from({ length: count }, (_, i) => (_jsx(View, { style: {
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                insetInlineStart: i * spacing,
+                width: 1,
+                backgroundColor: `rgba(255,255,255,${opacity})`,
+            } }, i))) }));
+}
+export function Glow({ size = 230, color = 'rgba(125,211,192,0.09)', top, bottom, start, end, }) {
+    return (_jsx(View, { pointerEvents: "none", style: {
+            position: 'absolute',
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            backgroundColor: color,
+            top,
+            bottom,
+            insetInlineStart: start,
+            insetInlineEnd: end,
+        } }));
+}
+export function Hero({ tag, tagIcon: TagIcon, title, body, metric, metricNote, children, style }) {
+    const { theme } = useFanar();
+    return (_jsxs(View, { style: [
+            styles.hero,
+            { backgroundColor: theme.color['brand-deep'], borderRadius: theme.radius.lg },
+            style,
+        ], children: [_jsx(RuleGrid, {}), _jsx(Glow, { top: -70, end: -50 }), _jsxs(View, { style: styles.heroTop, children: [_jsxs(View, { style: styles.heroText, children: [tag ? (_jsxs(View, { style: [styles.heroTag, { borderRadius: theme.radius.full }], children: [TagIcon && _jsx(TagIcon, { size: 13, strokeWidth: 2, color: theme.color.amber }), _jsx(Text, { style: { textAlign: 'center' }, size: 11.5, weight: "extraBold", color: "amber", leading: "none", children: tag })] })) : null, _jsx(Text, { size: 23, style: { textAlign: 'left' }, weight: "black", color: "white", align: "start", leading: 1.42, children: title }), body ? (_jsx(Text, { size: 13.5, color: "hero-body", align: "start", leading: 1.75, style: styles.heroBody, children: body })) : null] }), metric ? (_jsxs(View, { style: styles.heroMetric, children: [_jsx(Text, { size: 34, weight: "black", color: "mint", leading: "none", numeric: true, children: metric }), metricNote ? (_jsx(Text, { size: 11.5, color: "hero-meta", numeric: true, children: metricNote })) : null] })) : null] }), children ? _jsx(View, { style: styles.heroFoot, children: children }) : null] }));
+}
+export function PromptCard({ icon: Icon, title, body, action, prompts = [], onPickPrompt, style }) {
+    const { theme, dir } = useFanar();
+    const Chevron = dir === 'rtl' ? ChevronLeft : ChevronRight;
+    return (_jsxs(View, { style: [styles.prompt, { backgroundColor: theme.color.night, borderRadius: theme.radius.lg }, style], children: [_jsx(Glow, { size: 190, color: "rgba(125,211,192,0.07)", top: -60, start: -40 }), _jsxs(View, { style: styles.promptHead, children: [Icon && (_jsx(View, { style: [styles.promptIcon, { borderRadius: theme.radius.field }], children: _jsx(Icon, { size: 19, strokeWidth: 2, color: theme.color.mint }) })), _jsxs(View, { style: styles.flex1, children: [_jsx(Text, { size: 15, weight: "extraBold", color: "white", align: "start", children: title }), body ? (_jsx(Text, { size: 12.5, color: "hero-meta", align: "start", children: body })) : null] }), action] }), prompts.length > 0 && (_jsx(View, { style: styles.promptList, children: prompts.map((pr) => (_jsxs(Pressable, { accessibilityRole: "button", onPress: () => onPickPrompt?.(pr.key), style: ({ pressed }) => [
+                        styles.promptRow,
+                        {
+                            borderRadius: theme.radius.field,
+                            backgroundColor: pressed ? 'rgba(255,255,255,0.09)' : 'rgba(255,255,255,0.05)',
+                            borderColor: 'rgba(255,255,255,0.08)',
+                        },
+                    ], children: [pr.icon && _jsx(pr.icon, { size: 14, strokeWidth: 2, color: theme.color.mint }), _jsx(Text, { size: 12.5, color: "hero-text", align: "start", lines: 1, style: styles.flex1, children: pr.text }), _jsx(Chevron, { size: 13, strokeWidth: 2, color: theme.color['hero-dim'] })] }, pr.key))) }))] }));
+}
+export function ListRow({ icon: Icon, leading, title, subtitle, meta, trailing, onPress, chevron, danger, style, }) {
+    const { theme, dir } = useFanar();
+    const Chevron = dir === 'rtl' ? ChevronLeft : ChevronRight;
+    const showChevron = chevron ?? !!onPress;
+    const body = (_jsxs(_Fragment, { children: [leading ??
+                (Icon ? (_jsx(View, { style: [styles.rowIcon, { backgroundColor: theme.color.soft, borderRadius: theme.radius.sm }], children: _jsx(NavIcon, { icon: Icon, size: 19, active: true, strokeWidth: 2, color: danger ? theme.color.red : theme.color['brand-ink'], activeColor: danger ? theme.color.red : theme.color['brand-ink'] }) })) : null), _jsxs(View, { style: styles.rowText, children: [_jsx(Text, { size: "body", weight: "bold", color: danger ? 'red' : 'ink', align: "start", lines: 1, children: title }), subtitle ? (_jsx(Text, { size: "caption", color: "muted", align: "start", lines: 2, children: subtitle })) : null] }), typeof meta === 'string' ? (_jsx(Text, { size: "caption", color: "muted2", children: meta })) : (meta), trailing, showChevron && !trailing && _jsx(Chevron, { size: 16, strokeWidth: 2.2, color: theme.color.muted2 })] }));
+    if (!onPress)
+        return _jsx(View, { style: [styles.row, style], children: body });
+    return (_jsx(Pressable, { accessibilityRole: "button", onPress: onPress, style: ({ pressed }) => [
+            styles.row,
+            pressed && { backgroundColor: danger ? theme.color['red-bg'] : theme.color.hover },
+            style,
+        ], children: body }));
+}
+export function StepRow({ icon, title, why, done, action, onPress, style }) {
+    const { theme } = useFanar();
+    const brand = typeof icon === 'string' ? brandIconName(icon) : undefined;
+    const Lucide = typeof icon === 'string' ? undefined : icon;
+    const inner = (_jsxs(_Fragment, { children: [done ? (_jsx(View, { style: [
+                    styles.stepIcon,
+                    { borderRadius: theme.radius.field, backgroundColor: theme.color.brand },
+                ], children: _jsx(Check, { size: 17, strokeWidth: 3, color: "#ffffff" }) })) : brand ? (_jsx(QumraIcon, { name: brand, size: 34 })) : (_jsx(View, { style: [
+                    styles.stepIcon,
+                    { borderRadius: theme.radius.field, backgroundColor: theme.color.soft },
+                ], children: Lucide ? _jsx(Lucide, { size: 18, strokeWidth: 2, color: theme.color.brand }) : null })), _jsxs(View, { style: styles.rowText, children: [_jsx(Text, { size: 14.5, weight: "extraBold", color: done ? 'muted' : 'ink', align: "start", style: done ? styles.struck : { textAlign: 'left' }, children: title }), why ? (_jsx(Text, { size: 12.5, style: { textAlign: 'left' }, color: "muted", align: "start", leading: "relaxed", lines: 1, children: why })) : null] }), action] }));
+    if (!onPress)
+        return _jsx(View, { style: [styles.stepRow, style], children: inner });
+    return (_jsx(Pressable, { accessibilityRole: "button", accessibilityState: { checked: !!done }, onPress: onPress, style: ({ pressed }) => [styles.stepRow, pressed && { backgroundColor: theme.color.hover }, style], children: inner }));
+}
+const styles = StyleSheet.create({
+    flex1: { flex: 1 },
+    hero: { overflow: 'hidden', paddingVertical: 24, paddingHorizontal: 22, gap: 18 },
+    heroTop: { flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between', gap: 20 },
+    heroText: { flex: 1, minWidth: 0, gap: 8 },
+    heroTag: {
+        alignSelf: 'flex-start',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 7,
+        paddingVertical: 5,
+        paddingHorizontal: 12,
+        backgroundColor: 'rgba(248,172,51,0.18)',
+    },
+    heroBody: { maxWidth: 520, textAlign: 'left' },
+    heroMetric: { alignItems: 'center', gap: 2 },
+    heroFoot: { flexDirection: 'row', alignItems: 'center', gap: 14, flexWrap: 'wrap' },
+    prompt: { overflow: 'hidden', padding: 20, gap: 14 },
+    promptHead: { flexDirection: 'row', alignItems: 'center', gap: 12 },
+    promptIcon: {
+        width: 40,
+        height: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(125,211,192,0.14)',
+    },
+    promptList: { gap: 7 },
+    promptRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        paddingVertical: 11,
+        paddingHorizontal: 13,
+        borderWidth: 1,
+    },
+    row: { flexDirection: 'row', alignItems: 'center', gap: 12, minHeight: 56, paddingHorizontal: 16, paddingVertical: 10 },
+    rowIcon: { width: 34, height: 34, alignItems: 'center', justifyContent: 'center' },
+    rowText: { flex: 1, minWidth: 0, gap: 2 },
+    stepRow: { flexDirection: 'row', alignItems: 'center', gap: 15, paddingVertical: 15, paddingHorizontal: 20 },
+    stepIcon: { width: 38, height: 38, alignItems: 'center', justifyContent: 'center' },
+    struck: { textDecorationLine: 'line-through', textAlign: 'left' },
+});

package/lib/components/Text.d.ts

@@ -0,0 +1,14 @@
+import { Text as RNText, type TextProps as RNTextProps } from 'react-native';
+import { type Leading } from '../theme/theme';
+import type { Weight } from '../theme/fonts';
+import type { ColorToken, TextSize } from '../tokens';
+export interface TextProps extends RNTextProps {
+    size?: TextSize | number;
+    weight?: Weight;
+    color?: ColorToken | 'white' | (string & {});
+    align?: 'start' | 'end' | 'center' | 'auto';
+    leading?: Leading | number;
+    numeric?: boolean;
+    lines?: number;
+}
+export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<RNText>>;

package/lib/components/Text.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Text as RNText } from 'react-native';
+import { useFanar } from '../theme/context';
+import { LEADING } from '../theme/theme';
+export const Text = forwardRef(function Text({ size = 'body', weight = 'medium', color = 'ink', align, leading, numeric, lines, style, numberOfLines, ...rest }, ref) {
+    const { theme } = useFanar();
+    const fontSize = typeof size === 'number' ? size : theme.text[size];
+    const asked = typeof leading === 'number' ? leading : LEADING[leading ?? 'normal'];
+    const ratio = Math.max(asked, theme.minLeading);
+    const resolved = {
+        ...theme.font(weight),
+        fontSize,
+        lineHeight: Math.round(fontSize * ratio),
+        color: theme.colorOf(color, color === 'white' ? '#ffffff' : theme.color.ink),
+    };
+    const resolvedAlign = align ?? 'start';
+    resolved.textAlign =
+        resolvedAlign === 'auto'
+            ? 'auto'
+            : resolvedAlign === 'center'
+                ? 'center'
+                : resolvedAlign === 'start'
+                    ? 'left'
+                    : 'right';
+    if (numeric) {
+        resolved.fontVariant = ['tabular-nums'];
+        resolved.writingDirection = 'ltr';
+    }
+    return (_jsx(RNText, { ref: ref, numberOfLines: numberOfLines ?? lines, style: [resolved, style], ...rest }));
+});