رادیو گروه چیده‌شده (RadioGroupStacked)

معرفی

RadioGroupStacked یک «لیست متصل» از ردیف‌های رادیوی تمام‌عرض است (رادیوی radio-group-stacked واقعی سوپابیس). هر آیتم یک ردیف خط‌دار است؛ خط‌های مجاور روی هم جمع می‌شوند و گوشه‌های اول/آخر گرد می‌شوند، پس کل گروه مثل یک کنترل قطعه‌ای (segmented) خوانده می‌شود. این خانواده سه شکل دارد: Stacked (لیست متصل)، Card (کارت‌های کنار هم) و LargeItem (کارت بزرگ عمودی). همه‌شان از همان Radix radio پایه استفاده می‌کنند و حالت checked/hover/focus خنثی (foreground) دارند، نه برند — برند برای اقدامات اصلی رزرو است.

چه زمانی استفاده کنیم:

• برای انتخاب یک گزینه از فهرستی که هر گزینه عنوان + توضیح دارد (Stacked)
• وقتی گزینه‌ها آیکون/تصویر دارند و باید کنار هم دیده شوند (Card)
• برای انتخاب‌های مهم و کم‌تعداد با فضای بصری بزرگ (LargeItem)

چه زمانی استفاده نکنیم:

• برای گزینه‌های صرفاً متنی و کوتاه — از RadioGroup ساده استفاده کنید
• برای بیش از ۶ گزینه — صفحه شلوغ می‌شود، از Select استفاده کنید
• برای انتخاب چندتایی — از Checkbox یا MultiSelect استفاده کنید

استفاده

import { RadioGroupStacked, RadioGroupStackedItem } from '@partodata/ui'

export default function ReportFrequency() {
  return (
    <RadioGroupStacked defaultValue="weekly">
      <RadioGroupStackedItem value="daily" label="گزارش روزانه" description="هر روز صبح، خلاصه فعالیت روز قبل." />
      <RadioGroupStackedItem value="weekly" label="گزارش هفتگی" description="جمع‌بندی هفتگی عملکرد کمپین برند." />
      <RadioGroupStackedItem value="monthly" label="گزارش ماهانه" description="گزارش کامل ماهانه برای تیم برند." />
    </RadioGroupStacked>
  )
}

حالت‌ها و انواع

Stacked — لیست متصل

هر RadioGroupStackedItem یک ردیف تمام‌عرض با label و description اختیاری است. برای پنهان‌کردن نشانگر رادیو، showIndicator={false} بگذارید.

<RadioGroupStacked defaultValue="weekly">
  <RadioGroupStackedItem value="daily" label="گزارش روزانه" description="هر روز صبح، خلاصه فعالیت روز قبل." />
  <RadioGroupStackedItem value="weekly" label="گزارش هفتگی" description="جمع‌بندی هفتگی عملکرد کمپین برند." />
</RadioGroupStacked>

Card — کارت‌های کنار هم

RadioGroupCard گزینه‌ها را به‌صورت کارت‌های کنار هم (پیش‌فرض w-48) می‌چیند؛ برای گزینه‌هایی با آیکون/تصویر و یک برچسب کوتاه مناسب است.

import { RadioGroupCard, RadioGroupCardItem } from '@partodata/ui'
import { Instagram, Twitter } from 'lucide-react'
;<RadioGroupCard defaultValue="instagram" className="flex gap-3">
  <RadioGroupCardItem value="instagram" label="اینستاگرام">
    <Instagram className="size-5" />
  </RadioGroupCardItem>
  <RadioGroupCardItem value="twitter" label="توییتر / X">
    <Twitter className="size-5" />
  </RadioGroupCardItem>
</RadioGroupCard>

LargeItem — کارت بزرگ عمودی

RadioGroupLargeItem یک کارت بزرگ‌تر با تصویر بالای برچسب است؛ برای انتخاب‌های مهم و کم‌تعداد که باید برجسته باشند.

import { RadioGroupCard, RadioGroupLargeItem } from '@partodata/ui'
import { Rocket, Crown } from 'lucide-react'
;<RadioGroupCard defaultValue="pro" className="flex gap-4">
  <RadioGroupLargeItem value="starter" label="پلن پایه">
    <Rocket className="size-8" />
  </RadioGroupLargeItem>
  <RadioGroupLargeItem value="pro" label="پلن حرفه‌ای">
    <Crown className="size-8" />
  </RadioGroupLargeItem>
</RadioGroupCard>

راهنمای استفاده

جدول ویژگی‌ها

RadioGroupStacked

RadioGroupStackedItem

RadioGroupCardItem / RadioGroupLargeItem

دسترسی‌پذیری

• بر پایهٔ Radix RadioGroup ساخته شده: ناوبری با کلیدهای جهت‌دار (بالا/پایین)، انتخاب با Space، و مدیریت focus داخل گروه به‌صورت خودکار
• هر ردیف/کارت با کلیک و کیبورد قابل فعال‌سازی است و حلقهٔ focus مرئی (focus-visible:ring) دارد
• حالت checked علاوه بر رنگ، با نشانگر دایره‌ای و تغییر رنگ متن (data-[state=checked]:text-foreground) مشخص می‌شود تا وابسته به رنگ تنها نباشد
• گزینه‌های disabled با opacity-50 و cursor-not-allowed و صفت disabled برای صفحه‌خوان مشخص می‌شوند

کامپوننت‌های مرتبط

• RadioGroup — برای گزینه‌های متنی سادهٔ کم‌جا، از RadioGroup پایه استفاده کنید
• RadioCard — خانوادهٔ RadioCards برای کارت‌های رادیوی عنوان‌دار/توضیح‌دار با گرید؛ اگر به عنوان+توضیح در کارت نیاز دارید آن را بررسی کنید
• Select — برای فهرست بلند گزینه‌ها که فضای کارت را نمی‌طلبد، از Select استفاده کنید
• Switch — برای یک انتخاب دوحالته (روشن/خاموش)، از Switch استفاده کنید