{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-badge-19",
  "description": "Selectable badge with checkbox",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@coss/badge",
    "@coss/checkbox"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-badge-19.tsx",
      "content": "\"use client\";\n\nimport { CheckIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\n\nexport default function Particle() {\n  const id = useId();\n  return (\n    <Badge className=\"relative outline-none has-focus-visible:border-ring has-data-[state=unchecked]:bg-muted has-data-[state=unchecked]:text-muted-foreground has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\">\n      <Checkbox\n        className=\"peer sr-only after:absolute after:inset-0\"\n        defaultChecked\n        id={id}\n      />\n      <CheckIcon\n        aria-hidden=\"true\"\n        className=\"hidden peer-data-[state=checked]:block\"\n      />\n      <label\n        className=\"cursor-pointer select-none after:absolute after:inset-0\"\n        htmlFor={id}\n      >\n        Selectable\n      </label>\n    </Badge>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "categories": [
    "badge",
    "checkbox"
  ],
  "type": "registry:block"
}