@qumra/fanar-native 0.1.0

package/lib/qumra/types.d.ts

@@ -0,0 +1,5 @@
+export type QumraNode = [string, Record<string, string>, QumraNode[]?];
+export interface QumraIconSpec {
+    label: string;
+    tree: QumraNode[];
+}

package/lib/qumra/types.js

@@ -0,0 +1 @@
+export {};

package/lib/theme/context.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+import { type ColorMode, type FanarTheme } from './theme';
+import { type FontSet } from './fonts';
+import { type Dir, type Lang, type PhraseKey } from '../i18n';
+export interface FanarContextValue {
+    theme: FanarTheme;
+    mode: ColorMode;
+    lang: Lang;
+    en: boolean;
+    dir: Dir;
+    t: (ar: string) => string;
+    p: (key: PhraseKey, vars?: Record<string, string | number>) => string;
+    pick: <T>(ar: T, en: T) => T;
+}
+export interface FanarProviderProps {
+    children: ReactNode;
+    mode?: ColorMode | 'system';
+    lang?: Lang;
+    fonts?: FontSet;
+}
+export declare function FanarProvider({ children, mode, lang, fonts, }: FanarProviderProps): import("react").JSX.Element;
+export declare function useFanar(): FanarContextValue;
+export declare function useTheme(): FanarTheme;
+export declare function useLang(): {
+    lang: Lang;
+    en: boolean;
+    dir: Dir;
+    t: (ar: string) => string;
+    p: (key: PhraseKey, vars?: Record<string, string | number>) => string;
+    pick: <T>(ar: T, en: T) => T;
+};

package/lib/theme/context.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+import { StyleSheet, useColorScheme, View } from 'react-native';
+import { buildTheme } from './theme';
+import { ALEXANDRIA } from './fonts';
+import { phrase, translate } from '../i18n';
+const Ctx = createContext(null);
+export function FanarProvider({ children, mode = 'system', lang = 'ar', fonts = ALEXANDRIA, }) {
+    const scheme = useColorScheme();
+    const resolved = mode === 'system' ? (scheme === 'dark' ? 'dark' : 'light') : mode;
+    const value = useMemo(() => {
+        const en = lang === 'en';
+        return {
+            theme: buildTheme(resolved, fonts),
+            mode: resolved,
+            lang,
+            en,
+            dir: en ? 'ltr' : 'rtl',
+            t: (ar) => translate(ar, en),
+            p: (key, vars) => phrase(key, en, vars),
+            pick: (ar, enValue) => (en ? enValue : ar),
+        };
+    }, [resolved, lang, fonts]);
+    return (_jsx(Ctx.Provider, { value: value, children: _jsx(View, { style: [styles.root, { direction: value.dir }], children: children }) }));
+}
+const styles = StyleSheet.create({ root: { flex: 1 } });
+const FALLBACK = {
+    theme: buildTheme('light'),
+    mode: 'light',
+    lang: 'ar',
+    en: false,
+    dir: 'rtl',
+    t: (ar) => ar,
+    p: (key, vars) => phrase(key, false, vars),
+    pick: (ar) => ar,
+};
+export function useFanar() {
+    return useContext(Ctx) ?? FALLBACK;
+}
+export function useTheme() {
+    return useFanar().theme;
+}
+export function useLang() {
+    const { lang, en, dir, t, p, pick } = useFanar();
+    return { lang, en, dir, t, p, pick };
+}

package/lib/theme/fonts.d.ts

@@ -0,0 +1,9 @@
+import type { TextStyle } from 'react-native';
+export type Weight = 'extraLight' | 'light' | 'regular' | 'medium' | 'semiBold' | 'bold' | 'extraBold' | 'black';
+export declare const WEIGHT_VALUE: Record<Weight, TextStyle['fontWeight']>;
+export type FontSet = Partial<Record<Weight, string | undefined>>;
+export declare const ALEXANDRIA: FontSet;
+export declare const SYSTEM_FONT: FontSet;
+export declare const DEFAULT_MIN_LEADING = 1.22;
+export declare function minLeadingFor(set: FontSet): number;
+export declare function fontFor(set: FontSet, weight: Weight): TextStyle;

