@qumra/fanar-native 0.1.0

package/lib/tokens/generated.js

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

package/lib/tokens/index.d.ts

@@ -0,0 +1 @@
+export { TEXT_SCALE, RADIUS_SCALE, SHADOW_SCALE, CONTAINER_SCALE, ANIMATE_SCALE, COLOR_SCALE, TOKENS, DARK_TOKENS, TEXT_PX, RADIUS_PX, type TextSize, type Radius, type Shadow, type Container, type Animation, type ColorToken, type TokenName, } from './generated';

package/lib/tokens/index.js

@@ -0,0 +1 @@
+export { TEXT_SCALE, RADIUS_SCALE, SHADOW_SCALE, CONTAINER_SCALE, ANIMATE_SCALE, COLOR_SCALE, TOKENS, DARK_TOKENS, TEXT_PX, RADIUS_PX, } from './generated';

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@qumra/fanar-native",
+  "version": "0.1.0",
+  "description": "Qumra's React Native component library — the native sibling of @qumra/fanar. Token-driven, RTL-first, zero runtime dependencies.",
+  "license": "UNLICENSED",
+  "keywords": [
+    "qumra",
+    "design-system",
+    "react-native",
+    "rtl",
+    "arabic"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./tokens": {
+      "types": "./lib/tokens/index.d.ts",
+      "default": "./lib/tokens/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "generate": "node scripts/generate-tokens.mjs",
+    "sync-tokens": "node scripts/sync-tokens.mjs && node scripts/generate-tokens.mjs",
+    "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",
+    "prepublishOnly": "npm run verify && npm run build && npm run check-publish",
+    "check-publish": "node scripts/check-publish.mjs"
+  },
+  "peerDependencies": {
+    "lucide-react-native": ">=0.400.0",
+    "react": ">=19.0.0",
+    "react-native": ">=0.79.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-svg": ">=15.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.4",
+    "lucide-react-native": "^1.47.0",
+    "react": "^19.1.4",
+    "react-native": "^0.81.6",
+    "react-native-safe-area-context": "^5.10.0",
+    "react-native-svg": "^15.15.5",
+    "typescript": "^5.7.3"
+  }
+}