{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "segmented-control",
  "type": "registry:ui",
  "title": "SegmentedControl",
  "description": "انتخاب یکی از چند گزینهٔ کوتاه، مثل «فهرست / جدول / کارت»؛ روی رادیوی بومی با پیمایش ↑↓←→",
  "registryDependencies": [
    "https://kashi.sepantapouya.com/r/cx.json"
  ],
  "files": [
    {
      "path": "registry/kashi/SegmentedControl.tsx",
      "type": "registry:ui",
      "target": "components/kashi/SegmentedControl.tsx",
      "content": "\"use client\";\n\nimport { useId, useState, type ReactNode } from \"react\";\nimport { cx } from \"./cx\";\n\nexport interface SegmentedOption {\n  value: string;\n  label: ReactNode;\n  icon?: ReactNode;\n  disabled?: boolean;\n  /** نام دسترس‌پذیر وقتی label فقط آیکون است */\n  \"aria-label\"?: string;\n}\n\nexport interface SegmentedControlProps {\n  options: SegmentedOption[];\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /** نام گروه برای صفحه‌خوان (الزامی اگر برچسب دیداری ندارد) */\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  name?: string;\n  /** @default \"md\" */\n  size?: \"sm\" | \"md\";\n  /** تمام‌عرض با بخش‌های هم‌اندازه */\n  block?: boolean;\n  disabled?: boolean;\n  className?: string;\n}\n\n/** انتخاب یکی از چند گزینهٔ کوتاه، مثل «فهرست / جدول / کارت»؛ روی رادیوی بومی با پیمایش ↑↓←→ */\nexport function SegmentedControl({\n  options, value, defaultValue, onChange, name, size = \"md\", block, disabled, className,\n  \"aria-label\": ariaLabel, \"aria-labelledby\": labelledBy,\n}: SegmentedControlProps) {\n  const autoName = useId();\n  const [inner, setInner] = useState(defaultValue ?? options.find((o) => !o.disabled)?.value);\n  const current = value ?? inner;\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={labelledBy}\n      className={cx(\"k-segmented\", size === \"sm\" && \"k-segmented--sm\", block && \"k-segmented--block\", className)}\n    >\n      {options.map((o) => (\n        <label key={o.value} className=\"k-segmented__item\">\n          <input\n            type=\"radio\"\n            className=\"k-sr-only\"\n            name={name ?? autoName}\n            value={o.value}\n            checked={current === o.value}\n            disabled={disabled || o.disabled}\n            aria-label={o[\"aria-label\"]}\n            onChange={() => {\n              if (value === undefined) setInner(o.value);\n              onChange?.(o.value);\n            }}\n          />\n          {o.icon}\n          {o.label}\n        </label>\n      ))}\n    </div>\n  );\n}\n"
    }
  ]
}