package/lib/theme/fonts.js

@@ -0,0 +1,36 @@
+export const WEIGHT_VALUE = {
+    extraLight: '200',
+    light: '300',
+    regular: '400',
+    medium: '500',
+    semiBold: '600',
+    bold: '700',
+    extraBold: '800',
+    black: '900',
+};
+export const ALEXANDRIA = {
+    extraLight: 'Alexandria-ExtraLight',
+    light: 'Alexandria-Light',
+    regular: 'Alexandria-Regular',
+    medium: 'Alexandria-Medium',
+    semiBold: 'Alexandria-SemiBold',
+    bold: 'Alexandria-Bold',
+    extraBold: 'Alexandria-ExtraBold',
+    black: 'Alexandria-Black',
+};
+export const SYSTEM_FONT = {};
+const LINE_BOX = {
+    'Alexandria-Regular': 1.22,
+    'Zain-Regular': 1.4,
+};
+export const DEFAULT_MIN_LEADING = 1.22;
+export function minLeadingFor(set) {
+    const regular = set.regular;
+    if (!regular)
+        return 1;
+    return LINE_BOX[regular] ?? DEFAULT_MIN_LEADING;
+}
+export function fontFor(set, weight) {
+    const fontFamily = set[weight];
+    return fontFamily ? { fontFamily, fontWeight: WEIGHT_VALUE[weight] } : { fontWeight: WEIGHT_VALUE[weight] };
+}

package/lib/theme/index.d.ts

@@ -0,0 +1,4 @@
+export { FanarProvider, useFanar, useTheme, useLang, type FanarContextValue, type FanarProviderProps } from './context';
+export { buildTheme, space, SPACE, LEADING, DURATION, type FanarTheme, type ColorMode, type SpaceStep, type Leading } from './theme';
+export { ALEXANDRIA, SYSTEM_FONT, WEIGHT_VALUE, fontFor, type FontSet, type Weight } from './fonts';
+export { rnShadow } from './shadows';

package/lib/theme/index.js

@@ -0,0 +1,4 @@
+export { FanarProvider, useFanar, useTheme, useLang } from './context';
+export { buildTheme, space, SPACE, LEADING, DURATION } from './theme';
+export { ALEXANDRIA, SYSTEM_FONT, WEIGHT_VALUE, fontFor } from './fonts';
+export { rnShadow } from './shadows';

package/lib/theme/shadows.d.ts

@@ -0,0 +1,2 @@
+import { type ViewStyle } from 'react-native';
+export declare function rnShadow(value: string, tokens: Record<string, string>): ViewStyle | null;

package/lib/theme/shadows.js

@@ -0,0 +1,30 @@
+import { Platform } from 'react-native';
+function splitColor(raw) {
+    const fn = raw.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*(?:[/,]\s*([\d.]+)\s*)?\)$/);
+    if (fn) {
+        const hex = fn
+            .slice(1, 4)
+            .map((n) => Number(n).toString(16).padStart(2, '0'))
+            .join('');
+        return [`#${hex}`, fn[4] === undefined ? 1 : Number(fn[4])];
+    }
+    return [raw, 1];
+}
+export function rnShadow(value, tokens) {
+    if (value.includes('inset'))
+        return null;
+    const resolved = value.replace(/var\(\s*(--[\w-]+)\s*\)/g, (_, name) => tokens[name] ?? '');
+    const parts = resolved.match(/^(-?[\d.]+)(?:px)?\s+(-?[\d.]+)(?:px)?\s+([\d.]+)(?:px)?\s+(.+)$/);
+    if (!parts)
+        return null;
+    const [, x, y, blur, color] = parts;
+    const [shadowColor, opacity] = splitColor((color ?? '').trim());
+    return {
+        shadowColor,
+        shadowOpacity: opacity,
+        shadowOffset: { width: Number(x), height: Number(y) },
+        shadowRadius: Number(blur) / 2,
+        elevation: Math.max(1, Math.round(Number(blur) / 2)),
+        ...Platform.select({ android: { shadowColor }, default: {} }),
+    };
+}

