@astra-kit/ui 1.1.0 → 1.2.1

package/CHANGELOG.md

@@ -4,6 +4,31 @@ Todos los cambios relevantes de `@astra-kit/ui` se documentan en este archivo co
 
 ## [Unreleased]
 
+## [1.2.1] - 2026-10-19
+
+### Fixed
+
+- `EmptyState` ya no puede trabar la página en WebKit (Safari y navegadores basados en WebKit, sobre todo en Linux) mientras entra su ícono: la animación de entrada solo anima opacidad y escala, sin desenfoque.
+- `UsageMeter` redondea cada segmento a la precisión de `decimals` antes de calcular todo, así la barra, la insignia, la leyenda y el resumen accesible coinciden (por ejemplo, 200,4 con límite 200 y sin decimales ya no dibuja un excedente que la insignia no muestra).
+- `UsageMeter` acepta un segmento con `id="free"` sin confundirlo con el espacio libre de la leyenda.
+- La leyenda de `UsageMeter` sigue alcanzable con Tab cuando se quitan segmentos después de mover el foco entre sus ítems.
+- La insignia de estado de `UsageMeter` con un texto largo se recorta dentro del ancho del medidor en lugar de desbordarlo.
+- `Stepper` muestra el contorno de foco del teclado en el paso actual al llegar con las flechas o End.
+- `Timeline` etiqueta como "Ayer" el día calendario anterior en la zona horaria elegida, también en los cambios de horario de verano.
+- `Timeline` vuelve a anunciar una actualización nueva aunque su resumen sea igual al anterior.
+- `Timeline` ya no vuelve al principio del historial cuando solo cambia la preferencia de movimiento reducido; solo lo hace ante una actualización nueva.
+- Los números de `MetricCard` y `UsageMeter` se detienen en su valor si se activa el movimiento reducido mientras ruedan.
+
+## [1.2.0] - 2026-10-19
+
+### Added
+
+- `UsageMeter`: barra segmentada de cupo (por ejemplo, códigos y avisos enviados hoy contra el límite diario) con total animado, insignia de estado (libre, casi lleno, excedido), leyenda navegable con teclado y anuncios para lectores de pantalla. Todo el copy viene en español y se reemplaza con `freeLabel`, `overLabel` y `messages`; los números usan `locale` (por defecto `es-AR`).
+- `MetricCard`: tarjeta compacta para un número con contexto, con dígitos que ruedan al cambiar y un chip de variación (`change`) que se tiñe según el signo. Acepta `locale` (por defecto `es-AR`).
+- `EmptyState`: estado vacío centrado con ícono, título, descripción y acción opcional; al cambiar el copy, el bloque se ajusta de alto sin saltos.
+- `Timeline`: historial de eventos agrupado por día, del más reciente al más antiguo, con encabezados fijos, filas que se expanden en el lugar, tiempos relativos y anuncios de nuevas actualizaciones. Fechas en `es-AR` por defecto; el copy se reemplaza con `messages`.
+- `Stepper`: indicador de pasos horizontal o vertical, con navegación opcional a pasos completados (`onStepSelect`), estado de error por paso y modo compacto automático en contenedores angostos. Textos de accesibilidad en español, reemplazables con `label`, `completeLabel` y `messages`.
+
 ## [1.1.0] - 2026-10-19
 
 ### Added

package/README.md

