مكتبةُ المكوّنات
هذه الصفحةُ تعرض المكوّناتِ التي تُبنى منها كلُّ شاشةٍ في تطبيق الكراجات: بالعربيةِ والإنجليزية، فاتحةً وداكنة. ما يتغيّر هنا يتغيّر في كلِّ شاشةٍ تستعمله.
القطع الخاصّة بتطبيق الكراجات: كبيرة، ملوّنة بمعنى، وقليلة الكلام. كلّ شاشة تُبنى منها.
نيلي عميق وأصفر مشمس. الأخضر والكهرماني والأحمر محجوزة للمعنى: مدفوع، قريب، منتهي.
app/globals.css — brand blockكراجات
إدارة كراجات الموتورات والسيارات: كلّ آلية مع صاحبها واشتراكه
ألوان الآليات
خطّ العناوين والأرقام: بالو بهيجان
خطّ النصّ: ريدكس برو
موتور، سيارة، فان، دراجة — بلون الآلية نفسها.
VehicleIconنمرة سورية: خاصّة، عمومي، موتور. تبقى كما هي بالعربي والإنجليزي.
PlateBadgeأخضر مدفوع أو داخل، كهرماني ينتهي قريباً، أحمر منتهي أو عليه دين.
StatusPillبالليرة السورية الجديدة، الرقم كبير والعملة صغيرة.
Money · moneyText()أيقونة ضخمة وكلمة أو كلمتين. ضغطة واحدة، شغلة واحدة.
BigActionButtonرقم كبير بلون معناه، يفتح القائمة التي وراءه.
CountTileالحروف الأولى على لون ثابت للاسم، ونقطة الحالة.
PersonAvatarحلقة كبيرة: تصير كهرمانية بعد 80٪ وحمراء إذا امتلأ.
OccupancyRingالقائمة على الموبايل كروت، لا جداول. الشريط على الطرف لون الاشتراك.
VehicleCardمحمد الحلبي
Honda CG 125 · باقي 7 أيام
إبراهيم الدقاق
سوزوكي حمرا · باقي 16 يوم
إبراهيم كيالي
Hyundai Accent · باقي يومين
عبد الله شحادة
Saipa Tiba · باقي 27 يوم
إبراهيم صباغ
Kinlon KL150 · باقي 11 يوم
إبراهيم صباغ
ترينكس حمرا · باقي 20 يوم
زرّ رجوع كبير، عنوان واضح، وعمل واحد على الطرف.
ScreenHeaderبرقم النمرة أو الاسم أو الهاتف. الأرقام العربية تتحوّل تلقائياً.
SearchBarمحمد الحلبي
Honda CG 125 · باقي 7 أيام
عبد الله صباغ
سوزوكي برتقالية · باقي 9 أيام
محمد طرابلسي
ياماها سودا · باقي 4 أيام
أزرار ضخمة للأرقام بدل لوحة مفاتيح الهاتف.
NumberPad · BigNumberDisplayخطوات قليلة، وزرّ كبير واحد أسفل الشاشة.
StepWizardالخطوة 1 من 3
تطلع من أسفل الشاشة. كلّ قائمة اختيار داخلها تنفتح كاملة فوقها.
BottomSheetصاحب أكثر من كراج يبدّل بينها بضغطة.
GarageSwitcher · CurrentGarageSwitcherرسمة لطيفة وجملة واحدة وزرّ واحد.
GarageEmptyأوّل ما تقبض دفعة بتطلع هون.
رسومات بسيطة بألوان الهويّة، تتبع الوضع الليلي.
Artعنوان، عدد، ورابط «الكل».
SectionTitleأربع تبويبات وزرّ «دخول / خروج» الكبير في الوسط — تراه أسفل كلّ شاشة في التطبيق.
components/shell/TabBarالألوان والخطوط والزوايا، ثمّ أصغرُ القطع التي تُبنى منها كلُّ شاشة: الأزرار والشارات والصور الرمزية والتلميحات.
كلُّ لونٍ في الواجهة اسمٌ من هذه الأسماء، لا رمزٌ مكتوبٌ باليد. اضغط على أيّ لونٍ لتنسخ اسمه.
tokens · ColorSwatchلونان فقط يصنعان هويّة المشروع: لونُ الهويّة ولونُ الإبراز، ومعهما لونُ الحبر. تُكتب الثلاثةُ في كتلةٍ واحدةٍ أعلى ملفّ الأنماط، وكلُّ ما تراه هنا يُشتقّ منها — الفاتح والداكن معاً. غيّر الكتلةَ تتغيّر كلُّ شاشة.
لونُ الهويّة
لونُ الإبراز
درجاتُ الحبر
الأسطح
الخطوط الفاصلة
ألوانُ الحالة الأربعة
| اللون | خفيف | ممتلئ | متى يُستعمل |
|---|---|---|---|
الهويّةbrand | نموذج | نموذج | الإجراءُ الرئيسي والروابط والتحديد |
محايدneutral | نموذج | نموذج | المسودّات والإجراءات الثانوية |
الإبرازaccent | نموذج | نموذج | ما يستحقّ الانتباه بلطف |
نجاحsuccess | نموذج | نموذج | معتمد، مكتمل، في موعده |
تنبيهwarning | نموذج | نموذج | قريبٌ من موعده، يحتاج تعديلاً |
خطرdanger | نموذج | نموذج | متأخّر، حذف، رفض |
معلومةinfo | نموذج | نموذج | قيد المراجعة، ملاحظة |
ألوانُ الحالة ثابتة: لا تتبع تغييرَ الهويّة، فالأحمرُ أحمرُ في كلّ مشروع.
التدرّج والظلّ العميق
التدرّج المميّز
للإجراء الرئيسي الوحيد في الشاشة
bg-signatureالوهج
لرأس الصفحة أو حالةٍ فارغة
bg-glowالظلّ العميق
القائمة الجانبية والتلميحات
bg-deepثمانية أحجامٍ تكفي كلَّ شاشة. الأرقام دائماً بالأرقام اللاتينية، وتصطفّ في الأعمدة.
text-*text-4xl36pxتقريرُ الأسبوع جاهزٌ للمراجعة
رقمٌ كبير في رأس الصفحة
text-3xl30pxتقريرُ الأسبوع جاهزٌ للمراجعة
عنوانُ الشاشة
text-2xl24pxتقريرُ الأسبوع جاهزٌ للمراجعة
عنوانُ قسم
text-lg18pxتقريرُ الأسبوع جاهزٌ للمراجعة
عنوانُ بطاقة
text-[15px]15pxتقريرُ الأسبوع جاهزٌ للمراجعة
فقرةٌ تمهيدية
text-sm14pxتقريرُ الأسبوع جاهزٌ للمراجعة
النصُّ العادي
text-xs12pxتقريرُ الأسبوع جاهزٌ للمراجعة
شرحٌ تحت حقل
text-2xs11pxتقريرُ الأسبوع جاهزٌ للمراجعة
تسميةٌ صغيرة فوق مجموعة
زاويةٌ واحدة أساسية (10 بكسل) تُشتقّ منها البقية، وخمسةُ ظلالٍ للارتفاع. في الوضع الداكن تصير الظلالُ أعمق.
rounded-* · shadow-*الزوايا
sm · 6md · 8lg · 10xl · 142xl · 18full · ∞الظلال
xssmmdlgxlbrandستّة أشكال، كلٌّ منها يأخذ أيَّ لونٍ من ألوان الحالة. الشكلُ المميّز للإجراء الرئيسي الوحيد في الشاشة.
Buttonأزرارٌ متلاصقة بإطارٍ واحد، أو صفٌّ متباعد. حجمُ المجموعة ولونُها يسريان على كلّ زرّ فيها.
ButtonGroupمتلاصقة
متباعدة
زرٌّ مربّعٌ بأيقونةٍ فقط. اسمُه إجباري، ويظهر تلميحاً عند المرور أو التركيز.
IconButtonالأشكال
الأحجام
إجراءٌ رئيسي، وبجانبه سهمٌ يفتح البدائل. القائمة تطفو فوق كلّ شيء ولا تُقصّ، وزرّ الهروب يغلقها.
SplitButtonالأشكال
الحالات
ينسخ النصّ ويقول «نُسخ» في مكانه نفسه لثانيتين. هذا زرُّ البيت نفسه، بألوان المكتبة.
CopyButtonhttps://house.example/invite/7Q2Kكلمةٌ قصيرة تصف حالة: خفيفة أو ممتلئة أو بإطار، مع نقطةٍ أو أيقونة.
Badgeخفيف
ممتلئ · بإطار
الأحجام
وسمٌ يُضغط ليتحدّد (للتصفية)، أو يُزال بزرّه، أو يحمل اسمَ شخص.
Tag · Chipللتصفية
قابلةٌ للإزالة
أشخاص
رقمٌ صغير في فقاعة يصير «99+» بعد حدّه، ونقطةٌ تنبض لما هو حيّ الآن.
Count · StatusDotالأشكال
الحالات
الحرفان الأوّلان من الاسم بلونٍ ثابتٍ للاسم نفسه في كلّ مكان، أو الصورة إن وُجدت، مع حالة الاتصال.
Avatar · AvatarGroupالأحجام
الحالات
مجموعة
كلمةٌ قصيرة عند المرور أو التركيز بلوحة المفاتيح. يشرح حتى زرّاً معطّلاً لماذا هو معطّل.
Tooltipمع اختصار
على زرٍّ معطّل
رموزُ المفاتيح (⌘ على أجهزة آبل، Ctrl في غيرها) وخطٌّ فاصل بكلمة أو بدونها.
Kbd · SeparatorKbd
Separator
كلُّ حقلٍ هنا مبنيٌّ على حقلِ البيت: العنوانُ فوق الخانة، والرسالةُ تحتها، والخانةُ بارتفاعٍ واحدٍ وإطارٍ واحد. القوائمُ والتقويمُ تنفتح فوق الصفحة ولا يقصّها شيء.
العنوان والخانة ورسالتها الخاصة تحتها. كلُّ حقولِ المكتبة تمرّ به.
Fieldالحالات
نرسل إليه رابطَ الدخول فقط.
اكتب بريداً صحيحاً، مثل name@example.org.
سطرٌ واحد، مع أيقونةٍ أو بادئةٍ أو لاحقة، وعدّادٍ للأحرف عند الحاجة.
TextField · Inputالحالات
فارغة
مملوءة
الاسم مستعملٌ في مشروعٍ آخر.
معطّلة
للقراءة فقط
قيد التحقّق
إضافات
مقبولة
يظهر في رأس التقرير.0 / 40
الأحجام
تكبر مع الكتابة حتى حدٍّ ثم تمرّر، وتعدّ الأحرف إذا كان للنصّ حدّ.
TextAreaField · Textareaالحالات
تصل إلى المراجِع مع الطلب.81 / 200
اكتب السبب ليعرف صاحبُ الطلب ما يصلحه.
أزرار − و+ (اضغط مطوّلاً لتستمرّ)، والأسهم في لوحة المفاتيح، وحدٌّ أدنى وأعلى، والأرقام تُقرأ لاتينيةً ولو كُتبت بلوحةٍ عربية.
NumberFieldالحالات
من 0 إلى 80، بخطوة نصف ساعة.
أقلُّ عددٍ مسموح هو 1.
معطّلة
زرُّ مسحٍ يظهر مع الكتابة، وEsc يمسح، واختصارُ لوحة المفاتيح يضع المؤشّر فيها.
SearchFieldالحالات
زرُّ العين يُظهر ما كُتب. الخانة من اليسار إلى اليمين في اللغتين.
PasswordInputالحالات
اثنا عشر حرفاً على الأقل.
كلمة المرور قصيرة.
معطّلة
كلُّ اختيارٍ من قائمة يمرّ بها. القائمةُ القصيرة تنفتح كما هي؛ الطويلةُ (سبعة خيارات فأكثر) فيها خانةُ بحثٍ تفهم الإملاءَ العربيّ.
SearchSelectالحالات
قائمة قصيرة
قائمة طويلة فيها بحث
اختر مدينة الفرع.
معطّلة
تُكتب أو تُختار من التقويم. تقبل 25/2/2027 وأرقاماً عربية وتحوّلها إلى سنة-شهر-يوم.
DateInputالحالات
خلال هذا الشهر والذي يليه فقط.
اكتب التاريخ كاملاً.
خانةُ التاريخ نفسُها، ويظهر تحتها (أو بجانبها) اليومُ نفسُه بتقويم أمّ القرى، ويتبدّل مع كلِّ اختيار.
DateFieldالأشكال
بالهجري: 3 جمادى الأولى 1448 هـ
الهجري تحت الخانة
يظهر التاريخُ الهجريّ هنا بعد اختيار اليوم
الهجري بجانبها
لعرض تاريخٍ في جدولٍ أو بطاقة: الميلاديّ والهجريّ، في سطرٍ أو سطرين، مع إبراز التقويم الحاكم.
DualDateالعرض
في سطر
2026-10-143 جمادى الأولى 1448 هـفي سطرين
2026-10-143 جمادى الأولى 1448 هـالهجري هو الحاكم
2026-10-143 جمادى الأولى 1448 هـرمزُ الريال الرسميّ (ساما) مرسوماً، ويسبق الرقمَ في اللغتين. الأرقام لاتينية دائماً.
Money · RiyalSignالعرض
كامل
4,850,000مختصر
4.9 مليونبالرمز النصّي
1,250 ر.سبالهللات
312.50تفصل الآلاف وأنت تكتب، وتقبل الأرقام العربية وتحوّلها لاتينية.
MoneyInputالحالات
القيمة المخزّنة: لا شيء بعد
المبلغ أكبر من الميزانية المعتمدة.
معطّلة
رمزٌ بعددٍ ثابتٍ من الأرقام يصل برسالةٍ أو بريد. الكتابة تنتقل للخانة التالية، واللصق يملأ الكلّ، والأرقام العربية تُقرأ لاتينية. يختلف عن خانة التحقّق بخطوتين أدناه.
OtpInputالحالات
فارغ
مكتمل
الرمز غير صحيح أو انتهت صلاحيته.
مقسوم 3 + 3
خانةٌ واحدة تقبل رمزَ تطبيق المصادقة (ستّة أرقام) أو رمزاً احتياطياً بالشكل XXXXX-XXXXX.
CodeInputالحالات
اسحب أو اختر؛ تظهر الملفّاتُ تحتها بحجمها وزرِّ إزالة. لا ترسم تقدّماً إلا لرفعٍ حقيقيّ يمرّره صاحبُ الشاشة.
FileDropالحالات
أرفق نسخةً موقّعة من العقد.
تشغيل أو إيقاف، و«بعضها» حين تكون مجموعةٌ مختارةً جزئياً.
Checkboxالحالات
مربّع البيت الأصليّ (لنموذجٍ يُرسَل كما هو)
عدّة خيارات تحت عنوانٍ واحد، مع «تحديد الكلّ».
CheckboxGroupالحالات
اختر قناةً واحدة على الأقل.
قائمةٌ عمودية أو أفقية، ولكلّ خيارٍ سطرُ شرح.
RadioGroupالأشكال
اختر كم مرّةً يصلك التقرير.
لقرارٍ يحتاج كلُّ خيارٍ فيه جملةَ شرح.
RadioCardsلإعدادٍ يسري فوراً، بلا زرِّ حفظ.
Switchالحالات
الأحجام
اختيارٌ واحدٌ دائماً بين خياراتٍ قليلة، مثل طريقة العرض.
SegmentedControlالحالات
الأشكال
عدّة اختياراتٍ تُشغَّل وتُطفأ، مع عددٍ اختياريّ.
ToggleChipsالحالات
الأحجام
قيمةٌ واحدة أو مدى، بعلاماتٍ تحته وفقاعةٍ بالقيمة أثناء السحب.
Sliderالحالات
كلُّ ما يظهر فوق الصفحة: النوافذ، واللوحة الجانبية، وسؤالُ التأكيد، والإشعارات، والقوائم، واللوحاتُ المعلّقة بزرّ — ومعها حالاتُ الصفحة الهادئة: فارغة، وتُحمَّل، وتتقدّم. كلُّ قائمةٍ وتقويمٍ هنا يُفتح كاملاً فوق النافذة التي تحمله، ومفتاحُ Esc يُغلق الطبقةَ العليا وحدها.
نافذةٌ فوق الصفحة لمهمّةٍ قصيرة: نموذج، أو تفاصيل، أو قرار. تُغلق بمفتاح Esc أو بالضغط خارجها أو بزرّ الإغلاق، ويعود التركيز إلى الزرّ الذي فتحها. على الجوال ترتفع من أسفل الشاشة.
Dialog · DialogCloseالأحجام
نموذجٌ داخل نافذة
لوحةٌ تنزلق من طرف الشاشة (من اليسار في العربية) لما يطول: مرشّحات، أو تفاصيلُ سجلّ، أو إعدادات. فيها الحقولُ نفسُها، وقوائمُها تُفتح فوقها كاملة.
Sheetيسأل قبل ما لا رجعةَ فيه. لا يُغلق بالضغط خارجه — الجواب نعم أو لا. يمكن أن يُطلب كتابةُ كلمةٍ قبل التأكيد، وأن يعمل العملُ داخله حتى ينتهي. يُفتح من أيّ مكان، حتى من داخل نافذةٍ مفتوحة.
AlertDialog · useConfirmالألوان
كلمةٌ قصيرة في زاوية الشاشة عن شيءٍ حدث في مكانٍ آخر أو في الخلفية. يختفي وحده، ويتوقّف عدّادُه ما دام المؤشّر فوقه، ويظهر فوق أيّ نافذةٍ مفتوحة.
toast · Toasterالألوان
الحالات
أفعالٌ تحت زرّ. تُفتح تحته أو فوقه حسب المساحة، ولا يقصّها جدولٌ ولا بطاقةٌ ولا نافذة. الأسهم تتنقّل، والحرفُ الأول يقفز إلى ما يبدأ به، ومفتاحُ Esc يُغلقها ويعيد التركيز للزرّ.
DropdownMenuكلُّ أنواع البنود
«⋯» في آخر الصفّ — تنمو القائمةُ نحو البداية
لوحةٌ صغيرة تحت زرّ: مرشّحٌ سريع، أو نموذجٌ من حقلين، أو معلومة. يدخلها التركيز، وتُغلق بالضغط خارجها أو بمفتاح Esc.
Popoverتصفيةٌ سريعة
تُطبَّق على القائمة تحتها.
تظهر عند مرور المؤشّر على اسمٍ أو رابط، أو عند الوصول إليه بلوحة المفاتيح، بعد لحظةٍ قصيرة. للمعاينة فقط — لا أزرارَ فيها.
HoverCardملاحظةٌ عن الشاشة كلّها: رفض، أو غياب، أو حالةٌ قائمة. ليست مكانَ خطأ الحقل — ذاك يُكتب تحت الحقل نفسه.
Calloutما دامت النتيجةُ في الطريق، يقول ذلك المكانُ الذي ستظهر فيه: الزرُّ يدور حتى تظهر البيانات الجديدة فعلاً، والقائمةُ تُعتم في مكانها ولا تُستبدل.
components/Pendingزرٌّ وقائمةٌ يشتركان في حالة انتظارٍ واحدة
القائمةُ لا تختفي ولا يضيع موضعُ التمرير: تُعتم فقط حتى يصل الصفُّ الجديد.
لوحةٌ ليس فيها شيءٌ بعد
المؤشّر الدوّار وحده
رسمٌ صغير، وعنوان، وسطرُ مساعدة، والخطوةُ التالية. أربعة أنواع: لا شيء بعد، ولا نتائج، وأنجزتَ كلَّ شيء، وتعذّر التحميل.
EmptyStateلا أحدَ هنا بعد
أضف أوّلَ شخصٍ إلى الفرع، وستظهر القائمةُ هنا.
لا نتائج لـ«محاسب أوّل»
جرّب كلمةً أقصر، أو امسح المرشّحات.
لا شيءَ ينتظرك
راجعتَ كلَّ الطلبات. سنخبرك حين يصل جديد.
تعذّر تحميلُ القائمة
انقطع الاتصال بالخادم. لم يضِع شيء.
الحجم الصغير — داخل بطاقة أو جدول
لا نتائج لـ«محاسب أوّل»
جرّب كلمةً أقصر، أو امسح المرشّحات.
شكلُ ما سيأتي، بضوءٍ هادئ يعبر باتجاه القراءة. للتحميل الأول فقط: ما هو معروضٌ ويتحدّث يبقى في مكانه ويُعتم.
Skeleton · SkeletonText · SkeletonAvatar · SkeletonCard · SkeletonTable · SkeletonTableRowكتلٌ وأسطر
بطاقة
جدول
كم بقي من شيءٍ يُقاس: ملفٌّ يُرفع، أو خطواتُ معالج، أو نسبةٌ من هدف. الأرقامُ لاتينية دائماً.
Progress · SegmentedProgress · ProgressRingالشريط
اقتربت من الحدّ — احذف المرفقات القديمة.
الخطوات
الخطوة 2 من 4 · المرفقات
الحلقة
الأرقامُ المهمّة في بطاقة، والرسومُ البيانية التي تشرحها. ألوانُها من خانات الرسوم في كتلة العلامة، وأرقامُها لاتينية، والزمنُ فيها يجري من اليمين في العربية.
عنوان، ورقم، والتغيّر عن الفترة السابقة، ومنحنى صغير. التغيّر يُلوَّن بحسب كونه خبراً جيداً لا بحسب إشارته: نقصُ محاولات الدخول الفاشلة أخضر.
StatCardالأشخاصُ النشطون
1,284
+12%مقارنةً بالشهر الماضي
محاولاتُ دخولٍ فاشلة
37
−18%الأقلُّ أفضل
عملياتُ الدخول اليوم
412
+6%مقارنةً بالأمس
الحضورُ في الموعد
92%
الهدف 95%
طلباتٌ تنتظر
8
0%كالأسبوع الماضي — والبطاقةُ كلُّها رابط
مقارنةٌ بين فئات: أعمدةٌ قائمة للأشهر، مكدّسةٌ حين تتكوّن من أجزاء، أو صفوفٌ أفقية للأسماء العربية الطويلة. مرّر المؤشّر لترى التفاصيل.
BarChartأعمدةٌ مكدّسة
صفوفٌ أفقية
اتجاهٌ عبر الزمن، بخطٍّ أو أكثر، مع مساحةٍ ملوّنة تحت الأول وخطِّ هدفٍ متقطّع.
LineChartأجزاءُ كلٍّ واحد. تدور من الأعلى باتجاه القراءة؛ مرّر على جزءٍ ليظهر رقمُه ونسبتُه في الوسط.
Donut80
طلباً
اتجاهٌ بلا محاور، بجانب رقمٍ أو داخل بطاقة. ينتهي بنقطةٍ عند آخر قيمة.
Sparklineيشرح ألوانَ الرسم. الخاناتُ الثماني تتبع العلامةَ والوضعَ الداكن، ولا لونَ مكتوبٌ بيده.
ChartLegendخاناتُ الرسوم الثماني
مع القيم
جدولُ البيت نفسُه، لا نسخةٌ من مكتبةٍ أخرى. يقرأ قاعدةَ البيانات، فلا يُرسم في هذه الصفحة.
components/data-tableيجلب الصفحةَ التي تراها فقط من الخادم، ويرتّب ويبحث هناك، ويفتح الصفَّ في لوحةٍ جانبية، ويختار القارئُ أعمدتَه ويغيّر عرضَها. يعمل في شاشة «الأشخاص».