{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-radio-group-6",
  "description": "Theme selector with image cards",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@coss/field",
    "@coss/fieldset",
    "@coss/radio-group"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-radio-group-6.tsx",
      "content": "\"use client\";\n\nimport { Field, FieldItem, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\";\n\nconst items = [\n  { label: \"System\", value: \"system\" },\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n] as const;\n\nexport default function Particle() {\n  return (\n    <Field\n      className=\"gap-4\"\n      name=\"theme\"\n      render={(props) => <Fieldset {...props} />}\n    >\n      <FieldsetLegend className=\"font-medium text-foreground text-sm leading-none\">\n        Choose a theme\n      </FieldsetLegend>\n      <RadioGroup className=\"flex-row gap-4\" defaultValue=\"system\">\n        {items.map((item) => (\n          <FieldItem key={item.value}>\n            <FieldLabel className=\"cursor-pointer flex-col\">\n              <Radio className=\"peer sr-only absolute\" value={item.value} />\n              <span className=\"relative block h-[70px] w-[88px] overflow-hidden rounded-lg not-peer-data-checked:opacity-80 shadow-xs transition-shadow peer-data-disabled:cursor-not-allowed peer-data-disabled:opacity-64 peer-data-checked:ring-2 peer-data-checked:ring-primary/48 peer-data-checked:ring-offset-1 peer-data-checked:ring-offset-background\">\n                {themePreviews[item.value]}\n              </span>\n              <span className=\"not-peer-data-checked:text-muted-foreground/70\">\n                {item.label}\n              </span>\n            </FieldLabel>\n          </FieldItem>\n        ))}\n      </RadioGroup>\n    </Field>\n  );\n}\n\nconst themePreviews = {\n  dark: (\n    <svg\n      aria-hidden\n      className=\"size-full\"\n      fill=\"none\"\n      viewBox=\"0 0 88 70\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path className=\"fill-neutral-900\" d=\"M0 0h88v70H0z\" />\n      <path\n        className=\"fill-neutral-800 shadow-sm\"\n        d=\"M10 12a4 4 0 0 1 4-4h74v62H10V12Z\"\n      />\n      <circle className=\"fill-neutral-600\" cx=\"28\" cy=\"26\" r=\"8\" />\n      <rect\n        className=\"fill-neutral-700\"\n        height=\"4\"\n        rx=\"2\"\n        width=\"58\"\n        x=\"20\"\n        y=\"42\"\n      />\n      <rect\n        className=\"fill-neutral-700\"\n        height=\"4\"\n        rx=\"2\"\n        width=\"58\"\n        x=\"20\"\n        y=\"49\"\n      />\n      <rect\n        className=\"fill-neutral-700\"\n        height=\"4\"\n        rx=\"2\"\n        width=\"29\"\n        x=\"20\"\n        y=\"56\"\n      />\n    </svg>\n  ),\n  light: (\n    <svg\n      aria-hidden\n      className=\"size-full\"\n      fill=\"none\"\n      viewBox=\"0 0 88 70\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path className=\"fill-neutral-200\" d=\"M0 0h88v70H0z\" />\n      <path\n        className=\"fill-white shadow-sm\"\n        d=\"M10 12a4 4 0 0 1 4-4h74v62H10V12Z\"\n      />\n      <circle className=\"fill-neutral-300\" cx=\"28\" cy=\"26\" r=\"8\" />\n      <rect\n        className=\"fill-neutral-200\"\n        height=\"4\"\n        rx=\"2\"\n        width=\"58\"\n        x=\"20\"\n        y=\"42\"\n      />\n      <rect\n        className=\"fill-neutral-200\"\n        height=\"4\"\n        rx=\"2\"\n        width=\"58\"\n        x=\"20\"\n        y=\"49\"\n      />\n      <rect\n        className=\"fill-neutral-200\"\n        height=\"4\"\n        rx=\"2\"\n        width=\"29\"\n        x=\"20\"\n        y=\"56\"\n      />\n    </svg>\n  ),\n  system: (\n    <svg\n      aria-hidden\n      className=\"size-full\"\n      fill=\"none\"\n      viewBox=\"0 0 88 70\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path className=\"fill-neutral-200\" d=\"M0 0h44v70H0z\" />\n      <path className=\"fill-neutral-900\" d=\"M44 0h44v70H44z\" />\n      <path\n        className=\"fill-white shadow-sm\"\n        d=\"M10 12a4 4 0 0 1 4-4h30v62H10V12Z\"\n      />\n      <circle className=\"fill-neutral-300\" cx=\"28\" cy=\"26\" r=\"8\" />\n      <path\n        className=\"fill-neutral-200\"\n        d=\"M20 44a2 2 0 0 1 2-2h22v4H22a2 2 0 0 1-2-2ZM20 51a2 2 0 0 1 2-2h22v4H22a2 2 0 0 1-2-2ZM20 58a2 2 0 0 1 2-2h22v4H22a2 2 0 0 1-2-2Z\"\n      />\n      <path\n        className=\"fill-neutral-800 shadow-sm\"\n        d=\"M54 12a4 4 0 0 1 4-4h30v62H54V12Z\"\n      />\n      <circle className=\"fill-neutral-600\" cx=\"72\" cy=\"26\" r=\"8\" />\n      <path\n        className=\"fill-neutral-700\"\n        d=\"M64 44a2 2 0 0 1 2-2h22v4H66a2 2 0 0 1-2-2ZM64 51a2 2 0 0 1 2-2h22v4H66a2 2 0 0 1-2-2ZM64 58a2 2 0 0 1 2-2h22v4H66a2 2 0 0 1-2-2Z\"\n      />\n    </svg>\n  ),\n} as const;\n",
      "type": "registry:block"
    }
  ],
  "meta": {
    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-[320px]"
  },
  "categories": [
    "radio group",
    "form"
  ],
  "type": "registry:block"
}