کتابخانه کامپوننت

۱دکمه

پرکاربردترین کامپوننت سیستم با پنج گونه. سلسله‌مراتب با گونه ساخته می‌شود، نه با اندازه یا رنگ اضافه.

اندازه‌ها: پیش‌فرض ۴۰px · کوچک .sm ۳۲px · حالت بارگذاری = جایگزینی متن با اسپینر (عرض ثابت می‌ماند).

<button class="btn primary">ذخیره رویداد</button>
<button class="btn primary" disabled>ذخیره</button>   <!-- تا اعتبارسنجی فرم -->
<button class="btn primary"><span class="spinner"></span></button> <!-- در حال ذخیره -->

۲دکمه آیکونی

اکشنی که آیکونش خودگویاست؛ دایره‌ای، دو اندازه، همیشه با aria-label.

هاور: پس‌زمینه سطح ۲ + متن به رنگ اصلی. فقط جایی که معنی آیکون قطعی است؛ در غیر این صورت دکمه متنی.

<button class="icon-btn" aria-label="بستن">
  <svg viewBox="0 0 24 24" width="20" height="20" …></svg>
</button>

۳دکمه شناور (FAB)

میان‌بر «ایجاد» در کلاس‌های compact و medium که سایدبار دائمی ندارند. رفتارش با زمینه عوض می‌شود: در نمای وظایف «ایجاد وظیفه»، در بقیه نماها «ایجاد رویداد».

۴فیلد ورودی

خانواده سه‌تایی ورودی متن، انتخابی و چندخطی — با لیبل بالای فیلد و خطای زیر آن.

جعبه‌های OTP

ورودی کد یک‌بارمصرف: شش خانه جدا با یک input نامرئی روی همه؛ ارقام فارسی، جهت چپ‌به‌راست.

استیت‌ها: .fill پر · .cur فعلی (هاله برند) · .bad کد غلط (قرمز + لرزش .shake)

<div class="otp-boxes">
  <span class="box fill">۳</span> <!-- … ۶ خانه -->
  <input class="otp-input" inputmode="numeric" maxlength="6">
</div>

۵انتخابگر تاریخ و ساعت

یک کنترل پیوسته به‌جای چهار جعبه جدا: سِگمنت تاریخ (بازکردن تقویم جلالی) + خط جداکننده + سِگمنت ساعت با دو سلکت بی‌خطِ «ساعت : دقیقه». در یک سطر جا می‌شود حتی در ۳۲۰px.

<div class="dt-field">
  <button class="dt-date" data-dp="start">…۹ شهریور</button>
  <span class="dt-sep"></span>
  <div class="dt-time"><select class="dt-t">…</select><span class="dt-colon">:</span><select class="dt-t">…</select></div>
</div>

۶چک‌باکس گرد

امضای بصری وظایف تقویمم: دایره‌ای و رنگ‌پذیر — از رنگ تقویمِ والد رنگ می‌گیرد.

۲۲px · تیک با انیمیشن مقیاس ۰٫۵→۱ · عنوان وظیفه انجام‌شده خط‌می‌خورد و کم‌رنگ می‌شود.

<button class="ccheck" style="--c: var(--ev-4)"
        role="checkbox" aria-checked="true"><svg…/></button>

۷سوییچ

تنظیم بی‌درنگِ وضعیت‌ها — بدون دکمه تأیید. جابه‌جایی دستگیره با inset-inline-start انیمیت می‌شود تا در RTL درست حرکت کند.

۴۴×۲۶ · دستگیره ۱۸px · کاربرد: «تمام‌روز»، دید/پنهان‌کردن تقویم‌ها، تنظیمات اعلان.

۸چیپ

فیلتر و انتخاب از میان گزینه‌های کم‌شمار: فیلترهای نما، انتخاب نوع رویداد، انتخاب رنگ تقویم.

انتخاب‌شده = ظرف برند با متن پررنگ؛ نه پرشدن کامل با برند (اکشن نیست). توضیح کامل الگوی فیلتر در الگوها.

۹تب قرصی

سوئیچ بین زیرمجموعه‌های هم‌سطح — نمای وظایف («همه / امروز / این هفته / انجام‌شده») — با شمارنده زنده.

شمارنده با پس‌زمینه ۱۸٪ برند و رنگ لینک — نه پر برند (نشان ناوبری است، نه اعلان). ارتفاع ۳۶px.

۱۰نشان

شمارنده‌های ناوبری: تعداد وظایف باز روی ریل، سایدبار و نوار پایین.

حداقل ۲۰px · ۱۱px/۷۰۰ · ارقام فارسی · فقط ناوبری و شمارش — هرگز برای «جدید!» یا برچسب تبلیغ.

۱۱دیالوگ و برگه پایین

یک کامپوننت، دو چیدمان: در دسکتاپ وسط صفحه با شعاع ۱۶، در موبایل (<۷۲۰px) برگه پایین با دستگیره و شعاع ۲۴ بالایی. جریان استاندارد: پیش‌نمایش فقط‌خواندنی ← دکمه «ویرایش» ← فرم.

<div class="dialog-backdrop open">
  <div class="dialog" role="dialog" aria-modal="true">
    <div class="dialog-head">…</div>
    <div class="dialog-body">…</div>
    <div class="dialog-foot">…</div>
  </div>
</div>

۱۲منوی پاپ‌آور

اکشن‌های فرعی لنگرشده به دکمه (⋯، فلش‌های نما، منوی تنظیمات تقویم).

ثابت‌موقعیت کنار لنگر · آیتم ≥ ۳۸px · بستن با کلیک بیرون یا Esc · آیتم مخرب با رنگ تعطیلات. ساختار و رفتار کامل در الگوی دیالوگ‌ها.

۱۳بنرها

دو سطح: بنر سطح اپ فقط برای تعارض نسخه‌ها بین دستگاه‌ها؛ بازخورد درون‌فرم برای خطا و موفقیت (ورود). همگام‌سازی موفق ساکت است — هیچ توستی نمی‌گذارد.

۱۴توست

تأیید کوتاه عمل‌های پس‌زمینه — حداکثر یک اکشن، بدون استک پشته‌ای طولانی.

میان‌چین پایین · معکوس‌رنگ (تیره در تم روشن و برعکس) · ورود ۲۴۰ms از پایین · بعد از ~۴ ثانیه محو · اکشن با رنگ برندِ روشن‌شده.

<div class="toast">رویداد حذف شد<span class="act">بازگردانی</span></div>

۱۵شبکه ماه جلالی

قلب محصول، در سه اندازه استفاده می‌شود: مینی‌ماهِ سایدبار، پاپ‌آور انتخاب تاریخ و نمای سال (۱۲ عدد پشت‌سرهم).

هفته شنبه‌شروع (ش ی د س چ پ ج) · نسبت ۱:۱ · گپ ۲px · هاور سطح ۲. جزئیات رفتار در الگوی انتخاب تاریخ.

۱۶چیپ رویداد و ردیف وظیفه

دو واحد نمایش داده تقویممحور — رنگ هر دو از تقویمِ والد می‌آید (--c).

کلیک روی هر دو ← دیالوگ پیش‌نمایش (نه ویرایش مستقیم) — الگوی کامل در بخش بعدی.