{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "switch",
    "type": "registry:component",
    "title": "Switch",
    "description": "A toggle built from a native checkbox with a sliding track. Use for on and off settings.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Forms",
        "layout": "stack"
    },
    "files": [
        {
            "path": "components/switch.html",
            "type": "registry:file",
            "target": "components/switch.html",
            "content": "<!-- Switch\n     A toggle built from a native checkbox. Pair with a label inside .dp-switch. -->\n\n<label class=\"dp-switch\">\n  <input class=\"dp-switch-input\" type=\"checkbox\" checked />\n  <span>Live updates</span>\n</label>\n\n<label class=\"dp-switch\">\n  <input class=\"dp-switch-input\" type=\"checkbox\" />\n  <span>Email alerts</span>\n</label>\n\n<label class=\"dp-switch\">\n  <input class=\"dp-switch-input\" type=\"checkbox\" disabled />\n  <span>Beta features</span>\n</label>\n"
        },
        {
            "path": "components/switch.css",
            "type": "registry:file",
            "target": "components/switch.css",
            "content": "/* Switch\n   A toggle built from a native checkbox and a sliding track. Pair with a label\n   inside .dp-switch. All colour and motion come from tokens.css. */\n\n.dp-switch {\n  display: inline-flex;\n  align-items: center;\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-switch-input {\n  appearance: none;\n  position: relative;\n  flex: none;\n  width: 2.5rem;\n  height: 1.375rem;\n  margin: 0;\n  background: var(--dp-neutral-500);\n  border-radius: var(--dp-radius-full);\n  cursor: pointer;\n  transition: background-color var(--dp-transition);\n}\n\n.dp-switch-input::after {\n  content: \"\";\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 1.125rem;\n  height: 1.125rem;\n  background: var(--dp-white);\n  border-radius: var(--dp-radius-full);\n  box-shadow: var(--dp-shadow-sm);\n  transition: transform var(--dp-transition);\n}\n\n.dp-switch-input:checked {\n  background: var(--dp-primary-bg);\n}\n\n.dp-switch-input:checked::after {\n  transform: translateX(1.125rem);\n}\n\n.dp-switch-input:focus-visible {\n  outline: none;\n  box-shadow: var(--dp-shadow-focus);\n}\n\n.dp-switch-input:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.dp-switch:has(.dp-switch-input:disabled) {\n  color: var(--dp-text-subtle);\n  cursor: not-allowed;\n}\n"
        }
    ]
}