{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "vintage-button",
  "title": "Vintage Button",
  "author": "Visant Labs <visantsupply@gmail.com>",
  "description": "Botão de painel que afunda no clique.",
  "registryDependencies": [
    "@visant/vintage-theme",
    "utils"
  ],
  "files": [
    {
      "path": "registry/vintage/ui/vintage-button.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface VintageButtonProps {\n  label: string;\n  active?: boolean;\n  accent?: string;\n  onClick?: () => void;\n  className?: string;\n}\n\n/**\n * Botão de painel: capa de baquelite num poço do painel, lâmpada-piloto em cima.\n *\n * Antes a capa inteira virava laranja quando ativa — um disco de cor chapada\n * que não existe em equipamento nenhum e brigava com o resto do kit, onde o\n * aceso é sempre uma lâmpada pequena. Aqui o estado mora onde mora num rack:\n * no LED acima da capa, e na capa que fica travada um pouco mais funda.\n *\n * Três alturas, uma luz só (de cima): solta, travada (ativa) e apertada.\n */\nexport function VintageButton({\n  label,\n  active = false,\n  accent,\n  onClick,\n  className,\n}: VintageButtonProps) {\n  const [pressed, setPressed] = useState(false);\n\n  const lamp = accent || \"var(--vintage-light)\";\n  // Curso da capa em px: solta, travada, apertada.\n  const curso = pressed ? 3 : active ? 1.5 : 0;\n\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={active}\n      className={cn(\n        \"group relative inline-flex flex-col items-center gap-2 rounded-[var(--r-control,10px)] p-1.5 outline-none select-none\",\n        \"focus-visible:[box-shadow:var(--focus,0_0_0_2px_var(--vintage-value))]\",\n        className\n      )}\n      onPointerDown={() => setPressed(true)}\n      onPointerUp={() => setPressed(false)}\n      onPointerLeave={() => setPressed(false)}\n      onKeyDown={(e) => {\n        if (e.key === \" \" || e.key === \"Enter\") setPressed(true);\n      }}\n      onKeyUp={() => setPressed(false)}\n      onBlur={() => setPressed(false)}\n      onClick={onClick}\n      style={{ cursor: \"pointer\" }}\n    >\n      {/* Lâmpada-piloto: lente no aro, halo só quando acesa. */}\n      <span\n        aria-hidden\n        className=\"block h-2 w-2 rounded-full\"\n        style={{\n          background: active\n            ? `radial-gradient(circle at 50% 35%, color-mix(in srgb, ${lamp} 40%, white) 0%, ${lamp} 45%, color-mix(in srgb, ${lamp} 70%, black) 100%)`\n            : \"radial-gradient(circle at 50% 35%, var(--vintage-surface-4) 0%, var(--vintage-surface-2) 100%)\",\n          boxShadow: active\n            ? `0 0 0 1px var(--vintage-edge), 0 0 8px color-mix(in srgb, ${lamp} 70%, transparent)`\n            : \"0 0 0 1px var(--vintage-edge), inset 0 1px 1px rgba(0,0,0,0.6)\",\n          transition:\n            \"background var(--dur-fast,160ms) var(--ease-out,ease), box-shadow var(--dur-fast,160ms) var(--ease-out,ease)\",\n        }}\n      />\n\n      {/* O poço no painel: a capa mora dentro dele. */}\n      <span\n        className=\"relative block h-16 w-16 rounded-full\"\n        style={{\n          background: \"var(--vintage-surface-1)\",\n          boxShadow:\n            \"inset 0 2px 4px rgba(0,0,0,0.8), 0 1px 0 var(--vintage-lip)\",\n        }}\n      >\n        <span\n          className=\"absolute inset-[5px] flex items-center justify-center rounded-full\"\n          style={{\n            background:\n              \"radial-gradient(120% 90% at 50% 15%, var(--vintage-surface-4) 0%, var(--vintage-surface-3) 45%, var(--vintage-surface-2) 100%)\",\n            // A borda de baixo da capa é o que a faz parecer alta. Ela some\n            // conforme a capa afunda — é isso que o olho lê como curso.\n            boxShadow: `inset 0 1px 0 rgba(255,255,255,0.14), 0 ${4 - curso}px 0 var(--vintage-surface-1), 0 ${6 - curso}px ${8 - curso * 2}px rgba(0,0,0,0.55)`,\n            transform: `translateY(${curso}px)`,\n            transition:\n              \"transform var(--dur-press,120ms) var(--ease-out,ease), box-shadow var(--dur-press,120ms) var(--ease-out,ease)\",\n          }}\n        >\n          <span\n            className=\"font-vintage-mono text-[10px] font-semibold uppercase tracking-[0.16em]\"\n            style={{\n              color: active ? \"var(--vintage-label)\" : \"var(--vintage-text-muted)\",\n              textShadow: \"var(--vintage-engrave)\",\n              transition: \"color var(--dur-fast,160ms) var(--ease-out,ease)\",\n            }}\n          >\n            {label}\n          </span>\n        </span>\n      </span>\n    </button>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "uso": {
      "quando": "Botão de painel que afunda no clique, em app de áudio, synth ou ferramenta com cara de hardware",
      "evite": "Botão comum de produto ou landing: use o botão do tema; CTA de conversão, magnetic-cta"
    }
  },
  "categories": [
    "controles",
    "audio",
    "botao"
  ],
  "type": "registry:ui"
}