مؤشر الحالة (Status Indicator)

يعرض مكوّن مؤشر الحالة (Status Indicator) نقطة لحضور الشخص: متصل أو بعيد أو مشغول أو غير متصل، مع اسم يقرؤه قارئ الشاشة، فلا يعتمد على اللون وحده.

التثبيت

bash

npx @smicolon/cli init
npx @smicolon/cli add status-indicator

معاينة

الأنماط (variant)

تحدد الخاصية status اللون: لون النجاح للمتصل، ولون التحذير للبعيد، ولون الخطر للمشغول، ولون باهت لغير المتصل.

متصل

بعيد

مشغول

غير متصل

الأحجام

النقطة 8px بحلقة 2px، أو 4px بحلقة 1px لأصغر صورة رمزية. الحلقة بلون خلفية الصفحة وتُرسم خارج النقطة، فلا تغيّر حجمها أبدًا.

إتاحة الوصول (accessibility)

اللون وحده لا يكفي لبيان الحالة، لذلك تحمل كل نقطة نصًا مخفيًا: «متصل» أو «بعيد» أو «مشغول» أو «غير متصل»، أو «Online» أو «Away» أو «Busy» أو «Offline» حين تكون أقرب قيمة لـ lang هي الإنجليزية. ويتبع النص تغيير اللغة دون إعادة تحميل.
مرّر label لسياق أوضح، مثل «ليلى متصلة».
إذا كانت الحالة مكتوبة بجانب النقطة، فأخفِ النقطة عن قارئ الشاشة بـ aria-hidden حتى لا تُعلن مرتين.
النقطة دائرة، فلا اتجاه لها. يحدد العنصر الأب موضعها، ويثبّتها مكوّن صورة رمزية (Avatar) في زاوية النهاية.

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`status`	`"online" \| "away" \| "busy" \| "offline"`	`"online"`	الحالة التي تُعرض.
`size`	`"8" \| "4"`	`"8"`	حجم النقطة بالبكسل.
`label`	`string`	لا يوجد	الاسم الذي يقرؤه قارئ الشاشة، ويتبع لغة الصفحة افتراضيًا.
`className`	`string`	لا يوجد	أصناف (class) إضافية للمكوّن.

الاستخدام

صُمّمت النقطة لتوضع على صورة رمزية، لا منفردةً فوق سطح ملوّن.

tsx

import { StatusIndicator } from "@/components/ui/status-indicator"

<StatusIndicator status="online" />
<StatusIndicator status="busy" size="4" />

// سياق أوضح لقارئ الشاشة
<StatusIndicator status="away" label={`${user.name} بعيد الآن`} />