{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "input",
    "type": "registry:component",
    "title": "Input",
    "description": "Labelled text field with optional hint, error text, sizes and a leading-icon group. Mark an invalid field with aria-invalid.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Forms",
        "layout": "form"
    },
    "files": [
        {
            "path": "components/input.html",
            "type": "registry:file",
            "target": "components/input.html",
            "content": "<!-- Input\n     Wrap a label, the input and any hint or error in .dp-field.\n     Sizes: sm, default, lg (data-size on the input).\n     Invalid state: aria-invalid=\"true\" on the input. -->\n\n<!-- Default with hint -->\n<div class=\"dp-field\">\n  <label class=\"dp-label\" for=\"company\">Company name</label>\n  <input class=\"dp-input\" id=\"company\" type=\"text\" placeholder=\"Acme B.V.\" />\n  <span class=\"dp-hint\">Use the registered legal name.</span>\n</div>\n\n<!-- Optional field -->\n<div class=\"dp-field\">\n  <label class=\"dp-label\" data-optional for=\"vat\">VAT number</label>\n  <input class=\"dp-input\" id=\"vat\" type=\"text\" placeholder=\"NL000000000B00\" />\n</div>\n\n<!-- Invalid -->\n<div class=\"dp-field\">\n  <label class=\"dp-label\" for=\"email\">Email address</label>\n  <input class=\"dp-input\" id=\"email\" type=\"email\" value=\"not-an-email\"\n         aria-invalid=\"true\" aria-describedby=\"email-error\" />\n  <span class=\"dp-error\" id=\"email-error\">Enter a valid email address.</span>\n</div>\n\n<!-- Disabled -->\n<div class=\"dp-field\">\n  <label class=\"dp-label\" for=\"account\">Account ID</label>\n  <input class=\"dp-input\" id=\"account\" type=\"text\" value=\"DP-49210\" disabled />\n</div>\n\n<!-- Search with a leading icon -->\n<div class=\"dp-field\">\n  <label class=\"dp-label\" for=\"search\">Search domains</label>\n  <div class=\"dp-input-group\">\n    <svg class=\"dp-input-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n         stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\"></circle>\n      <path d=\"m21 21-4.3-4.3\"></path>\n    </svg>\n    <input class=\"dp-input\" id=\"search\" type=\"search\" placeholder=\"example.com\" />\n  </div>\n</div>\n\n<!-- Sizes -->\n<div class=\"dp-field\">\n  <label class=\"dp-label\" for=\"small\">Small</label>\n  <input class=\"dp-input\" id=\"small\" type=\"text\" data-size=\"sm\" placeholder=\"Small field\" />\n</div>\n<div class=\"dp-field\">\n  <label class=\"dp-label\" for=\"large\">Large</label>\n  <input class=\"dp-input\" id=\"large\" type=\"text\" data-size=\"lg\" placeholder=\"Large field\" />\n</div>\n"
        },
        {
            "path": "components/input.css",
            "type": "registry:file",
            "target": "components/input.css",
            "content": "/* Input\n   A labelled text field with optional hint and error text.\n   Sizes are set with data-size on the input. Mark an invalid field with\n   aria-invalid=\"true\". All colour, radius and type come from tokens.css. */\n\n.dp-field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dp-space-2);\n}\n\n.dp-label {\n  font-size: var(--dp-text-sm);\n  font-weight: var(--dp-weight-semibold);\n  color: var(--dp-navy);\n}\n\n.dp-label[data-optional]::after {\n  content: \" (optional)\";\n  font-weight: var(--dp-weight-regular);\n  color: var(--dp-text-subtle);\n}\n\n.dp-input {\n  width: 100%;\n  font-family: var(--dp-font-sans);\n  font-size: var(--dp-text-base);\n  color: var(--dp-navy);\n  background: var(--dp-white);\n  border: 1px solid var(--dp-border-neutral);\n  border-radius: var(--dp-radius-xs);\n  padding: var(--dp-space-2) var(--dp-space-3);\n  height: 2.5rem;\n  transition: border-color var(--dp-transition), box-shadow var(--dp-transition);\n}\n\n.dp-input::placeholder {\n  color: var(--dp-text-subtle);\n}\n\n.dp-input:hover {\n  border-color: var(--dp-blue-400);\n}\n\n.dp-input:focus {\n  outline: none;\n  border-color: var(--dp-primary-bg);\n  box-shadow: var(--dp-shadow-focus);\n}\n\n.dp-input:disabled {\n  background: var(--dp-neutral-200);\n  color: var(--dp-text-subtle);\n  cursor: not-allowed;\n}\n\n.dp-input[aria-invalid=\"true\"] {\n  border-color: var(--dp-danger);\n}\n\n.dp-input[aria-invalid=\"true\"]:focus {\n  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);\n}\n\n/* ---- Sizes ----------------------------------------------------------- */\n.dp-input[data-size=\"sm\"] {\n  height: 2.125rem;\n  font-size: var(--dp-text-sm);\n}\n\n.dp-input[data-size=\"lg\"] {\n  height: 3rem;\n  font-size: var(--dp-text-lg);\n}\n\n/* ---- Hint and error text -------------------------------------------- */\n.dp-hint {\n  font-size: var(--dp-text-sm);\n  color: var(--dp-text-subtle);\n}\n\n.dp-error {\n  font-size: var(--dp-text-sm);\n  color: var(--dp-danger);\n}\n\n/* ---- Input with a leading icon (e.g. search) ------------------------ */\n.dp-input-group {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.dp-input-group .dp-input-icon {\n  position: absolute;\n  left: var(--dp-space-3);\n  width: 1.15rem;\n  height: 1.15rem;\n  color: var(--dp-text-subtle);\n  pointer-events: none;\n}\n\n.dp-input-group .dp-input {\n  padding-left: calc(var(--dp-space-3) * 2 + 1.15rem);\n}\n"
        }
    ]
}