{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "salastatus",
  "type": "registry:component",
  "title": "SalaStatus",
  "description": "Componente Concorde SalaStatus — un solo archivo, SalaStatus.tsx.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/SalaStatus.tsx",
      "type": "registry:file",
      "target": "components/SalaStatus.tsx",
      "content": "\"use client\";\n\n/**\n * SalaStatus — Generado por Concorde\n * Fuente: Figma VOYAGER · \"Sala status\" (443×90)\n *\n * Barra de cabecera de sala (443×90): gradiente naranja→morado, borde gradiente\n * y sombra. Izquierda: vehículo + año + placa. Derecha: label + TimerIcon +\n * countdown (mono). Usa el componente TimerIcon. Editable por props.\n */\n\nimport type { JSX } from \"react\";\nimport TimerIcon from \"@/concorde/components/TimerIcon\";\n\nexport interface SalaStatusProps {\n  /** Nombre del vehículo (default \"Toyota Etios\") */\n  title?: string;\n  /** Año (default \"2021\") */\n  year?: string;\n  /** Etiqueta de placa (default \"Placa\") */\n  placaLabel?: string;\n  /** Placa (default \"P3U448\") */\n  placa?: string;\n  /** Etiqueta del timer (default \"INICIÓ HACE\") */\n  timerLabel?: string;\n  /** Tiempo / countdown (default \"00:00:10\") */\n  time?: string;\n  className?: string;\n}\n\nconst STYLE_ID = \"concorde-salastatus-styles\";\n\nconst SALASTATUS_STYLES = `\n.psala {\n  position: relative;\n  box-sizing: border-box;\n  width: 443px;\n  max-width: 100%;\n  height: 90px;\n  background: linear-gradient(120deg, #FF9639 0%, #EF852E 40%, #8460E5 100%);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 0 20px;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n  overflow: hidden;\n}\n/* Sheen superior */\n.psala::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 45%);\n  pointer-events: none;\n}\n.psala__left { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }\n.psala__title { font-size: 20px; font-weight: 800; line-height: 1.1; color: #ffffff; white-space: nowrap; }\n.psala__title-year { font-weight: 600; color: rgba(255,255,255,0.72); margin-left: 6px; }\n.psala__placa { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); white-space: nowrap; }\n.psala__placa-val { font-weight: 700; color: #ffffff; margin-left: 6px; }\n.psala__right { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }\n.psala__timer-label {\n  display: inline-flex; align-items: center; gap: 6px;\n  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;\n  color: rgba(255,255,255,0.85);\n}\n.psala__time {\n  font-family: var(--vmc-font-mono, \"Roboto Mono\", ui-monospace, monospace);\n  font-size: 22px; font-weight: 700; line-height: 1; color: #ffffff;\n  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;\n}\n`;\n\nlet _stylesInjected = false;\n\nexport default function SalaStatus({\n  title = \"Toyota Etios\",\n  year = \"2021\",\n  placaLabel = \"Placa\",\n  placa = \"P3U448\",\n  timerLabel = \"INICIÓ HACE\",\n  time = \"00:00:10\",\n  className = \"\",\n}: SalaStatusProps): 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 = SALASTATUS_STYLES;\n      document.head.appendChild(el);\n    }\n    _stylesInjected = true;\n  }\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: SALASTATUS_STYLES }} />\n      <div className={`psala ${className}`.trim()}>\n        <div className=\"psala__left\">\n          <span className=\"psala__title\">\n            {title}\n            {year ? <span className=\"psala__title-year\">{year}</span> : null}\n          </span>\n          <span className=\"psala__placa\">\n            {placaLabel}\n            {placa ? <span className=\"psala__placa-val\">{placa}</span> : null}\n          </span>\n        </div>\n        <div className=\"psala__right\">\n          <span className=\"psala__timer-label\">\n            <TimerIcon size={16} color=\"rgba(255,255,255,0.85)\" />\n            {timerLabel}\n          </span>\n          <span className=\"psala__time\">{time}</span>\n        </div>\n      </div>\n    </>\n  );\n}\n"
    },
    {
      "path": "components/TimerIcon.tsx",
      "type": "registry:file",
      "target": "components/TimerIcon.tsx",
      "content": "/**\n * TimerIcon — Generado por Concorde\n * Fuente: Figma VOYAGER · \"timericon\" (3201)\n *\n * Icono de temporizador/reloj (22×22), trazo redondeado 1.83. Copia exacta del\n * path del SVG. Tamaño y color personalizables (default currentColor).\n */\n\nimport type { JSX } from \"react\";\n\nexport interface TimerIconProps {\n  /** Tamaño en px (default 22) */\n  size?: number;\n  /** Color del trazo (default \"currentColor\") */\n  color?: string;\n  /** Texto accesible. Si se omite, es decorativo (aria-hidden). */\n  title?: string;\n  className?: string;\n}\n\nexport default function TimerIcon({ size = 22, color = \"currentColor\", title, className = \"\" }: TimerIconProps): JSX.Element {\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 22 22\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      role={title ? \"img\" : undefined}\n      aria-hidden={title ? undefined : true}\n    >\n      {title ? <title>{title}</title> : null}\n      <path\n        d=\"M4.63973 10C5.09082 6.38255 8.17668 3.58333 11.9163 3.58333C15.9664 3.58333 19.2496 6.86658 19.2496 10.9167C19.2496 14.9668 15.9664 18.25 11.9163 18.25H7.33333M11.9167 10.9167V7.25M10.0833 1.75H13.75M2.75 12.75H7.33333M4.58333 15.5H9.16667\"\n        stroke={color}\n        strokeWidth=\"1.83333\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n"
    }
  ]
}