مكوّنات React لكود المنصّات

زر React متاح الوصول للمنصّات الحكومية السعودية: تسعة أنماط، وأحجام، وأيقونات، وحالة تحميل، وخاصية asChild لروابط التوجيه. جاهز للعربية والوضع الداكن.

زر إجراء عائم (FAB) في React للإجراء الرئيسي الوحيد في الشاشة: أيقونة فقط أو حبّة ممتدة، على سطح عادي أو ملوّن، مع asChild للروابط. يراعي الاتجاه العربي.

رابط نصّي متاح الوصول في React بثلاث درجات وحجمين، مع وضع مضمّن ووضع خارجي للمواقع الحكومية السعودية. تنعكس أيقونته النهائية في الاتجاه العربي.

زر تبديل ثنائي الحالة في React لأشرطة الأدوات وأدوات التنسيق، بأنماط وأحجام. يعرض aria-pressed ويدعم الاستخدام بأيقونة فقط مع تسمية.

أداة تحكّم مقسّمة في React للتبديل بين عروض متعارضة، بأحجام ونمط للأسطح الداكنة. تعمل بلوحة المفاتيح وفي الاتجاه العربي.

حقل نصّي أحادي السطر متاح الوصول في React مع تسمية مدمجة ونص مساعد ورسالة خطأ وبادئات ولاحقات وأنماط تعبئة. جاهز للعربية والاتجاه من اليمين.

حقل نصّي متعدّد الأسطر متاح الوصول في React يشارك TextInput عقد التسمية والنص المساعد والخطأ، مع rows والتحكّم في تغيير الحجم وأنماط التعبئة.

حقل رقمي في React بأزرار زيادة ونقصان، مع min وmax وstep ودعم الكسور. يحمل رقمًا أو null، ويربط التسمية وحالات الخطأ، ويبقى من اليسار لليمين في العربية.

حقل اختيار مفرد متاح الوصول في React مبني على Radix، مع تسمية ونص مساعد وحالة خطأ ونص نائب وخيارات معطّلة. يرث الوضع الداكن والاتجاه العربي.

حقل قائمة منسدلة في React باختيار مفرد ومتعدّد، وبحث داخل اللوحة، وخيارات مجمّعة، وربط كامل للحقل. مبني على cmdk للتصفية السريعة بالعربية والإنجليزية.

مربّع اختيار متاح الوصول في React مع تسمية ونص مساعد وحالة خطأ ووضع غير محدّد وثلاثة أحجام. مبني على Radix، ومربوط بالنماذج، وجاهز للاتجاه العربي.

مجموعة أزرار اختيار متاحة الوصول في React بتسمية مشتركة ونص مساعد وحالة خطأ وتخطيط أفقي ودعم عربي. اختيار واحد من مجموعة صغيرة ظاهرة.

مفتاح تبديل متاح الوصول في React لإعداد ثنائي واحد يسري فورًا، مع تسمية ونص مساعد وحالات. مبني على Radix ومعكوس في الاتجاه العربي.

شريط تمرير متاح الوصول في React لقيمة واحدة أو نطاق بمقبضين، مع عرض حي للقيمة وتنسيق مخصّص وأحجام وربط للحقل. يعمل بلوحة المفاتيح وفي الاتجاه العربي.

تقييم بالنجوم متاح الوصول في React يعمل كحقل إدخال أو عرض للقراءة فقط، بدقّة نصف نجمة وأحجام ودرجة العلامة ودعم كامل للوحة المفاتيح.

حقل رمز تحقّق لمرّة واحدة في React لتدفّقات الدخول والتحقّق: رموز الرسائل النصّية من ست خانات، وتجميع، ورقم سرّي مقنّع، ولصق، وتعبئة تلقائية، وonComplete.

حقل وسوم في React يحوّل النص المكتوب إلى شرائح قابلة للإزالة، مع تحقّق وحدّ أقصى ومنع التكرار وربط للحقل. يعمل بلوحة المفاتيح وبالعربية.

حقل بحث في React مبني على TextInput مع عدسة وبحث صوتي وزر مسح وEnter للبحث. يناسب التصفية الحيّة وصفحات البحث الكاملة.

رفع ملفّات في React بالسحب والإفلات، مع التحقّق من النوع والحجم، وحالة وتقدّم لكل ملف، ونمط زر مضغوط. متحكَّم به بالكامل وجاهز للاتجاه العربي.

منتقي تاريخ متاح الوصول في React بتبديل داخل التقويم بين الهجري (أم القرى) والميلادي، وحدّين أدنى وأقصى، ودعم عربي. القيمة دائمًا Date.

منتقي نطاق تاريخ متاح الوصول في React لتاريخي البداية والنهاية على تقويم واحد، مع إعدادات جاهزة وعرضين هجري وميلادي وحدود. يشارك DatePicker نواته.

