@qumra/fanar-native 0.1.0 → 0.1.2

package/README.md

@@ -1,83 +1,19 @@
 # @qumra/fanar-native
 
-مكتبة مكوّنات قمرة لـReact Native — النظير النيتف لـ`@qumra/fanar`.
-
-نفس التوكنز، ونفس أسماء المكوّنات، ونفس أسماء الخصائص — بتنفيذ مكتوب
-لـReact Native لا مترجَم عنه. بلا تبعيّات وقت تشغيل.
-
-```tsx
-import { FanarProvider, Screen, Card, Button, Text } from '@qumra/fanar-native'
-
-<FanarProvider mode="system" lang="ar">
-  <Screen>
-    <Card padded>
-      <Text size="h3" weight="black">مرحباً</Text>
-      <Button variant="primary" onPress={save}>احفظ</Button>
-    </Card>
-  </Screen>
-</FanarProvider>
-```
-
-## التركيب
-
 ```bash
 npm i @qumra/fanar-native
 ```
 
-نظائر مطلوبة: `react` · `react-native` · `lucide-react-native` ·
-`react-native-safe-area-context` · `react-native-svg`.
-
-ثمّ:
-
-1. ركّب `<SafeAreaProvider>` عند جذر التطبيق.
-2. ركّب `<FanarProvider>` تحته.
-3. ضع ملفّات الأسكندرية الثمانية في `src/assets/fonts` وشغّل
-   `npx react-native-asset`. (أو مرّر `fonts={SYSTEM_FONT}` وخذ خطّ
-   النظام.)
-
-`DrawerMenu` **محتوى** لا مُلاحِظ: يرسم الأقسام ويصرف الاختيار، ولا
-يعرف شيئاً عن `@react-navigation/drawer`. مرّره إلى `drawerContent`.
-
-## الاتجاه
-
-`FanarProvider` يضع `direction` على View جذرٍ **`flex: 1`**، فكلّ ما تحته
-— الخصائص المنطقية، و`flexDirection: 'row'`، ومحاذاة النصّ، والأسهم
-المعكوسة — يتبع `lang` فوراً، بلا إعادة تشغيل. لذلك:
-
-- ضعه **فوق** `NavigationContainer`، لتقع الشاشات كلّها تحته.
-- لا تستدعِ `I18nManager.forceRTL(true)` لتطبيقٍ يبدّل لغته.
-- هيدر `react-navigation` وإيماءة الرجوع يقرآن `I18nManager` مباشرةً:
-  مرّر `<NavigationContainer direction={dir}>` (React Navigation 7)،
-  و`dir` من `useLang()`.
+Peers: `react` · `react-native` · `lucide-react-native` ·
+`react-native-safe-area-context` · `react-native-svg`
 
-## ما في الحزمة
-
-**الأساس** — `FanarProvider` · `useFanar` · `useTheme` · `useLang` ·
-`buildTheme` · `TOKENS` · `DARK_TOKENS` · `icon()`
-
-**النصّ والأزرار** — `Text` · `Button` · `IconButton`
-
-**العرض** — `Badge` · `Counter` · `Avatar` · `Card` · `CardHeader` ·
-`PageHeader` · `StatCard` · `Progress` · `ProgressSteps` · `Skeleton` ·
-`Divider`
-
-**الحقول** — `Field` · `Input` · `SearchInput` · `Textarea` · `Select` ·
-`Checkbox` · `Radio` · `RadioGroup` · `Switch` · `NumberStepper`
-
-**التنقّل** — `Tabs` · `FilterChips` · `Accordion` · `Timeline` ·
-`Stepper`
-
-**الطبقات** — `Sheet` · `SheetRow` · `Modal` · `Alert` · `EmptyState` ·
-`toast` · `ToastHost` · `Tooltip`
-
-**القشرة** — `Screen` · `AppHeader` · `BottomTabBar` · `DrawerMenu`
-
-**أسطح قمرة** — `Hero` · `PromptCard` · `ListRow` · `StepRow` ·
-`RuleGrid` · `Glow`
-
-**المال والتقييم** — `Money` · `MoneyProvider` · `useCurrency` ·
-`Stars` · `RatingInput`
-
-**اللغة** — `translate` · `phrase` · `DICT`
-
-`@qumra/fanar-native/tokens` — القيم وحدها، بلا مكوّنات.
+```tsx
+import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { FanarProvider } from '@qumra/fanar-native'
+
+<SafeAreaProvider>
+  <FanarProvider lang="ar">
+    <App />
+  </FanarProvider>
+</SafeAreaProvider>
+```

package/lib/icons.d.ts

@@ -14,5 +14,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

@@ -386,13 +386,40 @@ export function icon(name) {
 export function hasIcon(name) {
     return name in QUMRA_FOR || name in MAP || name in ALIAS;
 }
-export function Icon({ name, size = 16, color, strokeWidth, style, flip, onPress }) {
+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 = 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, 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, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qumra/fanar-native",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Qumra's React Native component library — the native sibling of @qumra/fanar. Token-driven, RTL-first, zero runtime dependencies.",
   "license": "UNLICENSED",
   "keywords": [
@@ -36,9 +36,10 @@
     "typecheck": "tsc -p tsconfig.check.json --noEmit",
     "check-resolution": "node scripts/check-resolution.mjs",
     "build": "node scripts/build.mjs",
-    "verify": "node scripts/check-resolution.mjs && node scripts/sync-tokens.mjs --check && node scripts/generate-tokens.mjs --check && npm run typecheck",
+    "verify": "node scripts/check-resolution.mjs && node scripts/check-icon-scale.mjs && node scripts/sync-tokens.mjs --check && node scripts/generate-tokens.mjs --check && npm run typecheck",
     "prepublishOnly": "npm run verify && npm run build && npm run check-publish",
-    "check-publish": "node scripts/check-publish.mjs"
+    "check-publish": "node scripts/check-publish.mjs",
+    "check-icon-scale": "node scripts/check-icon-scale.mjs"
   },
   "peerDependencies": {
     "lucide-react-native": ">=0.400.0",