@astra-kit/ui 0.0.0-stage → 1.0.0

package/dist/components/avatar.js

@@ -0,0 +1,463 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Avatar and Avatar group (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md). The avatar is a round
+* portrait named once for assistive technology, with the first two initials standing in until the photo loads or when
+* it fails, and a presence dot that pops in and out. The group overlaps several avatars, collapses the rest into a +N
+* chip whose count rolls the way it moved, opens and closes the slot of members who join or leave, and on fine
+* pointers fans apart while the pointed-at person lifts and shows their name.
+*/
+import { useState } from "react";
+import { AnimatePresence, motion, useIsPresent } from "motion/react";
+import { AVATAR_GROUP_COUNT_OFFSET_EM, AVATAR_GROUP_DEFAULT_LABEL, AVATAR_GROUP_DEFAULT_MAX, AVATAR_GROUP_OVERFLOW_SUFFIX, AVATAR_GROUP_SLOT_HIDDEN_SCALE, AVATAR_LABEL_SEPARATOR, AVATAR_SIZE_PX, AVATAR_STATUS_LABEL } from "../constants/avatar.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { getNameInitials } from "../lib/name-initials.js";
+import { cn } from "../lib/utils.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_MORPH } from "../motion/arc-tokens.js";
+import { AvatarBadge, AvatarFallback, AvatarImage, AvatarRoot } from "./primitives/avatar.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* Builds the avatar's accessible name: the person plus, when shown, their presence.
+* @param name - Text that names the person.
+* @param presence - Presence text, if any.
+* @returns The accessible name.
+*/
+function buildAvatarLabel(name, presence) {
+	return presence ? `${name}${AVATAR_LABEL_SEPARATOR}${presence}` : name;
+}
+/**
+* A round portrait for one person, with initials as fallback and an optional presence dot.
+* @param props - Name, photo, size, presence, optional fallback and badge, plus native span attributes for the root.
+* @returns The avatar, announced as one image.
+*/
+function Avatar(t0) {
+	const $ = _c(31);
+	let alt;
+	let badge;
+	let fallback;
+	let name;
+	let props;
+	let src;
+	let status;
+	let statusLabel;
+	let t1;
+	if ($[0] !== t0) {
+		({name, src, size: t1, status, statusLabel, fallback, badge, alt, ...props} = t0);
+		$[0] = t0;
+		$[1] = alt;
+		$[2] = badge;
+		$[3] = fallback;
+		$[4] = name;
+		$[5] = props;
+		$[6] = src;
+		$[7] = status;
+		$[8] = statusLabel;
+		$[9] = t1;
+	} else {
+		alt = $[1];
+		badge = $[2];
+		fallback = $[3];
+		name = $[4];
+		props = $[5];
+		src = $[6];
+		status = $[7];
+		statusLabel = $[8];
+		t1 = $[9];
+	}
+	const size = t1 === undefined ? "md" : t1;
+	const presence = status ? statusLabel ?? AVATAR_STATUS_LABEL[status] : undefined;
+	const t2 = alt ?? name;
+	let t3;
+	if ($[10] !== presence || $[11] !== t2) {
+		t3 = buildAvatarLabel(t2, presence);
+		$[10] = presence;
+		$[11] = t2;
+		$[12] = t3;
+	} else {
+		t3 = $[12];
+	}
+	let t4;
+	if ($[13] !== size || $[14] !== src) {
+		t4 = src ? /* @__PURE__ */ _jsx(AvatarImage, {
+			src,
+			alt: "",
+			width: AVATAR_SIZE_PX[size],
+			height: AVATAR_SIZE_PX[size],
+			sizes: `${AVATAR_SIZE_PX[size]}px`
+		}) : null;
+		$[13] = size;
+		$[14] = src;
+		$[15] = t4;
+	} else {
+		t4 = $[15];
+	}
+	let t5;
+	if ($[16] !== fallback || $[17] !== name) {
+		t5 = fallback ?? getNameInitials(name);
+		$[16] = fallback;
+		$[17] = name;
+		$[18] = t5;
+	} else {
+		t5 = $[18];
+	}
+	let t6;
+	if ($[19] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(AvatarFallback, {
+			"aria-hidden": "true",
+			children: t5
+		});
+		$[19] = t5;
+		$[20] = t6;
+	} else {
+		t6 = $[20];
+	}
+	let t7;
+	if ($[21] !== badge) {
+		t7 = badge ? /* @__PURE__ */ _jsx(AvatarBadge, { children: badge }) : null;
+		$[21] = badge;
+		$[22] = t7;
+	} else {
+		t7 = $[22];
+	}
+	let t8;
+	if ($[23] !== props || $[24] !== size || $[25] !== status || $[26] !== t3 || $[27] !== t4 || $[28] !== t6 || $[29] !== t7) {
+		t8 = /* @__PURE__ */ _jsxs(AvatarRoot, {
+			role: "img",
+			"aria-label": t3,
+			size,
+			status,
+			...props,
+			children: [
+				t4,
+				t6,
+				t7
+			]
+		});
+		$[23] = props;
+		$[24] = size;
+		$[25] = status;
+		$[26] = t3;
+		$[27] = t4;
+		$[28] = t6;
+		$[29] = t7;
+		$[30] = t8;
+	} else {
+		t8 = $[30];
+	}
+	return t8;
+}
+/** The overflow count rolls the way it moved: more people rise in from below, fewer drop in from above. */
+const countRoll = {
+	hidden: (direction) => ({
+		opacity: 0,
+		y: `${AVATAR_GROUP_COUNT_OFFSET_EM * direction}em`,
+		filter: `blur(${ARC_BLUR.subtle}px)`
+	}),
+	shown: {
+		opacity: 1,
+		y: 0,
+		filter: "blur(0px)",
+		transition: {
+			duration: ARC_DURATION.standard,
+			ease: [...ARC_EASE.enter]
+		}
+	},
+	gone: (direction) => ({
+		opacity: 0,
+		y: `${-AVATAR_GROUP_COUNT_OFFSET_EM * direction}em`,
+		filter: `blur(${ARC_BLUR.subtle}px)`,
+		transition: {
+			duration: ARC_DURATION.fast,
+			ease: [...ARC_EASE.standard]
+		}
+	})
+};
+/** Same keys as `countRoll`, so the settled style is identical whichever branch renders on the server. */
+const countFade = {
+	hidden: {
+		opacity: 0,
+		y: 0,
+		filter: "blur(0px)"
+	},
+	shown: {
+		opacity: 1,
+		y: 0,
+		filter: "blur(0px)",
+		transition: { duration: ARC_DURATION.instant }
+	},
+	gone: {
+		opacity: 0,
+		y: 0,
+		filter: "blur(0px)",
+		transition: { duration: ARC_DURATION.instant }
+	}
+};
+/** A person joining or leaving opens or closes their slot, so the rest of the stack slides instead of jumping. */
+const slotPresence = {
+	initial: {
+		width: 0,
+		opacity: 0,
+		scale: AVATAR_GROUP_SLOT_HIDDEN_SCALE
+	},
+	animate: {
+		width: "auto",
+		opacity: 1,
+		scale: 1
+	},
+	exit: {
+		width: 0,
+		opacity: 0,
+		scale: AVATAR_GROUP_SLOT_HIDDEN_SCALE
+	}
+};
+/**
+* Each slot is the avatar's visible width, so a slot that opens or closes moves the rest of the stack smoothly. On fine
+* pointers it carries the hover moves as custom properties: the whole stack fans out from its center, the pointed-at
+* slot rises above its neighbours and they ease aside.
+*/
+const slotClassName = "group/avatar-group-slot peer/avatar-group-slot relative inline-flex flex-none items-center [--aside:0px] [--fan:0px] [--rise:0px] pointer-fine:group-hover/avatar-group:[--fan:calc((var(--index)-(var(--count)-1)/2)*4px)] hover-fine:z-1 hover-fine:[--rise:-2px] pointer-fine:peer-hover/avatar-group-slot:[--aside:3px] pointer-fine:has-[~[data-slot=avatar-group-slot]:hover]:[--aside:-3px]";
+/** One wrapper per person carries every hover move as a single translate, so the stack never changes size. */
+const liftClassName = "relative -ml-1.5 inline-flex rounded-(--radius-pill) [transform:translate(calc(var(--fan)+var(--aside)),var(--rise))] transition-transform duration-(--duration-standard) ease-(--ease-standard) motion-reduce:transform-none! motion-reduce:transition-none";
+/** The surface ring that separates overlapping avatars, which sharpens on the pointed-at one. */
+const ringClassName = "border-2 border-surface shadow-[0_0_0_1px_var(--border)] transition-shadow duration-(--duration-fast) ease-(--ease-standard) pointer-fine:group-hover/avatar-group-slot:shadow-[0_0_0_1px_var(--border-strong)]";
+/**
+* One slot of the stack. A slot that is closing turns inert and hidden from assistive technology, so a person who left
+* is no longer announced while the exit spring plays.
+* @param props - Motion span props for the slot.
+* @returns The slot.
+*/
+function AvatarGroupSlot(props) {
+	const $ = _c(4);
+	const isPresent = useIsPresent();
+	const t0 = isPresent ? props["aria-hidden"] : true;
+	const t1 = !isPresent || undefined;
+	let t2;
+	if ($[0] !== props || $[1] !== t0 || $[2] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(motion.span, {
+			"data-slot": "avatar-group-slot",
+			...props,
+			"aria-hidden": t0,
+			inert: t1
+		});
+		$[0] = props;
+		$[1] = t0;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t2 = $[3];
+	}
+	return t2;
+}
+/**
+* Builds the overflow chip's accessible name, as in "2 integrantes más".
+* @param overflow - How many members are hidden.
+* @param label - Accessible name of the group.
+* @returns The chip's accessible name.
+*/
+function buildOverflowLabel(overflow, label) {
+	return `${overflow} ${label.toLowerCase()} ${AVATAR_GROUP_OVERFLOW_SUFFIX}`;
+}
+/**
+* An overlapping stack of avatars with a +N overflow chip.
+* @param props - Members, optional total, how many to show, size, accessible label, classes and native root attributes.
+* @returns The group.
+*/
+function AvatarGroup(t0) {
+	const $ = _c(40);
+	let className;
+	let members;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let total;
+	if ($[0] !== t0) {
+		({members, total, max: t1, size: t2, label: t3, className, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = members;
+		$[3] = props;
+		$[4] = style;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = total;
+	} else {
+		className = $[1];
+		members = $[2];
+		props = $[3];
+		style = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		total = $[8];
+	}
+	const max = t1 === undefined ? AVATAR_GROUP_DEFAULT_MAX : t1;
+	const size = t2 === undefined ? "md" : t2;
+	const label = t3 === undefined ? AVATAR_GROUP_DEFAULT_LABEL : t3;
+	const reduceMotion = usePrefersReducedMotion();
+	const visibleMembers = members.slice(0, Math.max(0, max));
+	const memberCount = Math.max(members.length, total ?? 0);
+	const overflow = Math.max(0, memberCount - visibleMembers.length);
+	let t4;
+	if ($[9] !== reduceMotion) {
+		t4 = reduceMotion ? { duration: 0 } : ARC_SPRING_MORPH;
+		$[9] = reduceMotion;
+		$[10] = t4;
+	} else {
+		t4 = $[10];
+	}
+	const slotTransition = t4;
+	let t5;
+	if ($[11] !== overflow) {
+		t5 = {
+			overflow,
+			direction: 1
+		};
+		$[11] = overflow;
+		$[12] = t5;
+	} else {
+		t5 = $[12];
+	}
+	const [shownCount, setShownCount] = useState(t5);
+	if (shownCount.overflow !== overflow) {
+		setShownCount({
+			overflow,
+			direction: overflow < shownCount.overflow ? -1 : 1
+		});
+	}
+	const t6 = visibleMembers.length + (overflow > 0 ? 1 : 0);
+	let t7;
+	if ($[13] !== style || $[14] !== t6) {
+		t7 = {
+			...style,
+			"--count": t6
+		};
+		$[13] = style;
+		$[14] = t6;
+		$[15] = t7;
+	} else {
+		t7 = $[15];
+	}
+	const groupStyle = t7;
+	const t8 = "group";
+	const t9 = "avatar-group";
+	let t10;
+	if ($[16] !== className) {
+		t10 = cn("group/avatar-group inline-flex items-center pl-1.5", className);
+		$[16] = className;
+		$[17] = t10;
+	} else {
+		t10 = $[17];
+	}
+	const T0 = AnimatePresence;
+	const t11 = false;
+	let t12;
+	if ($[18] !== size || $[19] !== slotTransition) {
+		t12 = (member, index) => /* @__PURE__ */ _jsx(AvatarGroupSlot, {
+			className: slotClassName,
+			style: { "--index": index },
+			...slotPresence,
+			transition: slotTransition,
+			children: /* @__PURE__ */ _jsxs("span", {
+				className: liftClassName,
+				children: [/* @__PURE__ */ _jsx(Avatar, {
+					className: ringClassName,
+					name: member.name,
+					src: member.src,
+					status: member.status,
+					size
+				}), /* @__PURE__ */ _jsx("span", {
+					"aria-hidden": "true",
+					className: "pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 z-2 -translate-x-1/2 translate-y-[3px] rounded-(--radius-pill) bg-foreground px-2 py-1 text-xs leading-(--leading-body) font-medium whitespace-nowrap text-background opacity-0 transition-[opacity,translate] duration-(--duration-fast) ease-(--ease-standard) pointer-fine:group-hover/avatar-group-slot:translate-y-0 pointer-fine:group-hover/avatar-group-slot:opacity-100 pointer-fine:group-hover/avatar-group-slot:delay-60 motion-reduce:translate-y-0 motion-reduce:transition-none",
+					children: member.name
+				})]
+			})
+		}, member.key ?? member.name);
+		$[18] = size;
+		$[19] = slotTransition;
+		$[20] = t12;
+	} else {
+		t12 = $[20];
+	}
+	const t13 = visibleMembers.map(t12);
+	let t14;
+	if ($[21] !== label || $[22] !== overflow || $[23] !== reduceMotion || $[24] !== shownCount.direction || $[25] !== size || $[26] !== slotTransition || $[27] !== visibleMembers) {
+		t14 = overflow > 0 ? /* @__PURE__ */ _jsx(AvatarGroupSlot, {
+			className: slotClassName,
+			style: { "--index": visibleMembers.length },
+			...slotPresence,
+			transition: slotTransition,
+			children: /* @__PURE__ */ _jsx("span", {
+				role: "img",
+				"aria-label": buildOverflowLabel(overflow, label),
+				"data-slot": "avatar-group-count",
+				"data-size": size,
+				className: cn(liftClassName, ringClassName, "relative grid size-8 place-items-center overflow-hidden bg-surface-muted text-xs font-medium text-text-secondary tabular-nums data-[size=lg]:size-10 data-[size=lg]:text-sm data-[size=sm]:size-6 data-[size=sm]:text-[10px]"),
+				children: /* @__PURE__ */ _jsx(AnimatePresence, {
+					mode: "popLayout",
+					initial: false,
+					custom: shownCount.direction,
+					children: /* @__PURE__ */ _jsxs(motion.span, {
+						"aria-hidden": "true",
+						className: "inline-block",
+						custom: shownCount.direction,
+						variants: reduceMotion ? countFade : countRoll,
+						initial: "hidden",
+						animate: "shown",
+						exit: "gone",
+						children: ["+", overflow]
+					}, overflow)
+				})
+			})
+		}, "overflow") : null;
+		$[21] = label;
+		$[22] = overflow;
+		$[23] = reduceMotion;
+		$[24] = shownCount.direction;
+		$[25] = size;
+		$[26] = slotTransition;
+		$[27] = visibleMembers;
+		$[28] = t14;
+	} else {
+		t14 = $[28];
+	}
+	let t15;
+	if ($[29] !== T0 || $[30] !== t13 || $[31] !== t14) {
+		t15 = /* @__PURE__ */ _jsxs(T0, {
+			initial: t11,
+			children: [t13, t14]
+		});
+		$[29] = T0;
+		$[30] = t13;
+		$[31] = t14;
+		$[32] = t15;
+	} else {
+		t15 = $[32];
+	}
+	let t16;
+	if ($[33] !== groupStyle || $[34] !== label || $[35] !== props || $[36] !== size || $[37] !== t10 || $[38] !== t15) {
+		t16 = /* @__PURE__ */ _jsx("div", {
+			...props,
+			role: t8,
+			"aria-label": label,
+			"data-slot": t9,
+			"data-size": size,
+			className: t10,
+			style: groupStyle,
+			children: t15
+		});
+		$[33] = groupStyle;
+		$[34] = label;
+		$[35] = props;
+		$[36] = size;
+		$[37] = t10;
+		$[38] = t15;
+		$[39] = t16;
+	} else {
+		t16 = $[39];
+	}
+	return t16;
+}
+export { Avatar, AvatarGroup };

package/dist/components/badge.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps, ReactNode } from "react";
+/** Arc's semantic tones. */
+export type BadgeTone = "neutral" | "success" | "info" | "warning" | "danger";
+/** Arc's badge heights: 26px (`md`) and 22px (`sm`). */
+export type BadgeSize = "sm" | "md";
+export type BadgeProps = ComponentProps<"span"> & {
+    /** Arc's semantic tone: `neutral` (default), `success`, `info`, `warning` or `danger`. */
+    tone?: BadgeTone;
+    /** Arc's height: `md` (26px, default) or `sm` (22px). */
+    size?: BadgeSize;
+    /** A leading icon tinted with the tone, hidden from assistive technology. A different icon component crossfades in. */
+    icon?: ReactNode;
+};
+/**
+ * A small label for status, category or metadata. String or number children swap in place with Arc's motion and the
+ * pill springs to the new width; other children render as they are.
+ * @param props - Tone, size, optional icon and native span attributes.
+ * @returns The badge.
+ */
+declare function Badge({ className, tone, size, icon, children, ...props }: BadgeProps): import("react").JSX.Element;
+export { Badge };