@qumra/fanar-native 0.1.1 → 0.1.4

package/lib/components/Surfaces.js

@@ -70,7 +70,7 @@ export function StepRow({ icon, title, why, done, action, onPress, style }) {
     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: [
+                ], children: _jsx(Check, { size: 17, strokeWidth: 3, color: "#ffffff" }) })) : brand ? (_jsx(View, { style: styles.stepIcon, children: _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] }));

package/lib/icons.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 import { AlertTriangle, ArrowLeft, ArrowRight, BarChart3, Bell, Bot, Check, CheckCheck, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Copy, ExternalLink, Globe, Home, Info, Lock, Menu, Minus, Plus, Search, Share2, Sparkles, Star, Undo2, X, type LucideIcon } from 'lucide-react-native';
 export type { LucideIcon };
+export declare function uiIconFor(name: string): string | undefined;
 export declare function qumraIconFor(name: string): string | undefined;
 export declare function icon(name: string): LucideIcon;
 export declare function hasIcon(name: string): boolean;
@@ -14,5 +15,17 @@ export type IconProps = {
     flip?: boolean;
     onPress?: () => void;
 };
+export declare const ICON_SIZE: {
+    readonly xs: 12;
+    readonly sm: 14;
+    readonly md: 16;
+    readonly lg: 18;
+    readonly xl: 20;
+    readonly '2xl': 24;
+    readonly '3xl': 32;
+};
+export type IconSize = keyof typeof ICON_SIZE;
+export declare const ICON_STROKE = 2;
+export declare function snapIconSize(size: number): number;
 export declare function Icon({ name, size, color, strokeWidth, style, flip, onPress }: IconProps): React.FunctionComponentElement<import("lucide-react-native").LucideProps>;
 export { AlertTriangle, ArrowLeft, ArrowRight, BarChart3, Bell, Bot, Check, CheckCheck, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Copy, ExternalLink, Globe, Home, Info, Lock, Menu, Minus, Plus, Search, Share2, Sparkles, Star, Undo2, X, };

package/lib/icons.js

@@ -374,6 +374,59 @@ function qumraAs(qumraName) {
     wrapped[qumraName] = Wrapped;
     return wrapped[qumraName];
 }
+const stemOf = (name) => name.replace(/-(outline|sharp)$/, '');
+const UI_FOR = {
+    add: 'plus', 'add-circle': 'plus', plus: 'plus', 'folder-plus': 'plus', 'package-plus': 'plus',
+    'person-add': 'user-plus', remove: 'close', close: 'close', 'close-circle': 'close', x: 'close',
+    checkmark: 'check', 'checkmark-circle': 'check', 'checkmark-done': 'check', check: 'check',
+    checkbox: 'check', trash: 'trash', 'trash-2': 'trash', create: 'pencil', pencil: 'pencil',
+    brush: 'pencil', 'color-wand': 'sparkle', copy: 'copy', save: 'save', download: 'save',
+    'cloud-download': 'save', 'cloud-upload': 'publish', print: 'print', send: 'send',
+    'share-social': 'share', 'share-2': 'share', search: 'search', filter: 'filter',
+    funnel: 'filter', options: 'sliders', sync: 'repeat', reload: 'repeat', refresh: 'reset',
+    'refresh-circle': 'reset', scan: 'search', stop: 'stop', 'pause-circle': 'stop', play: 'live',
+    'play-circle': 'live', 'log-out': 'logout', exit: 'logout', open: 'external',
+    'external-link': 'external', link: 'link', unlink: 'unlink', expand: 'expand',
+    contract: 'collapse', resize: 'expand',
+    'alert-circle': 'alert', 'alert-triangle': 'alert', warning: 'alert', 'help-circle': 'alert',
+    'information-circle': 'alert', 'life-buoy': 'alert', ban: 'ban', 'shield-checkmark': 'shield-check',
+    'shield-half': 'shield', 'lock-closed': 'lock', key: 'key', 'finger-print': 'key',
+    eye: 'eye', 'eye-off': 'eye-off', star: 'star', crown: 'crown', diamond: 'crown',
+    sparkles: 'sparkle', rocket: 'rocket', flash: 'bolt', flame: 'flame', bulb: 'bulb',
+    storefront: 'store', business: 'building', cube: 'box', 'package-open': 'box',
+    'bag-handle': 'bag', bag: 'bag', cart: 'cart', shoppingcart: 'cart', pricetag: 'tag',
+    pricetags: 'tag', gift: 'tag', ticket: 'tag', receipt: 'receipt', card: 'card',
+    cash: 'money', payments: 'money', wallet: 'wallet', calculator: 'sigma',
+    person: 'user', 'person-circle': 'user', user: 'user', people: 'users', customers: 'users',
+    partners: 'users', car: 'truck', barcode: 'hash', keypad: 'hash',
+    document: 'file', documents: 'file', 'document-text': 'file', reader: 'file', sheet: 'sheet',
+    folder: 'folder', library: 'layers', albums: 'layers', layers: 'layers', book: 'note',
+    journal: 'note', chatbubble: 'note', chatbubbles: 'note', text: 'text', 'code-slash': 'code',
+    terminal: 'code', image: 'image-plus', images: 'image-plus', camera: 'image-plus',
+    'camera-off': 'image-off', videocam: 'film', film: 'film', shapes: 'template',
+    'layout-grid': 'grid', grid: 'grid', apps: 'grid', widgets: 'template', list: 'rows',
+    'reorder-three': 'rows', 'drag-indicator': 'grip', archive: 'archive',
+    'bar-chart': 'chart', 'stats-chart': 'chart', 'pie-chart': 'chart', analytics: 'chart',
+    pulse: 'chart', speedometer: 'chart', 'trending-up': 'trend-up', 'trending-down': 'trend-down',
+    settings: 'gear', construct: 'gear', build: 'gear', hammer: 'gear', 'color-palette': 'palette',
+    globe: 'globe', earth: 'globe', language: 'language', server: 'database', cloud: 'database',
+    'cloud-offline': 'database', desktop: 'desktop', laptop: 'desktop', 'phone-portrait': 'mobile',
+    'tablet-portrait': 'tablet', radio: 'plug', bot: 'sparkle',
+    mail: 'mail', 'mail-open': 'mail', 'mail-unread': 'mail', call: 'phone', phone: 'phone',
+    'phone-call': 'phone', headset: 'phone', megaphone: 'megaphone', notifications: 'bell',
+    'notifications-off': 'bell', bell: 'bell', time: 'clock', clock: 'clock',
+    calendar: 'calendar', 'calendar-clear': 'calendar', location: 'pin', 'map-marker': 'pin',
+    map: 'pin', navigate: 'cursor', pin: 'pin', flag: 'thumbtack', menu: 'menu',
+    'ellipsis-vertical': 'more', 'ellipsis-horizontal': 'more', more: 'more',
+    'swap-vertical': 'sort', sun: 'live', moon: 'live',
+    'arrow-back': 'arrow-left', 'arrow-forward': 'arrow-right',
+    'arrow-undo': 'undo', 'arrow-redo': 'redo',
+    'chevron-down': 'chevron-down', 'chevron-small-down': 'chevron-down', 'chevron-up': 'chevron-up',
+};
+export function uiIconFor(name) {
+    const tool = UI_FOR[stemOf(name)];
+    return tool ? `ui-${tool}` : undefined;
+}
 export function qumraIconFor(name) {
     return QUMRA_FOR[name];
 }