package/lib/theme/theme.d.ts

@@ -0,0 +1,52 @@
+import type { ViewStyle } from 'react-native';
+import { type ColorToken, type Radius, type Shadow, type TextSize } from '../tokens';
+import { fontFor, type FontSet, type Weight } from './fonts';
+export type ColorMode = 'light' | 'dark';
+export declare const space: (steps: number) => number;
+export declare const SPACE: {
+    readonly none: 0;
+    readonly hair: 2;
+    readonly xs: 4;
+    readonly sm: 6;
+    readonly md: 8;
+    readonly lg: 12;
+    readonly xl: 14;
+    readonly '2xl': 16;
+    readonly '3xl': 18;
+    readonly '4xl': 20;
+    readonly '5xl': 22;
+    readonly '6xl': 26;
+};
+export type SpaceStep = keyof typeof SPACE;
+export declare const LEADING: {
+    readonly none: 1.22;
+    readonly tight: 1.35;
+    readonly normal: 1.6;
+    readonly relaxed: 1.75;
+    readonly input: 1.9;
+};
+export type Leading = keyof typeof LEADING;
+export declare const DURATION: {
+    readonly fade: 160;
+    readonly sheet: 260;
+    readonly drawer: 320;
+    readonly savebar: 200;
+    readonly toast: 220;
+    readonly press: 90;
+};
+export interface FanarTheme {
+    mode: ColorMode;
+    dark: boolean;
+    color: Record<ColorToken, string>;
+    text: Record<TextSize, number>;
+    radius: Record<Radius, number>;
+    shadow: Record<Shadow, ViewStyle>;
+    space: typeof SPACE;
+    leading: typeof LEADING;
+    duration: typeof DURATION;
+    fonts: FontSet;
+    font: (weight: Weight) => ReturnType<typeof fontFor>;
+    minLeading: number;
+    colorOf: (name: ColorToken | (string & {}) | undefined, fallback: string) => string;
+}
+export declare function buildTheme(mode: ColorMode, fonts?: FontSet): FanarTheme;

package/lib/theme/theme.js

@@ -0,0 +1,78 @@
+import { COLOR_SCALE, DARK_TOKENS, RADIUS_PX, SHADOW_SCALE, TEXT_PX, TOKENS, } from '../tokens';
+import { rnShadow } from './shadows';
+import { ALEXANDRIA, fontFor, minLeadingFor } from './fonts';
+export const space = (steps) => steps * 4;
+export const SPACE = {
+    none: 0,
+    hair: 2,
+    xs: 4,
+    sm: 6,
+    md: 8,
+    lg: 12,
+    xl: 14,
+    '2xl': 16,
+    '3xl': 18,
+    '4xl': 20,
+    '5xl': 22,
+    '6xl': 26,
+};
+export const LEADING = {
+    none: 1.22,
+    tight: 1.35,
+    normal: 1.6,
+    relaxed: 1.75,
+    input: 1.9,
+};
+export const DURATION = {
+    fade: 160,
+    sheet: 260,
+    drawer: 320,
+    savebar: 200,
+    toast: 220,
+    press: 90,
+};
+function shadowScale(tokens) {
+    const out = {};
+    for (const step of SHADOW_SCALE) {
+        const raw = tokens[`--shadow-${step}`];
+        out[step] = (raw && rnShadow(raw, tokens)) || {};
+    }
+    out.sheet = {
+        ...(rnShadow('0 -14px 40px rgb(2 8 9 / 0.28)', tokens) ?? {}),
+    };
+    return out;
+}
+const CACHE = {};
+export function buildTheme(mode, fonts = ALEXANDRIA) {
+    const key = `${mode}:${Object.values(fonts).join('|')}`;
+    const hit = CACHE[key];
+    if (hit)
+        return hit;
+    if (!TOKENS || !TOKENS['--color-brand'])
+        throw new Error('[fanar-native] التوكنز ما اتحمّلتش — `src/tokens/generated.ts` مش متحلّ صح. ' +
+            'شغّل `node scripts/generate-tokens.mjs`، وشوف تعليق ترتيب الامتدادات في `src/tokens/index.ts`.');
+    const dark = mode === 'dark';
+    const tokens = dark
+        ? { ...TOKENS, ...DARK_TOKENS }
+        : { ...TOKENS };
+    const color = {};
+    for (const name of COLOR_SCALE)
+        color[name] = tokens[`--color-${name}`] ?? '#000000';
+    const theme = {
+        mode,
+        dark,
+        color,
+        text: { ...TEXT_PX },
+        radius: { ...RADIUS_PX },
+        shadow: shadowScale(tokens),
+        space: SPACE,
+        leading: LEADING,
+        duration: DURATION,
+        fonts,
+        font: (weight) => fontFor(fonts, weight),
+        minLeading: minLeadingFor(fonts),
+        colorOf: (name, fallback) => (name && color[name]) || (name?.startsWith('#') ? name : fallback),
+    };
+    CACHE[key] = theme;
+    return theme;
+}

