@astra-kit/ui 1.0.0 → 1.2.1

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

@@ -0,0 +1,12 @@
+/** Tuning of Arc's EmptyState, adapted from Arc (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md). */
+/** Size, in pixels, of the default folder icon. */
+export declare const EMPTY_STATE_ICON_SIZE_PX = 24;
+/** Stroke width of the default folder icon. */
+export declare const EMPTY_STATE_ICON_STROKE_WIDTH = 1.5;
+/** Scale an incoming icon pops from. */
+export declare const EMPTY_STATE_ICON_ENTER_SCALE = 0.6;
+/**
+ * Window, in milliseconds, after new copy arrives in which a height change springs; later resizes (fonts, container
+ * width) follow instantly.
+ */
+export declare const EMPTY_STATE_HEIGHT_MORPH_WINDOW_MS = 120;

package/dist/constants/empty-state.js

@@ -0,0 +1,12 @@
+/** Tuning of Arc's EmptyState, adapted from Arc (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md). */
+/** Size, in pixels, of the default folder icon. */
+export const EMPTY_STATE_ICON_SIZE_PX = 24;
+/** Stroke width of the default folder icon. */
+export const EMPTY_STATE_ICON_STROKE_WIDTH = 1.5;
+/** Scale an incoming icon pops from. */
+export const EMPTY_STATE_ICON_ENTER_SCALE = .6;
+/**
+* Window, in milliseconds, after new copy arrives in which a height change springs; later resizes (fonts, container
+* width) follow instantly.
+*/
+export const EMPTY_STATE_HEIGHT_MORPH_WINDOW_MS = 120;

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

@@ -0,0 +1,12 @@
+/** Defaults and tuning of Arc's MetricCard, adapted from Arc (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md). */
+/** Locale that formats the number when none is passed. */
+export declare const METRIC_CARD_DEFAULT_LOCALE = "es-AR";
+/** Share of the number, from 0 to 1, that must be visible before its digits roll up from zero. */
+export declare const METRIC_CARD_REVEAL_AMOUNT = 0.6;
+/** Scale the change chip grows from and shrinks back to. */
+export declare const METRIC_CARD_CHANGE_ENTER_SCALE = 0.96;
+/** Signs that mark a change as a rise or a fall, read from the start of the `change` copy. */
+export declare const METRIC_CARD_TREND_PATTERN: {
+    readonly up: RegExp;
+    readonly down: RegExp;
+};

package/dist/constants/metric-card.js

@@ -0,0 +1,12 @@
+/** Defaults and tuning of Arc's MetricCard, adapted from Arc (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md). */
+/** Locale that formats the number when none is passed. */
+export const METRIC_CARD_DEFAULT_LOCALE = "es-AR";
+/** Share of the number, from 0 to 1, that must be visible before its digits roll up from zero. */
+export const METRIC_CARD_REVEAL_AMOUNT = .6;
+/** Scale the change chip grows from and shrinks back to. */
+export const METRIC_CARD_CHANGE_ENTER_SCALE = .96;
+/** Signs that mark a change as a rise or a fall, read from the start of the `change` copy. */
+export const METRIC_CARD_TREND_PATTERN = {
+	up: /^\+/,
+	down: /^[-−]/
+};

package/dist/constants/stepper.d.ts

