Animated List

1"use client";
2 
3import {
4  Children,
5  forwardRef,
6  useEffect,
7  useMemo,
8  useState,
9  type ComponentPropsWithoutRef,
10  type ReactElement,
11  type ReactNode,
12} from "react";
13 
14// @interlace/animated-list v1.2.0 — Interlace design system.
15// Docs, props and live preview: https://ds.interlace.tools/c/animated-list
16// What changed since: https://ds.interlace.tools/c/animated-list#history
17// Generated banner — keep it, the upgrade diff reads this version.
18 
19/**
20 * @interlace/ui — AnimatedList + AnimatedListItem
21 *
22 * A feed that reveals its children one at a time, newest on top, each entry
23 * springing in from `scale: 0`. One more appears every `delay` ms (1000 by
24 * default) until the list is full, then it stops — or restarts, with `loop`.
25 *
26 * The list is `aria-live="polite"`, so each arrival is announced.
27 *
28 * ## Provenance
29 *
30 * Our reimplementation of the Magic UI `AnimatedList` concept. What is ours:
31 * the reduced-motion gating, the visible pause control, and a `loop` that
32 * really restarts — upstream advanced with `% length` but never reset the
33 * visible window, so it stalled at the end instead of looping. The spring
34 * physics, gap, direction and per-step delay are all props with structural
35 * defaults, so nothing product-specific is baked in.
36 *
37 * ## Anatomy
38 *
39 *   div.relative
40 *     ├─ div                         (data-slot="animated-list", aria-live=polite)
41 *     │   └─ AnimatedListItem ×      (data-slot="animated-list-item", motion.div)
42 *     └─ button                      (data-slot="animated-list-pause", aria-pressed)
43 *
44 * ## Motion
45 *
46 * The sequencing is JS-driven (a `setTimeout` chain) and the pop-in is
47 * `motion/react`, so the CSS reset in `styles/preflight.css` reaches neither.
48 * Every layer is gated in JS instead:
49 *
50 * | Layer            | Driven by                    | Under `reduce`                       |
51 * | ---------------- | ---------------------------- | ------------------------------------ |
52 * | auto-advance     | `setTimeout` chain           | `isPlaying` false — never ticks      |
53 * | visible window   | `revealCount` state          | full child count, rendered at once   |
54 * | pause control    | —                            | not rendered (nothing left to pause) |
55 * | entry pop-in     | `motion/react` spring        | `initial={false}` — mounts settled   |
56 * | reflow slide     | `motion/react` `layout` FLIP | `layout` off                         |
57 *
58// … truncated