{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "profilebutton",
  "type": "registry:component",
  "title": "ProfileButton",
  "description": "Componente Concorde ProfileButton — un solo archivo, ProfileButton.tsx.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ProfileButton.tsx",
      "type": "registry:file",
      "target": "components/ProfileButton.tsx",
      "content": "\"use client\";\n\n/**\n * ProfileButton — Generado por Concorde\n * Fuente: Figma VOYAGER · \"ProfileButton\" (Status=Default|Hover|Pressed)\n * Nodos: 1274:5029 (default) · 1274:3989 (hover) · 1287:5144 (pressed)\n * Sincronizado: 2026-06-12\n *\n * Botón de navegación a perfil: label morado + círculo con chevron.\n * Figma manda en lo visual (colores/dimensiones); Concorde manda en la interacción\n * (transición de relleno + lift en hover, reduced-motion).\n */\n\nimport type { JSX, MouseEventHandler, ReactNode } from \"react\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface ProfileButtonProps {\n  /** Label (default: \"Ir al Perfil\") */\n  children?: ReactNode;\n  /** Si se pasa, renderiza un <a> en vez de <button> */\n  href?: string;\n  onClick?: MouseEventHandler<HTMLElement>;\n  disabled?: boolean;\n  className?: string;\n  \"aria-label\"?: string;\n}\n\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\n\nconst STYLE_ID = \"concorde-profilebutton-styles\";\n\nconst PROFILEBUTTON_STYLES = `\n.pprofilebtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  padding: 4px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  text-decoration: none;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 20px;\n  white-space: nowrap;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* Label — default morado #3B1782 (Figma text fill) */\n.pprofilebtn__label {\n  color: #3b1782;\n  transition: color 0.2s ease;\n}\n\n/* Círculo 16px con chevron. color = color del chevron (currentColor) */\n.pprofilebtn__circle {\n  position: relative;\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n  border-radius: 9999px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  color: #ef852e;\n  transition:\n    background 0.2s ease,\n    color 0.2s ease,\n    box-shadow 0.25s ease,\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n/* Default: anillo gradiente naranja 1.5px (stroke #FF9C3B → #EF852E 40% → #BE3D00) — mask */\n.pprofilebtn__circle::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1.5px;\n  background: linear-gradient(135deg, #ff9c3b 0%, #ef852e 40%, #be3d00 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n  transition: opacity 0.2s ease;\n}\n.pprofilebtn__chevron {\n  position: relative;\n  z-index: 1;\n  display: block;\n}\n\n/* ── Hover: círculo RELLENO naranja + sombra, chevron blanco, lift ── */\n.pprofilebtn:hover:not(:disabled) .pprofilebtn__circle {\n  background: linear-gradient(90deg, #ff9639 0%, #ef852e 40%, #be3d00 100%);\n  color: #ffffff;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);\n  transform: translateY(-1px);\n}\n.pprofilebtn:hover:not(:disabled) .pprofilebtn__circle::before { opacity: 0; }\n\n/* ── Pressed: texto + chevron gris #99A1AF, círculo naranja oscuro #B25614 → #93420A ── */\n.pprofilebtn:active:not(:disabled) .pprofilebtn__label { color: #99a1af; }\n.pprofilebtn:active:not(:disabled) .pprofilebtn__circle {\n  background: linear-gradient(90deg, #b25614 0%, #93420a 100%);\n  color: #99a1af;\n  box-shadow: none;\n  transform: translateY(0);\n}\n.pprofilebtn:active:not(:disabled) .pprofilebtn__circle::before { opacity: 0; }\n\n/* ── Focus ── */\n.pprofilebtn:focus-visible {\n  outline: none;\n  border-radius: 8px;\n  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #8460e5;\n}\n\n/* ── Disabled ── */\n.pprofilebtn:disabled {\n  cursor: not-allowed;\n}\n.pprofilebtn:disabled .pprofilebtn__label { color: #99a1af; }\n.pprofilebtn:disabled .pprofilebtn__circle {\n  background: #e1e3e2;\n  color: #ffffff;\n}\n.pprofilebtn:disabled .pprofilebtn__circle::before { opacity: 0; }\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .pprofilebtn__label,\n  .pprofilebtn__circle,\n  .pprofilebtn__circle::before { transition: none; }\n  .pprofilebtn:hover:not(:disabled) .pprofilebtn__circle { transform: none; }\n}\n`;\n\nlet _stylesInjected = false;\n\n// ─── Chevron (M83 22 L87 19 L83 16 normalizado a viewBox 16×16, centro 8,8) ─────\n\nfunction Chevron(): JSX.Element {\n  return (\n    <svg\n      className=\"pprofilebtn__chevron\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M6 11L10 8L6 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function ProfileButton({\n  children = \"Ir al Perfil\",\n  href,\n  onClick,\n  disabled = false,\n  className = \"\",\n  \"aria-label\": ariaLabel,\n}: ProfileButtonProps): JSX.Element {\n  if (typeof document !== \"undefined\" && !_stylesInjected) {\n    if (!document.getElementById(STYLE_ID)) {\n      const el = document.createElement(\"style\");\n      el.id = STYLE_ID;\n      el.textContent = PROFILEBUTTON_STYLES;\n      document.head.appendChild(el);\n    }\n    _stylesInjected = true;\n  }\n\n  const classes = [\"pprofilebtn\", className].filter(Boolean).join(\" \");\n\n  const inner = (\n    <>\n      <span className=\"pprofilebtn__label\">{children}</span>\n      <span className=\"pprofilebtn__circle\" aria-hidden=\"true\">\n        <Chevron />\n      </span>\n    </>\n  );\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: PROFILEBUTTON_STYLES }} />\n      {href && !disabled ? (\n        <a className={classes} href={href} onClick={onClick} aria-label={ariaLabel}>\n          {inner}\n        </a>\n      ) : (\n        <button type=\"button\" className={classes} onClick={onClick} disabled={disabled} aria-label={ariaLabel}>\n          {inner}\n        </button>\n      )}\n    </>\n  );\n}\n"
    }
  ]
}