@qumra/fanar-native 0.1.0

package/lib/components/Form.js

@@ -0,0 +1,196 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Animated, Pressable, StyleSheet, TextInput, View, } from 'react-native';
+import { Text } from './Text';
+import { Sheet } from './Overlay';
+import { useFanar } from '../theme/context';
+import { HIT_SLOP_SM } from '../lib/a11y';
+import { EASE_IN_OUT } from '../lib/motion';
+import { Check, ChevronDown, Search, X } from '../icons';
+const HEIGHT = { sm: 36, md: 44, lg: 56 };
+const FONT = { sm: 13, md: 14, lg: 16 };
+const PAD = { sm: 14, md: 14, lg: 18 };
+const BORDER = { sm: 1, md: 1, lg: 1.5 };
+export function Field({ label, required, meta, error, hint, size = 'md', children, style }) {
+    return (_jsxs(View, { style: [styles.shell, style], children: [(label || meta) && (_jsxs(View, { style: styles.labelRow, children: [label ? (_jsxs(Text, { size: size === 'lg' ? 'body' : 'ui', weight: "bold", color: "ink2", align: "start", children: [label, required ? (_jsx(Text, { size: size === 'lg' ? 'body' : 'ui', weight: "bold", color: "danger", children: ' *' })) : null] })) : (_jsx(View, {})), meta ? (_jsx(Text, { size: "caption", color: "muted", children: meta })) : null] })), children, error ? (_jsx(Text, { size: "caption", color: "red", align: "start", accessibilityLiveRegion: "polite", children: error })) : hint ? (_jsx(Text, { size: "caption", color: "muted", align: "start", children: hint })) : null] }));
+}
+export function Input({ label, required, meta, error, invalid: invalidProp, hint, size = 'md', icon: Icon, suffix, action, numeric, editable = true, style, inputStyle, onFocus, onBlur, accessibilityLabel, ...rest }) {
+    const { theme, dir } = useFanar();
+    const [focused, setFocused] = useState(false);
+    const invalid = !!error || !!invalidProp;
+    const borderColor = invalid
+        ? theme.color.danger
+        : focused
+            ? theme.color.brand
+            : theme.color.border;
+    return (_jsx(Field, { label: label, required: required, meta: meta, error: error, hint: hint, size: size, style: style, children: _jsxs(View, { style: [
+                styles.row,
+                {
+                    height: HEIGHT[size],
+                    borderRadius: theme.radius.field,
+                    borderWidth: BORDER[size],
+                    borderColor,
+                    backgroundColor: editable ? theme.color.surface : theme.color.bg,
+                    paddingHorizontal: PAD[size],
+                    gap: 10,
+                },
+                inputStyle,
+            ], children: [Icon && _jsx(Icon, { size: 17, strokeWidth: 2, color: theme.color.muted }), _jsx(TextInput, { accessibilityLabel: accessibilityLabel ?? label, editable: editable, placeholderTextColor: theme.color.muted2, selectionColor: theme.color.brand, onFocus: (e) => {
+                        setFocused(true);
+                        onFocus?.(e);
+                    }, onBlur: (e) => {
+                        setFocused(false);
+                        onBlur?.(e);
+                    }, style: [
+                        styles.input,
+                        theme.font('medium'),
+                        {
+                            fontSize: FONT[size],
+                            color: editable ? theme.color.ink : theme.color.muted,
+                            writingDirection: numeric ? 'ltr' : dir,
+                            textAlign: 'left',
+                        },
+                        numeric && { fontVariant: ['tabular-nums'] },
+                    ], ...rest }), suffix ? (_jsx(Text, { size: "ui", color: "muted", children: suffix })) : null, action] }) }));
+}
+export function SearchInput({ value, onClear, onChangeText, ...rest }) {
+    const { theme, p } = useFanar();
+    const show = !!value;
+    return (_jsx(Input, { icon: Search, value: value, onChangeText: onChangeText, placeholder: rest.placeholder ?? p('search'), returnKeyType: "search", clearButtonMode: "never", accessibilityRole: "search", action: show ? (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: p('clear'), hitSlop: HIT_SLOP_SM, onPress: () => {
+                onClear?.();
+                onChangeText?.('');
+            }, children: _jsx(X, { size: 16, strokeWidth: 2.4, color: theme.color.muted2 }) })) : undefined, ...rest }));
+}
+export function Textarea({ label, required, meta, error, hint, minHeight = 80, numeric, editable = true, style, onFocus, onBlur, accessibilityLabel, ...rest }) {
+    const { theme, dir } = useFanar();
+    const [focused, setFocused] = useState(false);
+    return (_jsx(Field, { label: label, required: required, meta: meta, error: error, hint: hint, style: style, children: _jsx(TextInput, { multiline: true, textAlignVertical: "top", accessibilityLabel: accessibilityLabel ?? label, editable: editable, placeholderTextColor: theme.color.muted2, selectionColor: theme.color.brand, onFocus: (e) => {
+                setFocused(true);
+                onFocus?.(e);
+            }, onBlur: (e) => {
+                setFocused(false);
+                onBlur?.(e);
+            }, style: [
+                theme.font('medium'),
+                {
+                    minHeight,
+                    borderRadius: theme.radius.field,
+                    borderWidth: 1,
+                    borderColor: error ? theme.color.danger : focused ? theme.color.brand : theme.color.border,
+                    backgroundColor: editable ? theme.color.surface : theme.color.bg,
+                    paddingHorizontal: 14,
+                    paddingVertical: 12,
+                    fontSize: theme.text.body,
+                    lineHeight: Math.round(theme.text.body * theme.leading.input),
+                    color: editable ? theme.color.ink : theme.color.muted,
+                    writingDirection: dir,
+                    textAlign: 'left',
+                },
+            ], ...rest }) }));
+}
+function Control({ checked, round, disabled }) {
+    const { theme } = useFanar();
+    return (_jsx(View, { style: {
+            width: 19,
+            height: 19,
+            borderRadius: round ? theme.radius.full : theme.radius.xs,
+            borderWidth: 1.5,
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderColor: checked ? theme.color.brand : theme.color.border,
+            backgroundColor: checked ? theme.color.brand : disabled ? theme.color.bg : theme.color.surface,
+        }, children: checked &&
+            (round ? (_jsx(View, { style: { width: 6, height: 6, borderRadius: 3, backgroundColor: '#ffffff' } })) : (_jsx(Check, { size: 13, strokeWidth: 3.2, color: "#ffffff" }))) }));
+}
+function ChoiceRow({ round, label, description, checked, onChange, disabled, style }) {
+    return (_jsxs(Pressable, { accessibilityRole: round ? 'radio' : 'checkbox', accessibilityState: { checked, disabled: !!disabled }, accessibilityLabel: label, disabled: disabled, onPress: () => onChange(!checked), hitSlop: HIT_SLOP_SM, style: [styles.choiceRow, disabled && styles.dim, style], children: [_jsx(View, { style: styles.choiceBox, children: _jsx(Control, { checked: checked, round: round, disabled: disabled }) }), (label || description) && (_jsxs(View, { style: styles.choiceText, children: [label ? (_jsx(Text, { size: "body", color: "ink", align: "start", children: label })) : null, description ? (_jsx(Text, { size: "caption", color: "muted", align: "start", children: description })) : null] }))] }));
+}
+export function Checkbox(props) {
+    return _jsx(ChoiceRow, { round: false, ...props });
+}
+export function Radio(props) {
+    return _jsx(ChoiceRow, { round: true, ...props });
+}
+export function RadioGroup({ legend, value, options, onChange, inline, style }) {
+    return (_jsxs(View, { accessibilityRole: "radiogroup", style: [styles.group, style], children: [legend ? (_jsx(Text, { size: "ui", weight: "bold", color: "ink2", align: "start", style: styles.legend, children: legend })) : null, _jsx(View, { style: inline ? styles.groupInline : styles.groupStacked, children: options.map((o) => (_jsx(Radio, { label: o.label, description: o.description, disabled: o.disabled, checked: o.value === value, onChange: () => onChange(o.value) }, o.value))) })] }));
+}
+export function Switch({ value, onValueChange, label, description, disabled, activeColor, style }) {
+    const { theme } = useFanar();
+    const pos = useRef(new Animated.Value(value ? 1 : 0)).current;
+    useEffect(() => {
+        Animated.timing(pos, {
+            toValue: value ? 1 : 0,
+            duration: 200,
+            easing: EASE_IN_OUT,
+            useNativeDriver: false,
+        }).start();
+    }, [value, pos]);
+    const start = pos.interpolate({ inputRange: [0, 1], outputRange: [2, 22] });
+    return (_jsxs(Pressable, { accessibilityRole: "switch", accessibilityState: { checked: value, disabled: !!disabled }, accessibilityLabel: label, disabled: disabled, onPress: () => onValueChange(!value), style: [styles.switchRow, disabled && styles.dim, style], children: [(label || description) && (_jsxs(View, { style: styles.switchText, children: [label ? (_jsx(Text, { size: "body", color: "ink", align: "start", children: label })) : null, description ? (_jsx(Text, { size: "caption", color: "muted", align: "start", children: description })) : null] })), _jsx(View, { style: {
+                    width: 44,
+                    height: 24,
+                    borderRadius: theme.radius.full,
+                    backgroundColor: value ? (activeColor ?? theme.color.brand) : theme.color.border,
+                    justifyContent: 'center',
+                }, children: _jsx(Animated.View, { style: [
+                        {
+                            width: 20,
+                            height: 20,
+                            borderRadius: 10,
+                            backgroundColor: '#ffffff',
+                            insetInlineStart: start,
+                        },
+                        theme.shadow.raise,
+                    ] }) })] }));
+}
+export function Select({ label, required, error, hint, size = 'md', value, placeholder, options, onChange, disabled, style, }) {
+    const { theme, p } = useFanar();
+    const [open, setOpen] = useState(false);
+    const current = options.find((o) => o.value === value);
+    return (_jsxs(_Fragment, { children: [_jsx(Field, { label: label, required: required, error: error, hint: hint, size: size, style: style, children: _jsxs(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: !!disabled, expanded: open }, accessibilityLabel: label, accessibilityValue: { text: current?.label }, disabled: disabled, onPress: () => setOpen(true), style: ({ pressed }) => [
+                        styles.row,
+                        {
+                            height: HEIGHT[size],
+                            borderRadius: theme.radius.field,
+                            borderWidth: BORDER[size],
+                            borderColor: error ? theme.color.danger : theme.color.border,
+                            backgroundColor: disabled ? theme.color.bg : pressed ? theme.color.hover : theme.color.surface,
+                            paddingHorizontal: PAD[size],
+                            gap: 10,
+                        },
+                    ], children: [_jsx(Text, { size: FONT[size], color: current ? 'ink' : 'muted2', align: "start", lines: 1, style: styles.input, children: current?.label ?? placeholder ?? p('search') }), _jsx(ChevronDown, { size: 17, strokeWidth: 2, color: theme.color.muted2 })] }) }), open && (_jsx(SelectSheet, { title: label, options: options, value: value, onPick: (next) => {
+                    onChange(next);
+                    setOpen(false);
+                }, onClose: () => setOpen(false) }))] }));
+}
+function SelectSheet({ title, options, value, onPick, onClose, }) {
+    const { theme, p } = useFanar();
+    return (_jsx(Sheet, { open: true, title: title ?? p('selected'), onClose: onClose, children: options.map((o) => {
+            const on = o.value === value;
+            return (_jsxs(Pressable, { accessibilityRole: "menuitem", accessibilityState: { selected: on, disabled: !!o.disabled }, disabled: o.disabled, onPress: () => onPick(o.value), style: ({ pressed }) => [
+                    styles.selectRow,
+                    {
+                        borderRadius: theme.radius.field,
+                        backgroundColor: on ? theme.color.bg : pressed ? theme.color.hover : 'transparent',
+                        opacity: o.disabled ? 0.5 : 1,
+                    },
+                ], children: [_jsx(Text, { size: "body", weight: on ? 'extraBold' : 'medium', align: "start", style: styles.input, lines: 1, children: o.label }), on && _jsx(Check, { size: 17, strokeWidth: 2.4, color: theme.color.brand })] }, o.value));
+        }) }));
+}
+const styles = StyleSheet.create({
+    shell: { gap: 6 },
+    labelRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 12 },
+    row: { flexDirection: 'row', alignItems: 'center' },
+    input: { flex: 1, minWidth: 0, padding: 0 },
+    choiceRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 10 },
+    choiceBox: { marginTop: 1 },
+    choiceText: { flex: 1, gap: 2 },
+    dim: { opacity: 0.5 },
+    group: { gap: 10 },
+    legend: { marginBottom: 4 },
+    groupInline: { flexDirection: 'row', flexWrap: 'wrap', gap: 20 },
+    groupStacked: { gap: 12 },
+    switchRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 12 },
+    switchText: { flex: 1, gap: 2 },
+    selectRow: { flexDirection: 'row', alignItems: 'center', gap: 10, height: 48, paddingHorizontal: 12 },
+});

