اینتراکشن‌ها

هر کنترلی که کاربر لمسش می‌کند یک پراپ interaction دارد که واکنشش به فشردن و هاور را تعیین می‌کند. پیش‌فرض‌ها آرام‌اند؛ هر محصول بسته به لحن و مخاطبش برای هر کامپوننت واکنش مناسب را انتخاب می‌کند. نام مقدارها در همهٔ کامپوننت‌ها یک معنی دارد: press یعنی فشردن، pop یعنی ظاهر شدن با جهش، peek یعنی پیش‌نمایش روی هاور.

اصول

فقط روی کنترلِ قابل‌تغییر

کامپوننت disabled، readOnly یا در حال بارگذاری هیچ واکنشی نشان نمی‌دهد؛ واکنش یعنی «این کار می‌کند».

بدون شفافیت

ظاهر و پنهان شدن با scale و جابه‌جایی است و همهٔ رنگ‌ها توکن توپُرند؛ هیچ اینتراکشنی opacity ندارد.

احترام به reduced-motion

اگر کاربر در سیستم‌عامل «کاهش حرکت» را روشن کرده باشد، همه بدون انیمیشن عوض می‌شوند.

هاور با کیبورد هم

هر پیش‌نمایشی که روی هاور دیده می‌شود (peek و hint) با فوکوس کیبورد هم دیده می‌شود.

راست‌به‌چپ از اول

جهت لغزش، کش‌آمدن، فلش و باریکه‌ها با dir صفحه برمی‌گردد؛ چیزی برای RTL جدا نوشته نمی‌شود.

یک بار روی گروه

CheckboxGroup، RadioGroup، ToggleGroup و Tabs مقدار را به فرزندان می‌دهند تا یک فرم یکدست بماند.

Switch

پیش‌فرض: slide

labels جدا از interaction است و با همه ترکیب می‌شود.

slide

فقط لغزش دسته و تغییر رنگ ریل.

کِی: فهرست‌های بلند تنظیمات که آرامش بصری مهم‌تر است.

stretch

دسته هنگام فشردن به سمت مقصد کش می‌آید و بعد می‌لغزد.

کِی: تنظیمات اصلی که باید حس فیزیکی و قطعی داشته باشند، مثل حالت پرواز.

peek

روی هاور دسته کمی جلو می‌رود و باریکه‌ای از رنگ حالت بعدی دیده می‌شود.

کِی: جایی که کاربر قبل از کلیک باید بفهمد کلید چه می‌کند؛ مثلاً اولین تجربهٔ کاربر.

morph

علامت داخل دسته از ○ (خاموش) به | (روشن) تغییر شکل می‌دهد.

کِی: وقتی وضعیت باید بدون اتکا به رنگ هم خوانا باشد (دسترس‌پذیری، کم‌بینی رنگ).

hint

روی هاور، فلشی در ریل جهت حرکت دسته را نشان می‌دهد.

کِی: کلیدهای کم‌تکرار یا مخاطب تازه‌کار؛ در راست‌به‌چپ جهت فلش خودکار برمی‌گردد.

Checkbox

پیش‌فرض: none

روی CheckboxGroup یک بار بدهید تا به همهٔ گزینه‌ها برسد. دموها خودشان روشن و خاموش می‌شوند؛ none را مبنای مقایسه بگیرید. پیش‌نمایش peek را با بردن نشانگر روی چک‌باکس خاموش ببینید.

none

تیک بی‌درنگ ظاهر و پنهان می‌شود.

کِی: جدول‌های پرتراکم و فهرست‌های خیلی بلند.

press

چک‌باکس هنگام فشردن تا ۸۲٪ کوچک می‌شود؛ تیک بی‌حرکت است.

کِی: فرم‌های طولانی؛ بازخورد لمس هست ولی چشم را خسته نمی‌کند.

pop

press و تیک با چرخش و جهش ظاهر می‌شود و خود جعبه هم یک ضربهٔ کوچک می‌خورد.

کِی: انتخابی که باید دیده شود، مثل پذیرفتن قوانین یا افزودن به فهرست.

peek

pop و روی هاور تیکِ کم‌رنگ پیش‌نمایش می‌شود.

