{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "radio",
    "type": "registry:component",
    "title": "Radio",
    "description": "Native radio with a custom ring and dot. Group options with a shared name and add optional helper text.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Forms",
        "layout": "stack"
    },
    "files": [
        {
            "path": "components/radio.html",
            "type": "registry:file",
            "target": "components/radio.html",
            "content": "<!-- Radio\n     Group radios with a shared name. Pair each with a label inside .dp-radio. -->\n\n<label class=\"dp-radio\">\n  <input class=\"dp-radio-input\" type=\"radio\" name=\"export\" checked />\n  <span>CSV</span>\n</label>\n\n<label class=\"dp-radio\">\n  <input class=\"dp-radio-input\" type=\"radio\" name=\"export\" />\n  <span>\n    JSON\n    <span class=\"dp-radio-text\">One object per record.</span>\n  </span>\n</label>\n\n<label class=\"dp-radio\">\n  <input class=\"dp-radio-input\" type=\"radio\" name=\"export\" disabled />\n  <span>Parquet</span>\n</label>\n"
        },
        {
            "path": "components/radio.css",
            "type": "registry:file",
            "target": "components/radio.css",
            "content": "/* Radio\n   Native radio styled with a custom ring and dot. Pair with a label inside\n   .dp-radio. Group radios with a shared name. Colour and type from tokens.css. */\n\n.dp-radio {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--dp-space-3);\n  font-size: var(--dp-text-base);\n  color: var(--dp-navy);\n  cursor: pointer;\n}\n\n.dp-radio-input {\n  appearance: none;\n  flex: none;\n  width: 1.125rem;\n  height: 1.125rem;\n  margin: 0;\n  background: var(--dp-white);\n  border: 1px solid var(--dp-border-neutral);\n  border-radius: var(--dp-radius-full);\n  cursor: pointer;\n  transition: border-color var(--dp-transition), box-shadow var(--dp-transition);\n}\n\n.dp-radio-input:hover {\n  border-color: var(--dp-blue-400);\n}\n\n.dp-radio-input:checked {\n  border-color: var(--dp-primary-bg);\n  border-width: 5px;\n}\n\n.dp-radio-input:focus-visible {\n  outline: none;\n  box-shadow: var(--dp-shadow-focus);\n}\n\n.dp-radio-input:disabled {\n  background-color: var(--dp-neutral-200);\n  border-color: var(--dp-neutral-400);\n  cursor: not-allowed;\n}\n\n.dp-radio:has(.dp-radio-input:disabled) {\n  color: var(--dp-text-subtle);\n  cursor: not-allowed;\n}\n\n.dp-radio-text {\n  display: block;\n  font-size: var(--dp-text-sm);\n  color: var(--dp-text-muted);\n}\n"
        }
    ]
}