@@ -381,18 +434,48 @@ export function icon(name) {
     const brand = QUMRA_FOR[name];
     if (brand)
         return qumraAs(brand);
+    const tool = uiIconFor(name);
+    if (tool)
+        return qumraAs(tool);
     return MAP[name] ?? ALIAS[name] ?? Home;
 }
 export function hasIcon(name) {
-    return name in QUMRA_FOR || name in MAP || name in ALIAS;
+    return name in QUMRA_FOR || !!uiIconFor(name) || name in MAP || name in ALIAS;
+}
+export const ICON_SIZE = {
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 18,
+    xl: 20,
+    '2xl': 24,
+    '3xl': 32,
+};
+const ICON_SCALE = [12, 14, 16, 18, 20, 22, 24, 28, 32, 36, 40, 44, 48, 56];
+export const ICON_STROKE = 2;
+export function snapIconSize(size) {
+    if (!Number.isFinite(size))
+        return ICON_SIZE.md;
+    if (size <= ICON_SCALE[0])
+        return ICON_SCALE[0];
+    const top = ICON_SCALE[ICON_SCALE.length - 1];
+    if (size >= top)
+        return size;
+    for (let i = 0; i < ICON_SCALE.length - 1; i++) {
+        const low = ICON_SCALE[i];
+        const high = ICON_SCALE[i + 1];
+        if (size <= high)
+            return size - low < high - size ? low : high;
+    }
+    return top;
 }