@@ -47,7 +47,7 @@ import { Avatar, Button, Calendar, DataTable } from "@astra-kit/ui";
 <Avatar name="Ana Núñez" src="/ana.jpg" />;
 ```
 
-Los componentes adoptados de [Arc](https://uiarc.dev) usan la API pública de Arc: `Switch`, `Checkbox`, `RadioGroup`, `Badge`, `Avatar`, `AvatarGroup`, `Skeleton`, `Card`, `Alert`, `Tooltip`, `HoverCard`, `DropdownMenu`, `Select`, `Pagination`, `Calendar` y `Carousel` son componentes cerrados que se configuran por props (`items`, `options`, `members`, `content`, `title`); `Dialog` (`Dialog`, `DialogTrigger`, `DialogContent` con `title` y `description`, `DialogClose`), `Popover` y `Tabs` conservan las partes de Arc. Cada uno suma solo las extensiones que Arc no cubre, con copy en español por defecto, por ejemplo `getHref` en `Pagination`, `trigger` e ítems con `href` en `DropdownMenu`, `onOpenChange` en `HoverCard`, `footer` y el modo `alert` en `Dialog` (reemplaza a `AlertDialog`), `hideLabel` en `Select` y `RadioGroup`, y `onSettle` en `Carousel`. La tabla de migración desde `beez-ui` 2.x está en [`docs/history/beez-ui-changelog.md`](https://github.com/guidomodarelli/astra-ui/blob/main/docs/history/beez-ui-changelog.md).
+Los componentes adoptados de [Arc](https://uiarc.dev) usan la API pública de Arc: `Switch`, `Checkbox`, `RadioGroup`, `Badge`, `Avatar`, `AvatarGroup`, `Skeleton`, `Card`, `Alert`, `Tooltip`, `HoverCard`, `DropdownMenu`, `Select`, `Pagination`, `Calendar` y `Carousel` son componentes cerrados que se configuran por props (`items`, `options`, `members`, `content`, `title`); `Dialog` (`Dialog`, `DialogTrigger`, `DialogContent` con `title` y `description`, `DialogClose`), `Popover` y `Tabs` conservan las partes de Arc. Cada uno suma solo las extensiones que Arc no cubre, con copy en español por defecto, por ejemplo `getHref` en `Pagination`, `trigger` e ítems con `href` en `DropdownMenu`, `onOpenChange` en `HoverCard`, `footer` y el modo `alert` en `Dialog` (reemplaza a `AlertDialog`), `hideLabel` en `Select` y `RadioGroup`, y `onSettle` en `Carousel`. Los displays de datos de Arc `UsageMeter`, `MetricCard`, `EmptyState`, `Timeline` y `Stepper` también son cerrados y se configuran por props; sus textos visibles y anunciados vienen en español y se reemplazan con `messages` (y con `freeLabel`/`overLabel`, `label` o `completeLabel` donde Arc ya los define), y `locale` formatea números y fechas (`es-AR` por defecto). La tabla de migración desde `beez-ui` 2.x está en [`docs/history/beez-ui-changelog.md`](https://github.com/guidomodarelli/astra-ui/blob/main/docs/history/beez-ui-changelog.md).
 
 `Button` es para acciones y no tiene `asChild`. Una navegación con aspecto de botón es un `ButtonLink`: el `Link` del provider (rutea con el adaptador configurado y sigue siendo un enlace, que se puede abrir en otra pestaña o copiar) con la receta de `Button` y sus `variant` y `size`. Para otro elemento con aspecto de botón, como un `<label>` que abre un selector de archivos, `buttonClassName({ variant, size, className })` devuelve las mismas clases. Ninguno de los dos incluye la presión ni el spinner de `Button`.
 
@@ -108,8 +108,10 @@ no tiemblan al pasar a `aria-invalid="true"`.
   a 0.97 (un poco más los de solo ícono y menos los anchos) y vuelven con `snappy`; los
   disparadores de menús, popovers y diálogos responden solo con color.
 - `Checkbox`, `RadioGroup`, `Switch`, `Tabs`, `Calendar`, `Carousel`, `Card`, `Avatar`,
-  `AvatarGroup`, `Badge`, `Alert`, `ActionButton` y `SplitButton` usan el movimiento de sus
-  componentes de Arc.
+  `AvatarGroup`, `Badge`, `Alert`, `ActionButton`, `SplitButton`, `UsageMeter`, `MetricCard`,
+  `EmptyState`, `Timeline` y `Stepper` usan el movimiento de sus componentes de Arc. Los
+  números de `UsageMeter` y `MetricCard` ruedan como un odómetro y sus segmentos o dígitos
+  entran la primera vez que el componente se ve; con movimiento reducido saltan al valor final.
 - Una `Card` interactiva se eleva 2 px con el borde fuerte y la sombra `--shadow-raised` de
   Arc al pasar un puntero fino.
 - `Tooltip`, `Popover` y `HoverCard` se acercan desde su trigger con escala y fundido.

package/THIRD_PARTY_NOTICES.md

@@ -4,7 +4,7 @@
 
 ## Arc
 
-The theme tokens (`theme.css`, from Arc's `foundation.css`) and the `Button` API, styles and motion (`src/components/button.tsx`, `src/components/button-label.tsx`, `src/components/control-button.tsx`, `src/motion/arc-press.ts`, `src/motion/arc-tokens.ts`, `src/motion/use-morph-width.ts`), and the `ActionButton` and `SplitButton` components and their label morph (`src/components/action-button.tsx`, `src/components/split-button.tsx`, `src/components/morph-text.tsx`), the `Input` and `Textarea` fields with their animated helper and error rows (`src/components/input.tsx`, `src/components/textarea.tsx`, `src/components/field.tsx`), the `Switch`, `Checkbox` and `RadioGroup` controls (`src/components/switch.tsx`, `src/components/checkbox.tsx`, `src/components/radio-group.tsx`, `src/constants/switch.ts`, `src/constants/checkbox.ts`, `src/constants/radio-group.ts`), the `Badge`, `Avatar`, `AvatarGroup`, `Skeleton`, `Card` and `Alert` displays (`src/components/badge.tsx`, `src/components/avatar.tsx`, `src/components/skeleton.tsx`, `src/components/card.tsx`, `src/components/alert.tsx`, `src/constants/avatar.ts`, `src/constants/card.ts`, `src/constants/alert.ts`), the `Tooltip`, `Popover` and `HoverCard` overlays and their motion (`src/components/tooltip.tsx`, `src/components/popover.tsx`, `src/components/hover-card.tsx`, `src/motion/arc-floating-slot.tsx`, `src/motion/overlay-warmth.ts`, `src/constants/tooltip.ts`, `src/constants/popover.ts`, `src/constants/hover-card.ts`), the `DropdownMenu` and `Select` menus (`src/components/dropdown-menu.tsx`, `src/components/select.tsx`), the `Tabs` and `Pagination` navigation (`src/components/tabs.tsx`, `src/components/pagination.tsx`, `src/constants/tabs.ts`), the `Dialog` surface and its `alert` mode (`src/components/dialog.tsx`, `src/components/dialog-surface.tsx`, `src/constants/dialog.ts`), the `Calendar` and `Carousel` (`src/components/calendar.tsx`, `src/components/carousel.tsx`, `src/constants/calendar.ts`, `src/constants/carousel.ts`, `src/hooks/use-today.ts`), and the internal compositions those public components are built on (`src/components/primitives/`) are adapted from the free Arc library: https://uiarc.dev, https://github.com/kuratlielia/arc-library
+The theme tokens (`theme.css`, from Arc's `foundation.css`) and the `Button` API, styles and motion (`src/components/button.tsx`, `src/components/button-label.tsx`, `src/components/control-button.tsx`, `src/motion/arc-press.ts`, `src/motion/arc-tokens.ts`, `src/motion/use-morph-width.ts`), and the `ActionButton` and `SplitButton` components and their label morph (`src/components/action-button.tsx`, `src/components/split-button.tsx`, `src/components/morph-text.tsx`), the `Input` and `Textarea` fields with their animated helper and error rows (`src/components/input.tsx`, `src/components/textarea.tsx`, `src/components/field.tsx`), the `Switch`, `Checkbox` and `RadioGroup` controls (`src/components/switch.tsx`, `src/components/checkbox.tsx`, `src/components/radio-group.tsx`, `src/constants/switch.ts`, `src/constants/checkbox.ts`, `src/constants/radio-group.ts`), the `Badge`, `Avatar`, `AvatarGroup`, `Skeleton`, `Card` and `Alert` displays (`src/components/badge.tsx`, `src/components/avatar.tsx`, `src/components/skeleton.tsx`, `src/components/card.tsx`, `src/components/alert.tsx`, `src/constants/avatar.ts`, `src/constants/card.ts`, `src/constants/alert.ts`), the `Tooltip`, `Popover` and `HoverCard` overlays and their motion (`src/components/tooltip.tsx`, `src/components/popover.tsx`, `src/components/hover-card.tsx`, `src/motion/arc-floating-slot.tsx`, `src/motion/overlay-warmth.ts`, `src/constants/tooltip.ts`, `src/constants/popover.ts`, `src/constants/hover-card.ts`), the `DropdownMenu` and `Select` menus (`src/components/dropdown-menu.tsx`, `src/components/select.tsx`), the `Tabs` and `Pagination` navigation (`src/components/tabs.tsx`, `src/components/pagination.tsx`, `src/constants/tabs.ts`), the `Dialog` surface and its `alert` mode (`src/components/dialog.tsx`, `src/components/dialog-surface.tsx`, `src/constants/dialog.ts`), the `Calendar` and `Carousel` (`src/components/calendar.tsx`, `src/components/carousel.tsx`, `src/constants/calendar.ts`, `src/constants/carousel.ts`, `src/hooks/use-today.ts`), the `EmptyState`, `MetricCard`, `UsageMeter`, `Timeline` and `Stepper` data displays and their shared text swap and rolling digits (`src/components/empty-state.tsx`, `src/components/metric-card.tsx`, `src/components/usage-meter.tsx`, `src/components/timeline.tsx`, `src/components/stepper.tsx`, `src/constants/empty-state.ts`, `src/constants/metric-card.ts`, `src/constants/usage-meter.ts`, `src/constants/timeline.ts`, `src/constants/stepper.ts`, `src/motion/arc-text-swap.tsx`, `src/motion/arc-odometer.tsx`), and the internal compositions those public components are built on (`src/components/primitives/`) are adapted from the free Arc library: https://uiarc.dev, https://github.com/kuratlielia/arc-library
 
 ```
 MIT License