@@ -0,0 +1,52 @@
+/** Copy and tuning of Arc's Stepper, adapted from Arc (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md). */
+/** Layout direction of a stepper. */
+export type StepperOrientation = "horizontal" | "vertical";
+/** State of one step: done, in progress, not reached yet, or failed. */
+export type StepperStatus = "complete" | "current" | "upcoming" | "error";
+/** Which descriptions show: every step's, or only the active step's. Errors always show. */
+export type StepperDetails = "all" | "current";
+/**
+ * Screen-reader copy of a `Stepper`. The Spanish defaults can be replaced one by one through the `messages` prop; the
+ * accessible name and the completion copy keep their own props, `label` and `completeLabel`.
+ */
+export type StepperMessages = {
+    /** Appended to a completed step's label. */
+    completed: string;
+    /** Appended to a step not reached yet. */
+    notStarted: string;
+    /** Appended to a failed step. */
+    error: string;
+    /** Announced when the current step changes. */
+    stepAnnouncement: (values: {
+        position: number;
+        count: number;
+        label: string;
+    }) => string;
+};
+/** Spanish screen-reader copy of the stepper. */
+export declare const STEPPER_DEFAULT_MESSAGES: {
+    readonly completed: "Completado";
+    readonly notStarted: "Sin empezar";
+    readonly error: "Error";
+    readonly stepAnnouncement: ({ position, count, label }: {
+        position: number;
+        count: number;
+        label: string;
+    }) => string;
+};
+/** Accessible name of the stepper when none is passed. */
+export declare const STEPPER_DEFAULT_LABEL = "Progreso";
+/** Copy announced, and shown in the compact caption, once every step is complete, when none is passed. */
+export declare const STEPPER_DEFAULT_COMPLETE_LABEL = "Todos los pasos completados";
+/** Delay, in seconds, before the ring grows around the new current step, after its connector fills. */
+export declare const STEPPER_RING_DELAY_S = 0.12;
+/** Extra delay, in seconds, between a glyph popping in and its stroke starting to draw. */
+export declare const STEPPER_GLYPH_DRAW_DELAY_S = 0.04;
+/** Extra delay, in seconds, before the dot of the alert glyph pops in. */
+export declare const STEPPER_ALERT_DOT_DELAY_S = 0.16;
+/** Scale a glyph pops from and shrinks back to. */
+export declare const STEPPER_GLYPH_ENTER_SCALE = 0.5;
+/** Scale the current step's ring grows from. */
+export declare const STEPPER_RING_ENTER_SCALE = 0.6;
+/** Window, in milliseconds, after new copy arrives in which its slot springs to the new height. */
+export declare const STEPPER_TEXT_MORPH_WINDOW_MS = 700;

package/dist/constants/stepper.js

@@ -0,0 +1,23 @@
+/** Spanish screen-reader copy of the stepper. */
+export const STEPPER_DEFAULT_MESSAGES = {
+	completed: "Completado",
+	notStarted: "Sin empezar",
+	error: "Error",
+	stepAnnouncement: ({ position, count, label }) => `Paso ${position} de ${count}: ${label}`
+};
+/** Accessible name of the stepper when none is passed. */
+export const STEPPER_DEFAULT_LABEL = "Progreso";
+/** Copy announced, and shown in the compact caption, once every step is complete, when none is passed. */
+export const STEPPER_DEFAULT_COMPLETE_LABEL = "Todos los pasos completados";
+/** Delay, in seconds, before the ring grows around the new current step, after its connector fills. */
+export const STEPPER_RING_DELAY_S = .12;
+/** Extra delay, in seconds, between a glyph popping in and its stroke starting to draw. */
+export const STEPPER_GLYPH_DRAW_DELAY_S = .04;
+/** Extra delay, in seconds, before the dot of the alert glyph pops in. */
+export const STEPPER_ALERT_DOT_DELAY_S = .16;
+/** Scale a glyph pops from and shrinks back to. */
+export const STEPPER_GLYPH_ENTER_SCALE = .5;
+/** Scale the current step's ring grows from. */
+export const STEPPER_RING_ENTER_SCALE = .6;
+/** Window, in milliseconds, after new copy arrives in which its slot springs to the new height. */
+export const STEPPER_TEXT_MORPH_WINDOW_MS = 700;

package/dist/constants/timeline.d.ts