کِی: فهرست‌های انتخاب چندتایی که کاربر باید بداند کدام ردیف را می‌زند.

draw

press و تیک مثل نوشتن با قلم از ابتدا تا انتها کشیده و موقع خاموش شدن پاک می‌شود.

کِی: فهرست کارها و مراحل؛ حس «انجام شد» می‌دهد.

Radio Group

پیش‌فرض: none

معمولاً روی RadioGroup داده می‌شود؛ هر گزینه می‌تواند جداگانه عوضش کند.

none

نقطه بی‌درنگ جابه‌جا می‌شود.

کِی: فرم‌های فشرده.

press

گزینه هنگام فشردن تا ۸۲٪ کوچک می‌شود.

کِی: فرم‌های عادی.

pop

press و نقطه با جهش ظاهر می‌شود و دایره یک ضربهٔ کوچک می‌خورد.

کِی: انتخاب پلن یا روش ارسال که تصمیم مهمی است.

peek

pop و روی هاور نقطهٔ کم‌رنگ پیش‌نمایش می‌شود.

کِی: گزینه‌های نزدیک به هم که کاربر قبل از کلیک باید مطمئن شود.

Tabs

پیش‌فرض: none

روی خود Tabs داده می‌شود و به همهٔ برگه‌ها می‌رسد. slide و stretch شامل press هم هستند. دموها خودشان برگه را عوض می‌کنند تا فرق حرکت کنار هم دیده شود؛ با اولین کلیک می‌ایستند.

none

پس‌زمینهٔ برگهٔ فعال بی‌درنگ جابه‌جا می‌شود.

کِی: مبنای مقایسه؛ برگه‌هایی که خیلی زیاد عوض می‌شوند.

press

برگه هنگام فشردن کمی کوچک می‌شود.

کِی: برگه‌های زیاد یا اسکرول‌شونده که حرکت قرص شلوغشان می‌کند.

slide

یک قرص واحد از برگهٔ قبلی تا برگهٔ جدید می‌لغزد.

کِی: ناوبری اصلی صفحه؛ کاربر می‌بیند از کجا به کجا رفت.

stretch

قرص کش‌دار جابه‌جا می‌شود؛ لبهٔ جلو اول می‌رود و لبهٔ عقب دنبالش می‌آید.

کِی: فیلترهای کوتاه و سگمنت‌ها در محصولات پرانرژی؛ مسیر حرکت پررنگ‌تر دیده می‌شود.

Button، Toggle و ToggleGroup

پیش‌فرض: none

ToggleGroup مقدار را به همهٔ دکمه‌هایش می‌دهد. Button در هر چهار فریم‌ورک این پراپ را دارد.

press

دکمه هنگام فشردن کمی کوچک می‌شود تا کلیک حس فیزیکی داشته باشد.

کِی: دکمهٔ اصلی صفحه، دکمه‌های نوار ابزار و هر عملی که زیاد تکرار می‌شود.

استفاده

مقدار را روی خود کامپوننت یا روی گروهش بدهید. مقدارهای مجاز هر کامپوننت در جدول پراپ‌های صفحهٔ خودش و در خروجی MCP دیگ آمده است.

settings.tsx
<Switch interaction="stretch" />

<CheckboxGroup interaction="pop">
  <Checkbox value="sms" />
  <Checkbox value="email" />
</CheckboxGroup>

<Tabs defaultValue="all" interaction="slide">…</Tabs>

<Button interaction="press">ثبت سفارش</Button>

زیر کاپوت

هر کامپوننت مقدار را روی ویژگی data-interaction می‌گذارد و همهٔ واکنش‌ها با کلاس‌های Tailwind روی همین ویژگی ساخته می‌شوند. نوع‌ها، منحنی‌های حرکت و کلاس‌های مشترک در lib/primitives/interaction.ts هستند؛ نسخه‌های Vue، Svelte و Angular هم با همان ویژگی و همان کلاس‌ها هم‌رفتار می‌شوند.

button
/* press روی دکمه، در هر چهار فریم‌ورک یکسان */
motion-safe:data-[interaction=press]:active:scale-[0.96]