{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stacked-carousel",
  "title": "Stacked Carousel",
  "description": "A self-playing card stack that cycles through items with a smooth, seamless fly-up transition.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/new-york/components/stacked-carousel/stacked-carousel.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface StackedCarouselProps<T> {\n  /** Any data you want to render. One card per item. */\n  items: T[];\n  /** Renders the content of a single card. */\n  renderItem: (item: T, index: number) => ReactNode;\n  /** Milliseconds between automatic advances (default: 1800). */\n  interval?: number;\n  /** Duration in ms of the fly-up animation before the card cycles (default: 400). */\n  advanceDelay?: number;\n  /** Height of the stack container (default: 220). */\n  containerHeight?: number;\n  /** Called whenever the stack advances. */\n  onAdvance?: (index: number) => void;\n  /** Extra classes for the root wrapper. */\n  className?: string;\n  /** Extra classes applied to every card. */\n  cardClassName?: string;\n}\n\nexport function StackedCarousel<T>({\n  items,\n  renderItem,\n  interval = 1800,\n  advanceDelay = 400,\n  containerHeight = 220,\n  onAdvance,\n  className,\n  cardClassName = \"\",\n}: StackedCarouselProps<T>) {\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isAdvancing, setIsAdvancing] = useState(false);\n  const advanceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const isAdvancingRef = useRef(false);\n  const onAdvanceRef = useRef(onAdvance);\n  const activeIndexRef = useRef(activeIndex);\n\n  useEffect(() => {\n    onAdvanceRef.current = onAdvance;\n  }, [onAdvance]);\n\n  useEffect(() => {\n    activeIndexRef.current = activeIndex;\n  }, [activeIndex]);\n\n  const advanceStack = useCallback(() => {\n    if (isAdvancingRef.current || items.length === 0) return;\n\n    isAdvancingRef.current = true;\n    setIsAdvancing(true);\n    advanceTimer.current = setTimeout(() => {\n      const nextIndex = (activeIndexRef.current + 1) % items.length;\n      onAdvanceRef.current?.(nextIndex);\n      setActiveIndex(nextIndex);\n      isAdvancingRef.current = false;\n      setIsAdvancing(false);\n    }, advanceDelay);\n  }, [items.length, advanceDelay]);\n\n  useEffect(() => {\n    if (items.length < 2) return;\n    const timer = window.setInterval(advanceStack, interval);\n    return () => window.clearInterval(timer);\n  }, [advanceStack, interval, items.length]);\n\n  useEffect(() => {\n    return () => {\n      if (advanceTimer.current) window.clearTimeout(advanceTimer.current);\n    };\n  }, []);\n\n  if (items.length === 0) return null;\n\n  const stackHeight = (items.length - 1) * 13 + 82;\n\n  return (\n    <div className={cn(\"w-full max-w-105 p-4\", className)}>\n      <div\n        className=\"relative flex items-center justify-center\"\n        style={{ height: containerHeight }}\n      >\n        <div className=\"relative w-full\" style={{ height: stackHeight }}>\n          {items.map((item, index) => {\n            const position = (index - activeIndex + items.length) % items.length;\n            const isActive = position === 0;\n\n            return (\n              <motion.article\n                key={String((item as { id?: unknown }).id ?? index)}\n                layout\n                animate={{\n                  y: isActive && isAdvancing ? [0, -100] : position * 13,\n                  scale: isActive && isAdvancing ? [1, 0.9] : 1 - position * 0.04,\n                  opacity: 1,\n                }}\n                transition={\n                  isActive && isAdvancing\n                    ? { duration: 0.48, ease: \"easeInOut\" }\n                    : { type: \"spring\", stiffness: 300, damping: 25 }\n                }\n                style={{ zIndex: items.length - position }}\n                className={cn(\n                  \"absolute inset-x-0 top-0 flex h-20.5 items-center justify-between overflow-hidden rounded-2xl border border-border bg-card px-3 py-2 shadow-sm\",\n                  cardClassName,\n                )}\n                aria-current={isActive ? \"true\" : undefined}\n              >\n                {renderItem(item, index)}\n              </motion.article>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default StackedCarousel;\n"
    }
  ],
  "type": "registry:component"
}