@@ -0,0 +1,62 @@
+/** Copy and tuning of Arc's Timeline, adapted from Arc (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md). */
+/** Status of a system event. Say the outcome in the title too, so it never rests on colour. */
+export type TimelineTone = "neutral" | "success" | "danger";
+/** Heading levels the day labels can take; Arc uses level 3. */
+export type TimelineHeadingLevel = 2 | 3 | 4 | 5 | 6;
+/**
+ * Every visible and announced string of a `Timeline`. The Spanish defaults can be replaced one by one through the
+ * `messages` prop.
+ */
+export type TimelineMessages = {
+    /** Day label of the reference day. */
+    today: string;
+    /** Day label of the day before the reference day. */
+    yesterday: string;
+    /** Noun after a day's update count: "1 actualización", "3 actualizaciones". */
+    updates: (count: number) => string;
+    /** Short time of an event less than a minute old. */
+    justNowShort: string;
+    /** Spoken time of an event less than a minute old. */
+    justNowLong: string;
+    /** Short time of an event minutes old: "5 min". */
+    minutesShort: (minutes: number) => string;
+    /** Spoken time of an event minutes old: "hace 5 minutos". */
+    minutesLong: (minutes: number) => string;
+    /** Short time of an event hours old: "3 h". */
+    hoursShort: (hours: number) => string;
+    /** Spoken time of an event hours old: "hace 3 horas". */
+    hoursLong: (hours: number) => string;
+    /** Announcement of updates that arrive after the first render, with their actors and titles joined. */
+    newUpdates: (summary: string) => string;
+};
+/** Spanish copy of the timeline. */
+export declare const TIMELINE_DEFAULT_MESSAGES: {
+    readonly today: "Hoy";
+    readonly yesterday: "Ayer";
+    readonly updates: (count: number) => "actualizaciones" | "actualización";
+    readonly justNowShort: "Ahora";
+    readonly justNowLong: "recién";
+    readonly minutesShort: (minutes: number) => string;
+    readonly minutesLong: (minutes: number) => string;
+    readonly hoursShort: (hours: number) => string;
+    readonly hoursLong: (hours: number) => string;
+    readonly newUpdates: (summary: string) => string;
+};
+/** Locale of day labels and clock times when none is passed. */
+export declare const TIMELINE_DEFAULT_LOCALE = "es-AR";
+/** Time zone of day groups and clock times when none is passed; fixed so server and client agree. */
+export declare const TIMELINE_DEFAULT_TIME_ZONE = "UTC";
+/** Heading level of the day labels when none is passed. */
+export declare const TIMELINE_DEFAULT_HEADING_LEVEL = 3;
+/** Today's events younger than this many hours show a relative time instead of a clock time. */
+export declare const TIMELINE_RELATIVE_WINDOW_HOURS = 12;
+/** Seconds between rows revealed together, so the line reads as drawing downward. */
+export declare const TIMELINE_REVEAL_STEP_S = 0.09;
+/** Longest wait, in seconds, a row can be queued behind others before it reveals. */
+export declare const TIMELINE_REVEAL_QUEUE_LIMIT_S = 0.45;
+/** Extra delay, in seconds, before a row that arrived after the first render reveals its marker. */
+export declare const TIMELINE_FRESH_ROW_DELAY_S = 0.12;
+/** Share of a row, from 0 to 1, that must be visible before it reveals. */
+export declare const TIMELINE_REVEAL_AMOUNT = 0.2;
+/** Size, in pixels, of an event's avatar. */
+export declare const TIMELINE_AVATAR_SIZE_PX = 28;

package/dist/constants/timeline.js

@@ -0,0 +1,31 @@
+/** Spanish copy of the timeline. */
+export const TIMELINE_DEFAULT_MESSAGES = {
+	today: "Hoy",
+	yesterday: "Ayer",
+	updates: (count) => count === 1 ? "actualización" : "actualizaciones",
+	justNowShort: "Ahora",
+	justNowLong: "recién",
+	minutesShort: (minutes) => `${minutes} min`,
+	minutesLong: (minutes) => `hace ${minutes} ${minutes === 1 ? "minuto" : "minutos"}`,
+	hoursShort: (hours) => `${hours} h`,
+	hoursLong: (hours) => `hace ${hours} ${hours === 1 ? "hora" : "horas"}`,
+	newUpdates: (summary) => `Nueva actualización: ${summary}`
+};
+/** Locale of day labels and clock times when none is passed. */
+export const TIMELINE_DEFAULT_LOCALE = "es-AR";
+/** Time zone of day groups and clock times when none is passed; fixed so server and client agree. */
+export const TIMELINE_DEFAULT_TIME_ZONE = "UTC";
+/** Heading level of the day labels when none is passed. */
+export const TIMELINE_DEFAULT_HEADING_LEVEL = 3;
+/** Today's events younger than this many hours show a relative time instead of a clock time. */
+export const TIMELINE_RELATIVE_WINDOW_HOURS = 12;
+/** Seconds between rows revealed together, so the line reads as drawing downward. */
+export const TIMELINE_REVEAL_STEP_S = .09;
+/** Longest wait, in seconds, a row can be queued behind others before it reveals. */
+export const TIMELINE_REVEAL_QUEUE_LIMIT_S = .45;
+/** Extra delay, in seconds, before a row that arrived after the first render reveals its marker. */
+export const TIMELINE_FRESH_ROW_DELAY_S = .12;
+/** Share of a row, from 0 to 1, that must be visible before it reveals. */
+export const TIMELINE_REVEAL_AMOUNT = .2;
+/** Size, in pixels, of an event's avatar. */
+export const TIMELINE_AVATAR_SIZE_PX = 28;

