بطاقة إحصائية

نظرة عامة

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

استخدامات متعددة

نفس البطاقة محايدة على لوحة الطلبات، وملوّنة كمداخل تصنيف. الأرقام أبطال.

التركيب

كل خاصية من طبقة أساس: التعبئة (الألوان)، والشكل (الاستدارة · control.soft)، والحشو والفجوة (المسافات)، والتسمية والرقم (الطباعة)، والأيقونة والنص (الألوان).

السلوك

البطاقة الإحصائية عنصر عرض في الأساس؛ محايدة على لوحة المعلومات فلا تركيز ولا تحويم ولا حلقة تركيز. حين تُستخدم كمدخل تصنيف قابل للنقر يصبح الغلاف بأكمله هدف اللمس، فتغدو قابلة للتركيز بلوحة المفاتيح وتُفعّل بمفتاحي Enter وSpace مع حلقة تركيز واضحة، وتتبدّل تعبئتها تبدّلا خفيفا عبر رموز الحركة (feedback) عند التحويم والضغط. التسمية النصية تُنطق دائما مع الرقم فلا يعتمد المعنى على اللون وحده.

افعل ولا تفعل

إمكانية الوصول

• اللون ليس الحامل الوحيد للمعنى؛ التسمية النصية تصف المقياس دائما.
• الرقم والتسمية يحقّقان تباين النص المطلوب على تعبئتهما.

الشيفرة

البطاقة الإحصائية تُستورد من حزمة المكوّنات، وتُنسّق بالكامل من الرموز الدلالية. الاستخدام في React أولا، ثم الجزء الجوهري من تنفيذها: خريطة النغمات المرتبطة بالرموز والغلاف الذي يستهلكها.

import { StatCard } from "@mercato/components";

<StatCard icon="inventory_2" label="طلبات المذاخر" value="145" sub="112,309 IRD" />
<StatCard icon="check_circle" label="تم التسليم" value="4" sub="22,567 IRD" />
<StatCard icon="star" label="قائمة النواقص" value="45" tone="warning" />

// Per-tone token map. Intent tones are theme-aware via the Color layer.
const TONES = {
  neutral: { bg: "var(--color-bg-base-section)", label: "var(--color-fg-base-secondary)", num: "var(--color-fg-base-primary)" },
  warning: { bg: "var(--color-bg-intent-warning-subtle)", label: "var(--color-fg-intent-warning)", num: "var(--color-fg-intent-warning)" },
  // ...info / positive / negative / accent
};

const t = TONES[tone];

<div
  className="flex items-center justify-between"
  style={{
    gap: "var(--spacing-inline-md)",
    padding: "var(--spacing-inset-xs) var(--spacing-inset-sm)",
    borderRadius: "var(--shape-control-soft)",
    backgroundColor: t.bg,
  }}
>
  <span style={{ ...role("caption", "sm", "strong"), color: t.label }}>{label}</span>
  <span style={{ ...role("title", "sm", "strong"), color: t.num }}>{value}</span>
  <span className="material-symbol" style={{ color: t.label }}>{icon}</span>
</div>

لا تحمل البطاقة قيمة لون أو استدارة أو حجم خط مباشرة: تبديل الوضع الداكن أو إعادة العلامة يسري تلقائيا لأن كل شيء يمرّ عبر الرموز.

مكوّنات ذات صلة