{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "likebutton",
  "type": "registry:component",
  "title": "LikeButton",
  "description": "Componente Concorde LikeButton — un solo archivo, LikeButton.tsx.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/LikeButton.tsx",
      "type": "registry:file",
      "target": "components/LikeButton.tsx",
      "content": "\"use client\";\r\n\r\n/**\r\n * LikeButton — Generado por Concorde\r\n * Fuente: Figma VOYAGER Design System · node 1119:11379\r\n * Preview: https://voyager-ds.vercel.app/preview/components/pase1\r\n * Generado: 2026-05-28 (revisado con Figma)\r\n * EDITAR LIBREMENTE después de generar\r\n */\r\n\r\nimport { forwardRef, useState, useCallback } from \"react\";\r\nimport type { ButtonHTMLAttributes, JSX, MouseEvent } from \"react\";\r\n\r\n// ─── Types ────────────────────────────────────────────────────────────────────\r\n\r\nexport type LikeButtonSize = \"sm\" | \"md\" | \"lg\";\r\n\r\n/**\r\n * Hereda los atributos nativos de <button> (type, name, aria-*, data-*, style…)\r\n * salvo onChange, que aquí entrega el booleano de estado activo.\r\n */\r\nexport interface LikeButtonProps\r\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\r\n  /** Tamaño: sm=24px · md=32px · lg=40px */\r\n  size?: LikeButtonSize;\r\n  /** Estado activo controlado externamente */\r\n  active?: boolean;\r\n  /** Estado activo inicial (modo no controlado) */\r\n  defaultActive?: boolean;\r\n  /** Muestra skeleton de carga */\r\n  skeleton?: boolean;\r\n  /** Callback al alternar el like */\r\n  onChange?: (active: boolean) => void;\r\n}\r\n\r\n// ─── Tokens de tamaño — fuente: Figma node 1119:11379 ─────────────────────────\r\n\r\n// icon/strokeW exactos de los SVG exports (Size=Small/Medium/Large, State=Default)\r\nconst SIZE_MAP: Record<LikeButtonSize, { btn: number; icon: number; strokeW: number; border: string; padding: string }> = {\r\n  sm: { btn: 24, icon: 13, strokeW: 1,   border: \"2px\",    padding: \"2px\" },\r\n  md: { btn: 32, icon: 14, strokeW: 1.2, border: \"1.44px\", padding: \"1.44px\" },\r\n  lg: { btn: 40, icon: 21, strokeW: 1.4, border: \"2px\",    padding: \"2px\" },\r\n};\r\n\r\n// ─── SVG heart path ───────────────────────────────────────────────────────────\r\n\r\nconst HEART_PATH =\r\n  \"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\";\r\n\r\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\r\n\r\nconst STYLE_ID = \"concorde-plike-styles\";\r\n\r\nconst PLIKE_STYLES = `\r\n@keyframes plike-heart-pop {\r\n  0%   { transform: scale(1); }\r\n  35%  { transform: scale(1.4); }\r\n  65%  { transform: scale(0.85); }\r\n  85%  { transform: scale(1.1); }\r\n  100% { transform: scale(1); }\r\n}\r\n@keyframes plike-pulse {\r\n  0%, 100% { opacity: 1; }\r\n  50%       { opacity: 0.4; }\r\n}\r\n\r\n/* Default sync EXACTO de los SVG exports de Figma (nodos 1136:11505 / 1126:11466 / 1126:11432):\r\n   círculo blanco + BORDE GRADIENTE lila + sin drop shadow en default. */\r\n.plike {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 9999px;\r\n  border-style: solid;\r\n  border-color: transparent;\r\n  cursor: pointer;\r\n  position: relative;\r\n  overflow: hidden;\r\n  background:\r\n    linear-gradient(#ffffff, #ffffff) padding-box,\r\n    linear-gradient(135deg, #e8ddff 0%, #ffffff 40%, #cfbaff 75%, #ae8eff 100%) border-box;\r\n  box-shadow: none;\r\n  transition:\r\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.25s,\r\n    filter 0.25s,\r\n    background 0.2s;\r\n  transform: translateZ(0);\r\n}\r\n\r\n/* Glass highlight overlay — 0.18 (sm/lg) según SVG; md usa 0.55 */\r\n.plike::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: 9999px;\r\n  background: linear-gradient(\r\n    rgba(255, 255, 255, 0.18) 0%,\r\n    transparent 50%\r\n  );\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n.plike--md::before {\r\n  background: linear-gradient(\r\n    rgba(255, 255, 255, 0.55) 0%,\r\n    transparent 50%\r\n  );\r\n}\r\n\r\n/* El corazón siempre por encima del glass/glow */\r\n.plike svg {\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n/* Hover — lift (interacción Concorde) + sombra morada #200068 exacta del SVG */\r\n.plike:hover:not(.plike--disabled):not(.plike--skeleton) {\r\n  transform: scale(1.08) translateY(-2px);\r\n  box-shadow:\r\n    rgba(32, 0, 104, 0.22) 0px 10px 18px,\r\n    rgba(32, 0, 104, 0.12) 0px 3px 6px;\r\n}\r\n/* En hover el glass sube a 0.55 en TODOS los tamaños (SVG hover) */\r\n.plike:hover:not(.plike--disabled):not(.plike--skeleton):not(.plike--active)::before {\r\n  background: linear-gradient(rgba(255, 255, 255, 0.55) 0%, transparent 50%);\r\n}\r\n\r\n/* Press */\r\n.plike:active:not(.plike--disabled):not(.plike--skeleton) {\r\n  transform: scale(0.92);\r\n}\r\n\r\n/* Focus ring */\r\n.plike:focus-visible {\r\n  outline: 2px solid #8460e5;\r\n  outline-offset: 3px;\r\n}\r\n\r\n/* ── Sizes (Figma) ── */\r\n.plike--sm { width: 24px; height: 24px; border-width: 2px;    padding: 2px; }\r\n.plike--md { width: 32px; height: 32px; border-width: 1.44px; padding: 1.44px; }\r\n.plike--lg { width: 40px; height: 40px; border-width: 2px;    padding: 2px; }\r\n\r\n/* En sm el gradiente del borde invierte los 2 últimos stops (SVG 1136:11505) */\r\n.plike--sm:not(.plike--active):not(.plike--disabled):not(.plike--skeleton) {\r\n  background:\r\n    linear-gradient(#ffffff, #ffffff) padding-box,\r\n    linear-gradient(135deg, #e8ddff 0%, #ffffff 40%, #ae8eff 75%, #cfbaff 100%) border-box;\r\n}\r\n\r\n/* ── Active / liked — sync EXACTO SVG (1126:11427 sm / 1119:11380 md / 1119:11378 lg):\r\n   bg morado + BORDE GRADIENTE naranja→lila + glow radial #AE8EFF + corazón blanco 0.92 */\r\n.plike--active {\r\n  background:\r\n    linear-gradient(135deg, #8460e5 0%, #3b1782 100%) padding-box,\r\n    linear-gradient(135deg, #fbc47d 0%, #ffffff 40%, #ae8eff 75%, #cfbaff 100%) border-box;\r\n  border-color: transparent;\r\n  filter: drop-shadow(0px 3px 12px rgba(132, 96, 229, 0.35));\r\n  box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.22);\r\n}\r\n\r\n.plike--active::before {\r\n  background: linear-gradient(\r\n    rgba(255, 255, 255, 0.18) 0%,\r\n    transparent 50%\r\n  );\r\n}\r\n\r\n/* Glow radial morado del SVG (radial #AE8EFF, opacidad 0.35, difuminado) */\r\n.plike--active::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: 9999px;\r\n  background: radial-gradient(circle at 50% 52%, rgba(174, 142, 255, 0.5) 0%, rgba(174, 142, 255, 0) 70%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n\r\n/* Heart pop animation on toggle-to-active */\r\n.plike--pop svg {\r\n  animation: plike-heart-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) 1;\r\n}\r\n\r\n/* ── Disabled ── */\r\n.plike--disabled {\r\n  cursor: not-allowed;\r\n  background: var(--component-button-like-bg, #ffffff);\r\n  border-color: transparent;\r\n  box-shadow: none;\r\n  filter: drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.10));\r\n  pointer-events: none;\r\n}\r\n.plike--disabled::before { display: none; }\r\n\r\n/* ── Skeleton ── */\r\n.plike--skeleton {\r\n  background: var(--color-background-disabled, #e1e3e2);\r\n  border-color: transparent;\r\n  box-shadow: none;\r\n  filter: none;\r\n  cursor: default;\r\n  pointer-events: none;\r\n  padding: 0;\r\n  animation: plike-pulse 1.6s ease-in-out infinite;\r\n}\r\n.plike--skeleton::before { display: none; }\r\n\r\n/* ── Reduced motion — siempre ── */\r\n@media (prefers-reduced-motion: reduce) {\r\n  .plike,\r\n  .plike::before { transition: none; }\r\n  .plike--pop svg { animation: none; }\r\n  .plike--skeleton { animation: none; opacity: 0.55; }\r\n}\r\n`;\r\n\r\nlet _stylesInjected = false;\r\n\r\n// ─── Component ────────────────────────────────────────────────────────────────\r\n\r\nconst LikeButton = forwardRef<HTMLButtonElement, LikeButtonProps>(function LikeButton({\r\n  size = \"md\",\r\n  active: controlledActive,\r\n  defaultActive = false,\r\n  disabled = false,\r\n  skeleton = false,\r\n  onChange,\r\n  onClick,\r\n  style,\r\n  \"aria-label\": ariaLabel = \"Me gusta\",\r\n  className = \"\",\r\n  ...rest\r\n}, ref): JSX.Element {\r\n  // Soporte controlado / no controlado\r\n  const isControlled = controlledActive !== undefined;\r\n  const [internalActive, setInternalActive] = useState(defaultActive);\r\n  const isActive = isControlled ? controlledActive : internalActive;\r\n\r\n  // Trigger animación heart-pop al activar\r\n  const [popping, setPopping] = useState(false);\r\n\r\n  // Inyectar estilos una vez (SSR + CSR)\r\n  if (typeof document !== \"undefined\" && !_stylesInjected) {\r\n    if (!document.getElementById(STYLE_ID)) {\r\n      const el = document.createElement(\"style\");\r\n      el.id = STYLE_ID;\r\n      el.textContent = PLIKE_STYLES;\r\n      document.head.appendChild(el);\r\n    }\r\n    _stylesInjected = true;\r\n  }\r\n\r\n  const handleClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {\r\n    onClick?.(e);\r\n    if (disabled || skeleton) return;\r\n    const next = !isActive;\r\n    if (!isControlled) setInternalActive(next);\r\n    onChange?.(next);\r\n    if (next) {\r\n      setPopping(true);\r\n      setTimeout(() => { setPopping(false); }, 420);\r\n    }\r\n  }, [isActive, isControlled, disabled, skeleton, onChange, onClick]);\r\n\r\n  const { btn: btnPx, icon: iconPx, strokeW } = SIZE_MAP[size];\r\n\r\n  const classes = [\r\n    \"plike\",\r\n    `plike--${size}`,\r\n    isActive  ? \"plike--active\"   : \"\",\r\n    disabled  ? \"plike--disabled\" : \"\",\r\n    skeleton  ? \"plike--skeleton\" : \"\",\r\n    popping   ? \"plike--pop\"      : \"\",\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(\" \");\r\n\r\n  // SVG fill/stroke según estado — default EXACTO de los SVG exports de Figma:\r\n  // corazón BLANCO RELLENO con stroke #5A35C2 (no solo contorno).\r\n  const svgFill   = isActive ? \"rgba(255, 255, 255, 0.92)\" : \"#ffffff\";\r\n  // disabled: corazón outline gris #E1E3E2 exacto del SVG; active: blanco relleno sin stroke\r\n  const svgStroke = disabled   ? \"#e1e3e2\"\r\n                  : isActive   ? \"none\"\r\n                  : \"var(--vmc-color-vault-600, #5a35c2)\";\r\n\r\n  return (\r\n    <>\r\n      <style\r\n        id={`${STYLE_ID}-ssr`}\r\n        suppressHydrationWarning\r\n        dangerouslySetInnerHTML={{ __html: PLIKE_STYLES }}\r\n      />\r\n      <button\r\n        ref={ref}\r\n        type=\"button\"\r\n        {...rest}\r\n        className={classes}\r\n        onClick={handleClick}\r\n        disabled={disabled}\r\n        aria-label={ariaLabel}\r\n        aria-pressed={isActive}\r\n        style={{ width: btnPx, height: btnPx, ...style }}\r\n      >\r\n        {!skeleton && (\r\n          <svg\r\n            width={iconPx}\r\n            height={iconPx}\r\n            viewBox=\"0 0 24 24\"\r\n            fill={svgFill}\r\n            stroke={svgStroke}\r\n            strokeWidth={strokeW}\r\n            strokeLinecap=\"round\"\r\n            strokeLinejoin=\"round\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            <path d={HEART_PATH} />\r\n          </svg>\r\n        )}\r\n      </button>\r\n    </>\r\n  );\r\n});\r\n\r\nexport default LikeButton;\r\n"
    }
  ]
}