@astra-kit/ui 1.0.0 → 1.2.1

package/CHANGELOG.md

@@ -4,6 +4,38 @@ 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
+
+- `ButtonLink`: un link con el aspecto de `Button` (`variant` y `size`) que rutea con el adaptador del provider y sigue siendo un enlace, para navegar sin estilos propios en cada app. También se exporta `buttonClassName({ variant, size, className })`, con las mismas clases para otros elementos, como un `<label>` que abre un selector de archivos.
+- `RadioGroup` acepta `hideLabel` (por defecto `false`), como `Select`: la leyenda sigue nombrando el grupo para lectores de pantalla pero no se ve ni ocupa espacio, para layouts que ya muestran su propio título. Ya no hace falta ocultarla con CSS propio.
+
 ## [1.0.0] - 2026-10-18
 
 ### Changed

package/README.md

@@ -47,7 +47,16 @@ 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 `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`.
+
+```tsx
+import { ButtonLink, buttonClassName } from "@astra-kit/ui";
+
+<ButtonLink href="/" variant="secondary">Volver al inicio</ButtonLink>;
+<label className={buttonClassName({ variant: "ghost", size: "sm" })}>Adjuntar<input type="file" hidden /></label>;
+```
 
 Agrupar los imports de componentes desde la raíz. El paquete publica JavaScript ESM y declaraciones TypeScript en `dist`; el consumidor no necesita transpilar el código fuente de la librería. La gramática de filtros y los helpers de mes-año son independientes de React.
 
@@ -99,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/button-link.d.ts

@@ -0,0 +1,15 @@
+import { type ButtonSize, type ButtonVariant } from "./button-recipe.js";
+import { type LinkProps } from "./link.js";
+export type ButtonLinkProps = LinkProps & {
+    /** Visual weight, as in `Button`. Defaults to `primary`. */
+    variant?: ButtonVariant;
+    /** Height and padding, as in `Button`. Defaults to `md`. */
+    size?: ButtonSize;
+};
+/**
+ * A link styled as a button, such as "Volver al inicio" on an error page.
+ * @param props - Variant, size and every `Link` prop, including `href`, `prefetch` and `component`.
+ * @returns The link.
+ */
+declare function ButtonLink({ variant, size, className, ...props }: ButtonLinkProps): import("react").JSX.Element;
+export { ButtonLink };

package/dist/components/button-link.js