package/lib/components/Money.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { CURRENCY, currencyName, isCurrency, type Currency, type SymbolStyle } from './currency';
+export type { Currency, SymbolStyle };
+export { CURRENCY, currencyName, isCurrency };
+export declare function MoneyProvider({ currency, locale, children, }: {
+    currency: Currency;
+    locale?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useCurrency(): Currency;
+export declare function useMoneyLocale(): string;
+export declare function useCurrencySymbol(): string;
+export type MoneySize = 'inherit' | 'sm' | 'md' | 'lg' | 'xl';
+export interface MoneyProps {
+    value: number;
+    currency?: Currency;
+    symbol?: SymbolStyle;
+    size?: MoneySize;
+    fontSize?: number;
+    was?: number;
+    compact?: boolean;
+    signed?: boolean;
+    tone?: boolean;
+    color?: string;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+}
+export declare function Money({ value, currency, symbol, was, size, fontSize, compact, signed, tone, color, style, textStyle, }: MoneyProps): import("react").JSX.Element;

package/lib/components/Money.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Text } from './Text';
+import { useFanar } from '../theme/context';
+import { groupDigits } from '../lib/digits';
+import { CURRENCY, currencyName, isCurrency, resolveStyle, UNIT_RATIO, unitOf } from './currency';
+export { CURRENCY, currencyName, isCurrency };
+const CurrencyCtx = createContext('SAR');
+const LocaleCtx = createContext(null);
+export function MoneyProvider({ currency, locale, children, }) {
+    return (_jsx(CurrencyCtx.Provider, { value: currency, children: _jsx(LocaleCtx.Provider, { value: locale ?? null, children: children }) }));
+}
+export function useCurrency() {
+    return useContext(CurrencyCtx);
+}
+export function useMoneyLocale() {
+    const fromProvider = useContext(LocaleCtx);
+    const { en } = useFanar();
+    return fromProvider ?? (en ? 'en-US' : 'ar-EG');
+}
+export function useCurrencySymbol() {
+    return CURRENCY[useCurrency()].short;
+}
+function format(v, decimals, locale, compact, signed) {
+    const sign = v < 0 ? '−' : signed && v > 0 ? '+' : '';
+    const abs = Math.abs(v);
+    try {
+        const nf = new Intl.NumberFormat(locale, compact
+            ? { notation: 'compact', minimumFractionDigits: 0, maximumFractionDigits: 1 }
+            : { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
+        return sign + nf.format(abs);
+    }
+    catch {
+        return sign + groupDigits(abs, compact ? 0 : decimals);
+    }
+}
+const SIZE = {
+    sm: { size: 'caption', weight: 'medium' },
+    md: { size: 'ui', weight: 'medium' },
+    lg: { size: 'body', weight: 'extraBold' },
+    xl: { size: 'h2', weight: 'black' },
+};
+export function Money({ value, currency, symbol = 'best', was, size = 'md', fontSize, compact, signed, tone, color, style, textStyle, }) {
+    const { theme, en } = useFanar();
+    const locale = useMoneyLocale();
+    const fallback = useCurrency();
+    const code = currency ?? fallback;
+    const c = CURRENCY[code];
+    const shape = resolveStyle(symbol, c, en);
+    const unit = unitOf(c, shape);
+    const text = format(value, c.decimals, locale, compact, signed);
+    const spec = size === 'inherit' ? null : SIZE[size];
+    const px = fontSize ?? (spec ? theme.text[spec.size] : theme.text.ui);
+    const showWas = typeof was === 'number' && was > value;
+    const wasText = showWas ? format(was, c.decimals, locale, compact) : null;
+    const wasPx = Math.round(px * 0.82);
+    const fg = color ?? (tone ? (value > 0 ? theme.color.green : value < 0 ? theme.color.red : theme.color.ink) : theme.color.ink);
+    return (_jsxs(View, { accessible: true, accessibilityLabel: `${text} ${currencyName(code, en)}`, style: [styles.row, style], children: [_jsx(Text, { size: px, weight: spec?.weight ?? 'extraBold', color: fg, numeric: true, leading: "none", style: textStyle, accessibilityElementsHidden: true, importantForAccessibility: "no", children: text }), _jsx(Text, { size: Math.round(px * UNIT_RATIO[shape]), weight: shape === 'word' ? 'regular' : 'bold', color: fg, leading: "none", accessibilityElementsHidden: true, importantForAccessibility: "no", children: unit }), wasText && (_jsxs(View, { style: styles.was, children: [_jsx(Text, { size: wasPx, weight: "medium", color: theme.color.muted, numeric: true, leading: "none", style: styles.strike, accessibilityElementsHidden: true, importantForAccessibility: "no", children: wasText }), _jsx(Text, { size: Math.round(wasPx * UNIT_RATIO[shape]), weight: "regular", color: theme.color.muted, leading: "none", style: styles.strike, accessibilityElementsHidden: true, importantForAccessibility: "no", children: unit })] }))] }));
+}
+const styles = StyleSheet.create({
+    row: { flexDirection: 'row', alignItems: 'baseline', gap: 4 },
+    was: { flexDirection: 'row', alignItems: 'baseline', gap: 3 },
+    strike: { textDecorationLine: 'line-through' },
+});

package/lib/components/Nav.d.ts

@@ -0,0 +1,29 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type LucideIcon } from '../icons';
+export interface TabItem<T extends string = string> {
+    key: T;
+    label: string;
+    count?: number;
+    icon?: LucideIcon;
+}
+export interface TabsProps<T extends string> {
+    items: TabItem<T>[];
+    value: T;
+    onChange: (next: T) => void;
+    variant?: 'segmented' | 'pill';
+    fill?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Tabs<T extends string>({ items, value, onChange, variant, fill, style }: TabsProps<T>): import("react").JSX.Element;
+export interface FilterChip {
+    key: string;
+    label: string;
+}
+export declare function FilterChips({ label, chips, onRemove, onClearAll, clearAllLabel, style, }: {
+    label?: string;
+    chips: FilterChip[];
+    onRemove: (key: string) => void;
+    onClearAll?: () => void;
+    clearAllLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element | null;

package/lib/components/Nav.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, ScrollView, Pressable, View } from 'react-native';
+import { Text } from './Text';
+import { useFanar } from '../theme/context';
+import { HIT_SLOP_SM } from '../lib/a11y';
+import { X } from '../icons';
+export function Tabs({ items, value, onChange, variant = 'segmented', fill, style }) {
+    const { theme } = useFanar();
+    const seg = variant === 'segmented';
+    const list = (_jsx(View, { style: [
+            seg
+                ? [
+                    styles.segList,
+                    { backgroundColor: theme.color.bg, borderRadius: theme.radius.field },
+                    fill && styles.fill,
+                ]
+                : styles.pillList,
+        ], children: items.map((it) => {
+            const on = it.key === value;
+            const Icon = it.icon;
+            const fg = seg ? (on ? 'ink' : 'muted') : on ? 'brand-ink' : 'ink2';
+            return (_jsxs(Pressable, { accessibilityRole: "tab", accessibilityState: { selected: on }, accessibilityLabel: it.label, onPress: () => onChange(it.key), style: ({ pressed }) => [
+                    seg ? styles.segTab : styles.pillTab,
+                    fill && styles.fill,
+                    seg
+                        ? {
+                            borderRadius: theme.radius.sm,
+                            backgroundColor: on ? theme.color.surface : pressed ? theme.color.hover : 'transparent',
+                            ...(on ? theme.shadow.raise : null),
+                        }
+                        : {
+                            borderRadius: theme.radius.field,
+                            borderWidth: 1,
+                            borderColor: on ? theme.color.brand : theme.color.border,
+                            backgroundColor: on ? theme.color.soft : pressed ? theme.color.hover : theme.color.surface,
+                        },
+                ], children: [Icon && _jsx(Icon, { size: 15, strokeWidth: 2.2, color: theme.colorOf(fg, theme.color.ink) }), _jsx(Text, { size: "ui", weight: "bold", color: fg, lines: 1, leading: "tight", children: it.label }), it.count !== undefined && (_jsx(Text, { size: seg ? 'ui' : 'micro', weight: "bold", color: fg, numeric: true, style: styles.count, children: it.count }))] }, it.key));
+        }) }));
+    if (fill)
+        return _jsx(View, { style: style, children: list });
+    return (_jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.scroller, style: style, children: list }));
+}
+export function FilterChips({ label, chips, onRemove, onClearAll, clearAllLabel, style, }) {
+    const { theme, p } = useFanar();
+    if (!chips.length)
+        return null;
+    return (_jsxs(View, { style: [styles.chipsRow, style], children: [label ? (_jsx(Text, { size: "caption", color: "muted", children: label })) : null, chips.map((c) => (_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `${p('clear')} — ${c.label}`, hitSlop: HIT_SLOP_SM, onPress: () => onRemove(c.key), style: ({ pressed }) => [
+                    styles.chip,
+                    {
+                        borderRadius: theme.radius.full,
+                        backgroundColor: pressed ? theme.color.soft2 : theme.color.soft,
+                    },
+                ], children: [_jsx(Text, { size: "caption", weight: "bold", color: "brand-ink", lines: 1, children: c.label }), _jsx(X, { size: 13, strokeWidth: 2.6, color: theme.color['brand-ink'] })] }, c.key))), onClearAll && chips.length > 1 && (_jsx(Pressable, { accessibilityRole: "button", hitSlop: HIT_SLOP_SM, onPress: onClearAll, children: _jsx(Text, { size: "caption", weight: "bold", color: "muted", children: clearAllLabel ?? p('clear') }) }))] }));
+}
+const styles = StyleSheet.create({
+    scroller: { paddingHorizontal: 0 },
+    segList: { flexDirection: 'row', gap: 2, padding: 2, alignSelf: 'flex-start' },
+    segTab: { height: 36, paddingHorizontal: 14, flexDirection: 'row', alignItems: 'center', gap: 8 },
+    pillList: { flexDirection: 'row', alignItems: 'center', gap: 10 },
+    pillTab: { height: 40, paddingHorizontal: 14, flexDirection: 'row', alignItems: 'center', gap: 6 },
+    fill: { flex: 1, justifyContent: 'center' },
+    count: { opacity: 0.65 },
+    chipsRow: { flexDirection: 'row', alignItems: 'center', gap: 8, flexWrap: 'wrap' },
+    chip: { flexDirection: 'row', alignItems: 'center', gap: 6, height: 28, paddingStart: 12, paddingEnd: 8 },
+});