package/dist/constants/usage-meter.d.ts

@@ -0,0 +1,100 @@
+/** Copy and tuning of Arc's UsageMeter, adapted from Arc (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md). */
+/** How full the allowance is: under the warning share, close to the limit, or past it. */
+export type UsageMeterStatus = "ok" | "near" | "over";
+/** Values the meter's copy is built from. Amounts arrive already formatted with their unit, such as "8,4 GB". */
+export type UsageMeterCopyValues = {
+    /** What is measured, from `label`. */
+    label: string;
+    /** The `unit` prop, possibly empty. */
+    unit: string;
+    /** Formatted plan limit with its unit. */
+    limit: string;
+    /** Formatted total used with its unit. */
+    total: string;
+    /** Formatted space left with its unit. */
+    free: string;
+    /** Formatted overage with its unit. */
+    over: string;
+};
+/**
+ * Every visible and announced string of a `UsageMeter`. The Spanish defaults can be replaced one by one through the
+ * `messages` prop. The legend labels of the remaining space keep their own props, `freeLabel` and `overLabel`.
+ */
+export type UsageMeterMessages = {
+    /** Caption beside the total, after the rolling number: "GB de 50 GB usados". */
+    usedCaption: (values: UsageMeterCopyValues) => string;
+    /** Caption while the remaining space is highlighted: "GB libres". */
+    freeCaption: (values: UsageMeterCopyValues) => string;
+    /** Caption while the overage is highlighted: "GB por encima del límite". */
+    overCaption: (values: UsageMeterCopyValues) => string;
+    /** Caption while a category is highlighted, with its share of the plan in percent. */
+    segmentCaption: (values: UsageMeterCopyValues & {
+        segment: string;
+        share: number;
+    }) => string;
+    /** Status badge under the warning share. */
+    freeBadge: (values: UsageMeterCopyValues) => string;
+    /** Status badge close to the limit. */
+    nearBadge: (values: UsageMeterCopyValues) => string;
+    /** Status badge past the limit. */
+    overBadge: (values: UsageMeterCopyValues) => string;
+    /** Screen-reader copy of the total. */
+    usedSummary: (values: UsageMeterCopyValues) => string;
+    /** Text alternative of the bar: the total, every category and the status. */
+    barSummary: (values: UsageMeterCopyValues & {
+        status: UsageMeterStatus;
+        segments: string;
+    }) => string;
+    /** Accessible name of the legend. */
+    legendLabel: (values: UsageMeterCopyValues) => string;
+    /** Announcement when usage drops back under the warning share. */
+    okAnnouncement: (values: UsageMeterCopyValues) => string;
+    /** Announcement when usage gets close to the limit. */
+    nearAnnouncement: (values: UsageMeterCopyValues) => string;
+    /** Announcement when usage passes the limit or the overage grows. */
+    overAnnouncement: (values: UsageMeterCopyValues) => string;
+};
+/** Spanish copy of the meter. */
+export declare const USAGE_METER_DEFAULT_MESSAGES: {
+    readonly usedCaption: ({ unit, limit }: UsageMeterCopyValues) => string;
+    readonly freeCaption: ({ unit }: UsageMeterCopyValues) => string;
+    readonly overCaption: ({ unit }: UsageMeterCopyValues) => string;
+    readonly segmentCaption: ({ unit, segment, share }: UsageMeterCopyValues & {
+        segment: string;
+        share: number;
+    }) => string;
+    readonly freeBadge: ({ free }: UsageMeterCopyValues) => string;
+    readonly nearBadge: () => string;
+    readonly overBadge: ({ over }: UsageMeterCopyValues) => string;
+    readonly usedSummary: ({ total, limit }: UsageMeterCopyValues) => string;
+    readonly barSummary: ({ label, total, limit, segments, status, free, over }: UsageMeterCopyValues & {
+        status: UsageMeterStatus;
+        segments: string;
+    }) => string;
+    readonly legendLabel: ({ label }: UsageMeterCopyValues) => string;
+    readonly okAnnouncement: ({ free }: UsageMeterCopyValues) => string;
+    readonly nearAnnouncement: ({ free }: UsageMeterCopyValues) => string;
+    readonly overAnnouncement: ({ over }: UsageMeterCopyValues) => string;
+};
+/** Legend label of the remaining space when none is passed. */
+export declare const USAGE_METER_DEFAULT_FREE_LABEL = "Libre";
+/** Legend label of the overage when none is passed. */
+export declare const USAGE_METER_DEFAULT_OVER_LABEL = "Excedente";
+/** Locale that formats the amounts when none is passed. */
+export declare const USAGE_METER_DEFAULT_LOCALE = "es-AR";
+/** Digits after the decimal separator when none is passed. */
+export declare const USAGE_METER_DEFAULT_DECIMALS = 1;
+/** Share of the limit at which the badge warns that it is almost full, when none is passed. */
+export declare const USAGE_METER_DEFAULT_WARN_AT = 0.9;
+/** Share of the meter, from 0 to 1, that must be visible before its segments grow in. */
+export declare const USAGE_METER_REVEAL_AMOUNT = 0.4;
+/** Delay, in seconds, between segments growing in one after another on first view. */
+export declare const USAGE_METER_REVEAL_STAGGER_S = 0.07;
+/** Gap, in pixels, a segment stops short of the next one, so neighbours read apart without an outline. */
+export declare const USAGE_METER_SEGMENT_GAP_PX = 2;
+/** Category colours are steps of the accent, strongest first; up to this many read clearly. */
+export declare const USAGE_METER_SEGMENT_COLOR_COUNT = 4;
+/** Legend key of the remaining space, or of the overage once usage passes the limit. Segment keys carry a prefix, so no segment id can collide with it. */
+export declare const USAGE_METER_FREE_ID = "free";
+/** Prefix of every segment's legend key, which keeps segment ids apart from the remaining-space item. */
+export declare const USAGE_METER_SEGMENT_KEY_PREFIX = "segment:";