@@ -0,0 +1,70 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Navigation that looks like Arc's Button (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): the
+* provider's `Link`, so it routes through the configured adapter, with the button recipe. A link stays a link for
+* assistive technology and the browser (it opens in a new tab, it can be copied), which a `Button` cannot.
+*/
+import { cn } from "../lib/utils.js";
+import { buttonClassName } from "./button-recipe.js";
+import { Link } from "./link.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+* A link styled as a button, such as "Volver al inicio" on an error page.
+* @param props - Variant, size and every `Link` prop, including `href`, `prefetch` and `component`.
+* @returns The link.
+*/
+function ButtonLink(t0) {
+	const $ = _c(14);
+	let className;
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({variant: t1, size: t2, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+		t2 = $[4];
+	}
+	const variant = t1 === undefined ? "primary" : t1;
+	const size = t2 === undefined ? "md" : t2;
+	let t3;
+	if ($[5] !== className || $[6] !== size || $[7] !== variant) {
+		t3 = cn(buttonClassName({
+			variant,
+			size
+		}), className);
+		$[5] = className;
+		$[6] = size;
+		$[7] = variant;
+		$[8] = t3;
+	} else {
+		t3 = $[8];
+	}
+	let t4;
+	if ($[9] !== props || $[10] !== size || $[11] !== t3 || $[12] !== variant) {
+		t4 = /* @__PURE__ */ _jsx(Link, {
+			"data-slot": "button-link",
+			"data-variant": variant,
+			"data-size": size,
+			...props,
+			className: t3
+		});
+		$[9] = props;
+		$[10] = size;
+		$[11] = t3;
+		$[12] = variant;
+		$[13] = t4;
+	} else {
+		t4 = $[13];
+	}
+	return t4;
+}
+export { ButtonLink };

package/dist/components/button-recipe.d.ts

@@ -0,0 +1,27 @@
+/** Visual weight, as in Arc: one primary action per surface. */
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+/** Height and padding, from Arc's control heights. */
+export type ButtonSize = "sm" | "md" | "lg";
+/**
+ * Arc's button recipe on its tokens. Press scale is driven by Motion alone, so `transform` never gets a CSS
+ * transition, and anchors of floating layers never scale because Radix measures them on pointerdown. Keyboard focus
+ * uses the foundation's shared outline; pointer focus draws no ring.
+ */
+export declare const buttonVariants: (props?: ({
+    variant?: "danger" | "ghost" | "primary" | "secondary" | null | undefined;
+    size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Options of {@link buttonClassName}. */
+export type ButtonClassNameOptions = {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Extra classes merged after the recipe, so they win on conflicts. */
+    className?: string;
+};
+/**
+ * Arc's button classes for an element that is not a `Button`, such as a `<label>` that opens a file picker. Links
+ * use {@link ButtonLink} instead. The press scale and the loading label are effects of `Button` and are not included.
+ * @param options - Variant, size and extra classes. Defaults to `primary` and `md`.
+ * @returns The class list.
+ */
+export declare function buttonClassName({ variant, size, className }?: ButtonClassNameOptions): string;

package/dist/components/button-recipe.js

@@ -0,0 +1,44 @@
+/**
+* Arc's Button recipe (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): variants, sizes and the helper
+* that applies them. It has no client directive, so `buttonClassName` also runs in React Server Components; the
+* `Button` and `ButtonLink` components import it from here.
+*/
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils.js";
+/**
+* Arc's button recipe on its tokens. Press scale is driven by Motion alone, so `transform` never gets a CSS
+* transition, and anchors of floating layers never scale because Radix measures them on pointerdown. Keyboard focus
+* uses the foundation's shared outline; pointer focus draws no ring.
+*/
+export const buttonVariants = cva("relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-(--radius-control) border border-transparent px-4 font-sans text-sm leading-(--leading-body) font-medium whitespace-nowrap select-none [-webkit-tap-highlight-color:transparent] transition-[color,background-color,border-color,opacity,box-shadow] duration-(--duration-fast) ease-(--ease-standard) disabled:cursor-not-allowed disabled:opacity-[.52] aria-busy:cursor-progress motion-reduce:transition-none [&:is([aria-haspopup]:not([aria-haspopup=false]),[data-state],[role=combobox])]:transform-none! [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			primary: "border-foreground bg-foreground text-background hover-fine:not-disabled:opacity-[.91] hover-fine:not-disabled:shadow-(--shadow-resting) active:not-disabled:opacity-[.84]",
+			secondary: "border-border bg-surface text-foreground hover-fine:not-disabled:bg-surface-muted hover-fine:not-disabled:shadow-(--shadow-resting) active:not-disabled:bg-surface-muted disabled:bg-surface-muted disabled:text-text-muted disabled:opacity-100",
+			ghost: "bg-transparent text-text-secondary hover-fine:not-disabled:bg-surface-muted hover-fine:not-disabled:text-foreground active:not-disabled:bg-surface-muted active:not-disabled:text-foreground disabled:text-text-muted disabled:opacity-100",
+			danger: "border-border bg-surface text-danger hover-fine:not-disabled:border-danger hover-fine:not-disabled:bg-surface-muted active:not-disabled:border-danger active:not-disabled:bg-surface-muted disabled:bg-surface-muted disabled:text-[color-mix(in_oklab,var(--danger)_55%,var(--surface-muted))] disabled:opacity-100"
+		},
+		size: {
+			sm: "min-h-(--control-height-sm) px-3",
+			md: "min-h-(--control-height-md)",
+			lg: "min-h-(--control-height-lg) px-5"
+		}
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "md"
+	}
+});
+/**
+* Arc's button classes for an element that is not a `Button`, such as a `<label>` that opens a file picker. Links
+* use {@link ButtonLink} instead. The press scale and the loading label are effects of `Button` and are not included.
+* @param options - Variant, size and extra classes. Defaults to `primary` and `md`.
+* @returns The class list.
+*/
+export function buttonClassName({ variant = "primary", size = "md", className } = {}) {
+	return cn(buttonVariants({
+		variant,
+		size,
+		className
+	}));
+}

package/dist/components/button.d.ts

@@ -1,13 +1,10 @@
 /**
  * Arc's Button (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): its variants, sizes, tokens and motion,
  * with width-aware press feedback, a label that springs to its new width and a loading spinner. It renders a native
- * button; style links as links instead. Composite components that need icon sizes use the internal `ControlButton`.
+ * button: navigation that looks like a button is a `ButtonLink`, and other elements take `buttonClassName`. Composite components that need icon sizes use the internal `ControlButton`.
  */
 import type { ComponentProps } from "react";
-/** Visual weight, as in Arc: one primary action per surface. */
-export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
-/** Height and padding, from Arc's control heights. */
-export type ButtonSize = "sm" | "md" | "lg";
+import { type ButtonSize, type ButtonVariant } from "./button-recipe.js";
 export type ButtonProps = ComponentProps<"button"> & {
     variant?: ButtonVariant;
     size?: ButtonSize;
@@ -21,3 +18,4 @@ export type ButtonProps = ComponentProps<"button"> & {
  */
 declare function Button({ className, variant, size, loading, type, children, ref, ...props }: ButtonProps): import("react").JSX.Element;
 export { Button };
+export type { ButtonSize, ButtonVariant } from "./button-recipe.js";

package/dist/components/button.js

@@ -1,39 +1,15 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-import { cva } from "class-variance-authority";
 import { useIsPresent } from "motion/react";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
+import { buttonVariants } from "./button-recipe.js";
 import { useArcPress } from "../motion/arc-press.js";
 import { useAttachedElement } from "../motion/use-attached-element.js";
 import { ButtonLabel } from "./button-label.js";
 import { LEAVING_ATTRIBUTES, LOADING_INERT_HANDLERS } from "./button-interaction.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
-* Arc's button recipe on its tokens. Press scale is driven by Motion alone, so `transform` never gets a CSS
-* transition, and anchors of floating layers never scale because Radix measures them on pointerdown. Keyboard focus
-* uses the foundation's shared outline; pointer focus draws no ring.
-*/
-const buttonVariants = cva("relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-(--radius-control) border border-transparent px-4 font-sans text-sm leading-(--leading-body) font-medium whitespace-nowrap select-none [-webkit-tap-highlight-color:transparent] transition-[color,background-color,border-color,opacity,box-shadow] duration-(--duration-fast) ease-(--ease-standard) disabled:cursor-not-allowed disabled:opacity-[.52] aria-busy:cursor-progress motion-reduce:transition-none [&:is([aria-haspopup]:not([aria-haspopup=false]),[data-state],[role=combobox])]:transform-none! [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
-	variants: {
-		variant: {
-			primary: "border-foreground bg-foreground text-background hover-fine:not-disabled:opacity-[.91] hover-fine:not-disabled:shadow-(--shadow-resting) active:not-disabled:opacity-[.84]",
-			secondary: "border-border bg-surface text-foreground hover-fine:not-disabled:bg-surface-muted hover-fine:not-disabled:shadow-(--shadow-resting) active:not-disabled:bg-surface-muted disabled:bg-surface-muted disabled:text-text-muted disabled:opacity-100",
-			ghost: "bg-transparent text-text-secondary hover-fine:not-disabled:bg-surface-muted hover-fine:not-disabled:text-foreground active:not-disabled:bg-surface-muted active:not-disabled:text-foreground disabled:text-text-muted disabled:opacity-100",
-			danger: "border-border bg-surface text-danger hover-fine:not-disabled:border-danger hover-fine:not-disabled:bg-surface-muted active:not-disabled:border-danger active:not-disabled:bg-surface-muted disabled:bg-surface-muted disabled:text-[color-mix(in_oklab,var(--danger)_55%,var(--surface-muted))] disabled:opacity-100"
-		},
-		size: {
-			sm: "min-h-(--control-height-sm) px-3",
-			md: "min-h-(--control-height-md)",
-			lg: "min-h-(--control-height-lg) px-5"
-		}
-	},
-	defaultVariants: {
-		variant: "primary",
-		size: "md"
-	}
-});
-/**
 * A single action on a page, form or dialog. Defaults to `type="button"`, so it only submits a form when asked to.
 * @param props - Variant, size, loading state and native button attributes, including `ref`.
 * @returns The native button.

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 };