شريحة قابلة للاختيار في React لأشرطة التصفية وقوائم الاختيار المتعدّد والرموز القابلة للإزالة، بأنماط وأيقونات وشكل دائري. تعرض aria-pressed.

سطح بطاقة مركّب في React بصورة وأيقونة ورأس ومحتوى وتذييل وأقسام قابلة للتوسيع. أنماط قابلة للاختيار وتفاعلية للوحات التحكّم والبوّابات.

وسم مضغوط في React للفئات والكلمات المفتاحية، بمجموعة درجات SDGA وثلاثة أحجام وأيقونات ووضع قابل للإغلاق. جاهز للاتجاه العربي.

حبّة حالة في React بنقطة ملوّنة وتسمية لحالات الطلبات والإجراءات: نجاح وتحذير وخطأ ومعلومة ومحايد، بأنماط معبّأة أو خفيفة.

صورة رمزية في React بصورة وبديل من الأحرف الأولى وأحجام وأشكال ونقطة حالة ومجموعات متراصّة مع فائض +N. الأسماء المتاحة مدمجة.

فاصل في React للفصل الأفقي أو العمودي، مع تسمية مضمّنة اختيارية ودرجات ووضع زخرفي. يستخدم دور separator.

قائمة مفتاح وقيمة في React تعرض عناصر dl وdt وdd الحقيقية لشاشات المراجعة والملخّص، أفقية أو عمودية، بقيم غنيّة ودعم عربي.

مكوّن قائمة في React للقوائم النقطية والمرقّمة والأيقونية بإيقاع متّسق وتداخل ودرجات وترقيم أبجدي عربي في الاتجاه من اليمين.

قائمة مُنظّمة خفيفة في React لصفوف الترويسة والنص، مع صفوف قابلة للاختيار وكثافة مضغوطة وبلا عبء فرز. تعرض جدولًا حقيقيًا.

بطاقة مؤشّر أداء في React بتسمية وقيمة وفرق تغيّر واتجاه ومخطّط مصغّر اختياري وأيقونة وفتحات إجراء. جمّع البلاطات بـ MetricGroup للوحات التحكّم.

اقتباس بارز في React بعنوان اختياري ومؤلّف وصفة المؤلّف وصورة رمزية، بأحجام وتلوينات. يعرض عنصر blockquote الدلالي.

مخطّط زمني عمودي في React لسجل الطلبات وتتبّع المعاملات وموجز النشاط، بعلامات حالة وأيقونات وصور رمزية. دلالات قائمة مرتّبة.

جدول بيانات مركّب في React برأس وجسم وتذييل وتعليق وترويسات قابلة للفرز والتصفية وصفوف قابلة للاختيار وأحجام وتخطيط متناوب وترويسة ثابتة.

حاوية نسبة أبعاد في React تثبّت المحتوى على نسبة مثل 16/9، فلا تتزحزح الصور والخرائط والتضمينات أثناء التحميل.

مكوّن DigitalStamp للمواقع الحكومية السعودية في React: شريط العلم والعبارة، ولوحة شرح نطاق .gov.sa، ورقم تسجيل الهيئة، بالعربية والإنجليزية.

كتلة كود في React بتبويبات لغات وأرقام أسطر وزر نسخ وطيّ «عرض المزيد» ونمط مضمّن. يبقى الكود من اليسار إلى اليمين في الصفحات العربية.

مكوّن SaudiRiyal في React يعرض رمز الريال الرسمي بتنسيق مبالغ متوافق مع SDGA: موضع رمز ثابت، وإشارة آمنة في الاتجاه العربي، وأرقام، ودرجات.

رسوم SVG في React بلا اعتماديات بلوحة ألوان الهيئة الفئوية: BarChart وLineChart وPieChart، لكلٍّ جدول بديل متاح الوصول ودعم للاتجاه العربي.

تنبيه مضمّن في React لرسائل داخل الصفحة: أنواع معلومة ونجاح وتحذير وخطأ، وعنوان، وإجراءات، وزر إغلاق. يُعلن عبر المناطق الحيّة.

شريط إشعار بعرض كامل في React لرسائل النظام في أعلى الصفحة: أنواع دلالية، وعبارة افتتاحية بارزة، وإجراءات، وزر إغلاق. جاهز للاتجاه العربي.

إشعارات منبثقة في React تُطلق من دالّة toast(): أنماط، وإجراءات مثل التراجع، وتحديث في المكان، ومنفذ عرض واحد يُثبَّت قرب جذر التطبيق.

تلميح متاح الوصول في React مبني على Radix يظهر عند التمرير والتركيز، مع مشغّل HelpIcon ونمط بعنوان وأيقونة وسطح معكوس. جاهز للاتجاه العربي.

مؤشّر تحميل غير محدّد في React يتبع حجم النص ولونه الحاليين، بأحجام ودرجات وتسمية متاحة افتراضيًا.