-export function Icon({ name, size = 16, color, strokeWidth, style, flip, onPress }) {
+export function Icon({ name, size = ICON_SIZE.md, color, strokeWidth, style, flip, onPress }) {
     const Cmp = icon(name);
     const { dir } = useFanar();
     return React.createElement(Cmp, {
-        size,
+        size: snapIconSize(size),
         color,
-        strokeWidth,
+        strokeWidth: strokeWidth ?? ICON_STROKE,
         onPress,
         style: flip && dir === 'rtl' ? [style, { transform: [{ scaleX: -1 }] }] : style,
     });

package/lib/index.d.ts

@@ -5,7 +5,7 @@ export { TONE_SOFT, TONE_SOLID, type Tone, type ToneColors } from './lib/tone';
 export { toLatinDigits, toArabicDigits, groupDigits } from './lib/digits';
 export { usePressScale, useEnter, useSkeletonPulse, EASE_OUT, EASE_IN_OUT } from './lib/motion';
 export { hitSlopFor, HIT_SLOP_SM, TOUCH_MIN } from './lib/a11y';
-export { icon, hasIcon, Icon, qumraIconFor, type LucideIcon, type IconProps } from './icons';
+export { icon, hasIcon, Icon, qumraIconFor, uiIconFor, snapIconSize, ICON_SIZE, ICON_STROKE, type LucideIcon, type IconProps, type IconSize, } from './icons';
 export { QumraIcon, hasQumraIcon, QUMRA_ICONS, type QumraIconProps, type QumraIconName, type QumraIconSpec, } from './qumra/QumraIcon';
 export { NavIcon, type NavIconProps } from './qumra/NavIcon';
 export { art, hasArt, BRAND, ART, type BrandName, type ArtName } from './art';

package/lib/index.js

@@ -5,7 +5,7 @@ export { TONE_SOFT, TONE_SOLID } from './lib/tone';
 export { toLatinDigits, toArabicDigits, groupDigits } from './lib/digits';
 export { usePressScale, useEnter, useSkeletonPulse, EASE_OUT, EASE_IN_OUT } from './lib/motion';
 export { hitSlopFor, HIT_SLOP_SM, TOUCH_MIN } from './lib/a11y';
-export { icon, hasIcon, Icon, qumraIconFor } from './icons';
+export { icon, hasIcon, Icon, qumraIconFor, uiIconFor, snapIconSize, ICON_SIZE, ICON_STROKE, } from './icons';
 export { QumraIcon, hasQumraIcon, QUMRA_ICONS, } from './qumra/QumraIcon';
 export { NavIcon } from './qumra/NavIcon';
 export { art, hasArt, BRAND, ART } from './art';

package/lib/qumra/NavIcon.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { icon as resolveLucide, qumraIconFor } from '../icons';
+import { ICON_SIZE, ICON_STROKE, icon as resolveLucide, qumraIconFor, snapIconSize } from '../icons';
 import { QUMRA_ICONS, QumraIcon } from './QumraIcon';
 const brandName = (name) => qumraIconFor(name) ?? (name in QUMRA_ICONS ? name : undefined);
-export function NavIcon({ icon, size = 20, active, color, activeColor, strokeWidth, style, }) {
+export function NavIcon({ icon, size = ICON_SIZE.xl, active, color, activeColor, strokeWidth, style, }) {
+    const px = snapIconSize(size);
+    const stroke = strokeWidth ?? ICON_STROKE;
     if (typeof icon === 'string') {
         const brand = brandName(icon);
         if (brand) {
-            return _jsx(QumraIcon, { name: brand, size: size, mono: true, active: active });
+            return _jsx(QumraIcon, { name: brand, size: px, mono: true, active: active });
         }
         const Lucide = resolveLucide(icon);
-        return _jsx(Lucide, { size: size, strokeWidth: strokeWidth, color: active ? activeColor : color, style: style });
+        return _jsx(Lucide, { size: px, strokeWidth: stroke, color: active ? activeColor : color, style: style });
     }
     const Lucide = icon;
-    return _jsx(Lucide, { size: size, strokeWidth: strokeWidth, color: active ? activeColor : color, style: style });
+    return _jsx(Lucide, { size: px, strokeWidth: stroke, color: active ? activeColor : color, style: style });
 }
 export default NavIcon;

package/lib/qumra/QumraIcon.js

@@ -2,6 +2,7 @@ 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';
+import { useFanar } from '../theme/context';
 const TAGS = {
     svg: Svg,
     g: G,
@@ -34,7 +35,8 @@ function grayscale(value) {
     const c = l.toString(16).padStart(2, '0');
     return `#${c}${c}${c}`;
 }
-function build(node, uid, key, tint) {
+const CURRENT = 'currentColor';
+function build(node, uid, key, tint, current) {
     const [tag, props, kids] = node;
     const Cmp = TAGS[tag];
     if (!Cmp)
@@ -49,7 +51,9 @@ function build(node, uid, key, tint) {
             v = `${v}-${uid}`;
         else if (typeof v === 'string' && v.indexOf('url(#') !== -1)
             v = uniquify(v, uid);
-        if (tint && isPaint(k) && v !== 'none')
+        if (isPaint(k) && v === CURRENT)
+            v = current ?? v;
+        if (tint && isPaint(k) && v !== 'none' && v !== CURRENT)
             v = flat ?? grayscale(v);
         p[k] = v;
     }
@@ -59,7 +63,7 @@ function build(node, uid, key, tint) {
         if (p.strokeOpacity !== undefined)
             p.strokeOpacity = '1';
     }
-    const children = kids?.map((c, i) => build(c, uid, i, tint)).filter(Boolean);
+    const children = kids?.map((c, i) => build(c, uid, i, tint, current)).filter(Boolean);
     return React.createElement(Cmp, { key, ...p }, children?.length ? children : undefined);
 }
 function badge(count) {
@@ -74,11 +78,13 @@ function badge(count) {
     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 { theme } = useFanar();
     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]);
+    const current = color ?? theme.color.ink;
+    const children = React.useMemo(() => (spec ? spec.tree.map((n, i) => build(n, uid, i, tint, current)) : []), [spec, uid, tint, current]);
     if (!spec) {
         if (__DEV__)
             console.warn(`[qumra-icons] لا توجد أيقونة بالاسم «${name}»`);