beez-ui 0.6.2 → 0.8.0

package/dist/components/account-menu.js

@@ -0,0 +1,405 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { ChevronDownIcon, LogInIcon, LogOutIcon, PlusIcon } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { getNameInitials } from "../lib/name-initials.js";
+import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "./avatar.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { Link } from "./link.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ACCOUNT_MENU_DEFAULT_LABELS = {
+	signIn: "Iniciar sesión",
+	signOut: "Cerrar sesión",
+	trigger: "Menú de cuenta"
+};
+/** Shown when the name yields no initials, so the avatar never renders empty. */
+const DEFAULT_AVATAR_FALLBACK = "?";
+/**
+* Renders the account avatar with an optional status badge.
+* @param props - Identity, status and class names.
+* @returns The avatar.
+*/
+function AccountAvatar(t0) {
+	const $ = _c(21);
+	const { name, image, fallback, status, showStatusBadge, isDecorative: t1, className, classNames } = t0;
+	const isDecorative = t1 === undefined ? false : t1;
+	const isAuthenticated = status === "authenticated";
+	const t2 = showStatusBadge && !isAuthenticated && "grayscale";
+	let t3;
+	if ($[0] !== className || $[1] !== t2) {
+		t3 = cn(t2, className);
+		$[0] = className;
+		$[1] = t2;
+		$[2] = t3;
+	} else {
+		t3 = $[2];
+	}
+	let t4;
+	if ($[3] !== image || $[4] !== isDecorative || $[5] !== name) {
+		t4 = image ? /* @__PURE__ */ _jsx(AvatarImage, {
+			alt: isDecorative ? "" : name,
+			loading: "eager",
+			src: image
+		}) : null;
+		$[3] = image;
+		$[4] = isDecorative;
+		$[5] = name;
+		$[6] = t4;
+	} else {
+		t4 = $[6];
+	}
+	const t5 = isDecorative || undefined;
+	let t6;
+	if ($[7] !== fallback || $[8] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(AvatarFallback, {
+			"aria-hidden": t5,
+			children: fallback
+		});
+		$[7] = fallback;
+		$[8] = t5;
+		$[9] = t6;
+	} else {
+		t6 = $[9];
+	}
+	let t7;
+	if ($[10] !== classNames?.connectedBadge || $[11] !== classNames?.disconnectedBadge || $[12] !== isAuthenticated || $[13] !== showStatusBadge || $[14] !== status) {
+		t7 = showStatusBadge ? /* @__PURE__ */ _jsx(AvatarBadge, {
+			"data-status": status,
+			className: cn(isAuthenticated ? "bg-green-600 dark:bg-green-800" : undefined, isAuthenticated ? classNames?.connectedBadge : classNames?.disconnectedBadge),
+			children: isAuthenticated ? null : /* @__PURE__ */ _jsx(PlusIcon, { "aria-hidden": "true" })
+		}) : null;
+		$[10] = classNames?.connectedBadge;
+		$[11] = classNames?.disconnectedBadge;
+		$[12] = isAuthenticated;
+		$[13] = showStatusBadge;
+		$[14] = status;
+		$[15] = t7;
+	} else {
+		t7 = $[15];
+	}
+	let t8;
+	if ($[16] !== t3 || $[17] !== t4 || $[18] !== t6 || $[19] !== t7) {
+		t8 = /* @__PURE__ */ _jsxs(Avatar, {
+			className: t3,
+			children: [
+				t4,
+				t6,
+				t7
+			]
+		});
+		$[16] = t3;
+		$[17] = t4;
+		$[18] = t6;
+		$[19] = t7;
+		$[20] = t8;
+	} else {
+		t8 = $[20];
+	}
+	return t8;
+}
+/**
+* Presentational account menu: the session and its side effects stay with the caller. Signed in,
+* the menu offers sign-out; signed out, it offers sign-in as a link (`signInHref`) or a callback.
+* @param props - Identity, session status, callbacks, copy and layout.
+* @returns The trigger and its menu.
+*/
+export function AccountMenu(t0) {
+	const $ = _c(70);
+	const { name, email, status, image: t1, avatarFallback, onSignOut, signOutDisabled: t2, onSignIn, signInHref, triggerVariant: t3, showStatusBadge: t4, tooltipLabel, labels, classNames, align: t5, side: t6, sideOffset: t7, children } = t0;
+	const image = t1 === undefined ? null : t1;
+	const signOutDisabled = t2 === undefined ? false : t2;
+	const triggerVariant = t3 === undefined ? "avatar" : t3;
+	const showStatusBadge = t4 === undefined ? false : t4;
+	const align = t5 === undefined ? "end" : t5;
+	const side = t6 === undefined ? "bottom" : t6;
+	const sideOffset = t7 === undefined ? 4 : t7;
+	let t8;
+	if ($[0] !== labels) {
+		t8 = {
+			...ACCOUNT_MENU_DEFAULT_LABELS,
+			...labels
+		};
+		$[0] = labels;
+		$[1] = t8;
+	} else {
+		t8 = $[1];
+	}
+	const resolvedLabels = t8;
+	const isAuthenticated = status === "authenticated";
+	let t9;
+	if ($[2] !== avatarFallback || $[3] !== name) {
+		t9 = avatarFallback ?? (getNameInitials(name) || DEFAULT_AVATAR_FALLBACK);
+		$[2] = avatarFallback;
+		$[3] = name;
+		$[4] = t9;
+	} else {
+		t9 = $[4];
+	}
+	const fallback = t9;
+	let t10;
+	if ($[5] !== classNames || $[6] !== fallback || $[7] !== image || $[8] !== name || $[9] !== showStatusBadge || $[10] !== status) {
+		t10 = {
+			name,
+			image,
+			fallback,
+			status,
+			showStatusBadge,
+			classNames
+		};
+		$[5] = classNames;
+		$[6] = fallback;
+		$[7] = image;
+		$[8] = name;
+		$[9] = showStatusBadge;
+		$[10] = status;
+		$[11] = t10;
+	} else {
+		t10 = $[11];
+	}
+	const avatarProps = t10;
+	const t11 = resolvedLabels.trigger;
+	const t12 = triggerVariant === "sidebar" && "w-full min-w-0 gap-2.5 rounded-lg p-1.5 text-left";
+	const t13 = classNames?.trigger;
+	let t14;
+	if ($[12] !== t12 || $[13] !== t13) {
+		t14 = cn("inline-flex items-center rounded-full outline-none [-webkit-tap-highlight-color:transparent] transition-[box-shadow,opacity,transform] hover:opacity-90 active:scale-[0.96] focus-visible:shadow-[0_0_0_2px_var(--background),0_0_0_4px_var(--ring)] data-[state=open]:shadow-[0_0_0_2px_var(--background),0_0_0_4px_var(--ring)]", t12, t13);
+		$[12] = t12;
+		$[13] = t13;
+		$[14] = t14;
+	} else {
+		t14 = $[14];
+	}
+	const t15 = classNames?.triggerAvatar;
+	let t16;
+	if ($[15] !== avatarProps || $[16] !== t15) {
+		t16 = /* @__PURE__ */ _jsx(AccountAvatar, {
+			...avatarProps,
+			className: t15
+		});
+		$[15] = avatarProps;
+		$[16] = t15;
+		$[17] = t16;
+	} else {
+		t16 = $[17];
+	}
+	let t17;
+	if ($[18] !== email || $[19] !== name || $[20] !== triggerVariant) {
+		t17 = triggerVariant === "sidebar" ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsxs("span", {
+			className: "grid min-w-0 flex-1",
+			children: [/* @__PURE__ */ _jsx("span", {
+				className: "truncate text-sm font-semibold",
+				children: name
+			}), /* @__PURE__ */ _jsx("span", {
+				className: "truncate text-xs text-muted-foreground",
+				children: email
+			})]
+		}), /* @__PURE__ */ _jsx(ChevronDownIcon, {
+			"aria-hidden": "true",
+			className: "size-4 shrink-0 text-muted-foreground"
+		})] }) : null;
+		$[18] = email;
+		$[19] = name;
+		$[20] = triggerVariant;
+		$[21] = t17;
+	} else {
+		t17 = $[21];
+	}
+	let t18;
+	if ($[22] !== resolvedLabels.trigger || $[23] !== t14 || $[24] !== t16 || $[25] !== t17 || $[26] !== triggerVariant) {
+		const triggerButton = /* @__PURE__ */ _jsxs("button", {
+			"data-slot": "account-menu-trigger",
+			"data-variant": triggerVariant,
+			"aria-label": t11,
+			type: "button",
+			className: t14,
+			children: [t16, t17]
+		});
+		t18 = /* @__PURE__ */ _jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: triggerButton
+		});
+		$[22] = resolvedLabels.trigger;
+		$[23] = t14;
+		$[24] = t16;
+		$[25] = t17;
+		$[26] = triggerVariant;
+		$[27] = t18;
+	} else {
+		t18 = $[27];
+	}
+	const trigger = t18;
+	let t19;
+	if ($[28] !== tooltipLabel || $[29] !== trigger) {
+		t19 = tooltipLabel ? /* @__PURE__ */ _jsx(TooltipTrigger, {
+			asChild: true,
+			children: trigger
+		}) : trigger;
+		$[28] = tooltipLabel;
+		$[29] = trigger;
+		$[30] = t19;
+	} else {
+		t19 = $[30];
+	}
+	const t20 = classNames?.content;
+	let t21;
+	if ($[31] !== t20) {
+		t21 = cn("min-w-56", t20);
+		$[31] = t20;
+		$[32] = t21;
+	} else {
+		t21 = $[32];
+	}
+	let t22;
+	if ($[33] !== avatarProps) {
+		t22 = /* @__PURE__ */ _jsx(AccountAvatar, {
+			...avatarProps,
+			isDecorative: true
+		});
+		$[33] = avatarProps;
+		$[34] = t22;
+	} else {
+		t22 = $[34];
+	}
+	let t23;
+	if ($[35] !== name) {
+		t23 = /* @__PURE__ */ _jsx("span", {
+			className: "truncate text-sm leading-tight font-semibold",
+			children: name
+		});
+		$[35] = name;
+		$[36] = t23;
+	} else {
+		t23 = $[36];
+	}
+	let t24;
+	if ($[37] !== email) {
+		t24 = /* @__PURE__ */ _jsx("span", {
+			className: "truncate text-xs leading-tight text-muted-foreground",
+			children: email
+		});
+		$[37] = email;
+		$[38] = t24;
+	} else {
+		t24 = $[38];
+	}
+	let t25;
+	if ($[39] !== t23 || $[40] !== t24) {
+		t25 = /* @__PURE__ */ _jsxs("span", {
+			className: "grid min-w-0 gap-px",
+			children: [t23, t24]
+		});
+		$[39] = t23;
+		$[40] = t24;
+		$[41] = t25;
+	} else {
+		t25 = $[41];
+	}
+	let t26;
+	if ($[42] !== t22 || $[43] !== t25) {
+		t26 = /* @__PURE__ */ _jsxs("div", {
+			className: "grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2.5 px-2 py-1.5",
+			children: [t22, t25]
+		});
+		$[42] = t22;
+		$[43] = t25;
+		$[44] = t26;
+	} else {
+		t26 = $[44];
+	}
+	let t27;
+	if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
+		t27 = /* @__PURE__ */ _jsx(DropdownMenuSeparator, {});
+		$[45] = t27;
+	} else {
+		t27 = $[45];
+	}
+	let t28;
+	if ($[46] !== isAuthenticated || $[47] !== onSignIn || $[48] !== onSignOut || $[49] !== resolvedLabels.signIn || $[50] !== resolvedLabels.signOut || $[51] !== signInHref || $[52] !== signOutDisabled) {
+		t28 = isAuthenticated ? /* @__PURE__ */ _jsxs(DropdownMenuItem, {
+			disabled: signOutDisabled,
+			onSelect: () => void onSignOut(),
+			children: [/* @__PURE__ */ _jsx(LogOutIcon, { "aria-hidden": "true" }), resolvedLabels.signOut]
+		}) : signInHref ? /* @__PURE__ */ _jsx(DropdownMenuItem, {
+			asChild: true,
+			children: /* @__PURE__ */ _jsxs(Link, {
+				href: signInHref,
+				children: [/* @__PURE__ */ _jsx(LogInIcon, { "aria-hidden": "true" }), resolvedLabels.signIn]
+			})
+		}) : /* @__PURE__ */ _jsxs(DropdownMenuItem, {
+			onSelect: () => onSignIn?.(),
+			children: [/* @__PURE__ */ _jsx(LogInIcon, { "aria-hidden": "true" }), resolvedLabels.signIn]
+		});
+		$[46] = isAuthenticated;
+		$[47] = onSignIn;
+		$[48] = onSignOut;
+		$[49] = resolvedLabels.signIn;
+		$[50] = resolvedLabels.signOut;
+		$[51] = signInHref;
+		$[52] = signOutDisabled;
+		$[53] = t28;
+	} else {
+		t28 = $[53];
+	}
+	let t29;
+	if ($[54] !== align || $[55] !== children || $[56] !== side || $[57] !== sideOffset || $[58] !== t21 || $[59] !== t26 || $[60] !== t28) {
+		t29 = /* @__PURE__ */ _jsxs(DropdownMenuContent, {
+			"data-slot": "account-menu-content",
+			align,
+			side,
+			sideOffset,
+			className: t21,
+			children: [
+				t26,
+				t27,
+				children,
+				t28
+			]
+		});
+		$[54] = align;
+		$[55] = children;
+		$[56] = side;
+		$[57] = sideOffset;
+		$[58] = t21;
+		$[59] = t26;
+		$[60] = t28;
+		$[61] = t29;
+	} else {
+		t29 = $[61];
+	}
+	let t30;
+	if ($[62] !== t19 || $[63] !== t29) {
+		t30 = /* @__PURE__ */ _jsxs(DropdownMenu, { children: [t19, t29] });
+		$[62] = t19;
+		$[63] = t29;
+		$[64] = t30;
+	} else {
+		t30 = $[64];
+	}
+	const menu = t30;
+	if (!tooltipLabel) {
+		return menu;
+	}
+	let t31;
+	if ($[65] !== tooltipLabel) {
+		t31 = /* @__PURE__ */ _jsx(TooltipContent, {
+			side: "bottom",
+			sideOffset: 8,
+			children: tooltipLabel
+		});
+		$[65] = tooltipLabel;
+		$[66] = t31;
+	} else {
+		t31 = $[66];
+	}
+	let t32;
+	if ($[67] !== menu || $[68] !== t31) {
+		t32 = /* @__PURE__ */ _jsxs(Tooltip, { children: [menu, t31] });
+		$[67] = menu;
+		$[68] = t31;
+		$[69] = t32;
+	} else {
+		t32 = $[69];
+	}
+	return t32;
+}