package/lib/tokens/generated.d.ts

@@ -0,0 +1,180 @@
+export declare const TEXT_SCALE: readonly ["micro", "caption", "ui", "body", "lead", "base", "h4", "h3", "h2", "h1", "display", "hero", "title", "mega"];
+export type TextSize = (typeof TEXT_SCALE)[number];
+export declare const RADIUS_SCALE: readonly ["mark", "xs", "sm", "field", "card", "lg", "section", "full"];
+export type Radius = (typeof RADIUS_SCALE)[number];
+export declare const SHADOW_SCALE: readonly ["raise", "tip", "panel", "pop", "modal", "toast", "sheet"];
+export type Shadow = (typeof SHADOW_SCALE)[number];
+export declare const CONTAINER_SCALE: readonly ["page", "shell", "note", "lead"];
+export type Container = (typeof CONTAINER_SCALE)[number];
+export declare const ANIMATE_SCALE: readonly ["qfade", "qslide", "tip", "tip-up", "drawer", "drawer-rtl", "savebar", "skeleton"];
+export type Animation = (typeof ANIMATE_SCALE)[number];
+export declare const COLOR_SCALE: readonly ["surface", "bg", "line", "hover", "ink", "ink2", "muted", "muted2", "border", "soft", "soft2", "brand-100", "brand-900", "brand-ink", "brand", "brand-hover", "brand-deep", "skeleton", "tint", "tint2", "mint", "amber-900", "amber", "amber-bg", "amber-ink", "amber-line", "amber-hover", "green", "green-bg", "green-bg2", "green-line", "green-solid", "violet", "violet-bg", "violet-line", "violet-solid", "red-100", "red", "red-bg", "red-line", "danger", "danger-hover", "night", "hero-body", "hero-meta", "hero-dim", "hero-text", "code-bg", "code-plain", "code-key", "code-tag", "code-attr", "code-str", "code-num", "code-note", "code-dim", "code-line", "code-chip"];
+export type ColorToken = (typeof COLOR_SCALE)[number];
+export declare const TOKENS: {
+    readonly '--font-sans': "\"Alexandria\", system-ui, sans-serif";
+    readonly '--color-surface': "#ffffff";
+    readonly '--color-bg': "#f7f9f9";
+    readonly '--color-line': "#edf1f1";
+    readonly '--color-hover': "#f2f6f6";
+    readonly '--color-ink': "#020809";
+    readonly '--color-ink2': "#3d4545";
+    readonly '--color-muted': "#5f6a6a";
+    readonly '--color-muted2': "#687373";
+    readonly '--color-border': "#7f8c8c";
+    readonly '--color-soft': "#eaf2f3";
+    readonly '--color-soft2': "#dceded";
+    readonly '--color-brand-100': "#a5c9cc";
+    readonly '--color-brand-900': "#0a2528";
+    readonly '--color-brand-ink': "#0f4a4e";
+    readonly '--color-brand': "#207982";
+    readonly '--color-brand-hover': "#1a646c";
+    readonly '--color-brand-deep': "#0b3b3e";
+    readonly '--color-skeleton': "#d6dcdc";
+    readonly '--color-tint': "#f4faf8";
+    readonly '--color-tint2': "#eff6f3";
+    readonly '--color-mint': "#7dd3c0";
+    readonly '--color-amber-900': "#3d2a05";
+    readonly '--color-amber': "#f8ac33";
+    readonly '--color-amber-bg': "#fef6e9";
+    readonly '--color-amber-ink': "#85570f";
+    readonly '--color-amber-line': "#fbd79a";
+    readonly '--color-amber-hover': "#de9219";
+    readonly '--color-green': "#1e7a45";
+    readonly '--color-green-bg': "#f1faf4";
+    readonly '--color-green-bg2': "#e9f6ee";
+    readonly '--color-green-line': "#bfe6ce";
+    readonly '--color-green-solid': "#1e7a45";
+    readonly '--color-violet': "#4b3e8e";
+    readonly '--color-violet-bg': "#edeaf6";
+    readonly '--color-violet-line': "#ded8ef";
+    readonly '--color-violet-solid': "#6d5eb8";
+    readonly '--color-red-100': "#f3a79e";
+    readonly '--color-red': "#8e2b20";
+    readonly '--color-red-bg': "#fdecea";
+    readonly '--color-red-line': "#f3c9c4";
+    readonly '--color-danger': "#c94134";
+    readonly '--color-danger-hover': "#a3362b";
+    readonly '--color-night': "#0b0f12";
+    readonly '--color-hero-body': "#bfd9d8";
+    readonly '--color-hero-meta': "#8fb3b2";
+    readonly '--color-hero-dim': "#5e7a79";
+    readonly '--color-hero-text': "#d7e3e2";
+    readonly '--color-code-bg': "#1f1f1f";
+    readonly '--color-code-plain': "#d4d4d4";
+    readonly '--color-code-key': "#569cd6";
+    readonly '--color-code-tag': "#4ec9b0";
+    readonly '--color-code-attr': "#9cdcfe";
+    readonly '--color-code-str': "#ce9178";
+    readonly '--color-code-num': "#b5cea8";
+    readonly '--color-code-note': "#6a9955";
+    readonly '--color-code-dim': "#858585";
+    readonly '--color-code-line': "#303031";
+    readonly '--color-code-chip': "#f4f7f7";
+    readonly '--text-micro': "11px";
+    readonly '--text-caption': "12px";
+    readonly '--text-ui': "13px";
+    readonly '--text-body': "14px";
+    readonly '--text-lead': "15px";
+    readonly '--text-base': "16px";
+    readonly '--text-base--line-height': "initial";
+    readonly '--text-h4': "17px";
+    readonly '--text-h3': "20px";
+    readonly '--text-h2': "24px";
+    readonly '--text-h1': "30px";
+    readonly '--text-display': "36px";
+    readonly '--text-hero': "44px";
+    readonly '--text-title': "40px";
+    readonly '--text-mega': "54px";
+    readonly '--container-page': "1600px";
+    readonly '--container-shell': "1600px";
+    readonly '--container-note': "340px";
+    readonly '--container-lead': "520px";
+    readonly '--radius-mark': "3px";
+    readonly '--radius-xs': "5px";
+    readonly '--radius-sm': "7px";
+    readonly '--radius-field': "9px";
+    readonly '--radius-card': "12px";
+    readonly '--radius-lg': "14px";
+    readonly '--radius-section': "18px";
+    readonly '--radius-full': "999px";
+    readonly '--shadow-raise': "0 1px 3px var(--shadow-color)";
+    readonly '--shadow-tip': "0 6px 18px var(--shadow-color)";
+    readonly '--shadow-panel': "0 10px 30px var(--shadow-color)";
+    readonly '--shadow-pop': "0 18px 44px var(--shadow-color)";
+    readonly '--shadow-modal': "0 24px 60px rgb(2 8 9 / 0.28)";
+    readonly '--shadow-toast': "0 16px 40px rgb(2 8 9 / 0.26)";
+    readonly '--shadow-sheet': "0 -14px 40px rgb(2 8 9 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.06)";
+    readonly '--shadow-color': "rgb(2 8 9 / 0.14)";
+    readonly '--animate-qfade': "qfade 0.16s ease-out";
+    readonly '--animate-qslide': "qslidein 0.22s ease-out";
+    readonly '--animate-tip': "tip-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1)";
+    readonly '--animate-tip-up': "tip-up 0.3s cubic-bezier(0.2, 0.9, 0.2, 1)";
+    readonly '--animate-drawer': "drawer-ltr 0.32s cubic-bezier(0.2, 0.9, 0.2, 1)";
+    readonly '--animate-drawer-rtl': "drawer-rtl 0.32s cubic-bezier(0.2, 0.9, 0.2, 1)";
+    readonly '--animate-savebar': "savebar-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1)";
+    readonly '--animate-skeleton': "skeleton-pulse 1.6s ease-in-out infinite";
+    readonly '--num-align': "right";
+    readonly '--num-align-far': "left";
+    readonly '--num-pad-right': "0.875rem";
+    readonly '--num-pad-left': "3.5rem";
+    readonly '--num-icon-pad-right': "2.5rem";
+    readonly '--num-icon-pad-left': "0.875rem";
+};
+export declare const DARK_TOKENS: {
+    readonly '--color-surface': "#101718";
+    readonly '--color-bg': "#0a0f10";
+    readonly '--color-line': "#1e2829";
+    readonly '--color-hover': "#1a2425";
+    readonly '--color-ink': "#f2f6f6";
+    readonly '--color-ink2': "#c7d1d1";
+    readonly '--color-muted': "#93a0a0";
+    readonly '--color-muted2': "#7a8787";
+    readonly '--color-border': "#5e6b6c";
+    readonly '--color-soft': "#12363a";
+    readonly '--color-soft2': "#17454a";
+    readonly '--color-brand-ink': "#7dd3c0";
+    readonly '--color-skeleton': "#2c3232";
+    readonly '--color-amber': "#f8ac33";
+    readonly '--color-amber-bg': "#2b2009";
+    readonly '--color-amber-ink': "#f5c77a";
+    readonly '--color-amber-line': "#5c4415";
+    readonly '--color-green': "#6ecf9a";
+    readonly '--color-green-bg': "#0d2119";
+    readonly '--color-green-bg2': "#102a22";
+    readonly '--color-green-line': "#245140";
+    readonly '--color-violet': "#b9aeea";
+    readonly '--color-violet-bg': "#1e1a33";
+    readonly '--color-violet-line': "#38305c";
+    readonly '--color-red': "#f3a79e";
+    readonly '--color-red-bg': "#2c1613";
+    readonly '--color-red-line': "#5c2a24";
+    readonly '--color-code-chip': "#17201f";
+    readonly '--shadow-color': "rgb(0 0 0 / 0.55)";
+};
+export type TokenName = keyof typeof TOKENS;
+export declare const TEXT_PX: {
+    readonly micro: 11;
+    readonly caption: 12;
+    readonly ui: 13;
+    readonly body: 14;
+    readonly lead: 15;
+    readonly base: 16;
+    readonly h4: 17;
+    readonly h3: 20;
+    readonly h2: 24;
+    readonly h1: 30;
+    readonly display: 36;
+    readonly hero: 44;
+    readonly title: 40;
+    readonly mega: 54;
+};
+export declare const RADIUS_PX: {
+    readonly mark: 3;
+    readonly xs: 5;
+    readonly sm: 7;
+    readonly field: 9;
+    readonly card: 12;
+    readonly lg: 14;
+    readonly section: 18;
+    readonly full: 999;
+};