@astra-kit/ui 0.0.0-stage → 1.0.0

package/dist/components/alert.js

@@ -0,0 +1,503 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Alert (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a persistent message that helps people
+* recover or continue, on Arc's surface with a resting shadow. A `tone` tints and picks its icon, which morphs in
+* place when the tone changes, and a new title or string detail rises in over the old one. `onDismiss` adds a dismiss
+* button and `open` collapses the alert's height while it fades, so the content below closes the gap.
+*/
+import { useRef, useState } from "react";
+import { AnimatePresence, motion, useIsPresent } from "motion/react";
+import { Check, CircleX, Info, TriangleAlert, X } from "lucide-react";
+import { ALERT_DISMISS_LABEL, ALERT_DISMISS_LABEL_SEPARATOR, ALERT_TEXT_OFFSET_EM, ALERT_TONE_ROLE } from "../constants/alert.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_SMOOTH } from "../motion/arc-tokens.js";
+import { ARC_ICON_ENTER, ARC_ICON_EXIT, ARC_ICON_TRANSITION, ARC_REDUCED_EXIT, ARC_REDUCED_TRANSITION, ARC_SWAP_EXIT_TRANSITION, ARC_SWAP_REST } from "../motion/arc-swap.js";
+import { useAttachedElement } from "../motion/use-attached-element.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** The icon each tone shows unless `icon` replaces it. */
+const TONE_ICON = {
+	info: Info,
+	success: Check,
+	warning: TriangleAlert,
+	danger: CircleX
+};
+/** Colour of the icon for each tone. */
+const TONE_ICON_CLASS_NAME = {
+	info: "text-(--accent)",
+	success: "text-success",
+	warning: "text-warning",
+	danger: "text-danger"
+};
+const reducedEnter = { opacity: 0 };
+/** A new title or detail rises out of a soft blur; the old one lifts away faster. */
+const textEnter = {
+	opacity: 0,
+	y: `${ALERT_TEXT_OFFSET_EM}em`,
+	filter: `blur(${ARC_BLUR.soft}px)`
+};
+const textExit = {
+	opacity: 0,
+	y: `${-ALERT_TEXT_OFFSET_EM}em`,
+	filter: `blur(${ARC_BLUR.subtle}px)`,
+	transition: ARC_SWAP_EXIT_TRANSITION
+};
+const textTransition = {
+	duration: ARC_DURATION.standard,
+	ease: [...ARC_EASE.enter]
+};
+const presenceTransition = {
+	height: ARC_SPRING_SMOOTH,
+	opacity: {
+		duration: ARC_DURATION.standard,
+		ease: [...ARC_EASE.enter]
+	}
+};
+/** The alert itself collapses, so its padding, border and margins close along with the height. */
+const collapsedBox = {
+	height: 0,
+	paddingTop: 0,
+	paddingBottom: 0,
+	borderTopWidth: 0,
+	borderBottomWidth: 0,
+	marginTop: 0,
+	marginBottom: 0
+};
+const presenceExit = {
+	...collapsedBox,
+	opacity: 0,
+	transition: {
+		default: ARC_SPRING_SMOOTH,
+		opacity: ARC_SWAP_EXIT_TRANSITION
+	}
+};
+const reducedPresenceExit = {
+	...collapsedBox,
+	opacity: 0,
+	transition: { duration: 0 }
+};
+/** Entrance target; once it settles, the alert hands height and opacity back to the consumer's classes and style. */
+const presenceEnter = {
+	height: "auto",
+	opacity: 1
+};
+/**
+* Converts a consumer style value into the inline string React would write.
+* @param value - The consumer's style value, if any.
+* @param unit - Unit appended to numbers, as React does for lengths.
+* @returns The inline value, or an empty string to fall back to the stylesheet.
+*/
+function toInlineStyleValue(value, unit = "") {
+	if (value === undefined) return "";
+	return typeof value === "number" ? `${value}${unit}` : value;
+}
+/** Outgoing copies are hidden from assistive technology while they fade, so the live region reads only the current one. */
+function AlertSwap(props) {
+	const $ = _c(3);
+	const isPresent = useIsPresent();
+	const t0 = isPresent ? props["aria-hidden"] : true;
+	let t1;
+	if ($[0] !== props || $[1] !== t0) {
+		t1 = /* @__PURE__ */ _jsx(motion.span, {
+			...props,
+			"aria-hidden": t0
+		});
+		$[0] = props;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t1 = $[2];
+	}
+	return t1;
+}
+/** A line of copy that rises in over the previous one when it changes. */
+function AlertText(t0) {
+	const $ = _c(5);
+	const { text, reduceMotion } = t0;
+	const t1 = reduceMotion ? reducedEnter : textEnter;
+	const t2 = reduceMotion ? ARC_REDUCED_EXIT : textExit;
+	const t3 = reduceMotion ? ARC_REDUCED_TRANSITION : textTransition;
+	let t4;
+	if ($[0] !== t1 || $[1] !== t2 || $[2] !== t3 || $[3] !== text) {
+		t4 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			mode: "popLayout",
+			initial: false,
+			children: /* @__PURE__ */ _jsx(AlertSwap, {
+				className: "relative block",
+				initial: t1,
+				animate: ARC_SWAP_REST,
+				exit: t2,
+				transition: t3,
+				children: text
+			}, text)
+		});
+		$[0] = t1;
+		$[1] = t2;
+		$[2] = t3;
+		$[3] = text;
+		$[4] = t4;
+	} else {
+		t4 = $[4];
+	}
+	return t4;
+}
+/** The tone icon: a new tone morphs its icon in place. */
+function AlertIcon(t0) {
+	const $ = _c(11);
+	const { icon, iconKey, tone, reduceMotion } = t0;
+	const t1 = TONE_ICON_CLASS_NAME[tone];
+	let t2;
+	if ($[0] !== t1) {
+		t2 = cn("relative mt-px grid size-[18px] flex-none place-items-center [&_svg]:block [&_svg:not([class*='size-'])]:size-[18px]", t1);
+		$[0] = t1;
+		$[1] = t2;
+	} else {
+		t2 = $[1];
+	}
+	const t3 = reduceMotion ? reducedEnter : ARC_ICON_ENTER;
+	const t4 = reduceMotion ? ARC_REDUCED_EXIT : ARC_ICON_EXIT;
+	const t5 = reduceMotion ? ARC_REDUCED_TRANSITION : ARC_ICON_TRANSITION;
+	let t6;
+	if ($[2] !== icon || $[3] !== iconKey || $[4] !== t3 || $[5] !== t4 || $[6] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			mode: "popLayout",
+			initial: false,
+			children: /* @__PURE__ */ _jsx(AlertSwap, {
+				className: "relative grid place-items-center",
+				initial: t3,
+				animate: ARC_SWAP_REST,
+				exit: t4,
+				transition: t5,
+				children: icon
+			}, iconKey)
+		});
+		$[2] = icon;
+		$[3] = iconKey;
+		$[4] = t3;
+		$[5] = t4;
+		$[6] = t5;
+		$[7] = t6;
+	} else {
+		t6 = $[7];
+	}
+	let t7;
+	if ($[8] !== t2 || $[9] !== t6) {
+		t7 = /* @__PURE__ */ _jsx("span", {
+			"data-slot": "alert-icon",
+			"aria-hidden": "true",
+			className: t2,
+			children: t6
+		});
+		$[8] = t2;
+		$[9] = t6;
+		$[10] = t7;
+	} else {
+		t7 = $[10];
+	}
+	return t7;
+}
+/** Arc's alert surface: icon, copy column, optional action and dismiss button in one row. */
+const alertClassName = "group/alert relative flex w-full min-w-0 items-start gap-(--space-3) rounded-(--radius-control) border border-border bg-surface p-(--space-4) text-left text-sm text-foreground shadow-(--shadow-resting)";
+/** The alert surface itself. */
+function AlertBox(t0) {
+	const $ = _c(60);
+	let action;
+	let children;
+	let className;
+	let dismissLabel;
+	let icon;
+	let onDismiss;
+	let presence;
+	let props;
+	let reduceMotion;
+	let t1;
+	let title;
+	if ($[0] !== t0) {
+		({className, title, tone: t1, icon, action, onDismiss, dismissLabel, reduceMotion, presence, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = action;
+		$[2] = children;
+		$[3] = className;
+		$[4] = dismissLabel;
+		$[5] = icon;
+		$[6] = onDismiss;
+		$[7] = presence;
+		$[8] = props;
+		$[9] = reduceMotion;
+		$[10] = t1;
+		$[11] = title;
+	} else {
+		action = $[1];
+		children = $[2];
+		className = $[3];
+		dismissLabel = $[4];
+		icon = $[5];
+		onDismiss = $[6];
+		presence = $[7];
+		props = $[8];
+		reduceMotion = $[9];
+		t1 = $[10];
+		title = $[11];
+	}
+	const tone = t1 === undefined ? "info" : t1;
+	const isPresent = useIsPresent();
+	const ToneIcon = TONE_ICON[tone];
+	let t2;
+	if ($[12] !== ToneIcon || $[13] !== icon) {
+		t2 = icon === false ? null : icon ?? /* @__PURE__ */ _jsx(ToneIcon, { "aria-hidden": "true" });
+		$[12] = ToneIcon;
+		$[13] = icon;
+		$[14] = t2;
+	} else {
+		t2 = $[14];
+	}
+	const resolvedIcon = t2;
+	const details = typeof children === "string" || typeof children === "number" ? String(children) : null;
+	const hasDetails = children !== undefined && children !== null && children !== false && children !== "";
+	const t3 = ALERT_TONE_ROLE[tone];
+	let t4;
+	if ($[15] !== className) {
+		t4 = cn(alertClassName, className);
+		$[15] = className;
+		$[16] = t4;
+	} else {
+		t4 = $[16];
+	}
+	let t5;
+	if ($[17] !== props || $[18] !== t3 || $[19] !== t4 || $[20] !== tone) {
+		t5 = {
+			"data-slot": "alert",
+			"data-tone": tone,
+			role: t3,
+			className: t4,
+			...props
+		};
+		$[17] = props;
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = tone;
+		$[21] = t5;
+	} else {
+		t5 = $[21];
+	}
+	const rootProps = t5;
+	let t6;
+	if ($[22] !== icon || $[23] !== reduceMotion || $[24] !== resolvedIcon || $[25] !== tone) {
+		t6 = resolvedIcon ? /* @__PURE__ */ _jsx(AlertIcon, {
+			icon: resolvedIcon,
+			iconKey: icon ? "custom" : tone,
+			tone,
+			reduceMotion
+		}) : null;
+		$[22] = icon;
+		$[23] = reduceMotion;
+		$[24] = resolvedIcon;
+		$[25] = tone;
+		$[26] = t6;
+	} else {
+		t6 = $[26];
+	}
+	let t7;
+	if ($[27] !== reduceMotion || $[28] !== title) {
+		t7 = /* @__PURE__ */ _jsx("strong", {
+			"data-slot": "alert-title",
+			className: "relative block text-sm font-medium",
+			children: /* @__PURE__ */ _jsx(AlertText, {
+				text: title,
+				reduceMotion
+			})
+		});
+		$[27] = reduceMotion;
+		$[28] = title;
+		$[29] = t7;
+	} else {
+		t7 = $[29];
+	}
+	let t8;
+	if ($[30] !== children || $[31] !== details || $[32] !== hasDetails || $[33] !== reduceMotion) {
+		t8 = hasDetails ? /* @__PURE__ */ _jsx("div", {
+			"data-slot": "alert-description",
+			className: "relative text-xs leading-(--leading-body) text-pretty text-text-secondary [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover-fine:text-foreground [&_p:not(:last-child)]:mb-4",
+			children: details === null ? children : /* @__PURE__ */ _jsx(AlertText, {
+				text: details,
+				reduceMotion
+			})
+		}) : null;
+		$[30] = children;
+		$[31] = details;
+		$[32] = hasDetails;
+		$[33] = reduceMotion;
+		$[34] = t8;
+	} else {
+		t8 = $[34];
+	}
+	let t9;
+	if ($[35] !== t7 || $[36] !== t8) {
+		t9 = /* @__PURE__ */ _jsxs("div", {
+			"data-slot": "alert-copy",
+			className: "grid min-w-0 flex-[1_1_8rem] gap-(--space-1)",
+			children: [t7, t8]
+		});
+		$[35] = t7;
+		$[36] = t8;
+		$[37] = t9;
+	} else {
+		t9 = $[37];
+	}
+	let t10;
+	if ($[38] !== action) {
+		t10 = action ? /* @__PURE__ */ _jsx("div", {
+			"data-slot": "alert-action",
+			className: "flex flex-none flex-wrap items-center gap-(--space-2) self-start",
+			children: action
+		}) : null;
+		$[38] = action;
+		$[39] = t10;
+	} else {
+		t10 = $[39];
+	}
+	let t11;
+	if ($[40] !== t10 || $[41] !== t9) {
+		t11 = /* @__PURE__ */ _jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-wrap items-start gap-(--space-3)",
+			children: [t9, t10]
+		});
+		$[40] = t10;
+		$[41] = t9;
+		$[42] = t11;
+	} else {
+		t11 = $[42];
+	}
+	let t12;
+	if ($[43] !== dismissLabel || $[44] !== onDismiss || $[45] !== title) {
+		t12 = onDismiss ? /* @__PURE__ */ _jsx("button", {
+			type: "button",
+			"data-slot": "alert-dismiss",
+			"aria-label": dismissLabel ?? `${ALERT_DISMISS_LABEL}${ALERT_DISMISS_LABEL_SEPARATOR}${title}`,
+			onClick: onDismiss,
+			className: "-my-[5px] -mr-1.5 grid size-7 flex-none cursor-pointer place-items-center rounded-(--radius-pill) border-0 bg-transparent text-text-muted [-webkit-tap-highlight-color:transparent] transition-[scale,background-color,color] duration-(--duration-fast) ease-(--ease-standard) hover-fine:bg-surface-muted hover-fine:text-foreground active:scale-[.96] motion-reduce:transition-none motion-reduce:active:scale-100",
+			children: /* @__PURE__ */ _jsx(X, {
+				className: "size-4",
+				strokeWidth: 1.75,
+				"aria-hidden": "true"
+			})
+		}) : null;
+		$[43] = dismissLabel;
+		$[44] = onDismiss;
+		$[45] = title;
+		$[46] = t12;
+	} else {
+		t12 = $[46];
+	}
+	let t13;
+	if ($[47] !== t11 || $[48] !== t12 || $[49] !== t6) {
+		t13 = /* @__PURE__ */ _jsxs(_Fragment, { children: [
+			t6,
+			t11,
+			t12
+		] });
+		$[47] = t11;
+		$[48] = t12;
+		$[49] = t6;
+		$[50] = t13;
+	} else {
+		t13 = $[50];
+	}
+	const content = t13;
+	if (presence) {
+		const t14 = rootProps;
+		const t15 = isPresent ? rootProps["aria-hidden"] : true;
+		const t16 = !isPresent || rootProps.inert;
+		let t17;
+		if ($[51] !== content || $[52] !== presence || $[53] !== t14 || $[54] !== t15 || $[55] !== t16) {
+			t17 = /* @__PURE__ */ _jsx(motion.div, {
+				...t14,
+				...presence,
+				"aria-hidden": t15,
+				inert: t16,
+				children: content
+			});
+			$[51] = content;
+			$[52] = presence;
+			$[53] = t14;
+			$[54] = t15;
+			$[55] = t16;
+			$[56] = t17;
+		} else {
+			t17 = $[56];
+		}
+		return t17;
+	}
+	let t14;
+	if ($[57] !== content || $[58] !== rootProps) {
+		t14 = /* @__PURE__ */ _jsx("div", {
+			...rootProps,
+			children: content
+		});
+		$[57] = content;
+		$[58] = rootProps;
+		$[59] = t14;
+	} else {
+		t14 = $[59];
+	}
+	return t14;
+}
+/**
+* A persistent, in-flow message with a tone icon, a title and optional details, action and dismissal.
+* @param props - Title, tone, details, presence and dismissal, extensions and native div attributes.
+* @returns The alert; with `open` or `onDismiss` it collapses its own height when hidden.
+*/
+function Alert({ open, onDismiss, ref: consumerRef, ...props }) {
+	const reduceMotion = usePrefersReducedMotion();
+	const [isDismissed, setIsDismissed] = useState(false);
+	const [presenceElement, attachPresence] = useAttachedElement(consumerRef);
+	const restingOverflow = useRef(undefined);
+	const clipPresence = () => {
+		if (!presenceElement) return;
+		restingOverflow.current ??= presenceElement.style.overflow;
+		presenceElement.style.overflow = "hidden";
+	};
+	const settlePresence = (definition) => {
+		if (!presenceElement) return;
+		if (restingOverflow.current !== undefined) presenceElement.style.overflow = restingOverflow.current;
+		restingOverflow.current = undefined;
+		if (definition === presenceEnter) {
+			presenceElement.style.height = toInlineStyleValue(props.style?.height, "px");
+			presenceElement.style.opacity = toInlineStyleValue(props.style?.opacity);
+		}
+	};
+	if (open === undefined && !onDismiss) {
+		return /* @__PURE__ */ _jsx(AlertBox, {
+			...props,
+			ref: consumerRef,
+			reduceMotion
+		});
+	}
+	const isOpen = open ?? !isDismissed;
+	const dismiss = onDismiss && (() => open === undefined ? setIsDismissed(true) : onDismiss());
+	return /* @__PURE__ */ _jsx(AnimatePresence, {
+		initial: false,
+		onExitComplete: () => {
+			if (open === undefined) onDismiss?.();
+		},
+		children: isOpen ? /* @__PURE__ */ _jsx(AlertBox, {
+			...props,
+			onDismiss: dismiss,
+			reduceMotion,
+			presence: {
+				ref: attachPresence,
+				initial: {
+					height: 0,
+					opacity: 0
+				},
+				animate: presenceEnter,
+				exit: reduceMotion ? reducedPresenceExit : presenceExit,
+				transition: reduceMotion ? { duration: 0 } : presenceTransition,
+				onAnimationStart: clipPresence,
+				onAnimationComplete: settlePresence
+			}
+		}, "alert") : null
+	});
+}
+export { Alert };