package/dist/components/empty-state.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps, ReactNode } from "react";
+export type EmptyStateProps = Omit<ComponentProps<"section">, "title" | "children"> & {
+    /** Headline. A new title rises in while the old one leaves. */
+    title: string;
+    /** One or two sentences on why it is empty and what to do. */
+    description: string;
+    /** Call to action, usually a button. */
+    action?: ReactNode;
+    /** Leading icon; defaults to a folder. A different icon component crossfades in. */
+    icon?: ReactNode;
+    /** Accessible name of the section region. */
+    label?: string;
+};
+/**
+ * A centered placeholder for empty views with an icon, a title, a description and an optional action.
+ * @param props - Copy, icon, action, accessible name and native section attributes.
+ * @returns The empty state section.
+ */
+declare function EmptyState({ title, description, action, icon, label, className, ...props }: EmptyStateProps): import("react").JSX.Element;
+export { EmptyState };

package/dist/components/empty-state.js

@@ -0,0 +1,357 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Empty state (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a useful next step when there is
+* nothing to show yet. A centered icon, title, description and optional action. When the copy changes it rolls in place
+* while the block height springs to fit, and a different icon component crossfades in.
+*/
+import { isValidElement, useEffect, useLayoutEffect, useRef } from "react";
+import { AnimatePresence, animate, motion, useMotionValue } from "motion/react";
+import { Folder } from "lucide-react";
+import { EMPTY_STATE_HEIGHT_MORPH_WINDOW_MS, EMPTY_STATE_ICON_ENTER_SCALE, EMPTY_STATE_ICON_SIZE_PX, EMPTY_STATE_ICON_STROKE_WIDTH } from "../constants/empty-state.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { ArcTextSwap } from "../motion/arc-text-swap.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_SMOOTH, ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const iconEnter = {
+	opacity: 0,
+	scale: EMPTY_STATE_ICON_ENTER_SCALE,
+	filter: `blur(${ARC_BLUR.subtle}px)`
+};
+const iconRest = {
+	opacity: 1,
+	scale: 1,
+	filter: "blur(0px)"
+};
+const iconExit = {
+	...iconEnter,
+	transition: {
+		duration: ARC_DURATION.fast,
+		ease: [...ARC_EASE.standard]
+	}
+};
+const reducedFade = { opacity: 0 };
+const reducedExit = {
+	opacity: 0,
+	transition: { duration: ARC_DURATION.instant }
+};
+const reducedTransition = { duration: ARC_DURATION.instant };
+/**
+* Keys an icon by its component, so a new icon component crossfades in while re-rendering the same icon stays still.
+* @param icon - The icon element.
+* @returns A stable key for the icon's component.
+*/
+function iconKey(icon) {
+	if (!isValidElement(icon)) return "icon";
+	const type = icon.type;
+	return typeof type === "string" ? type : type.displayName ?? type.name ?? "icon";
+}
+/**
+* Follows its content height. After `morphKey` changes the height springs from the old size to the new one and then
+* returns to auto, so passive reflows follow instantly. It clips only while moving, so focus outlines stay visible.
+*/
+function HeightFrame(t0) {
+	const $ = _c(14);
+	const { reduceMotion, morphKey, children } = t0;
+	const frame = useRef(null);
+	const content = useRef(null);
+	const height = useMotionValue("auto");
+	const changedAt = useRef(0);
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => {
+			changedAt.current = performance.now();
+		};
+		$[0] = t1;
+	} else {
+		t1 = $[0];
+	}
+	let t2;
+	if ($[1] !== morphKey) {
+		t2 = [morphKey];
+		$[1] = morphKey;
+		$[2] = t2;
+	} else {
+		t2 = $[2];
+	}
+	useLayoutEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[3] !== height || $[4] !== reduceMotion) {
+		t3 = () => {
+			const node = content.current;
+			if (!node || typeof ResizeObserver === "undefined") {
+				return;
+			}
+			let lastHeight;
+			let controls;
+			const settle = () => {
+				height.jump("auto");
+				if (frame.current) {
+					Object.assign(frame.current.style, {
+						overflow: "",
+						height: "auto"
+					});
+				}
+			};
+			const observer = new ResizeObserver((t5) => {
+				const [entry] = t5;
+				if (!entry) {
+					return;
+				}
+				const next = entry.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight;
+				const current = height.get();
+				const from = typeof current === "number" ? current : lastHeight;
+				lastHeight = next;
+				controls?.stop();
+				if (reduceMotion || from === undefined || from === next || performance.now() - changedAt.current > EMPTY_STATE_HEIGHT_MORPH_WINDOW_MS) {
+					settle();
+					return;
+				}
+				if (frame.current) {
+					Object.assign(frame.current.style, {
+						overflow: "hidden",
+						height: `${from}px`
+					});
+				}
+				controls = animate(height, [from, next], {
+					...ARC_SPRING_SMOOTH,
+					onComplete: settle
+				});
+			});
+			observer.observe(node);
+			return () => {
+				observer.disconnect();
+				controls?.stop();
+			};
+		};
+		t4 = [height, reduceMotion];
+		$[3] = height;
+		$[4] = reduceMotion;
+		$[5] = t3;
+		$[6] = t4;
+	} else {
+		t3 = $[5];
+		t4 = $[6];
+	}
+	useEffect(t3, t4);
+	let t5;
+	if ($[7] !== height) {
+		t5 = { height };
+		$[7] = height;
+		$[8] = t5;
+	} else {
+		t5 = $[8];
+	}
+	let t6;
+	if ($[9] !== children) {
+		t6 = /* @__PURE__ */ _jsx("div", {
+			ref: content,
+			className: "flow-root",
+			children
+		});
+		$[9] = children;
+		$[10] = t6;
+	} else {
+		t6 = $[10];
+	}
+	let t7;
+	if ($[11] !== t5 || $[12] !== t6) {
+		t7 = /* @__PURE__ */ _jsx(motion.div, {
+			ref: frame,
+			"data-slot": "empty-state-copy",
+			className: "w-full max-w-full",
+			style: t5,
+			children: t6
+		});
+		$[11] = t5;
+		$[12] = t6;
+		$[13] = t7;
+	} else {
+		t7 = $[13];
+	}
+	return t7;
+}
+/**
+* A centered placeholder for empty views with an icon, a title, a description and an optional action.
+* @param props - Copy, icon, action, accessible name and native section attributes.
+* @returns The empty state section.
+*/
+function EmptyState(t0) {
+	const $ = _c(40);
+	let action;
+	let className;
+	let description;
+	let icon;
+	let label;
+	let props;
+	let title;
+	if ($[0] !== t0) {
+		({title, description, action, icon, label, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = action;
+		$[2] = className;
+		$[3] = description;
+		$[4] = icon;
+		$[5] = label;
+		$[6] = props;
+		$[7] = title;
+	} else {
+		action = $[1];
+		className = $[2];
+		description = $[3];
+		icon = $[4];
+		label = $[5];
+		props = $[6];
+		title = $[7];
+	}
+	const reduceMotion = usePrefersReducedMotion();
+	let t1;
+	if ($[8] !== icon) {
+		t1 = icon ?? /* @__PURE__ */ _jsx(Folder, {
+			width: EMPTY_STATE_ICON_SIZE_PX,
+			height: EMPTY_STATE_ICON_SIZE_PX,
+			strokeWidth: EMPTY_STATE_ICON_STROKE_WIDTH
+		});
+		$[8] = icon;
+		$[9] = t1;
+	} else {
+		t1 = $[9];
+	}
+	const glyph = t1;
+	let t2;
+	if ($[10] !== className) {
+		t2 = cn("flex w-full flex-col items-center px-(--space-5) py-[clamp(var(--space-8),8vw,var(--space-12))] text-center text-foreground", className);
+		$[10] = className;
+		$[11] = t2;
+	} else {
+		t2 = $[11];
+	}
+	let t3;
+	if ($[12] !== glyph) {
+		t3 = iconKey(glyph);
+		$[12] = glyph;
+		$[13] = t3;
+	} else {
+		t3 = $[13];
+	}
+	const t4 = reduceMotion ? reducedFade : iconEnter;
+	const t5 = reduceMotion ? reducedExit : iconExit;
+	const t6 = reduceMotion ? reducedTransition : ARC_SPRING_SNAPPY;
+	let t7;
+	if ($[14] !== glyph || $[15] !== t3 || $[16] !== t4 || $[17] !== t5 || $[18] !== t6) {
+		t7 = /* @__PURE__ */ _jsx("div", {
+			"data-slot": "empty-state-icon",
+			"aria-hidden": "true",
+			className: "relative grid size-(--space-12) place-items-center rounded-(--radius-panel) border border-border bg-surface-muted text-text-secondary animate-[astra-empty-state-icon-enter_var(--duration-considered)_var(--ease-enter)_both] motion-reduce:animate-none",
+			children: /* @__PURE__ */ _jsx(AnimatePresence, {
+				mode: "popLayout",
+				initial: false,
+				children: /* @__PURE__ */ _jsx(motion.span, {
+					className: "grid place-items-center",
+					initial: t4,
+					animate: iconRest,
+					exit: t5,
+					transition: t6,
+					children: glyph
+				}, t3)
+			})
+		});
+		$[14] = glyph;
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+		$[19] = t7;
+	} else {
+		t7 = $[19];
+	}
+	const t8 = `${title}\n${description}`;
+	let t9;
+	if ($[20] !== reduceMotion || $[21] !== title) {
+		t9 = /* @__PURE__ */ _jsx("h3", {
+			"data-slot": "empty-state-title",
+			className: "relative mt-(--space-5) text-base leading-(--leading-body) font-medium text-foreground",
+			children: /* @__PURE__ */ _jsx(ArcTextSwap, {
+				text: title,
+				reduceMotion,
+				lineClassName: "text-balance"
+			})
+		});
+		$[20] = reduceMotion;
+		$[21] = title;
+		$[22] = t9;
+	} else {
+		t9 = $[22];
+	}
+	let t10;
+	if ($[23] !== description || $[24] !== reduceMotion) {
+		t10 = /* @__PURE__ */ _jsx("p", {
+			"data-slot": "empty-state-description",
+			className: "relative mx-auto mt-(--space-2) max-w-72 text-sm leading-(--leading-body) text-text-secondary",
+			children: /* @__PURE__ */ _jsx(ArcTextSwap, {
+				text: description,
+				reduceMotion,
+				lineClassName: "text-balance"
+			})
+		});
+		$[23] = description;
+		$[24] = reduceMotion;
+		$[25] = t10;
+	} else {
+		t10 = $[25];
+	}
+	let t11;
+	if ($[26] !== reduceMotion || $[27] !== t10 || $[28] !== t8 || $[29] !== t9) {
+		t11 = /* @__PURE__ */ _jsxs(HeightFrame, {
+			reduceMotion,
+			morphKey: t8,
+			children: [t9, t10]
+		});
+		$[26] = reduceMotion;
+		$[27] = t10;
+		$[28] = t8;
+		$[29] = t9;
+		$[30] = t11;
+	} else {
+		t11 = $[30];
+	}
+	let t12;
+	if ($[31] !== action) {
+		t12 = action ? /* @__PURE__ */ _jsx("div", {
+			"data-slot": "empty-state-action",
+			className: "mt-(--space-5) flex flex-wrap justify-center gap-(--space-3)",
+			children: action
+		}) : null;
+		$[31] = action;
+		$[32] = t12;
+	} else {
+		t12 = $[32];
+	}
+	let t13;
+	if ($[33] !== label || $[34] !== props || $[35] !== t11 || $[36] !== t12 || $[37] !== t2 || $[38] !== t7) {
+		t13 = /* @__PURE__ */ _jsxs("section", {
+			"data-slot": "empty-state",
+			"aria-label": label,
+			className: t2,
+			...props,
+			children: [
+				t7,
+				t11,
+				t12
+			]
+		});
+		$[33] = label;
+		$[34] = props;
+		$[35] = t11;
+		$[36] = t12;
+		$[37] = t2;
+		$[38] = t7;
+		$[39] = t13;
+	} else {
+		t13 = $[39];
+	}
+	return t13;
+}
+export { EmptyState };

package/dist/components/metric-card.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentProps } from "react";
+export type MetricCardProps = Omit<ComponentProps<"article">, "children"> & {
+    /** What is measured. */
+    label: string;
+    /** The number. Rolls up from zero on first view, then between values. */
+    value: number;
+    /** Text after the number, such as "%" or " ms". */
+    suffix?: string;
+    /** Line under the number, such as "vs. la semana pasada". */
+    context: string;
+    /** Chip in the top corner, such as "+12%". Write the sign: it sets the colour and is what screen readers hear. */
+    change?: string;
+    /** Locale of the number's separators. Defaults to `"es-AR"`. */
+    locale?: string;
+};
+/**
+ * A compact card with a label, an odometer style number, a context line and an optional change chip.
+ * @param props - Label, value, suffix, context, change, locale and native article attributes.
+ * @returns The metric card.
+ */
+declare function MetricCard({ label, value, suffix, context, change, locale, className, ...props }: MetricCardProps): import("react").JSX.Element;
+export { MetricCard };