{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "button",
    "type": "registry:component",
    "title": "Button",
    "description": "Clickable action with brand variants and three sizes. Set the look with data-variant (primary, cta, secondary, outline, ghost, danger) and the size with data-size.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Forms",
        "layout": "cluster"
    },
    "files": [
        {
            "path": "components/button.html",
            "type": "registry:file",
            "target": "components/button.html",
            "content": "<!-- Button\n     Variants: primary (default), cta, secondary, outline, ghost, danger, ai\n     Sizes: sm, default, lg  (set with data-size)\n     Use a <button> for actions and an <a> for navigation. -->\n\n<!-- Variants -->\n<button class=\"dp-btn\" type=\"button\">Primary</button>\n<button class=\"dp-btn\" type=\"button\" data-variant=\"cta\">Book a demo</button>\n<button class=\"dp-btn\" type=\"button\" data-variant=\"secondary\">Secondary</button>\n<button class=\"dp-btn\" type=\"button\" data-variant=\"outline\">Read more</button>\n<button class=\"dp-btn\" type=\"button\" data-variant=\"ghost\">Ghost</button>\n<button class=\"dp-btn\" type=\"button\" data-variant=\"danger\">Delete</button>\n<button class=\"dp-btn\" type=\"button\" data-variant=\"ai\">\n  Create with AI\n  <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 3l1.9 4.6L18.5 9l-4.6 1.9L12 15l-1.9-4.1L5.5 9l4.6-1.4z\"></path></svg>\n</button>\n\n<!-- Sizes -->\n<button class=\"dp-btn\" type=\"button\" data-size=\"sm\">Small</button>\n<button class=\"dp-btn\" type=\"button\">Default</button>\n<button class=\"dp-btn\" type=\"button\" data-size=\"lg\">Large</button>\n\n<!-- With a leading icon (inline SVG, no icon font) -->\n<button class=\"dp-btn\" type=\"button\" data-variant=\"cta\">\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n       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  Search\n</button>\n\n<!-- Disabled -->\n<button class=\"dp-btn\" type=\"button\" disabled>Disabled</button>\n\n<!-- As a link -->\n<a class=\"dp-btn\" data-variant=\"primary\" href=\"#\">Link button</a>\n"
        },
        {
            "path": "components/button.css",
            "type": "registry:file",
            "target": "components/button.css",
            "content": "/* Button\n   Variants are selected with data-variant, sizes with data-size.\n   All colour, radius and type come from tokens.css. */\n\n.dp-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dp-space-2);\n  font-family: var(--dp-font-sans);\n  font-weight: var(--dp-weight-bold);\n  font-size: var(--dp-text-base);\n  line-height: 1;\n  text-decoration: none;\n  white-space: nowrap;\n  border: 1px solid transparent;\n  border-radius: var(--dp-radius-xs);\n  padding: var(--dp-space-2) var(--dp-space-5);\n  cursor: pointer;\n  user-select: none;\n  transition: background-color var(--dp-transition),\n    border-color var(--dp-transition), color var(--dp-transition),\n    box-shadow var(--dp-transition);\n}\n\n.dp-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--dp-shadow-focus);\n}\n\n.dp-btn[disabled],\n.dp-btn[aria-disabled=\"true\"] {\n  opacity: 0.55;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Icons sit inline and scale with the text */\n.dp-btn svg {\n  width: 1.15em;\n  height: 1.15em;\n  flex: none;\n}\n\n/* ---- Sizes ----------------------------------------------------------- */\n.dp-btn[data-size=\"sm\"] {\n  font-size: var(--dp-text-sm);\n  padding: var(--dp-space-1) var(--dp-space-3);\n}\n\n.dp-btn[data-size=\"lg\"] {\n  font-size: var(--dp-text-lg);\n  padding: var(--dp-space-3) var(--dp-space-6);\n}\n\n/* ---- Variants -------------------------------------------------------- */\n/* primary (default): brand blue */\n.dp-btn,\n.dp-btn[data-variant=\"primary\"] {\n  background: var(--dp-primary-bg);\n  border-color: var(--dp-primary-border);\n  color: var(--dp-primary-text);\n}\n\n.dp-btn:hover,\n.dp-btn[data-variant=\"primary\"]:hover {\n  background: var(--dp-primary-bg-hover);\n  box-shadow: inset 0 1px 0.75px rgba(255, 255, 255, 0.12),\n    0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* cta: brand gold, navy text (the most prominent action) */\n.dp-btn[data-variant=\"cta\"] {\n  background: var(--dp-cta-bg);\n  border-color: var(--dp-cta-border);\n  color: var(--dp-cta-text);\n}\n\n.dp-btn[data-variant=\"cta\"]:hover {\n  background: var(--dp-cta-bg-hover);\n  box-shadow: inset 0 1px 0.75px rgba(255, 255, 255, 0.12),\n    0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* secondary: navy */\n.dp-btn[data-variant=\"secondary\"] {\n  background: var(--dp-secondary-bg);\n  border-color: var(--dp-secondary-border);\n  color: var(--dp-secondary-text);\n}\n\n.dp-btn[data-variant=\"secondary\"]:hover {\n  background: var(--dp-secondary-bg-hover);\n}\n\n/* outline: light surface, neutral border, navy text */\n.dp-btn[data-variant=\"outline\"] {\n  background: var(--dp-neutral-50);\n  border-color: var(--dp-border-neutral);\n  color: var(--dp-navy);\n}\n\n.dp-btn[data-variant=\"outline\"]:hover {\n  border-color: var(--dp-primary-bg);\n  color: var(--dp-primary-bg);\n}\n\n/* ghost: text only until hovered */\n.dp-btn[data-variant=\"ghost\"] {\n  background: transparent;\n  border-color: transparent;\n  color: var(--dp-navy);\n}\n\n.dp-btn[data-variant=\"ghost\"]:hover {\n  background: var(--dp-surface-soft);\n}\n\n/* ai: gradient action for AI features */\n.dp-btn[data-variant=\"ai\"] {\n  background: var(--dp-gradient-ai, linear-gradient(135deg, #8b5cf6, #3049dc));\n  border-color: transparent;\n  color: var(--dp-white);\n}\n\n.dp-btn[data-variant=\"ai\"]:hover {\n  filter: brightness(1.06);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n/* danger: destructive action */\n.dp-btn[data-variant=\"danger\"] {\n  background: var(--dp-danger);\n  border-color: var(--dp-danger);\n  color: var(--dp-white);\n}\n\n.dp-btn[data-variant=\"danger\"]:hover {\n  filter: brightness(0.93);\n}\n"
        }
    ]
}