عنصر نائب في React يحاكي شكل المحتوى أثناء التحميل: أسطر نص ودوائر وبطاقات وأشكال مضمّنة، بلمعان يحترم تفضيل تقليل الحركة.

شريط تقدّم خطّي وحلقة تقدّم دائرية في React بحالات محدّدة وغير محدّدة، وحالات تغذية راجعة، وتسمية، ونص مساعد، وعرض للقيمة.

حالة فارغة في React لشاشات بلا بيانات وبلا نتائج وشاشات الخطأ، بوسائط وعنوان ووصف وإجراءات، أو أجزاء قابلة للتركيب. جاهزة للاتجاه العربي.

حوار منبثق متاح الوصول في React مبني على Radix: أيقونة رأس، وعنوان، ووصف، وجسم، وإجراءات تذييل، وأحجام، وحصر للتركيز، وEscape للإغلاق. يرث السمة والاتجاه.

لوح في React ينزلق من بداية السطر أو نهايته أو الأسفل للإعدادات ولوحات التفاصيل ونماذج التصفية. تعامل مع التركيز كما في Modal، وجوانب تراعي الاتجاه العربي.

لوح منبثق في React مبني على Radix لمحتوى غني مثبّت على مشغّل: نماذج تحرير مضمّنة، ومرشّحات، ومعاينات، مع سهم اختياري وحصر تركيز في الوضع المعطِّل.

لوح تنقّل منزلق في React برأس وعناصر مجمّعة وروابط الصفحة الحالية وتذييل، بدلالات nav وقوائم حقيقية. ينعكس الجانب في الاتجاه العربي.

قائمة إجراءات منسدلة في React مبنية على Radix بعناصر ومربّعات اختيار وأزرار اختيار وتسميات وفواصل وقوائم فرعية وفتحات نهائية. دعم كامل للوحة المفاتيح والاتجاه العربي.

شريط قوائم أفقي بنمط سطح المكتب في React مبني على Radix، بقوائم متداخلة وعناصر مربّعات اختيار وأزرار اختيار ومشغّلات محدّدة. تتحرّك مفاتيح الأسهم عبر القوائم وداخلها.

لوحة مرشّحات متعدّدة الأوجه في React، منبثقة أو مضمّنة، بأقسام ومرشّحات مربّعات اختيار وعدّاد نتائج وزرَي تطبيق ومسح. تبقى الحالة في كودك.

لوحة أوامر في React مبنية على cmdk ببحث تقريبي ومجموعات واختصارات وCommandDialog يربط Cmd+K وCtrl+K. تعمل مضمّنة أو منبثقة.

تبويبات متاحة الوصول في React مبنية على Radix بقائمة تبويب متنقّلة وأيقونات وأنماط بعرض كامل ومسطّحة ومعالجة للفائض وتسميات عربية. تنقل مفاتيح الأسهم بين التبويبات.

مسار تنقّل متاح الوصول في React بروابط وصفحة حالية وفواصل مخصّصة وطيّ للعناصر الوسطى. يستخدم معلم nav وaria-current.

ترقيم صفحات متاح الوصول في React بزرَي السابق والتالي وروابط الصفحات وصفحة حالية بشريط سفلي وعلامات حذف ومساعد paginationRange لعرض ثابت.

أكورديون متاح الوصول في React مبني على Radix بقسم مفتوح واحد أو عدّة أقسام، ووضع قابل للطي، وأحجام، ومحاذاة أيقونة، ونمط مسطّح. جاهز للاتجاه العربي.

مؤشّر خطوات في React للتدفّقات متعدّدة الخطوات بحالات مكتملة وحالية وقادمة، وتخطيطين أفقي وعمودي، ومظهر نقطي. يعلّم الخطوة الحالية لقارئ الشاشة.

منطقة إظهار وإخفاء واحدة في React مبنية على Radix، بزر مشغّل من عندك، وخيار الفتح افتراضيًا، ونمط بسهم.

منطقة تمرير في React بأشرطة تمرير منسّقة عبر المتصفّحات للمحور العمودي أو الأفقي أو كليهما. محدودة كما في overflow الأصلي وقابلة للتمرير بلوحة المفاتيح حين تُسمّى.

عرض شرائح متاح الوصول في React بأسهم ونقاط ولوحة مفاتيح وسحب وتكرار، بنمط دور carousel وإعلانات حيّة. تنقّل يراعي الاتجاه العربي.

شريط جانبي للتطبيقات في React بمجموعات وقوائم وقوائم فرعية وشارات وسكّة أيقونات قابلة للطي في سطح المكتب تتحوّل إلى لوح في الجوال. ينعكس الجانب في الاتجاه العربي.

DgaProvider جذر كل تطبيق @dev-dga: يضبط الاتجاه والوضع الداكن وسمة العلامة، ويستضيف البوّابة لترثها الطبقات المنبثقة. غلّف مرّة واحدة.