@qumra/fanar-native 0.1.0

package/lib/qumra/QumraIcon.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import Svg, { Circle, ClipPath, Defs, Ellipse, G, LinearGradient, Path, RadialGradient, Rect, Stop, Text as SvgText, } from 'react-native-svg';
+import { QUMRA_ICONS } from './data.generated';
+const TAGS = {
+    svg: Svg,
+    g: G,
+    path: Path,
+    rect: Rect,
+    circle: Circle,
+    ellipse: Ellipse,
+    defs: Defs,
+    clipPath: ClipPath,
+    linearGradient: LinearGradient,
+    radialGradient: RadialGradient,
+    stop: Stop,
+    text: SvgText,
+};
+const uniquify = (value, uid) => value.replace(/url\(#([\w-]+)\)/g, (_m, id) => `url(#${id}-${uid})`);
+const isPaint = (key) => key === 'fill' || key === 'stroke' || key === 'stopColor';
+const HEX = /^#([0-9a-f]{3,8})$/i;
+function grayscale(value) {
+    const v = value.trim();
+    const m = HEX.exec(v);
+    if (!m)
+        return v;
+    let hex = m[1];
+    if (hex.length === 3 || hex.length === 4)
+        hex = hex.slice(0, 3).split('').map((c) => c + c).join('');
+    else
+        hex = hex.slice(0, 6);
+    const n = parseInt(hex, 16);
+    const l = Math.round(0.2126 * ((n >> 16) & 255) + 0.7152 * ((n >> 8) & 255) + 0.0722 * (n & 255));
+    const c = l.toString(16).padStart(2, '0');
+    return `#${c}${c}${c}`;
+}
+function build(node, uid, key, tint) {
+    const [tag, props, kids] = node;
+    const Cmp = TAGS[tag];
+    if (!Cmp)
+        return null;
+    const flat = tint && tint !== 'gray' ? tint : undefined;
+    if (flat && (tag === 'defs' || tag === 'linearGradient' || tag === 'radialGradient'))
+        return null;
+    const p = {};
+    for (const k of Object.keys(props)) {
+        let v = props[k];
+        if (k === 'id')
+            v = `${v}-${uid}`;
+        else if (typeof v === 'string' && v.indexOf('url(#') !== -1)
+            v = uniquify(v, uid);
+        if (tint && isPaint(k) && v !== 'none')
+            v = flat ?? grayscale(v);
+        p[k] = v;
+    }
+    if (flat) {
+        if (p.fillOpacity !== undefined)
+            p.fillOpacity = '1';
+        if (p.strokeOpacity !== undefined)
+            p.strokeOpacity = '1';
+    }
+    const children = kids?.map((c, i) => build(c, uid, i, tint)).filter(Boolean);
+    return React.createElement(Cmp, { key, ...p }, children?.length ? children : undefined);
+}
+function badge(count) {
+    const raw = String(count ?? '').trim();
+    if (!raw || raw === '0')
+        return null;
+    const n = Number(raw);
+    const s = !isNaN(n) && n > 99 ? '99+' : raw.length > 3 ? raw.slice(0, 3) : raw;
+    const w = s.length === 1 ? 12.4 : s.length === 2 ? 15.8 : 19.2;
+    const fs = s.length === 1 ? 9 : s.length === 2 ? 8.2 : 7.1;
+    const x = 30.4 - w;
+    return (_jsxs(G, { children: [_jsx(Rect, { x: x, y: 2.2, width: w, height: 12.4, rx: 6.2, fill: "#E8A94F", stroke: "#F2F7F8", strokeWidth: 1.4 }), _jsx(SvgText, { x: x + w / 2, y: 8.4, dy: fs * 0.35, textAnchor: "middle", fill: "#FFFFFF", fontSize: fs, fontWeight: "700", children: s })] }, "qi-count"));
+}
+export function QumraIcon({ name, size = 32, mono, active, color, count, label, onPress, }) {
+    const spec = QUMRA_ICONS[name];
+    const uid = React.useId().replace(/[^a-zA-Z0-9]/g, '');
+    const dimmed = !!mono && !active;
+    const tint = dimmed ? color ?? 'gray' : undefined;
+    const children = React.useMemo(() => (spec ? spec.tree.map((n, i) => build(n, uid, i, tint)) : []), [spec, uid, tint]);
+    if (!spec) {
+        if (__DEV__)
+            console.warn(`[qumra-icons] لا توجد أيقونة بالاسم «${name}»`);
+        return null;
+    }
+    const mark = badge(count);
+    return (_jsxs(Svg, { width: size, height: size, viewBox: "0 0 32 32", opacity: dimmed ? 0.62 : 1, onPress: onPress, accessibilityRole: "image", accessibilityLabel: label ?? (mark ? `${spec.label} — ${count}` : spec.label), children: [children, mark] }));
+}
+export const hasQumraIcon = (name) => name in QUMRA_ICONS;
+export { QUMRA_ICONS };

package/lib/qumra/data.generated.d.ts

@@ -0,0 +1,3 @@
+import type { QumraIconSpec } from './types';
+export declare const QUMRA_ICONS: Record<string, QumraIconSpec>;
+export type QumraIconName = keyof typeof QUMRA_ICONS;