{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progressbar",
  "type": "registry:component",
  "title": "ProgressBar",
  "description": "Componente Concorde ProgressBar — un solo archivo, ProgressBar.tsx.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ProgressBar.tsx",
      "type": "registry:file",
      "target": "components/ProgressBar.tsx",
      "content": "\"use client\";\n\n/**\n * ProgressBar — Generado por Concorde\n * Fuente: Figma VOYAGER · \"Progressbar - Tiempo de bid\" (3182:12947)\n *\n * Barra de progreso (track hundido): top recto, esquinas inferiores redondeadas\n * (radio 13), fondo negro 22% con inner-shadows. El relleno (`value` 0-100) usa\n * la gradiente primary (white → #F4AC59 → #8460E5 → white · VYStrokes1). Copia\n * del SVG. Solo `value` — sin estilos editables.\n */\n\nimport type { JSX } from \"react\";\n\nexport type ProgressBarVariant = \"default\" | \"rainbow\" | \"white\";\n\nexport interface ProgressBarProps {\n  /** Progreso 0-100 (default 60) */\n  value?: number;\n  /** Relleno: \"default\" (gradiente primary), \"rainbow\" (white→magenta→rosa) o \"white\" (blanco sólido). Default \"default\". */\n  variant?: ProgressBarVariant;\n  /**\n   * Duración (ms) de la transición de ancho al cambiar `value`. Si se omite usa\n   * la del CSS (0.3s). Útil para animar un llenado continuo (p. ej. 3000ms lineal).\n   */\n  transitionMs?: number;\n  \"aria-label\"?: string;\n  className?: string;\n}\n\nconst STYLE_ID = \"concorde-progressbar-styles\";\n\nconst PROGRESSBAR_STYLES = `\n.pprogbar {\n  position: relative;\n  width: 100%;\n  height: 22px;\n  border-radius: 0 0 13px 13px;\n  overflow: hidden;\n  background: rgba(0,0,0,0.22);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 2px 4px rgba(0,0,0,0.35);\n}\n.pprogbar__fill {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background: linear-gradient(135deg, #FFFFFF 0%, #F4AC59 22%, #8460E5 74.5%, #FFFFFF 100%);\n  transition: width 0.3s cubic-bezier(0.3,0,0,1);\n}\n/* Rainbow horizontal (no diagonal): white → lila → magenta → rosa */\n.pprogbar__fill--rainbow {\n  background: linear-gradient(90deg, #FFFFFF 0%, #F2CCFF 25%, #CC00FF 60%, #FF0066 100%);\n  box-shadow: 0 0 6px rgba(255,255,255,0.8), 0 0 14px rgba(204,0,255,0.9), 0 0 30px rgba(255,0,102,0.5);\n}\n/* Blanco sólido (fases de carga: recibiendo participantes / inicio extendido) */\n.pprogbar__fill--white {\n  background: #ffffff;\n  box-shadow: 0 0 6px rgba(255,255,255,0.7);\n}\n@media (prefers-reduced-motion: reduce) { .pprogbar__fill { transition: none; } }\n`;\n\nlet _stylesInjected = false;\n\nexport default function ProgressBar({\n  value = 60,\n  variant = \"default\",\n  transitionMs,\n  \"aria-label\": ariaLabel,\n  className = \"\",\n}: ProgressBarProps): 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 = PROGRESSBAR_STYLES;\n      document.head.appendChild(el);\n    }\n    _stylesInjected = true;\n  }\n\n  const clamped = Math.max(0, Math.min(100, value));\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: PROGRESSBAR_STYLES }} />\n      <div\n        className={`pprogbar ${className}`.trim()}\n        role=\"progressbar\"\n        aria-valuenow={clamped}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={ariaLabel ?? \"Tiempo de bid\"}\n      >\n        <div\n          className={`pprogbar__fill ${variant !== \"default\" ? `pprogbar__fill--${variant}` : \"\"}`.trim()}\n          style={{ width: `${clamped}%`, ...(transitionMs != null ? { transition: `width ${transitionMs}ms linear` } : {}) }}\n        />\n      </div>\n    </>\n  );\n}\n"
    }
  ]
}