{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "AnimatedList-JS-CSS",
  "type": "registry:block",
  "title": "AnimatedList",
  "description": "List items enter with staggered motion variants for polished reveals.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "public/default/src/content/Components/AnimatedList/AnimatedList.jsx",
      "content": "import { useRef, useState, useEffect } from 'react';\nimport { motion, useInView } from 'motion/react';\nimport './AnimatedList.css';\n\nconst AnimatedItem = ({ children, delay = 0, index, onMouseEnter, onClick }) => {\n  const ref = useRef(null);\n  const inView = useInView(ref, { amount: 0.5, triggerOnce: false });\n  return (\n    <motion.div\n      ref={ref}\n      data-index={index}\n      onMouseEnter={onMouseEnter}\n      onClick={onClick}\n      initial={{ scale: 0.7, opacity: 0 }}\n      animate={inView ? { scale: 1, opacity: 1 } : { scale: 0.7, opacity: 0 }}\n      transition={{ duration: 0.2, delay }}\n      style={{ marginBottom: '1rem', cursor: 'pointer' }}\n    >\n      {children}\n    </motion.div>\n  );\n};\n\nconst AnimatedList = ({\n  items = [\n    'Item 1',\n    'Item 2',\n    'Item 3',\n    'Item 4',\n    'Item 5',\n    'Item 6',\n    'Item 7',\n    'Item 8',\n    'Item 9',\n    'Item 10',\n    'Item 11',\n    'Item 12',\n    'Item 13',\n    'Item 14',\n    'Item 15'\n  ],\n  onItemSelect,\n  showGradients = true,\n  enableArrowNavigation = true,\n  className = '',\n  itemClassName = '',\n  displayScrollbar = true,\n  initialSelectedIndex = -1\n}) => {\n  const listRef = useRef(null);\n  const [selectedIndex, setSelectedIndex] = useState(initialSelectedIndex);\n  const [keyboardNav, setKeyboardNav] = useState(false);\n  const [topGradientOpacity, setTopGradientOpacity] = useState(0);\n  const [bottomGradientOpacity, setBottomGradientOpacity] = useState(1);\n\n  const handleScroll = e => {\n    const { scrollTop, scrollHeight, clientHeight } = e.target;\n    setTopGradientOpacity(Math.min(scrollTop / 50, 1));\n    const bottomDistance = scrollHeight - (scrollTop + clientHeight);\n    setBottomGradientOpacity(scrollHeight <= clientHeight ? 0 : Math.min(bottomDistance / 50, 1));\n  };\n\n  useEffect(() => {\n    if (!enableArrowNavigation) return;\n    const handleKeyDown = e => {\n      if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n        e.preventDefault();\n        setKeyboardNav(true);\n        setSelectedIndex(prev => Math.min(prev + 1, items.length - 1));\n      } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n        e.preventDefault();\n        setKeyboardNav(true);\n        setSelectedIndex(prev => Math.max(prev - 1, 0));\n      } else if (e.key === 'Enter') {\n        if (selectedIndex >= 0 && selectedIndex < items.length) {\n          e.preventDefault();\n          if (onItemSelect) {\n            onItemSelect(items[selectedIndex], selectedIndex);\n          }\n        }\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [items, selectedIndex, onItemSelect, enableArrowNavigation]);\n\n  useEffect(() => {\n    if (!keyboardNav || selectedIndex < 0 || !listRef.current) return;\n    const container = listRef.current;\n    const selectedItem = container.querySelector(`[data-index=\"${selectedIndex}\"]`);\n    if (selectedItem) {\n      const extraMargin = 50;\n      const containerScrollTop = container.scrollTop;\n      const containerHeight = container.clientHeight;\n      const itemTop = selectedItem.offsetTop;\n      const itemBottom = itemTop + selectedItem.offsetHeight;\n      if (itemTop < containerScrollTop + extraMargin) {\n        container.scrollTo({ top: itemTop - extraMargin, behavior: 'smooth' });\n      } else if (itemBottom > containerScrollTop + containerHeight - extraMargin) {\n        container.scrollTo({\n          top: itemBottom - containerHeight + extraMargin,\n          behavior: 'smooth'\n        });\n      }\n    }\n    setKeyboardNav(false);\n  }, [selectedIndex, keyboardNav]);\n\n  return (\n    <div className={`scroll-list-container ${className}`}>\n      <div ref={listRef} className={`scroll-list ${!displayScrollbar ? 'no-scrollbar' : ''}`} onScroll={handleScroll}>\n        {items.map((item, index) => (\n          <AnimatedItem\n            key={index}\n            delay={0.1}\n            index={index}\n            onMouseEnter={() => setSelectedIndex(index)}\n            onClick={() => {\n              setSelectedIndex(index);\n              if (onItemSelect) {\n                onItemSelect(item, index);\n              }\n            }}\n          >\n            <div className={`item ${selectedIndex === index ? 'selected' : ''} ${itemClassName}`}>\n              <p className=\"item-text\">{item}</p>\n            </div>\n          </AnimatedItem>\n        ))}\n      </div>\n      {showGradients && (\n        <>\n          <div className=\"top-gradient\" style={{ opacity: topGradientOpacity }}></div>\n          <div className=\"bottom-gradient\" style={{ opacity: bottomGradientOpacity }}></div>\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default AnimatedList;\n",
      "type": "registry:component"
    },
    {
      "path": "public/default/src/content/Components/AnimatedList/AnimatedList.css",
      "content": ".scroll-list-container {\r\n  position: relative;\r\n  width: 500px;\r\n}\r\n\r\n.scroll-list {\r\n  max-height: 400px;\r\n  overflow-y: auto;\r\n  padding: 16px;\r\n}\r\n\r\n.scroll-list::-webkit-scrollbar {\r\n  width: 8px;\r\n}\r\n\r\n.scroll-list::-webkit-scrollbar-track {\r\n  background: #000000;\r\n}\r\n\r\n.scroll-list::-webkit-scrollbar-thumb {\r\n  background: rgba(255, 255, 255, 0.05);\r\n  border-radius: 4px;\r\n}\r\n\r\n.no-scrollbar::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n\r\n.no-scrollbar {\r\n  -ms-overflow-style: none;\r\n  scrollbar-width: none;\r\n}\r\n\r\n.item {\r\n  padding: 16px;\r\n  background-color: #170d27;\r\n  border-radius: 8px;\r\n  margin-bottom: 1rem;\r\n}\r\n\r\n.item.selected {\r\n  background-color: rgba(255, 255, 255, 0.05);\r\n}\r\n\r\n.item-text {\r\n  color: white;\r\n  margin: 0;\r\n}\r\n\r\n.top-gradient {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  height: 50px;\r\n  background: linear-gradient(to bottom, #000000, transparent);\r\n  pointer-events: none;\r\n  transition: opacity 0.3s ease;\r\n}\r\n\r\n.bottom-gradient {\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  height: 100px;\r\n  background: linear-gradient(to top, #000000, transparent);\r\n  pointer-events: none;\r\n  transition: opacity 0.3s ease;\r\n}\r\n",
      "type": "registry:item"
    }
  ]
}