Stat strip

Los 4 números del inicio. Máximo 4, cada uno con su comparación.

Números de lectura rápida dentro de una sola tarjeta. Cada Stat tiene etiqueta, valor y una comparación opcional. StatStrip trae tres columnas en escritorio, las mismas tres que muestra Inicio: Nivel promedio, Pulsos y Pulsos vs meta.

Instalación

shadcn

npx shadcn@latest add https://design.moodinary.com/r/stat.json

import

import { Stat, StatStrip } from "@moodinary/ui/components/stat";

Ejemplos

Resumen de Inicio

Las tres métricas de la semana en Inicio, con datos de ejemplo. Las diferencias se pintan verde o rojo según suban o bajen, y la meta tiene su link para ajustarla.

Nivel promedio

3,4

+0,2 vs. semana anterior

Pulsos

312

+18 vs. semana anterior

Pulsos vs meta

78%

Meta semanal 400 pulsos · ajustar

Código

home.tsx

import { Stat, StatStrip } from "@moodinary/ui/components/stat";

/* Mismas tres métricas que StatsRow en apps/pulses/.../inicio-hero.tsx. Valores de ejemplo. */
function Delta({
	children,
	tone,
}: {
	children: string;
	tone: "up" | "down" | "flat";
}) {
	let cls = "text-ink-3";
	if (tone === "up") {
		cls = "text-[#2f7a55]";
	} else if (tone === "down") {
		cls = "text-m1";
	}
	return <span className={cls}>{children}</span>;
}

export default function StatStripHome() {
	return (
		<StatStrip className="w-full">
			<Stat
				detail={
					<>
						<Delta tone="up">+0,2</Delta> vs. semana anterior
					</>
				}
				label="Nivel promedio"
				value="3,4"
			/>
			<Stat
				detail={
					<>
						<Delta tone="up">+18</Delta> vs. semana anterior
					</>
				}
				label="Pulsos"
				value="312"
			/>
			<Stat
				detail={
					<>
						Meta semanal 400 pulsos ·{" "}
						<a className="underline underline-offset-2" href="#ajustar">
							ajustar
						</a>
					</>
				}
				label="Pulsos vs meta"
				value="78%"
			/>
		</StatStrip>
	);
}

Semana en niebla

Con menos de 8 pulsos Inicio usa muted: el promedio sigue a la vista marcado como provisorio. muted no oculta ni protege datos; el aviso de niebla va aparte.

Nivel promedio

3,2

provisorio

Pulsos

necesitamos 8 para leer la semana

Pulsos vs meta

—

Sin meta semanal · definir

Código

muted.tsx

import { Stat, StatStrip } from "@moodinary/ui/components/stat";

/* Semana en niebla (menos de 8 pulsos): StatStrip muted, el promedio sigue visible como provisorio. */
export default function StatStripMuted() {
	return (
		<StatStrip className="w-full" muted>
			<Stat detail="provisorio" label="Nivel promedio" value="3,2" />
			<Stat
				detail="necesitamos 8 para leer la semana"
				label="Pulsos"
				value="5"
			/>
			<Stat
				detail={
					<>
						Sin meta semanal ·{" "}
						<a className="underline underline-offset-2" href="#definir">
							definir
						</a>
					</>
				}
				label="Pulsos vs meta"
				value="—"
			/>
		</StatStrip>
	);
}

Props

StatStrip

Prop	Tipo	Default	Descripción
muted	boolean	false	Atenúa los valores y detalles con data-muted.
children	ReactNode	-	Indicadores Stat.
className	string	-	Clases de la tarjeta y su grilla.

Stat

Prop	Tipo	Default	Descripción
label	ReactNode	-	Nombre breve del indicador.
value	ReactNode	-	Valor ya formateado.
detail	ReactNode	-	Comparación o explicación opcional.
className	string	-	Clases del indicador.

Cuándo sí y cuándo no

Hacé

Mantené las tres columnas de Inicio.
Aclará con qué período comparás.
Mostrá la meta junto al porcentaje.

Evitá

No inventes denominadores para pulsos anónimos.
No uses opacidad como control de acceso.
No pintes todo aumento de verde: más alertas no es una mejora.

Los números se leen como texto, junto a su etiqueta y comparación.
La tira no tiene navegación por teclado; cualquier enlace en detail conserva su foco propio.