npm - @qumra/fanar - Versions diffs - 0.0.11 → 0.0.13 - Mend

@qumra/fanar 0.0.11 → 0.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/README.md +115 -8
package/dist/ai.js +1 -1
package/dist/chunk-3EPEIAG2.js +2 -0
package/dist/chunk-6DTSIOCB.js +2 -0
package/dist/chunk-CTMW25W5.js +2 -0
package/dist/chunk-K3TNXSD7.js +2 -0
package/dist/{chunk-GMIBQMMR.js → chunk-NIEWNSOB.js} +1 -1
package/dist/editor.js +1 -1
package/dist/index.d.ts +291 -139
package/dist/index.js +1 -1
package/dist/native/ai.js +1 -0
package/dist/native/chunk-LZHT3H7B.js +1 -0
package/dist/native/chunk-RGKCDRSY.js +2 -0
package/dist/native/editor.js +1 -0
package/dist/native/index.js +1 -0
package/dist/native/notifications.js +1 -0
package/dist/native/orb.js +1 -0
package/dist/notifications.js +1 -1
package/package.json +32 -6
package/dist/chunk-77ZZDWR4.js +0 -2
package/dist/chunk-ENHEJXVH.js +0 -2
package/dist/chunk-VAMRF7HE.js +0 -2
package/dist/chunk-ZE4S6DBP.js +0 -2

package/dist/index.d.ts CHANGED Viewed

@@ -180,6 +180,21 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * Sets the display language for every Qumra component in the tree.
+ *
+ * ── نفس الاسم على المنصّتين ────────────────────────────────────────────
+ * النيتف مافيهوش `<html lang>`، فـ`lang.native.ts` بيمسك التبديل في
+ * مخزن جوّه الموديول. والويب مصدره الـDOM — فالتبديل هنا **بيكتب في
+ * المصدر نفسه** بدل ما يعمل مخزن تاني جنبه.
+ *
+ * والنتيجة إن `setLang('en-US')` بتشتغل زي بعضها على الاتنين، وإن الويب
+ * مافيهوش مصدرين للحقيقة يتخانقوا: `langStore` بيراقب السمة وبيعيد
+ * الرسم لوحده.
+ *
+ * `null` بترجّع للافتراضي (`ar-EG`).
+ */
+declare function setLang(tag: string | null): void;
 /**
  * لغة الصفحة كاملةً — لا `boolean`.
  *
@@ -298,6 +313,7 @@ type UITextKey = keyof typeof TEXT;
 declare function useUIText(): Record<"select" | "search" | "row" | "from" | "close" | "searchEverything" | "noResults" | "searchOrAdd" | "now" | "videoPlayer" | "rating" | "activeFilters" | "clearAll" | "dropImages" | "chooseFromDevice" | "previousPeriod" | "less" | "more" | "totalSales" | "netToYou" | "verifiedAccount" | "grabHint" | "notifications" | "dismiss" | "unread" | "noNotifications" | "noNotificationsDesc" | "markAllRead" | "viewAllNotifications" | "newNotifications" | "reloadPreview" | "previousMonth" | "nextMonth" | "whatIsThisNumber" | "explainToMe" | "clearSearch" | "alerts" | "whatIsThisOption" | "shouldBeHere" | "closeExplainer" | "cancelRecording" | "sendRecording" | "attachFile" | "recordVoice" | "playbackPosition" | "volume" | "hideSuggestions" | "askShehab" | "shehabThinking" | "undo" | "tryAnotherReply" | "helpfulReply" | "unhelpfulReply" | "aiDisclaimer" | "back10" | "forward10" | "playbackSpeed" | "arabic" | "seeMore" | "pictureInPicture", string>;
 type FieldSize = 'sm' | 'md' | 'lg';
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     label?: ReactNode;
     /** فعل ثانوي جنب التسمية — «سجّل بالبريد بدل الهاتف» مثلاً */
@@ -374,13 +390,30 @@ declare function Switch({ checked, onCheckedChange, label, description, disabled
     id?: string;
 }): react.JSX.Element;
