{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "checkbox",
    "type": "registry:component",
    "title": "Checkbox",
    "description": "Native checkbox with a custom box and tick. Supports checked, indeterminate and disabled states, with optional helper text.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Forms",
        "layout": "stack"
    },
    "files": [
        {
            "path": "components/checkbox.html",
            "type": "registry:file",
            "target": "components/checkbox.html",
            "content": "<!-- Checkbox\n     Pair a native checkbox with a label inside .dp-check.\n     Use the indeterminate property (set in JS) for a partial state. -->\n\n<label class=\"dp-check\">\n  <input class=\"dp-checkbox\" type=\"checkbox\" checked />\n  <span>Include subdomains</span>\n</label>\n\n<label class=\"dp-check\">\n  <input class=\"dp-checkbox\" type=\"checkbox\" />\n  <span>\n    Refresh monthly\n    <span class=\"dp-check-text\">Re-run this query on the first of each month.</span>\n  </span>\n</label>\n\n<label class=\"dp-check\">\n  <input class=\"dp-checkbox\" type=\"checkbox\" disabled checked />\n  <span>Locked option</span>\n</label>\n"
        },
        {
            "path": "components/checkbox.css",
            "type": "registry:file",
            "target": "components/checkbox.css",
            "content": "/* Checkbox\n   Native checkbox styled with a custom box and tick. Pair with a label inside\n   .dp-check. All colour, radius and type come from tokens.css. */\n\n.dp-check {\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-checkbox {\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-xs);\n  cursor: pointer;\n  transition: background-color var(--dp-transition),\n    border-color var(--dp-transition), box-shadow var(--dp-transition);\n}\n\n.dp-checkbox:hover {\n  border-color: var(--dp-blue-400);\n}\n\n.dp-checkbox:checked,\n.dp-checkbox:indeterminate {\n  background-color: var(--dp-primary-bg);\n  border-color: var(--dp-primary-bg);\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n.dp-checkbox:checked {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\");\n}\n\n.dp-checkbox:indeterminate {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E\");\n}\n\n.dp-checkbox:focus-visible {\n  outline: none;\n  box-shadow: var(--dp-shadow-focus);\n}\n\n.dp-checkbox:disabled {\n  background-color: var(--dp-neutral-200);\n  border-color: var(--dp-neutral-400);\n  cursor: not-allowed;\n}\n\n.dp-check:has(.dp-checkbox:disabled) {\n  color: var(--dp-text-subtle);\n  cursor: not-allowed;\n}\n\n/* Optional helper text under the label */\n.dp-check-text {\n  display: block;\n  font-size: var(--dp-text-sm);\n  color: var(--dp-text-muted);\n}\n"
        }
    ]
}