Sbitra · components · @sbitra/ui
النظام مطبَّقًا
اثنان وخمسون مكوّنًا مولَّدة بـ shadcn ثم أُعيدت كتابتها على هذا النظام: صفر انحناء، لا ظلال، حدّ شعري واحد، ومقياس الطباعة نفسه الذي تستعمله الصفحة. الأسماء والمتغيّرات كما هي في السجل، فما يُلصق من هناك يعمل هنا.
01 — controls
ما يُلمس
الأزرار وعناصر الإدخال الصغيرة. لا ظلّ ولا زاوية دائرية: الحالة تُقرأ من الحبر والخط الشعري، والضغط يُجيب بحركة مقدارها بكسل واحد.
button — variant
button — size, icon, disabled
button-group
toggle · toggle-group
badge · kbd
checkbox · radio-group · switch
slider · progress
avatar · separator · spinner · skeleton
aspect-ratio
02 — fields
ما يُملأ
الحقل ورقة بحدّ شعري، لا مساحة مملوءة. الرمز --input هو حافة الحقل في هذا النظام، والتعبئة محجوزة لما اختاره المستخدم فعلًا.
input · textarea
select · native-select
input-group · input-otp
combobox
field
command
03 — surfaces
ما يحمل
البطاقات والجداول والألواح. الفصل هنا خطّ شعري أو فراغ، ولا شيء يطفو فوق شيء بظلّ.
card
item
Paper 1.21.4 · يعمل منذ ثلاثة أيام
alert
empty
table
| الاسم | النكهة | الذاكرة | الحالة |
|---|---|---|---|
| cairo-01 | Paper 1.21.4 | 8 GB | يعمل |
| cairo-02 | Purpur 1.20.6 | 4 GB | متوقف |
| frankfurt-01 | Fabric 1.21.1 | 16 GB | يعمل |
tabs
accordion · collapsible
scroll-area · resizable
04 — overlays
ما يعلو
الطبقات المؤقتة. لا ظلّ يفصلها عن الصفحة، بل حدّ شعري وفراغ — والحذف يُعرَّف بفعله لا بلونه.
dialog · alert-dialog
sheet · drawer
popover · hover-card · tooltip
dropdown-menu · context-menu · menubar
sonner
05 — navigation
ما يدلّ
الاتجاه هو التخطيط لا حالة منه: الأقسام تجري من اليمين، والسهم في فتات الخبز يتبع الكتابة.
breadcrumb
pagination
navigation-menu
sidebar