{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-list-shadcnui",
  "type": "registry:component",
  "title": "Animated List",
  "description": "List with staggered item animations",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/lists/animated-list.tsx",
      "content": "\"use client\";\n\nimport { Card } from \"@/components/ui/card\";\nimport { motion, type Variants } from \"framer-motion\";\nimport { CheckCircle2 } from \"lucide-react\";\n\nconst checklistItems = [\n  \"Define the experience\",\n  \"Design high-fidelity flows\",\n  \"Develop interactive states\",\n  \"Test accessibility scenarios\",\n  \"Deploy with confidence\",\n];\n\nconst containerVariants: Variants = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: {\n      staggerChildren: 0.12,\n      delayChildren: 0.2,\n    },\n  },\n};\n\nconst listItemVariants: Variants = {\n  hidden: { opacity: 0, x: -20 },\n  visible: {\n    opacity: 1,\n    x: 0,\n    transition: { duration: 0.4, ease: \"easeOut\" },\n  },\n};\n\nconst iconVariants: Variants = {\n  hidden: { scale: 0 },\n  visible: {\n    scale: 1,\n    transition: { type: \"spring\", stiffness: 200, damping: 16, delay: 0.1 },\n  },\n};\n\nexport function AnimatedList() {\n  return (\n    <div className=\"\">\n      <Card\n        role=\"article\"\n        aria-label=\"Workflow checklist\"\n        className=\"group relative w-full overflow-hidden rounded-2xl border border-border/40 bg-background/60 p-6 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg\"\n      >\n        <div className=\"pointer-events-none absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 -z-10\" />\n\n        <motion.div\n          className=\"relative space-y-6\"\n          variants={containerVariants}\n          initial=\"hidden\"\n          animate=\"visible\"\n        >\n          <div className=\"space-y-2\">\n            <p className=\"text-xs uppercase tracking-[0.2em] text-foreground/70\">\n              Workflow\n            </p>\n            <h3 className=\"text-lg font-semibold tracking-tight text-foreground\">\n              Project Checklist\n            </h3>\n            <p className=\"text-sm text-foreground/70\">\n              Guide your team through each phase with confidence and clarity.\n            </p>\n          </div>\n\n          <motion.ul\n            role=\"list\"\n            aria-label=\"Project workflow steps\"\n            className=\"space-y-3\"\n            variants={containerVariants}\n          >\n            {checklistItems.map((item) => (\n              <motion.li\n                key={item}\n                variants={listItemVariants}\n                className=\"group/list flex items-center gap-3 rounded-xl border border-border/30 bg-background/40 p-3 transition-all duration-300 hover:border-border/50 hover:bg-background/60\"\n              >\n                <motion.span\n                  variants={iconVariants}\n                  aria-hidden=\"true\"\n                  className=\"flex h-9 w-9 items-center justify-center rounded-full bg-emerald-500/20 text-emerald-600 transition-colors dark:text-emerald-400\"\n                >\n                  <CheckCircle2 className=\"h-4 w-4\" />\n                </motion.span>\n\n                <span className=\"text-sm text-foreground\">{item}</span>\n              </motion.li>\n            ))}\n          </motion.ul>\n        </motion.div>\n      </Card>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/animated-list-shadcnui.tsx"
    }
  ]
}