{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "statpill",
  "type": "registry:component",
  "title": "StatPill",
  "description": "Componente Concorde StatPill — un solo archivo, StatPill.tsx.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/StatPill.tsx",
      "type": "registry:file",
      "target": "components/StatPill.tsx",
      "content": "\"use client\";\n\n/**\n * StatPill — Sección del bloque Sala (Voyager DS)\n * Fuente: Figma VOYAGER · \"Background+Shadow (1)/(2)\" (pill 156×47)\n *\n * Pill de estadística con SendBidIcon a la izquierda + label/valor a la derecha.\n * 3 variantes:\n *   · \"bids\"  → naranja (MIS BIDS) · SendBidIcon \"white\" (flecha naranja)\n *   · \"total\" → morado  (BIDS TOTALES) · SendBidIcon \"vault\" (flecha blanca)\n *   · \"glass\" → 50×22 glass real (interior translúcido + borde gradiente vía\n *               máscara ::before, sin bleed-through) · ícono custom\n * Reusa el componente SendBidIcon. Editable por props.\n */\n\nimport type { JSX, ReactNode } from \"react\";\nimport SendBidIcon from \"./SendBidIcon\";\n\nexport type StatPillVariant = \"bids\" | \"total\" | \"glass\";\n\nexport interface StatPillProps {\n  /** Variante de color (default \"bids\") */\n  variant?: StatPillVariant;\n  /** Etiqueta (default \"MIS BIDS\") */\n  label?: string;\n  /** Valor (default \"18\") */\n  value?: string;\n  /** Ícono custom (solo variante \"glass\"). Si se omite usa SendBidIcon. */\n  icon?: ReactNode;\n  className?: string;\n}\n\n// ── Glass (mobile) · estilo con máscara para que NO sangre el borde ──\nconst GLASS_STYLE_ID = \"concorde-statpill-glass-styles\";\nconst STATPILL_GLASS_STYLES = `\n.statpill-glass {\n  position: relative;\n  box-sizing: border-box;\n  height: 22px;\n  width: 50px;\n  border-radius: 11px;\n  background: linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.12) 45%, rgba(255,255,255,0.06) 100%);\n  backdrop-filter: blur(5px);\n  -webkit-backdrop-filter: blur(5px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 3px;\n  padding: 0 4px;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n}\n.statpill-glass::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1px;\n  background: linear-gradient(125deg, #ffffff 0%, #F4AC59 22%, #8460E5 74.5%, #ffffff 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}\n`;\n\nlet _glassInjected = false;\n\nexport const STATPILL_WIDTH = 156;\nexport const STATPILL_HEIGHT = 47;\n\n// Dark glass (MIS BIDS / BIDS TOTALES): base navy (= \"behind transparent areas\"\n// #0A002E) + sheen blanco (white 28%→4%) + borde gradiente\nconst STAT_GLASS_SHEEN = \"linear-gradient(127deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.07) 45%, rgba(255,255,255,0.03) 100%)\";\nconst STAT_GLASS_BASE = \"linear-gradient(160deg, rgba(28,13,82,0.93) 0%, rgba(14,3,56,0.95) 100%)\";\nconst STAT_GLASS_BORDER = \"linear-gradient(125deg, rgba(255,255,255,0.9) 0%, rgba(244,172,89,0.7) 22%, rgba(132,96,229,0.7) 74.5%, rgba(255,255,255,0.9) 100%)\";\n\nexport default function StatPill({\n  variant = \"bids\",\n  label = \"MIS BIDS\",\n  value = \"18\",\n  icon,\n  className = \"\",\n}: StatPillProps): JSX.Element {\n  // ── Variante glass (mobile header): 50×22 rx11 · glass real (máscara) ──\n  // Fuente: Frame Group 4 · pills glass (paint2 fill + paint4 border, blur 5)\n  if (variant === \"glass\") {\n    if (typeof document !== \"undefined\" && !_glassInjected) {\n      if (!document.getElementById(GLASS_STYLE_ID)) {\n        const el = document.createElement(\"style\");\n        el.id = GLASS_STYLE_ID;\n        el.textContent = STATPILL_GLASS_STYLES;\n        document.head.appendChild(el);\n      }\n      _glassInjected = true;\n    }\n    return (\n      <>\n        <style id={`${GLASS_STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: STATPILL_GLASS_STYLES }} />\n        <div className={`statpill-glass ${className}`.trim()} data-slot=\"stat-pill-glass\">\n          {icon ?? <SendBidIcon variant=\"white\" size={14} aria-label=\"Bid\" />}\n          {label ? (\n            <span style={{ fontSize: 10, fontWeight: 700, color: \"#ffffff\", whiteSpace: \"nowrap\" }}>{label}</span>\n          ) : null}\n          <span style={{ fontSize: 10, fontWeight: 700, lineHeight: 1, color: \"#ffffff\", fontVariantNumeric: \"tabular-nums\" }}>\n            {value}\n          </span>\n        </div>\n      </>\n    );\n  }\n\n  const isBids = variant === \"bids\";\n  return (\n    <div\n      className={className}\n      data-slot={`stat-pill-${variant}`}\n      style={{\n        boxSizing: \"border-box\",\n        width: STATPILL_WIDTH,\n        height: STATPILL_HEIGHT,\n        borderRadius: 16,\n        backgroundImage: `${STAT_GLASS_SHEEN}, ${STAT_GLASS_BASE}, ${STAT_GLASS_BORDER}`,\n        backgroundOrigin: \"border-box\",\n        backgroundClip: \"padding-box, padding-box, border-box\",\n        border: \"1.5px solid transparent\",\n        backdropFilter: \"blur(20px)\",\n        WebkitBackdropFilter: \"blur(20px)\",\n        boxShadow: \"rgba(10,0,46,0.6) 0px 12px 36px -4px, inset 0 1px 0 rgba(255,255,255,0.22)\",\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: 14,\n        padding: \"0 12px 0 8px\",\n        fontFamily: 'var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif)',\n      }}\n    >\n      <SendBidIcon variant={isBids ? \"white\" : \"vault\"} size={32} aria-label=\"Enviar puja\" />\n      <span style={{ display: \"flex\", flexDirection: \"column\", gap: 1, minWidth: 0 }}>\n        <span\n          style={{\n            fontSize: 11,\n            fontWeight: 700,\n            letterSpacing: \"0.04em\",\n            lineHeight: 1,\n            color: \"#ffffff\",\n            textTransform: \"uppercase\",\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {label}\n        </span>\n        <span\n          style={{\n            fontSize: 20,\n            fontWeight: 800,\n            lineHeight: 1,\n            color: \"#ffffff\",\n            fontVariantNumeric: \"tabular-nums\",\n          }}\n        >\n          {value}\n        </span>\n      </span>\n    </div>\n  );\n}\n"
    }
  ]
}