package/dist/components/alert.js

@@ -40,7 +40,7 @@ function Alert(t0) {
 	let t2;
 	if ($[7] !== props || $[8] !== t1) {
 		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "fade",
+			kind: "message",
 			children: /* @__PURE__ */ _jsx("div", {
 				"data-slot": "alert",
 				role: "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,81 @@
+"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 } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { MOTION_EASE, MOTION_EASE_IN_OUT, MOTION_TIMING } from "../motion/tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const COLLAPSE_TRANSITION = {
+	height: {
+		duration: MOTION_TIMING.collapse,
+		ease: MOTION_EASE_IN_OUT
+	},
+	opacity: {
+		duration: MOTION_TIMING.panel,
+		ease: MOTION_EASE
+	}
+};
+/** Reduced motion keeps the open/closed contract but applies it instantly. */
+const INSTANT_TRANSITION = { duration: 0 };
+/**
+* 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(10);
+	const { isOpen, children, className, id, animateOnMount: t1 } = t0;
+	const animateOnMount = t1 === undefined ? false : t1;
+	const [isSettled, setIsSettled] = useState(!animateOnMount);
+	const shouldReduceMotion = usePrefersReducedMotion();
+	let t2;
+	if ($[0] !== children || $[1] !== className || $[2] !== id || $[3] !== isOpen || $[4] !== isSettled || $[5] !== shouldReduceMotion) {
+		t2 = isOpen ? /* @__PURE__ */ _jsx(motion.div, {
+			"data-slot": "animated-collapse",
+			id,
+			className: cn(isSettled ? "overflow-visible" : "overflow-hidden", className),
+			initial: {
+				height: 0,
+				opacity: 0
+			},
+			animate: {
+				height: "auto",
+				opacity: 1
+			},
+			exit: {
+				height: 0,
+				opacity: 0
+			},
+			transition: shouldReduceMotion ? INSTANT_TRANSITION : COLLAPSE_TRANSITION,
+			onAnimationStart: () => setIsSettled(false),
+			onAnimationComplete: () => setIsSettled(true),
+			children
+		}, "animated-collapse") : null;
+		$[0] = children;
+		$[1] = className;
+		$[2] = id;
+		$[3] = isOpen;
+		$[4] = isSettled;
+		$[5] = shouldReduceMotion;
+		$[6] = t2;
+	} else {
+		t2 = $[6];
+	}
+	let t3;
+	if ($[7] !== animateOnMount || $[8] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: animateOnMount,
+			children: t2
+		});
+		$[7] = animateOnMount;
+		$[8] = t2;
+		$[9] = t3;
+	} else {
+		t3 = $[9];
+	}
+	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;

package/dist/components/animated-count.js

@@ -0,0 +1,105 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/** Rolls a numeric value vertically when it changes, in the direction of the change. */
+import { useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { SPRING_POP } from "../motion/tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Fraction of the line height the digits travel while rolling. */
+const COUNT_ROLL_DISTANCE = "60%";
+const COUNT_ROLL_DISTANCE_INVERTED = "-60%";
+const INCREMENT_DIRECTION = 1;
+const DECREMENT_DIRECTION = -1;
+const COUNT_ROLL_VARIANTS = {
+	enter: (direction) => ({
+		y: direction > 0 ? COUNT_ROLL_DISTANCE : COUNT_ROLL_DISTANCE_INVERTED,
+		opacity: 0
+	}),
+	center: {
+		y: 0,
+		opacity: 1
+	},
+	exit: (direction) => ({
+		y: direction > 0 ? COUNT_ROLL_DISTANCE_INVERTED : COUNT_ROLL_DISTANCE,
+		opacity: 0
+	})
+};
+/**
+* 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 function AnimatedCount(t0) {
+	const $ = _c(13);
+	const { value, format, className } = t0;
+	const [previousValue, setPreviousValue] = useState(value);
+	const [direction, setDirection] = useState(INCREMENT_DIRECTION);
+	const shouldReduceMotion = usePrefersReducedMotion();
+	if (previousValue !== value) {
+		setDirection(value > previousValue ? INCREMENT_DIRECTION : DECREMENT_DIRECTION);
+		setPreviousValue(value);
+	}
+	let t1;
+	if ($[0] !== format || $[1] !== value) {
+		t1 = format ? format(value) : value;
+		$[0] = format;
+		$[1] = value;
+		$[2] = t1;
+	} else {
+		t1 = $[2];
+	}
+	const formattedValue = t1;
+	let t2;
+	if ($[3] !== className) {
+		t2 = cn("relative inline-flex overflow-hidden align-bottom tabular-nums", className);
+		$[3] = className;
+		$[4] = t2;
+	} else {
+		t2 = $[4];
+	}
+	let t3;
+	if ($[5] !== direction || $[6] !== formattedValue || $[7] !== shouldReduceMotion || $[8] !== value) {
+		t3 = shouldReduceMotion ? /* @__PURE__ */ _jsx("span", {
+			className: "inline-block",
+			children: formattedValue
+		}) : /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			mode: "popLayout",
+			custom: direction,
+			children: /* @__PURE__ */ _jsx(motion.span, {
+				className: "inline-block",
+				custom: direction,
+				variants: COUNT_ROLL_VARIANTS,
+				initial: "enter",
+				animate: "center",
+				exit: "exit",
+				transition: SPRING_POP,
+				children: formattedValue
+			}, value)
+		});
+		$[5] = direction;
+		$[6] = formattedValue;
+		$[7] = shouldReduceMotion;
+		$[8] = value;
+		$[9] = t3;
+	} else {
+		t3 = $[9];
+	}
+	let t4;
+	if ($[10] !== t2 || $[11] !== t3) {
+		t4 = /* @__PURE__ */ _jsx("span", {
+			"data-slot": "animated-count",
+			className: t2,
+			children: t3
+		});
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+	} else {
+		t4 = $[12];
+	}
+	return t4;
+}

