Ingresos
\nS/ 48 200
\n↑ 12 % frente a agosto
\n \nS/ 48 200
\n↑ 12 % frente a agosto
\n \n1 130
\n↑ 7 % frente a agosto
\n \n2,1 %
\n↓ 0,4 pts frente a agosto
\n \nCifras de ejemplo.
\n" }, { "type": "css", "url": "https://componentes-lovat.vercel.app/raw/stat-card/stat-card.css", "content": "/* Tarjeta de métrica con mini-gráfico (sparkline). Aspecto de la tarjeta de coss ui; color solo del tema.\n La variación lleva flecha y texto: no depende de verde o rojo. Necesita tokens.css. */\n.c-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; width: 100%; max-width: 44rem; }\n.c-stat { position: relative; display: grid; gap: .25rem; padding: 1.125rem 1.25rem 1rem; border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px); background: var(--card); color: var(--card-foreground); box-shadow: 0 1px 2px 0 #0000000d; }\n.c-stat__label { margin: 0; font-size: .8125rem; font-weight: 500; color: var(--muted-foreground); }\n.c-stat__value { margin: 0; font-size: 1.75rem; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }\n.c-stat__delta { margin: 0; font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums; }\n.c-stat__vs { font-weight: 400; color: var(--muted-foreground); }\n.c-stat__spark { display: block; width: 100%; height: 36px; margin-top: .5rem; overflow: visible; color: var(--primary); }\n.c-stat__spark polyline { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }\n.c-stat__spark line { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }\n.c-stat-note { margin: .5rem 0 0; font-size: .75rem; color: var(--muted-foreground); }\n" }, { "type": "js", "url": "https://componentes-lovat.vercel.app/raw/stat-card/stat-card.js", "content": "/* Sparkline: lee data-values=\"1,2,3\" y dibuja la línea a lo ancho de la tarjeta. Decorativa (aria-hidden):\n la cifra y la variación ya están en texto. */\n(function () {\n const C = (window.Componentes = window.Componentes || {});\n const SVG = 'http://www.w3.org/2000/svg';\n function draw(svg) {\n const v = (svg.dataset.values || '').split(',').map(Number).filter((x) => !isNaN(x));\n if (v.length < 2) return;\n const min = Math.min(...v), max = Math.max(...v), span = max - min || 1;\n svg.setAttribute('viewBox', '0 0 100 36');\n svg.setAttribute('preserveAspectRatio', 'none');\n svg.innerHTML = '';\n const base = document.createElementNS(SVG, 'line');\n Object.entries({ x1: 0, x2: 100, y1: 35.5, y2: 35.5 }).forEach(([k, x]) => base.setAttribute(k, x));\n svg.appendChild(base);\n const p = document.createElementNS(SVG, 'polyline');\n p.setAttribute('points', v.map((x, i) => `${(i / (v.length - 1)) * 100},${32 - ((x - min) / span) * 28}`).join(' '));\n svg.appendChild(p);\n }\n function init(root) {\n (root || document).querySelectorAll('.c-stat__spark[data-values]:not([data-c-ready])').forEach((s) => {\n s.dataset.cReady = '';\n try { draw(s); } catch (e) { console.warn('[stat-card]', e); }\n });\n }\n C.statCard = { init, draw };\n if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => init());\n else init();\n})();\n" }, { "type": "standalone", "url": "https://componentes-lovat.vercel.app/r/stat-card.html" } ], "tokensFile": "https://componentes-lovat.vercel.app/tokens.css", "darkTheme": "add class 'dark' to ", "contexto": "herramienta", "densidad": "media", "tono": "sobria", "states": [ "rest", "hover", "focus" ], "use": { "es": [ "Para 3 o 4 números clave arriba de un dashboard." ], "en": [ "For 3 or 4 key numbers at the top of a dashboard." ] }, "avoid": { "es": [ "Con más de 4 en una fila: pierde foco.", "Con cifras sin fuente." ], "en": [ "More than 4 in a row: it loses focus.", "With figures you can't source." ] }, "a11y": { "roles": [ "article", "heading" ], "keyboard": [], "notes": { "es": [ "La cifra y la variación están en texto; el mini-gráfico es decorativo (aria-hidden).", "La variación usa flecha y texto, no verde o rojo." ], "en": [ "Figure and change are text; the sparkline is decorative (aria-hidden).", "Change uses an arrow and text, not green or red." ] }, "test": { "es": [ "El lector dice «Ingresos, S/ 48 200, sube 12 % frente a agosto»." ], "en": [ "Screen readers read “Revenue, S/ 48,200, up 12% vs August”." ] } }, "issues": { "es": [], "en": [] }, "credits": [ { "source": "coss ui (MIT) · card.tsx, sidebar.tsx (aspecto)", "url": "https://coss.com/ui" } ], "changes": [ { "date": "2026-09-30", "es": "Primera versión", "en": "First version" } ], "partes": [], "pieza": "https://componentes-lovat.vercel.app/r/stat-card.html" }