Animated List

1"use client";
2 
3import * as React from "react";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7 
8export interface AnimatedListProps
9  extends React.HTMLAttributes<HTMLUListElement> {
10  /** Milliseconds of stagger applied to entering items, by DOM order. */
11  stagger?: number;
12}
13 
14/**
15 * AnimatedList — a semantic `<ul>` whose `<li>` children fade/slide in with a
16 * stagger and animate out cleanly when removed.
17 *
18 * Usage: pass keyed children (each `AnimatedListItem` needs a stable `key`) so
19 * AnimatePresence can track add/remove. `layout` handles reordering.
20 *
21 * Accessibility: it stays a real list (`<ul>`/`<li>`), so list semantics and
22 * keyboard focus are preserved; exit animation does not steal focus. Under
23 * `prefers-reduced-motion` items appear/leave instantly. Clean-room original.
24 */
25export function AnimatedList({
26  stagger = 60,
27  className,
28  children,
29  ...props
30}: AnimatedListProps) {
31  // Provide the stagger to items via context so index-based delay works even
32  // when consumers wrap items.
33  return (
34    <StaggerContext.Provider value={stagger}>
35      <ul className={cn("flex flex-col gap-2", className)} {...props}>
36        <AnimatePresence initial={false}>{children}</AnimatePresence>
37      </ul>
38    </StaggerContext.Provider>
39  );
40}
41 
42const StaggerContext = React.createContext<number>(60);
43 
44export interface AnimatedListItemProps
45  extends React.LiHTMLAttributes<HTMLLIElement> {
46  /** Position in the list, used to stagger the entrance. */
47  index?: number;
48}
49 
50export const AnimatedListItem = React.forwardRef<
51  HTMLLIElement,
52  AnimatedListItemProps
53>(({ index = 0, className, children, ...props }, ref) => {
54  const reduce = useReducedMotion();
55  const stagger = React.useContext(StaggerContext);
56  const delay = reduce ? 0 : (index * stagger) / 1000;
57 
58  return (
59    <motion.li
60      ref={ref}
61      layout={reduce ? false : "position"}
62      initial={reduce ? false : { opacity: 0, y: 10 }}
63      animate={{ opacity: 1, y: 0 }}
64      exit={reduce ? { opacity: 0 } : { opacity: 0, y: -8, scale: 0.98 }}
65      transition={{ duration: reduce ? 0 : 0.26, ease: [0.2, 0, 0, 1], delay }}
66      className={cn(
67        "rounded-xl border border-[var(--color-border,#e4e7ec)]",
68        "bg-[var(--color-surface,#fff)] px-4 py-3 text-sm text-[var(--color-fg,#111318)]",
69        "[will-change:transform,opacity]",
70        className,
71      )}
72      {...(props as React.ComponentProps<typeof motion.li>)}
73// … truncated