package/dist/constants/usage-meter.js

@@ -0,0 +1,38 @@
+/** Spanish copy of the meter. */
+export const USAGE_METER_DEFAULT_MESSAGES = {
+	usedCaption: ({ unit, limit }) => `${unit} de ${limit} usados`.trim(),
+	freeCaption: ({ unit }) => `${unit} libres`.trim(),
+	overCaption: ({ unit }) => `${unit} por encima del límite`.trim(),
+	segmentCaption: ({ unit, segment, share }) => `${unit} en ${segment} · ${share} % del plan`.trim(),
+	freeBadge: ({ free }) => `${free} libres`,
+	nearBadge: () => "Casi lleno",
+	overBadge: ({ over }) => `${over} de más`,
+	usedSummary: ({ total, limit }) => `${total} de ${limit} usados`,
+	barSummary: ({ label, total, limit, segments, status, free, over }) => `${label}: ${total} de ${limit} usados. ${segments}. ${status === "over" ? `Supera el límite por ${over}.` : `${free} libres${status === "near" ? ", casi lleno" : ""}.`}`,
+	legendLabel: ({ label }) => `${label} por categoría`,
+	okAnnouncement: ({ free }) => `Por debajo del límite. ${free} libres.`,
+	nearAnnouncement: ({ free }) => `Casi lleno. ${free} libres.`,
+	overAnnouncement: ({ over }) => `Supera el límite del plan por ${over}.`
+};
+/** Legend label of the remaining space when none is passed. */
+export const USAGE_METER_DEFAULT_FREE_LABEL = "Libre";
+/** Legend label of the overage when none is passed. */
+export const USAGE_METER_DEFAULT_OVER_LABEL = "Excedente";
+/** Locale that formats the amounts when none is passed. */
+export const USAGE_METER_DEFAULT_LOCALE = "es-AR";
+/** Digits after the decimal separator when none is passed. */
+export const USAGE_METER_DEFAULT_DECIMALS = 1;
+/** Share of the limit at which the badge warns that it is almost full, when none is passed. */
+export const USAGE_METER_DEFAULT_WARN_AT = .9;
+/** Share of the meter, from 0 to 1, that must be visible before its segments grow in. */
+export const USAGE_METER_REVEAL_AMOUNT = .4;
+/** Delay, in seconds, between segments growing in one after another on first view. */
+export const USAGE_METER_REVEAL_STAGGER_S = .07;
+/** Gap, in pixels, a segment stops short of the next one, so neighbours read apart without an outline. */
+export const USAGE_METER_SEGMENT_GAP_PX = 2;
+/** Category colours are steps of the accent, strongest first; up to this many read clearly. */
+export const USAGE_METER_SEGMENT_COLOR_COUNT = 4;
+/** Legend key of the remaining space, or of the overage once usage passes the limit. Segment keys carry a prefix, so no segment id can collide with it. */
+export const USAGE_METER_FREE_ID = "free";
+/** Prefix of every segment's legend key, which keeps segment ids apart from the remaining-space item. */
+export const USAGE_METER_SEGMENT_KEY_PREFIX = "segment:";