package/lib/components/NumberStepper.d.ts

@@ -0,0 +1,16 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type StepperSize = 'sm' | 'md' | 'lg';
+export interface NumberStepperProps {
+    value: number;
+    onChange: (next: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: StepperSize;
+    unit?: string;
+    disabled?: boolean;
+    readOnlyField?: boolean;
+    label?: string;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function NumberStepper({ value, onChange, min, max, step, size, unit, disabled, readOnlyField, label, style, }: NumberStepperProps): import("react").JSX.Element;

package/lib/components/NumberStepper.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Pressable, StyleSheet, TextInput, View } from 'react-native';
+import { Text } from './Text';
+import { useFanar } from '../theme/context';
+import { toLatinDigits } from '../lib/digits';
+import { Minus, Plus } from '../icons';
+const BOX = { sm: 32, md: 44, lg: 56 };
+const NUM_W = { sm: 40, md: 56, lg: 80 };
+const NUM_T = { sm: 13, md: 14, lg: 20 };
+const ICON = { sm: 14, md: 16, lg: 20 };
+const HOLD_START_MS = 400;
+const HOLD_MIN_MS = 60;
+const HOLD_DECAY = 0.72;
+export function NumberStepper({ value, onChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, size = 'md', unit, disabled, readOnlyField, label, style, }) {
+    const { theme, p } = useFanar();
+    const [draft, setDraft] = useState(null);
+    const timer = useRef(null);
+    const clamp = useCallback((n) => Math.min(max, Math.max(min, n)), [min, max]);
+    const stop = useCallback(() => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = null;
+    }, []);
+    useEffect(() => stop, [stop]);
+    const latest = useRef(value);
+    latest.current = value;
+    const hold = useCallback((delta, delay) => {
+        timer.current = setTimeout(() => {
+            const next = clamp(latest.current + delta);
+            if (next === latest.current)
+                return stop();
+            onChange(next);
+            hold(delta, Math.max(HOLD_MIN_MS, delay * HOLD_DECAY));
+        }, delay);
+    }, [clamp, onChange, stop]);
+    const bump = (delta) => {
+        const next = clamp(value + delta);
+        if (next !== value)
+            onChange(next);
+    };
+    const box = BOX[size];
+    const canDown = !disabled && value > min;
+    const canUp = !disabled && value < max;
+    const StepBtn = ({ dir, enabled }) => {
+        const Icon = dir > 0 ? Plus : Minus;
+        return (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: p(dir > 0 ? 'increase' : 'decrease'), accessibilityState: { disabled: !enabled }, disabled: !enabled, onPress: () => bump(dir * step), onPressIn: () => enabled && hold(dir * step, HOLD_START_MS), onPressOut: stop, style: ({ pressed }) => [
+                styles.btn,
+                { width: box, height: box, backgroundColor: pressed && enabled ? theme.color.hover : 'transparent' },
+            ], children: _jsx(Icon, { size: ICON[size], strokeWidth: 2.6, color: enabled ? theme.color.ink2 : theme.color.muted2, opacity: enabled ? 1 : 0.45 }) }));
+    };
+    return (_jsxs(View, { accessibilityLabel: label, style: [
+            styles.shell,
+            {
+                height: box,
+                borderRadius: theme.radius.field,
+                borderWidth: 1,
+                borderColor: theme.color.line,
+                backgroundColor: theme.color.surface,
+                opacity: disabled ? 0.6 : 1,
+            },
+            style,
+        ], children: [_jsx(StepBtn, { dir: -1, enabled: canDown }), _jsx(View, { style: [styles.divider, { backgroundColor: theme.color.line }] }), _jsxs(View, { style: [styles.numWrap, { width: NUM_W[size] }], children: [readOnlyField ? (_jsx(Text, { size: NUM_T[size], weight: "extraBold", numeric: true, align: "center", children: value })) : (_jsx(TextInput, { value: draft ?? String(value), editable: !disabled, keyboardType: "number-pad", selectTextOnFocus: true, selectionColor: theme.color.brand, onChangeText: (t) => setDraft(toLatinDigits(t).replace(/[^\d]/g, '')), onBlur: () => {
+                            if (draft !== null)
+                                onChange(clamp(Number(draft) || min));
+                            setDraft(null);
+                        }, style: [
+                            theme.font('extraBold'),
+                            styles.numField,
+                            { fontSize: NUM_T[size], color: disabled ? theme.color.muted2 : theme.color.ink },
+                        ] })), unit ? (_jsx(Text, { size: "micro", color: "muted2", children: unit })) : null] }), _jsx(View, { style: [styles.divider, { backgroundColor: theme.color.line }] }), _jsx(StepBtn, { dir: 1, enabled: canUp })] }));
+}
+const styles = StyleSheet.create({
+    shell: { flexDirection: 'row', alignItems: 'center', alignSelf: 'flex-start', overflow: 'hidden' },
+    btn: { alignItems: 'center', justifyContent: 'center' },
+    divider: { width: 1, alignSelf: 'stretch' },
+    numWrap: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 4, paddingHorizontal: 4 },
+    numField: { flex: 1, textAlign: 'center', padding: 0 },
+});