package/dist/components/animated-collapse.d.ts

@@ -0,0 +1,19 @@
+/** Expands and collapses a region by animating its height, then releases overflow. */
+import { type ReactNode } from "react";
+export interface AnimatedCollapseProps {
+    /** Whether the region is rendered and expanded. */
+    isOpen: boolean;
+    children: ReactNode;
+    className?: string;
+    id?: string;
+    /** Animate the very first render too; off by default so SSR output stays visible. */
+    animateOnMount?: boolean;
+}
+/**
+ * Renders `children` only while `isOpen`, animating height and opacity.
+ * Keep padding inside `children`: the animated wrapper collapses to zero height.
+ * Overflow is clipped only while animating, so focus rings and popovers are not cut once settled.
+ * @param props - Open state, content and optional wrapper attributes.
+ * @returns The animated region, or nothing when closed.
+ */
+export declare function AnimatedCollapse({ isOpen, children, className, id, animateOnMount }: AnimatedCollapseProps): import("react").JSX.Element;

package/dist/components/animated-collapse.js

@@ -0,0 +1,170 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/** Expands and collapses a region by animating its height, then releases overflow. */
+import { useState } from "react";
+import { AnimatePresence, motion, useIsPresent } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { MOTION_EASE, MOTION_EASE_STANDARD, MOTION_TIMING, SPRING_PANEL } from "../motion/tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Arc's accordion: the height springs without overshoot while the content fades in. */
+const COLLAPSE_TRANSITION = {
+	height: SPRING_PANEL,
+	opacity: {
+		duration: MOTION_TIMING.panel,
+		ease: MOTION_EASE
+	}
+};
+/** Arc's accordion closes on the same spring and fades out faster than it came in. */
+const COLLAPSE_EXIT_TRANSITION = {
+	height: SPRING_PANEL,
+	opacity: {
+		duration: MOTION_TIMING.fast,
+		ease: MOTION_EASE_STANDARD
+	}
+};
+/** Reduced motion applies the height at once but keeps the short fade, so exits always settle. */
+const REDUCED_MOTION_COLLAPSE_TRANSITION = {
+	height: { duration: 0 },
+	opacity: {
+		duration: MOTION_TIMING.panel,
+		ease: MOTION_EASE
+	}
+};
+/**
+* The animated region. While it collapses out it turns inert and hidden from assistive
+* technology, so stale controls cannot be clicked, focused or announced during the fade.
+* @param props - Content, optional wrapper attributes and whether it mounts with an entrance.
+* @returns The animated region.
+*/
+function AnimatedCollapseRegion(t0) {
+	const $ = _c(17);
+	const { children, className, id, isEntering } = t0;
+	const [isSettled, setIsSettled] = useState(!isEntering);
+	const isPresent = useIsPresent();
+	const shouldReduceMotion = usePrefersReducedMotion();
+	const t1 = isPresent ? undefined : true;
+	const t2 = !isPresent || undefined;
+	const t3 = isSettled ? "overflow-visible" : "overflow-hidden";
+	let t4;
+	if ($[0] !== className || $[1] !== t3) {
+		t4 = cn(t3, className);
+		$[0] = className;
+		$[1] = t3;
+		$[2] = t4;
+	} else {
+		t4 = $[2];
+	}
+	let t5;
+	let t6;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = {
+			height: 0,
+			opacity: 0
+		};
+		t6 = {
+			height: "auto",
+			opacity: 1
+		};
+		$[3] = t5;
+		$[4] = t6;
+	} else {
+		t5 = $[3];
+		t6 = $[4];
+	}
+	const t7 = shouldReduceMotion ? REDUCED_MOTION_COLLAPSE_TRANSITION : COLLAPSE_EXIT_TRANSITION;
+	let t8;
+	if ($[5] !== t7) {
+		t8 = {
+			height: 0,
+			opacity: 0,
+			transition: t7
+		};
+		$[5] = t7;
+		$[6] = t8;
+	} else {
+		t8 = $[6];
+	}
+	const t9 = shouldReduceMotion ? REDUCED_MOTION_COLLAPSE_TRANSITION : COLLAPSE_TRANSITION;
+	let t10;
+	let t11;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = () => setIsSettled(false);
+		t11 = () => setIsSettled(true);
+		$[7] = t10;
+		$[8] = t11;
+	} else {
+		t10 = $[7];
+		t11 = $[8];
+	}
+	let t12;
+	if ($[9] !== children || $[10] !== id || $[11] !== t1 || $[12] !== t2 || $[13] !== t4 || $[14] !== t8 || $[15] !== t9) {
+		t12 = /* @__PURE__ */ _jsx(motion.div, {
+			"data-slot": "animated-collapse",
+			id,
+			"aria-hidden": t1,
+			inert: t2,
+			className: t4,
+			initial: t5,
+			animate: t6,
+			exit: t8,
+			transition: t9,
+			onAnimationStart: t10,
+			onAnimationComplete: t11,
+			children
+		});
+		$[9] = children;
+		$[10] = id;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t4;
+		$[14] = t8;
+		$[15] = t9;
+		$[16] = t12;
+	} else {
+		t12 = $[16];
+	}
+	return t12;
+}
+/**
+* Renders `children` only while `isOpen`, animating height and opacity.
+* Keep padding inside `children`: the animated wrapper collapses to zero height.
+* Overflow is clipped only while animating, so focus rings and popovers are not cut once settled.
+* @param props - Open state, content and optional wrapper attributes.
+* @returns The animated region, or nothing when closed.
+*/
+export function AnimatedCollapse(t0) {
+	const $ = _c(9);
+	const { isOpen, children, className, id, animateOnMount: t1 } = t0;
+	const animateOnMount = t1 === undefined ? false : t1;
+	let t2;
+	if ($[0] !== animateOnMount || $[1] !== children || $[2] !== className || $[3] !== id || $[4] !== isOpen) {
+		t2 = isOpen ? /* @__PURE__ */ _jsx(AnimatedCollapseRegion, {
+			className,
+			id,
+			isEntering: animateOnMount,
+			children
+		}, "animated-collapse") : null;
+		$[0] = animateOnMount;
+		$[1] = children;
+		$[2] = className;
+		$[3] = id;
+		$[4] = isOpen;
+		$[5] = t2;
+	} else {
+		t2 = $[5];
+	}
+	let t3;
+	if ($[6] !== animateOnMount || $[7] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: animateOnMount,
+			children: t2
+		});
+		$[6] = animateOnMount;
+		$[7] = t2;
+		$[8] = t3;
+	} else {
+		t3 = $[8];
+	}
+	return t3;
+}

package/dist/components/animated-count.d.ts

@@ -0,0 +1,13 @@
+export interface AnimatedCountProps {
+    value: number;
+    /** Optional formatter, for example a locale-aware number format. */
+    format?: (value: number) => string;
+    className?: string;
+}
+/**
+ * Renders `value` and animates each change: increments roll up, decrements roll down.
+ * With reduced motion the new value replaces the previous one without travel.
+ * @param props - Current value, optional formatter and class name.
+ * @returns The animated number.
+ */
+export declare function AnimatedCount({ value, format, className }: AnimatedCountProps): import("react").JSX.Element;