Clima state chip

Resumen del clima de la org o equipo en la barra. Tooltip explica el número detrás.

Chip del encabezado de Inicio (HeroMeta en inicio-hero.tsx), al lado del promedio y la cantidad de pulsos. Condición del clima con una explicación breve al pasar el cursor o enfocar. El componente recibe el texto y el ícono: no calcula la condición. En el producto las etiquetas son Soleado, Parcial, Nublado, Tormenta, Niebla y Sin datos.

Instalación

shadcn

npx shadcn@latest add https://design.moodinary.com/r/clima-chip.json

import

import { ClimaChip } from "@moodinary/ui/components/clima-chip";

Ejemplos

Condiciones con explicación

El tooltip es el resumen del clima que calcula el backend. En Niebla dice cuántos pulsos hubo: significa menos de 8 pulsos en los últimos 7 días, no que el ánimo esté bajo.

SoleadoParcialNubladoNiebla

Código

states.tsx

import { ClimaChip } from "@moodinary/ui/components/clima-chip";
import { Cloud, CloudFog, CloudSun, Sun } from "@moodinary/ui/components/icons";
import {
	Tooltip,
	TooltipContent,
	TooltipTrigger,
} from "@moodinary/ui/components/tooltip";
import type * as React from "react";

function FocusableClima({
	icon,
	label,
	tip,
}: {
	icon: React.ReactNode;
	label: string;
	tip: string;
}) {
	return (
		<Tooltip>
			<TooltipTrigger
				render={
					<span
						className="cursor-help rounded-sm outline-none focus-visible:outline-2 focus-visible:outline-org focus-visible:outline-offset-2"
						// biome-ignore lint/a11y/noNoninteractiveTabindex: el chip necesita foco de teclado para mostrar la explicación
						tabIndex={0}
					/>
				}
			>
				<ClimaChip icon={icon} label={label} />
			</TooltipTrigger>
			<TooltipContent className="max-w-[280px]">{tip}</TooltipContent>
		</Tooltip>
	);
}

// Etiquetas de weather-display.ts y tooltips con el summary real de packages/api/src/lib/weather.ts.
export default function ClimaStates() {
	return (
		<>
			<FocusableClima
				icon={<Sun />}
				label="Soleado"
				tip="El ánimo general está bien."
			/>
			<FocusableClima
				icon={<CloudSun />}
				label="Parcial"
				tip="El clima está bien, con altibajos."
			/>
			<FocusableClima
				icon={<Cloud />}
				label="Nublado"
				tip="El ánimo está flojo, conviene mirarlo de cerca."
			/>
			<FocusableClima
				icon={<CloudFog />}
				label="Niebla"
				tip="Con 5 pulsos no alcanza para leer la semana."
			/>
		</>
	);
}

Sin tooltip

Soleado, Tormenta y Sin datos sin explicación. Sin tip el chip no necesita foco.

SoleadoTormentaSin datos

Código

plain.tsx

import { ClimaChip } from "@moodinary/ui/components/clima-chip";
import { CloudLightning, CloudOff, Sun } from "@moodinary/ui/components/icons";

// Etiquetas reales (apps/pulses/src/lib/weather-display.ts). Íconos 14px como en HeroMeta.
export default function ClimaPlain() {
	return (
		<>
			<ClimaChip icon={<Sun className="size-3.5" />} label="Soleado" />
			<ClimaChip
				icon={<CloudLightning className="size-3.5" />}
				label="Tormenta"
			/>
			<ClimaChip icon={<CloudOff className="size-3.5" />} label="Sin datos" />
		</>
	);
}

Props

ClimaChip

Prop	Tipo	Default	Descripción
icon	ReactNode	-	Ícono de la condición, obligatorio.
label	ReactNode	-	Nombre visible de la condición.
tip	ReactNode	-	Explicación en Tooltip. Sin tip no hay interacción.
className	string	-	Clases del chip.

Cuándo sí y cuándo no

Hacé

Explicá el período y la muestra en el tooltip.
Derivá la condición del cálculo de clima, no del color del ánimo.
Separá pocos datos de un ánimo bajo.

Evitá

No copies el umbral viejo de 5 pulsos.
No presentes una lectura provisional como tendencia firme.
No uses solo un ícono para comunicar la condición.

Con tip, verificá que el disparador pueda enfocarse con Tab; el ejemplo usa un elemento enfocable.
El tooltip debe aparecer también al enfocar y cerrarse con Escape.
La etiqueta visible lleva el significado; el ícono puede ser decorativo.