package/lib/components/Overlay.d.ts

@@ -0,0 +1,54 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type Tone } from '../lib/tone';
+import { type LucideIcon } from '../icons';
+export interface SheetProps {
+    open: boolean;
+    title?: string;
+    onClose: () => void;
+    onBack?: () => void;
+    action?: ReactNode;
+    children: ReactNode;
+    maxHeightRatio?: number;
+    scroll?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Sheet({ open, title, onClose, onBack, action, children, maxHeightRatio, scroll, style, }: SheetProps): import("react").JSX.Element;
+export interface SheetRowProps {
+    icon?: LucideIcon;
+    label: string;
+    meta?: string;
+    danger?: boolean;
+    onPress: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function SheetRow({ icon: Icon, label, meta, danger, onPress, style }: SheetRowProps): import("react").JSX.Element;
+export type ModalSize = 'sm' | 'md' | 'lg';
+export interface ModalProps {
+    open: boolean;
+    title?: string;
+    description?: string;
+    onClose: () => void;
+    size?: ModalSize;
+    footer?: ReactNode;
+    children?: ReactNode;
+}
+export declare function Modal({ open, title, description, onClose, size, footer, children }: ModalProps): import("react").JSX.Element;
+export interface AlertProps {
+    tone?: Tone;
+    title?: string;
+    children?: ReactNode;
+    icon?: LucideIcon;
+    action?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Alert({ tone, title, children, icon: Icon, action, style }: AlertProps): import("react").JSX.Element;
+export interface EmptyStateProps {
+    icon?: LucideIcon;
+    title: string;
+    description?: string;
+    actionLabel?: string;
+    onAction?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function EmptyState({ icon: Icon, title, description, actionLabel, onAction, style }: EmptyStateProps): import("react").JSX.Element;