{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"cascade-list","type":"registry:ui","title":"Cascade List","description":"Items drop in one at a time, like a live notification feed.","dependencies":[],"registryDependencies":[],"files":[{"path":"registry/ui/cascade-list.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { useEffect, useState, type ReactNode } from \"react\";\n\nconst css = `@keyframes animated-list-in{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}`;\n\nexport interface CascadeListProps {\n  items: ReactNode[];\n  /** Ms between new items. */\n  delay?: number;\n  /** Max items visible at once. */\n  max?: number;\n  className?: string;\n}\n\nexport function CascadeList({ items, delay = 1200, max = 4, className }: CascadeListProps) {\n  // Monotonic counter: every tick shows items[count % length] as the newest entry.\n  const [count, setCount] = useState(1);\n\n  useEffect(() => {\n    const id = window.setInterval(() => setCount((c) => c + 1), delay);\n    return () => window.clearInterval(id);\n  }, [delay]);\n\n  const visible = [];\n  for (let n = count - 1; n >= Math.max(0, count - max); n--) visible.push(n);\n\n  return (\n    <ul className={`flex flex-col gap-3 ${className ?? \"\"}`}>\n      <style href=\"cascade-list\" precedence=\"default\">\n        {css}\n      </style>\n      {visible.map((n) => (\n        <li key={n} style={{ animation: \"animated-list-in .45s cubic-bezier(.2,.7,.2,1)\" }}>\n          {items[n % items.length]}\n        </li>\n      ))}\n    </ul>\n  );\n}\n"}]}