+/**
+ * قواعد المبالغ ورموزها — **مشتركة بين الويب والنيتف**.
+ *
+ * التنسيق (`format`) واختيار الشكل (`resolve`) **منطق خالص**، ونسخهم
+ * معناه إن مبلغ يتكتب `١٬٢٥٠٫٥٠` على الويب و`1,250.50` على الموبايل.
+ * الشرح الكامل لكل قرار في `Money.tsx`.
+ */
+/** الشكل المعروض للوحدة */
+type Base = 'short' | 'word' | 'code' | 'sign';
+/**
+ * الشكل المطلوب — و`best` رأي المكتبة لكل عملة.
+ *
+ * `short` الاختصار العربي · `word` الكلمة · `code` رمز ISO ·
+ * `sign` الرمز المرسوم.
+ */
+type SymbolStyle = Base | 'best';
 declare const CURRENCY: {
     SAR: {
         short: string;
         word: string;
         best: "sign";
         code: string;
-        sign: react.JSX.Element;
+        sign: "riyal";
         name: string;
         en: string;
         decimals: number;
@@ -440,7 +473,7 @@ declare const CURRENCY: {
         word: string;
         best: "word";
         code: string;
-        sign: react.JSX.Element;
+        sign: "egp";
         name: string;
         en: string;
         decimals: number;
@@ -590,7 +623,7 @@ declare const CURRENCY: {
         word: string;
         best: "sign";
         code: string;
-        sign: react.JSX.Element;
+        sign: "dollar";
         name: string;
         en: string;
         decimals: number;
@@ -600,7 +633,7 @@ declare const CURRENCY: {
         word: string;
         best: "sign";
         code: string;
-        sign: react.JSX.Element;
+        sign: "euro";
         name: string;
         en: string;
         decimals: number;
@@ -610,65 +643,29 @@ declare const CURRENCY: {
         word: string;
         best: "sign";
         code: string;
-        sign: react.JSX.Element;
+        sign: "pound";
         name: string;
         en: string;
         decimals: number;
     };
 };
-/** The displayed unit form */
-/** The explicit forms — each names one exact shape */
-type Base = 'short' | 'word' | 'code' | 'sign';
-/**
- * The displayed unit form.
- *
- * `short` Arabic abbreviation · `word` the word · `code` the ISO code ·
- * `sign` the graphic symbol · `best` whatever the library picks.
- *
- * ## `best` is an opinion, not an algorithm
- *
- * Every currency has a row in the table saying which form reads fastest **for
- * that currency**, because the answer differs between them:
- *
- *   - Saudi riyal → its symbol, because it has an official one its readers know
- *   - Pound, dinar, dirham → the word, because they have no official symbol
- *     and the abbreviation takes two characters before it means anything
- *   - Dollar, euro, sterling → their symbols, which read worldwide and are
- *     shorter than spelling them out
- *
- * Derive these from one rule ("symbol if there is one") and the Egyptian
- * pound comes out as `£` — technically correct, and read as *sterling* in
- * Egypt. A written opinion per currency is truer than a rule that looks
- * tidier.
- *
- * ## In English
- *
- * `best` becomes the symbol where one exists and the ISO code otherwise. The
- * Arabic word means nothing on an English page, and «جنيه» is not rendered as
- * "pound" because that conflates it with sterling.
- */
-type SymbolStyle = Base | 'best';
 type Currency = keyof typeof CURRENCY;
-/**
- * Checks a currency code coming from the server before passing it to `Money`.
- *
- * ## Why a guard and not `as`
- *
- * `Money.currency` is a closed union and servers return `string`, so every
- * caller was writing `code as Currency` — which **silences rather than
- * checks**: an unknown code (`XYZ`, or an empty field) passes through and
- * then fails at the table lookup.
- *
- * The guard turns the unknown into `undefined`, and `Money` then falls back
- * to the store currency from `MoneyProvider` — which is the **right**
- * behaviour: showing the amount in the dashboard's currency does less damage
- * than showing it with the wrong symbol, or none.
- *
- * ```tsx
- * <Money value={total} currency={isCurrency(code) ? code : undefined} />
- * ```
- */
 declare function isCurrency(c?: string | null): c is Currency;
+declare const SIZE$1: {
+    readonly inherit: "";
+    readonly sm: "text-caption";
+    readonly md: "text-ui";
+    readonly lg: "text-body font-extrabold";
+    readonly xl: "text-h2 font-black";
+};
+declare const TONE: {
+    readonly inherit: "";
+    readonly muted: "text-muted";
+    readonly ink: "text-ink";
+    readonly green: "text-green";
+    readonly red: "text-red";
+};
 declare function MoneyProvider({ currency, locale, children, }: {
     currency: Currency;
     /**
@@ -689,26 +686,40 @@ declare function MoneyProvider({ currency, locale, children, }: {
  * header, the "priced in …" line.
  */
 declare function useCurrency(): Currency;
-declare const SIZE: {
-    readonly inherit: "";
-    readonly sm: "text-caption";
-    readonly md: "text-ui";
-    readonly lg: "text-body font-extrabold";
-    readonly xl: "text-h2 font-black";
-};
-declare const TONE: {
-    readonly inherit: "";
-    readonly muted: "text-muted";
-    readonly ink: "text-ink";
-    readonly green: "text-green";
-    readonly red: "text-red";
-};
+/**
+ * The unit's weight and size for each form.
+ *
+ * ## The word is two steps lighter than the number
+ *
+ * "١٢٠ جنيه" at one weight reads as a **sentence**, and the eye passes over
+ * the word the way it passes over the number. Two steps lighter it reads as a
+ * **mark**: the number is the information and the word is its suffix — which
+ * is what the `£` symbol achieves by its shape rather than its weight.
+ *
+ * ## But not much smaller
+ *
+ * `0.86`, not `0.7`: the word is four letters, three of them undotted, and
+ * shrinking it further turns it into an unreadable smudge. The abbreviation
+ * survives being small because it is two characters, and the symbol survives
+ * because it is a single shape.
+ *
+ * ## And the letters are slightly tracked
+ *
+ * `tracking-wide` separates the word from the number visually without adding
+ * a space — so it reads as an attached unit, not as the next word in the line.
+ */
+/**
+ * Resolves `best` into an explicit form — the one place that holds the opinion.
+ *
+ * Kept out of `Money` because `currencySymbol` needs it too: a column header
+ * and a field suffix have to match what their own rows display.
+ */
 interface MoneyProps {
     /** The amount in major units — pounds, not piastres */
     value: number;
     /** A local override that beats the store currency — a dollar price in an Egyptian store */
     currency?: Currency;
-    size?: keyof typeof SIZE;
+    size?: keyof typeof SIZE$1;
     /**
      * The colour.
      *
@@ -787,14 +798,19 @@ declare const currencyName: (c?: Currency) => string;
  */
 declare function useCurrencySymbol(c?: Currency, style?: SymbolStyle): ReactNode;
-type Size = 'sm' | 'md' | 'lg';
+/**
+ * أنماط العدّاد — **مشتركة بين الويب والنيتف**.
+ * نفس سبب `Display.variants.ts`.
+ */
+type StepperSize = 'sm' | 'md' | 'lg';
 interface NumberStepperProps {
     value: number;
     onChange: (v: number) => void;
     min?: number;
     max?: number;
     step?: number;
-    size?: Size;
+    size?: StepperSize;
     /** وحدة صغيرة بجانب الرقم — «قطعة»، «كجم» */
     unit?: ReactNode;
     /**
@@ -812,22 +828,6 @@ interface NumberStepperProps {
 }
 declare function NumberStepper({ value, onChange, min, max, step, size, unit, onRemove, disabled, label, className, }: NumberStepperProps): react.JSX.Element;
-/**
- * علامة واتساب.
- *
- * ── لماذا مرسومة ولماذا مصمتة ───────────────────────────────────────────
- * كانت `MessageCircle` من lucide، وهي فقاعة كلام عامّة. وفقاعة عامّة
- * بجانب فقاعة الرسائل النصّيّة تجعل الزرّين متشابهين، والمستخدم يقرأ
- * «رسالة» و«رسالة» فيتردّد قبل كلّ ضغطة.
- *
- * والعلامة مصمتة بين أيقونات محدّدة الخطوط عن قصد: علامة الخدمة تُعرف
- * بشكلها لا بأسلوب المجموعة، وتحويلها إلى خطوط لتناسب البقيّة يفقدها
- * الشيء الوحيد الذي تؤدّيه. والمسار من `simple-icons` — لا مرسوم
- * بالتقدير، لأن علامة خدمة تُخمَّن تخرج علامةً أخرى.
- */
-declare function WhatsAppIcon({ size, ...rest }: React.SVGProps<SVGSVGElement> & {
-    size?: number;
-}): react.JSX.Element;
 interface PhoneParts {
     /** المفتاح الدوليّ بلا `+` — فارغ إن لم يُعرف */
     dial: string;
@@ -855,6 +855,44 @@ declare function parsePhone(raw: string, defaultDial?: string): PhoneParts;
  * و`spaces` لمن يريد الصورة الدوليّة الخام: `101 234 5678`.
  */
 type PhoneFormat = 'parens' | 'spaces';
+/**
+ * `inherit` لا مقاس ولا وزن ولا لون — للرقم داخل صفّ يحدّد تنسيقه
+ * أصلاً. والمكوّن هناك للاتّجاه والتقطيع لا للحجم.
+ */
+declare const SIZE: {
+    readonly inherit: "";
+    readonly sm: "text-caption";
+    readonly md: "text-ui";
+};
+type PhoneSize = keyof typeof SIZE;
+/**
+ * علامة واتساب.
+ *
+ * ── لماذا مرسومة ولماذا مصمتة ───────────────────────────────────────────
+ * كانت `MessageCircle` من lucide، وهي فقاعة كلام عامّة. وفقاعة عامّة
+ * بجانب فقاعة الرسائل النصّيّة تجعل الزرّين متشابهين، والمستخدم يقرأ
+ * «رسالة» و«رسالة» فيتردّد قبل كلّ ضغطة.
+ *
+ * والعلامة مصمتة بين أيقونات محدّدة الخطوط عن قصد: علامة الخدمة تُعرف
+ * بشكلها لا بأسلوب المجموعة، وتحويلها إلى خطوط لتناسب البقيّة يفقدها
+ * الشيء الوحيد الذي تؤدّيه. والمسار من `simple-icons` — لا مرسوم
+ * بالتقدير، لأن علامة خدمة تُخمَّن تخرج علامةً أخرى.
+ */
+declare function WhatsAppIcon({ size, ...rest }: React.SVGProps<SVGSVGElement> & {
+    size?: number;
+}): react.JSX.Element;
+/**
+ * قواعد التجميع لكل مفتاح دوليّ.
+ *
+ * المجموعات من الطول المحلّيّ **بعد** المفتاح وبعد نزع الصفر الوطنيّ:
+ * `+20 112 505 2692` محلّيّه `1125052692` فقاعدته `[3, 3, 4]` لا
+ * `[3, 4, 4]` — والفرق أن الصفر يُكتب في `01125052692` ولا يُكتب في
+ * الصورة الدوليّة، فمن يعدّه في القاعدة يُزيح كل مجموعة بعده.
+ *
+ * وما زاد على القاعدة يُجمَّع ثلاثات: أفضل من سطر متّصل، وأصدق من
+ * ادّعاء قاعدة بلد لا نعرفها.
+ */
 interface PhoneProps {
     /** الرقم كما هو في البيانات — منسَّقاً أو خاماً */
     value: string;
@@ -875,7 +913,7 @@ interface PhoneProps {
      * تنسيقه أصلاً: سطر ثانٍ تحت اسم عميل، أو سطر عنوان فرع.
      * والمكوّن هناك للاتّجاه والتقطيع لا للحجم.
      */
-    size?: 'inherit' | 'sm' | 'md';
+    size?: PhoneSize;
     className?: string;
 }
 /**
@@ -892,6 +930,17 @@ interface PhoneProps {
  */
 declare function Phone({ value, defaultDial, format, mask, call, sms, whatsapp, size, className, }: PhoneProps): react.JSX.Element;
+/**
+ * قواعد القيم التقنية وأنماطها — **مشتركة بين الويب والنيتف**.
+ *
+ * `normalizeHex` **منطق خالص** وبيتنادى من المكوّن ومن التطبيق —
+ * ونسخته معناها إن `#abc` بتتفكّ لستّ خانات في منصّة وتفضل تلاتة في
+ * التانية.
+ */
+type TechnicalKind = 'hex' | 'url' | 'slug' | 'code' | 'id';
+/** يرجّع `#RRGGBB` بحروف كبيرة، أو `null` لو القيمة ليست لوناً بعد */
+declare function normalizeHex(input: string): string | null;
 /**
  * القيم التقنية داخل واجهة عربية.
  *
@@ -913,7 +962,6 @@ declare function Phone({ value, defaultDial, format, mask, call, sms, whatsapp,
  * `[dir=rtl]_&` لا `rtl:` — لأن `dir="ltr"` موضوع على العنصر نفسه،
  * فسمة `rtl:` لن تنطبق عليه أبداً؛ والاستعلام لا بدّ أن يسأل عن **جدّه**.
  */
-type TechnicalKind = 'hex' | 'url' | 'slug' | 'code' | 'id';
 interface TechnicalInputProps extends Omit<InputProps, 'numeric' | 'type' | 'dir'> {
     /** نوع القيمة — يضبط لوحة المفاتيح والتلميح فقط، لا يفرض تحقّقاً */
     kind?: TechnicalKind;
@@ -947,8 +995,6 @@ declare function ColorField({ label, note, value, onChange, disabled, id: idProp
     disabled?: boolean;
     id?: string;
 }): react.JSX.Element;
-/** يرجّع `#RRGGBB` بحروف كبيرة، أو `null` لو القيمة ليست لوناً بعد */
-declare function normalizeHex(input: string): string | null;
 interface Product3DViewerProps {
     /** رابط الموديل — GLB أو GLTF */
@@ -992,6 +1038,7 @@ interface TabItem {
     count?: number;
     icon?: ComponentType<{
         size?: number;
+        color?: string;
     }>;
 }
 /**
@@ -1029,6 +1076,23 @@ declare function FilterChips({ chips, onClearAll, label, clearAllLabel, }: {
     clearAllLabel?: string;
 }): react.JSX.Element | null;
+/**
+ * أنماط الأسطح — **مشتركة بين الويب والنيتف**.
+ * نفس سبب `Display.variants.ts`.
+ *
+ * ── واللي بيخصّ الويب مفصول صراحةً ───────────────────────────────────────
+ * التموضع الثابت (`fixed inset-0 z-50`) والتبلير والحركات كلها بتخصّ
+ * المتصفّح — RN بيرسم الأسطح جوّه `<Modal>` وهو بيتكفّل بالطبقة. الثوابت
+ * اللي فيها `WEB` في اسمها هي دي.
+ */
+declare const MODAL_WIDTHS: {
+    readonly sm: "max-w-md";
+    readonly md: "max-w-xl";
+    readonly lg: "max-w-3xl";
+};
+type ModalSize = keyof typeof MODAL_WIDTHS;
 /**
  * الـaction sheet — كل حاجة بتطلع من تحت على الموبايل.
  *
@@ -1052,7 +1116,7 @@ declare function Modal({ open, title, description, onClose, footer, children, si
     onClose: () => void;
     footer?: ReactNode;
     children?: ReactNode;
-    size?: 'sm' | 'md' | 'lg';
+    size?: ModalSize;
     closeLabel?: string;
 }): react.JSX.Element | null;
 /** بيفتح من inline-end — الشمال في العربي واليمين في الإنجليزي، لوحده */
@@ -1085,13 +1149,20 @@ declare function Toast({ children, action, icon, }: {
 declare function EmptyState({ icon: Icon, title, description, action, }: {
     icon?: ComponentType<{
         size?: number;
+        color?: string;
     }>;
     title: ReactNode;
     description?: ReactNode;
     action?: ReactNode;
 }): react.JSX.Element;
+/**
+ * أنماط التوستات والتلميحة — **مشتركة بين الويب والنيتف**.
+ * نفس سبب `Display.variants.ts`.
+ */
 type ToastTone = Extract<Tone, 'brand' | 'green' | 'amber' | 'red'> | 'neutral';
 interface ToastItem {
     id: number;
     tone: ToastTone;
@@ -1175,6 +1246,15 @@ declare function Tooltip({ content, children, side, }: {
     side?: 'top' | 'bottom';
 }): react.JSX.Element;
+/**
+ * أنماط القوايم وفلترتها — **مشتركة بين الويب والنيتف**.
+ *
+ * القاعدة اللي المكتبة الأصلية بتقولها في قسم ٠٣:
+ *   أقل من ٦ خيارات  → أزرار مجزّأة (`Tabs variant="segmented"`)
+ *   ٦ لـ١٥ خيار      → `Dropdown` من غير بحث
+ *   أكتر من ١٥       → `Combobox` ببحث
+ */
 interface Option {
     value: string;
     label: string;
@@ -1183,6 +1263,15 @@ interface Option {
     icon?: ReactNode;
     disabled?: boolean;
 }
+interface CommandItem {
+    id: string;
+    title: string;
+    meta?: string;
+    icon?: ReactNode;
+    group: string;
+    onRun?: () => void;
+}
 declare function Dropdown({ label, value, onChange, options, placeholder, className, }: {
     label?: ReactNode;
     value: string | null;
@@ -1216,14 +1305,6 @@ declare function MultiSelect({ label, values, onChange, options, placeholder, cr
     onCreate?: (query: string) => void;
     className?: string;
 }): react.JSX.Element;
-interface CommandItem {
-    id: string;
-    title: string;
-    meta?: string;
-    icon?: ReactNode;
-    group: string;
-    onRun?: () => void;
-}
 /**
  * لوحة الأوامر — ⌘K.
  *
@@ -1244,6 +1325,7 @@ interface AccordionItem {
     description?: ReactNode;
     icon?: ComponentType<{
         size?: number;
+        color?: string;
     }>;
     children: ReactNode;
 }
@@ -1396,6 +1478,7 @@ declare function presets(today: Date): {
     label: string;
     range: Range;
 }[];
 declare function DateRangePicker({ value, onChange, month, onMonthChange, today, className, }: {
     value: Range;
     onChange: (range: Range) => void;
@@ -1407,6 +1490,10 @@ declare function DateRangePicker({ value, onChange, month, onMonthChange, today,
     className?: string;
 }): react.JSX.Element;
+/**
+ * أنماط الرفع وصيغته — **مشتركة بين الويب والنيتف**.
+ * نفس سبب `Display.variants.ts`.
+ */
 type UploadState = 'uploading' | 'done' | 'rejected';
 interface UploadFile {
     id: string;
@@ -1418,10 +1505,11 @@ interface UploadFile {
     progress?: number;
     /** سبب الرفض — لازم يتكتب، «فشل» لوحدها مش معلومة */
     error?: string;
-    /** رابط معاينة (object URL أو data URI) */
+    /** رابط معاينة — `object URL` على الويب و`uri` من المنتقي على النيتف */
     preview?: string;
 }
 declare function formatBytes(bytes: number): string;
 declare function Dropzone({ onFiles, accept, multiple, disabled, title, hint, buttonLabel, className, }: {
     onFiles: (files: File[]) => void;
     accept?: string;
@@ -1643,6 +1731,8 @@ interface BrowserFrameProps {
 }
 declare function BrowserFrame({ url, device, tab, nav, loading, contentWidth, onScale, onReload, children, className, }: BrowserFrameProps): react.JSX.Element;
+type ShareTone = 'brand' | 'amber' | 'red' | 'muted';
 interface BarSeries {
     label: string;
     values: number[];
@@ -1739,7 +1829,7 @@ interface ShareItem {
      */
     trailing?: ReactNode;
     /** لون الشريط — الافتراضي لون العلامة */
-    tone?: 'brand' | 'amber' | 'red' | 'muted';
+    tone?: ShareTone;
 }
 /**
  * قائمة بحصص — للفئات المرتّبة (المصادر، المنتجات، المدن).
@@ -1777,6 +1867,14 @@ declare function ShareList({ items, total, layout, showPercent, labelWidth, form
     className?: string;
 }): react.JSX.Element;
+/**
+ * حسابات رسوم التجارة وأنماطها — **مشتركة بين الويب والنيتف**.
+ *
+ * الحسابات هنا **إجابات على أسئلة تاجر**، لا أشكال: «أكبر خصم فين؟»
+ * و«كام صنف بيعمل ٨٠٪؟» و«المخزن هيكفي كام يوم؟». نسخها معناها إن
+ * الرقم اللي التاجر بيتصرّف على أساسه يفرق بين شاشة وشاشة.
+ */
 interface WaterfallStep {
     key: string;
     label: ReactNode;
@@ -1785,6 +1883,36 @@ interface WaterfallStep {
     /** سطر يشرح الخصم — «٤٪ عمولة بوّابة الدفع» */
     meta?: ReactNode;
 }
+interface ParetoItem {
+    key: string;
+    label: ReactNode;
+    value: number;
+}
+interface RunwayItem {
+    key: string;
+    label: ReactNode;
+    /** ما في المخزن الآن */
+    stock: number;
+    /** متوسّط ما يُباع في اليوم */
+    perDay: number;
+}
+/**
+ * الشلّال — من إجمالي البيع إلى ما يصل جيبك.
+ *
+ * ── لماذا هو أهمّ رسم للتاجر ───────────────────────────────────────────
+ * التاجر يعرف كم باع ولا يعرف كم كسب. «بعت ٧١ ألفاً» رقم يُقال، و«وصلك
+ * ٢٧» رقم يُتصرّف بناءً عليه — والفرق بينهما هو الشلّال كلّه.
+ *
+ * ── ولماذا مدرّج لا أعمدة ──────────────────────────────────────────────
+ * كل خطوة تبدأ من حيث انتهت السابقة، فالنزول **يُرى** لا يُحسب. الأعمدة
+ * المستقلّة تجعل العين تطرح الأرقام بنفسها، وهذا بالضبط ما جاء الرسم
+ * ليوفّره.
+ *
+ * ── وأكبر خصم يُعلَّم ──────────────────────────────────────────────────
+ * كما في `FunnelChart`: البند الذي يأكل أكثر من غيره هو المكان الوحيد
+ * الذي يستحقّ عملاً هذا الشهر، والباقي يبقى محايداً حتى لا يزاحمه.
+ */
 declare function WaterfallChart({ total, steps, totalLabel, netLabel, formatValue, className, }: {
     /** نقطة البداية — إجمالي المبيعات قبل أي خصم */
     total: number;
@@ -1813,11 +1941,6 @@ pace, label, formatValue, className, }: {
     formatValue?: (v: number) => string;
     className?: string;
 }): react.JSX.Element;
-interface ParetoItem {
-    key: string;
-    label: ReactNode;
-    value: number;
-}
 /**
  * كم صنفاً يصنع معظم المبيعات.
  *
@@ -1836,14 +1959,6 @@ declare function ParetoChart({ items, height, threshold, formatValue, className,
     formatValue?: (v: number) => string;
     className?: string;
 }): react.JSX.Element;
-interface RunwayItem {
-    key: string;
-    label: ReactNode;
-    /** ما في المخزن الآن */
-    stock: number;
-    /** متوسّط ما يُباع في اليوم */
-    perDay: number;
-}
 /**
  * كم يوماً يكفي المخزون.
  *
@@ -2001,6 +2116,26 @@ declare function useAudioLevel(ref: RefObject<HTMLMediaElement | null>, { bands,
 }): AudioLevel;
 type ProviderLevel = 1 | 2 | 3;
+declare const PROVIDER_LEVEL_LABEL: Record<ProviderLevel, string>;
+declare const PROVIDER_LEVEL_LABEL_EN: Record<ProviderLevel, string>;
+/**
+ * المقاسين.
+ *
+ * `sm` أربعة وعشرين — وده **حدّ الهدف اللمسي** لا رقم مختار. الشارة
+ * بتاخد تركيز، واللي بياخد تركيز بيتضغط عليه. وعلى الموبايل ده أهمّ لا أقلّ.
+ */
+declare const SIZES: {
+    readonly sm: {
+        readonly box: "size-6";
+        readonly mark: 14;
+    };
+    readonly md: {
+        readonly box: "size-7";
+        readonly mark: 16;
+    };
+};
+type ProviderBadgeSize = keyof typeof SIZES;
 /**
  * التسميات جوّه المكتبة لا في التطبيق.
  *
@@ -2009,8 +2144,6 @@ type ProviderLevel = 1 | 2 | 3;
  * المكوّن زي أسماء العملات في `Money` بالظبط — وهنا هو **الاسم
  * المتاح الوحيد**، فتفرّقه بيدّي شارتين مالهمش علاقة ببعض.
  */
-declare const PROVIDER_LEVEL_LABEL: Record<ProviderLevel, string>;
-declare const PROVIDER_LEVEL_LABEL_EN: Record<ProviderLevel, string>;
 interface ProviderMarkProps {
     level: ProviderLevel;
     /** ضلع المربّع بالبكسل */
@@ -2023,23 +2156,6 @@ interface ProviderMarkProps {
  * بلا `aria-label`: العلامة زينة جوّه `ProviderBadge` اللي بيحمل الاسم.
  */
 declare function ProviderMark({ level, size, className }: ProviderMarkProps): react.JSX.Element;
-/**
- * المقاسين.
- *
- * `sm` أربعة وعشرين — وده **حدّ الهدف اللمسي** لا رقم مختار. الشارة
- * بتاخد تركيز (تحت)، واللي بياخد تركيز بيتضغط عليه.
- */
-declare const SIZES: {
-    readonly sm: {
-        readonly box: "size-6";
-        readonly mark: 14;
-    };
-    readonly md: {
-        readonly box: "size-7";
-        readonly mark: 16;
-    };
-};
-type ProviderBadgeSize = keyof typeof SIZES;
 interface ProviderBadgeProps {
     level: ProviderLevel;
     /**
@@ -2203,6 +2319,13 @@ declare function Coach({ id, asChild, children, }: {
     children: ReactNode;
 }): react.JSX.Element;
+/**
+ * أنماط كروت الاختيار والسبارك‑لاين — **مشتركة بين الويب والنيتف**.
+ * نفس سبب `Display.variants.ts`.
+ */
+type SparkTone = 'brand' | 'green' | 'red' | 'muted';
 interface ChoiceOption {
     value: string;
     label: ReactNode;
@@ -2212,6 +2335,7 @@ interface ChoiceOption {
     icon?: ComponentType<{
         size?: number;
         strokeWidth?: number;
+        color?: string;
     }>;
     disabled?: boolean;
     /** سبب التعطيل — «معطّل» من غير سبب بيسيب المستخدم واقف */
@@ -2273,12 +2397,40 @@ declare function Sparkline({ values, width, height, tone, fluid, className, }: {
     values: number[];
     width?: number;
     height?: number;
-    tone?: 'brand' | 'green' | 'red' | 'muted';
+    tone?: SparkTone;
     /** يملا عرض الحاوية بدل المقاس الثابت — `width` بيبقى نسبة الرسم */
     fluid?: boolean;
     className?: string;
 }): react.JSX.Element | null;
+/**
+ * أنماط مكوّنات العرض — **مشتركة بين الويب والنيتف**.
+ *
+ * ══ ليه الملف ده موجود ═══════════════════════════════════════════════════
+ * `buttonClasses` كانت في `lib.ts` من الأول، فـ`Button.tsx` و
+ * `Button.native.tsx` بيوصلوا لنفس السلسلة بلا مجهود.
+ *
+ * باقي المكوّنات مكانتش كده: أنماط `Badge` و`Card` و`Progress` كانت
+ * **مكتوبة جوّه `Display.tsx`** — وهي المكان الصح ما دام فيه منصّة واحدة.
+ *
+ * وأول ما بقى فيه اتنين، الكتابة جوّه المكوّن معناها **نسختين**: تغيير
+ * حشوة الشارة بيتعمل مرتين، وأول مرة حد ينسى واحدة الشارة بتفرق بين
+ * الويب والموبايل — من غير خطأ ولا تحذير.
+ *
+ * ودي بالظبط الحتة اللي الطلب اتكتب عشانها: «تعديل في التوكنز أو
+ * الأنماط أو المقاسات يوصل لكل المنصّات من مصدر واحد».
+ *
+ * ── والملف ده مالوش React ────────────────────────────────────────────────
+ * نصوص وخرايط وبس — زي `lib.ts` بالظبط. يعني بيعدّي حدّ RSC بلا
+ * `"use client"`، والنيتف بياخده من غير ما يجرّ DOM.
+ *
+ * ── والقاعدة: أي نمط بيتشاف على المنصّتين مكانه هنا ─────────────────────
+ * اللي بيفضل جوّه ملف المنصّة هو اللي **بيخصّها هي**: `overflow-clip`
+ * بتاعة الويب مثلاً، أو تخطيط `<Modal>` بتاع RN.
+ */
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg';
 interface BadgeProps {
     children: ReactNode;
     tone?: Tone;
@@ -2295,7 +2447,6 @@ declare function Counter({ value, max }: {
     value: number;
     max?: number;
 }): react.JSX.Element | null;
-type AvatarSize = 'xs' | 'sm' | 'md' | 'lg';
 declare function Avatar({ name, src, size, square, className, }: {
     name: string;
     src?: string;
@@ -2308,6 +2459,7 @@ interface StatCardProps {
     icon?: ComponentType<{
         size?: number;
         strokeWidth?: number;
+        color?: string;
     }>;
     tone?: Tone;
     label: ReactNode;
@@ -2377,4 +2529,4 @@ declare function Skeleton({ variant, width, className, }: {
     className?: string;
 }): react.JSX.Element;
-export { ANIMATE_SCALE, Accordion, type AccordionItem, Alert, type Animation, type AudioLevel, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarSize, Badge, type BadgeProps, BarChart, type BarSeries, BrowserFrame, type BrowserFrameProps, Button, type ButtonProps, ButtonSize, ButtonVariant, COLOR_SCALE, CONTAINER_SCALE, Card, CardHeader, Carousel, type CarouselProps, type Chapter, Checkbox, ChoiceCards, type ChoiceOption, type ChoiceProps, Coach, type CoachApi, type CoachAudio, type CoachHint, type CoachItem, type CoachLine, type CoachOrb, CoachProvider, type CoachProviderProps, type CoachRegion, type CoachWhen, type CoachWhere, ColorField, type ColorToken, type Column, Combobox, type CommandItem, CommandPalette, type Container, Counter, type Currency, DARK_TOKENS, DataTable, type DataTableProps, DateRangePicker, Drawer, Dropdown, Dropzone, EmptyState, type FieldSize, FileRow, type FilterChip, FilterChips, FunnelChart, type FunnelStage, Gallery, type GalleryImage, type GalleryProps, GoalBar, Heatmap, Input, type InputProps, Lightbox, type LightboxProps, LocaleCtx, type MediaState, Modal, Money, type MoneyProps, MoneyProvider, MultiSelect, NumberStepper, type NumberStepperProps, type Option, PROVIDER_LEVEL_LABEL, PROVIDER_LEVEL_LABEL_EN, PageHeader, ParetoChart, type ParetoItem, Phone, type PhoneFormat, type PhoneParts, type PhoneProps, Product3DViewer, type Product3DViewerProps, Progress, ProviderBadge, type ProviderBadgeProps, type ProviderBadgeSize, type ProviderLevel, ProviderMark, type ProviderMarkProps, RADIUS_SCALE, Radio, RadioGroup, type Radius, type Range, RatingInput, type RatingInputProps, type RunwayItem, SHADOW_SCALE, Scrubber, SearchInput, Select, type SelectProps, type Shadow, type ShareItem, ShareList, Sheet, Skeleton, type SortableApi, type SortableItemProps, SortableStatus, Sparkline, Stars, type StarsProps, StatCard, type StatCardProps, Stepper, type StepperStep, StockRunway, Switch, type SymbolStyle, TEXT_SCALE, TOKENS, type TabItem, Tabs, TechnicalInput, type TechnicalInputProps, type TechnicalKind, TechnicalText, type TextSize, Textarea, type TextareaProps, Timeline, type TimelineStep, Toast, ToastHost, type ToastInput, type ToastItem, type ToastTone, type TokenName, Tone, Tooltip, TrendChart, type UITextKey, type UploadFile, type UploadState, type UseSortableOptions, VerifiedBadge, type VerifiedBadgeProps, VideoPlayer, type VideoPlayerProps, type VideoSuggestion, WaterfallChart, type WaterfallStep, WhatsAppIcon, coachSeconds, currencyName, currencySymbol, daysBetween, formatBytes, formatDate, formatRange, formatTime, isCurrency, normalizeHex, parsePhone, presets, useAudioLevel, useCoach, useCoachOptional, useCurrency, useCurrencySymbol, useMedia, useMoneyLang, useMoneyLocale, useSortable, useToasts, useUIText };
+export { ANIMATE_SCALE, Accordion, type AccordionItem, Alert, type Animation, type AudioLevel, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarSize, Badge, type BadgeProps, BarChart, type BarSeries, BrowserFrame, type BrowserFrameProps, Button, type ButtonProps, ButtonSize, ButtonVariant, COLOR_SCALE, CONTAINER_SCALE, Card, CardHeader, Carousel, type CarouselProps, type Chapter, Checkbox, ChoiceCards, type ChoiceOption, type ChoiceProps, Coach, type CoachApi, type CoachAudio, type CoachHint, type CoachItem, type CoachLine, type CoachOrb, CoachProvider, type CoachProviderProps, type CoachRegion, type CoachWhen, type CoachWhere, ColorField, type ColorToken, type Column, Combobox, type CommandItem, CommandPalette, type Container, Counter, type Currency, DARK_TOKENS, DataTable, type DataTableProps, DateRangePicker, Drawer, Dropdown, Dropzone, EmptyState, type FieldSize, FileRow, type FilterChip, FilterChips, FunnelChart, type FunnelStage, Gallery, type GalleryImage, type GalleryProps, GoalBar, Heatmap, Input, type InputProps, Lightbox, type LightboxProps, LocaleCtx, type MediaState, Modal, Money, type MoneyProps, MoneyProvider, MultiSelect, NumberStepper, type NumberStepperProps, type Option, PROVIDER_LEVEL_LABEL, PROVIDER_LEVEL_LABEL_EN, PageHeader, ParetoChart, type ParetoItem, Phone, type PhoneFormat, type PhoneParts, type PhoneProps, Product3DViewer, type Product3DViewerProps, Progress, ProviderBadge, type ProviderBadgeProps, type ProviderBadgeSize, type ProviderLevel, ProviderMark, type ProviderMarkProps, RADIUS_SCALE, Radio, RadioGroup, type Radius, type Range, RatingInput, type RatingInputProps, type RunwayItem, SHADOW_SCALE, Scrubber, SearchInput, Select, type SelectProps, type Shadow, type ShareItem, ShareList, Sheet, Skeleton, type SortableApi, type SortableItemProps, SortableStatus, Sparkline, Stars, type StarsProps, StatCard, type StatCardProps, Stepper, type StepperStep, StockRunway, Switch, type SymbolStyle, TEXT_SCALE, TOKENS, type TabItem, Tabs, TechnicalInput, type TechnicalInputProps, type TechnicalKind, TechnicalText, type TextSize, Textarea, type TextareaProps, Timeline, type TimelineStep, Toast, ToastHost, type ToastInput, type ToastItem, type ToastTone, type TokenName, Tone, Tooltip, TrendChart, type UITextKey, type UploadFile, type UploadState, type UseSortableOptions, VerifiedBadge, type VerifiedBadgeProps, VideoPlayer, type VideoPlayerProps, type VideoSuggestion, WaterfallChart, type WaterfallStep, WhatsAppIcon, coachSeconds, currencyName, currencySymbol, daysBetween, formatBytes, formatDate, formatRange, formatTime, isCurrency, normalizeHex, parsePhone, presets, setLang, useAudioLevel, useCoach, useCoachOptional, useCurrency, useCurrencySymbol, useMedia, useMoneyLang, useMoneyLocale, useSortable, useToasts, useUIText };