package/dist/components/animated-list-item.d.ts

@@ -0,0 +1,25 @@
+/** List item that enters, leaves and reflows smoothly inside an `AnimatePresence`. */
+import type { HTMLAttributes, ReactNode } from "react";
+declare const ANIMATED_LIST_ITEM_ELEMENTS: {
+    readonly li: import("motion/react").ForwardRefComponent<HTMLLIElement, import("motion/react").HTMLMotionProps<"li">>;
+    readonly div: import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>;
+    readonly article: import("motion/react").ForwardRefComponent<HTMLElement, import("motion/react").HTMLMotionProps<"article">>;
+};
+/** Native handlers whose names collide with Motion's animation and drag callbacks. */
+type MotionConflictingHandlers = "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration" | "onDrag" | "onDragStart" | "onDragEnd";
+export type AnimatedListItemProps = Omit<HTMLAttributes<HTMLElement>, MotionConflictingHandlers> & {
+    children: ReactNode;
+    as?: keyof typeof ANIMATED_LIST_ITEM_ELEMENTS;
+    /** Reflow siblings with a spring when items are added, removed or reordered. */
+    layout?: boolean;
+};
+/**
+ * Wrap the list in `<AnimatePresence initial={false}>` so only items added after the
+ * first render animate in, and removed items animate out before leaving the DOM.
+ * A leaving item turns inert and hidden from assistive technology, so it can no
+ * longer be focused, clicked or announced during its exit.
+ * @param props - Native attributes, element type and content.
+ * @returns The animated item.
+ */
+export declare function AnimatedListItem({ children, as, layout, className, ...elementProps }: AnimatedListItemProps): import("react").JSX.Element;
+export {};