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