سل‌های جدول داده (DataTableCells)

'use client'
import {
  DataTable,
  SparklineCell,
  TrendCell,
  StatusPulseCell,
  SentimentCell,
  ProgressCell,
} from '@parto-system-design/ui'
;<DataTable
  columns={[
    { id: 'name', header: 'نام', cell: (r) => r.name },
    {
      id: 'engagement',
      header: 'تعامل',
      cell: (r) => <SparklineCell data={r.history} value={r.eRate} suffix="٪" />,
    },
    {
      id: 'growth',
      header: 'رشد',
      cell: (r) => <TrendCell value={r.growthDelta} suffix="٪" />,
    },
    {
      id: 'status',
      header: 'وضعیت',
      cell: (r) => <StatusPulseCell status={r.status} label={r.statusLabel} />,
    },
    {
      id: 'sentiment',
      header: 'احساسات',
      cell: (r) => <SentimentCell data={r.sentimentBreakdown} />,
    },
    {
      id: 'progress',
      header: 'پیشرفت',
      cell: (r) => <ProgressCell value={r.progressPct} variant="success" />,
    },
  ]}
  data={rows}
/>

<SparklineCell
  data={[1.2, 1.5, 1.8, 2.1, 2.4]}
  value={2.4}
  suffix="٪"
  variant="area" // یا 'line' (پیش‌فرض) یا 'bars'
  width={64} // px
  height={18} // px
/>

<TrendCell value={12} suffix="٪" />        // ↑ ۱۲٪ (سبز)
<TrendCell value={-8} suffix="٪" />        // ↓ ۸٪ (قرمز)
<TrendCell value={-3} invert suffix="٪" /> // ↓ ۳٪ → سبز (چون نرخ خطا کمتر = بهتر)
<TrendCell value={0} />                    // ━ خنثی

<StatusPulseCell status="critical" label="بحرانی" />
<StatusPulseCell status="middle" />          // فقط dot، بدون label
<StatusPulseCell status="low" label="پایین" />

<SentimentCell
  data={{ positive: 50, negative: 20, neutral: 30 }}
  variant="stacked"   // یا 'bars' یا 'compact'
  width={80}
/>

<FlowCell
  data={{ 'pro-gov': 45, 'internal-critic': 25, 'external-opponent': 20, grey: 10 }}
  variant="stacked"
  width={96}
/>

<ProgressCell value={67} />                    // پیش‌فرض primary
<ProgressCell value={92} variant="success" />
<ProgressCell value={42} variant="warning" />
<ProgressCell value={67} showValue={false} /> // فقط بار، بدون متن

<StatDeltaCell value={1240} delta={12} valueSuffix="K" deltaSuffix="٪" />
// نمایش: ۱٬۲۴۰K   ↑ ۱۲٪

<StatDeltaCell value={500} />
// نمایش: ۵۰۰   (بدون delta)

<StatDeltaCell value={45} delta={-8} invertDelta />
// نمایش: ۴۵   ↑ ۸ (سبز چون invert)