package/dist/hooks/use-has-entered-view.d.ts

@@ -0,0 +1,9 @@
+import type { RefObject } from "react";
+/**
+ * Reports whether the element has been at least `amount` visible at some point. Without `IntersectionObserver` (old
+ * engines) it reports `true` after mounting, so content never stays in its pre-entrance state.
+ * @param ref - Element to watch.
+ * @param amount - Share of the element, from 0 to 1, that must be visible.
+ * @returns `false` until the element first enters the viewport, then `true` for good.
+ */
+export declare function useHasEnteredView(ref: RefObject<Element | null>, amount: number): boolean;

package/dist/hooks/use-has-entered-view.js

@@ -0,0 +1,46 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/** Tells once whether an element has scrolled into view, for entrances that wait until people can see them. */
+import { useEffect, useState } from "react";
+import { inView } from "motion/react";
+/**
+* Reports whether the element has been at least `amount` visible at some point. Without `IntersectionObserver` (old
+* engines) it reports `true` after mounting, so content never stays in its pre-entrance state.
+* @param ref - Element to watch.
+* @param amount - Share of the element, from 0 to 1, that must be visible.
+* @returns `false` until the element first enters the viewport, then `true` for good.
+*/
+export function useHasEnteredView(ref, amount) {
+	const $ = _c(5);
+	const [hasEntered, setHasEntered] = useState(false);
+	let t0;
+	let t1;
+	if ($[0] !== amount || $[1] !== hasEntered || $[2] !== ref) {
+		t0 = () => {
+			const element = ref.current;
+			if (hasEntered || !element) {
+				return;
+			}
+			if (typeof IntersectionObserver === "undefined") {
+				setHasEntered(true);
+				return;
+			}
+			return inView(element, () => setHasEntered(true), { amount });
+		};
+		t1 = [
+			amount,
+			hasEntered,
+			ref
+		];
+		$[0] = amount;
+		$[1] = hasEntered;
+		$[2] = ref;
+		$[3] = t0;
+		$[4] = t1;
+	} else {
+		t0 = $[3];
+		t1 = $[4];
+	}
+	useEffect(t0, t1);
+	return hasEntered;
+}

package/dist/index.d.ts

