@astra-kit/ui 1.0.0 → 1.2.1

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