@@ -7,6 +7,8 @@ export * from "./components/action-button.js";
 export * from "./components/avatar.js";
 export * from "./components/badge.js";
 export * from "./components/button.js";
+export { buttonClassName, type ButtonClassNameOptions } from "./components/button-recipe.js";
+export * from "./components/button-link.js";
 export * from "./components/card.js";
 export * from "./components/carousel.js";
 export * from "./components/checkbox.js";
@@ -53,6 +55,11 @@ export * from "./components/animated-count.js";
 export * from "./components/animated-list-item.js";
 export * from "./components/presence-swap.js";
 export * from "./components/progress-ring.js";
+export * from "./components/empty-state.js";
+export * from "./components/metric-card.js";
+export * from "./components/stepper.js";
+export * from "./components/timeline.js";
+export * from "./components/usage-meter.js";
 export * from "./components/account-menu.js";
 export * from "./components/rich-text-content.js";
 export * from "./components/rich-markdown-content.js";

package/dist/index.js

@@ -6,6 +6,9 @@ export * from "./components/action-button.js";
 export * from "./components/avatar.js";
 export * from "./components/badge.js";
 export * from "./components/button.js";
+// From the recipe module, which has no client directive, so it also runs in Server Components.
+export { buttonClassName } from "./components/button-recipe.js";
+export * from "./components/button-link.js";
 export * from "./components/card.js";
 export * from "./components/carousel.js";
 export * from "./components/checkbox.js";
@@ -52,6 +55,11 @@ export * from "./components/animated-count.js";
 export * from "./components/animated-list-item.js";
 export * from "./components/presence-swap.js";
 export * from "./components/progress-ring.js";
+export * from "./components/empty-state.js";
+export * from "./components/metric-card.js";
+export * from "./components/stepper.js";
+export * from "./components/timeline.js";
+export * from "./components/usage-meter.js";
 export * from "./components/account-menu.js";
 export * from "./components/rich-text-content.js";
 export * from "./components/rich-markdown-content.js";

package/dist/motion/arc-odometer.d.ts

@@ -0,0 +1,53 @@
+/** A spring written as visual duration and bounce. */
+type VisualSpring = {
+    visualDuration: number;
+    bounce: number;
+};
+/**
+ * Motion drops inherited velocity on time-defined springs, so values that retarget mid-flight run the same springs
+ * written as stiffness and damping.
+ * @param spring - Visual duration and bounce of the spring.
+ * @param restDelta - Distance at which the spring counts as settled.
+ * @returns The equivalent physical spring.
+ */
+export declare function toPhysicalSpring({ visualDuration, bounce }: VisualSpring, restDelta?: number): {
+    type: "spring";
+    stiffness: number;
+    damping: number;
+    restDelta: number;
+    restSpeed: number;
+};
+/**
+ * Starts an animation on the next frame, so the render that caused it never swallows a spring's first frames.
+ * @param start - Starts the animation and returns its controls.
+ * @returns A cleanup that cancels the pending start or stops the running animation.
+ */
+export declare function startNextFrame(start: () => {
+    stop: () => void;
+}): () => void;
+/**
+ * Formats a number the way the odometer draws it, for the screen-reader copy beside it.
+ * @param value - Number to format.
+ * @param decimals - Digits after the decimal separator.
+ * @param locale - Formatting locale.
+ * @returns The formatted number.
+ */
+export declare function formatOdometerValue(value: number, decimals: number, locale: string): string;
+export type ArcOdometerProps = {
+    value: number;
+    /** Digits after the decimal separator. */
+    decimals?: number;
+    /** Formatting locale of separators and grouping. */
+    locale: string;
+    /** Holds every wheel at zero; once it turns false the digits roll up from zero, one column after another. */
+    armed?: boolean;
+    reduceMotion: boolean;
+    className?: string;
+};
+/**
+ * A number that rolls to each new value, digit by digit, in the direction it moved.
+ * @param props - Value, decimals, locale, reveal state and motion preference.
+ * @returns The odometer, hidden from assistive technology.
+ */
+export declare function ArcOdometer({ value, decimals, locale, armed, reduceMotion, className }: ArcOdometerProps): import("react").JSX.Element;
+export {};