{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-sidebar-shadcnui",
  "type": "registry:component",
  "title": "Animated Sidebar",
  "description": "Sidebar with slide-in animation and overlay",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "lucide-react",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/navigation/animated-sidebar.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { FileText, Home, Menu, Settings, Users, X } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst menuItems = [\n  { icon: Home, label: \"Dashboard\" },\n  { icon: Users, label: \"Team\" },\n  { icon: FileText, label: \"Documents\" },\n  { icon: Settings, label: \"Settings\" },\n];\n\nexport function AnimatedSidebar() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <div>\n      <motion.button\n        onClick={() => setIsOpen(true)}\n        className=\"rounded-lg bg-accent px-4 py-2 text-sm font-medium text-[var(--muted-foreground)]\"\n        whileHover={{ scale: 1.05 }}\n        whileTap={{ scale: 0.95 }}\n      >\n        <Menu className=\"h-5 w-5\" />\n      </motion.button>\n\n      <AnimatePresence>\n        {isOpen && (\n          <>\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              className=\"fixed inset-0 z-50 bg-black/50\"\n              onClick={() => setIsOpen(false)}\n            />\n\n            <motion.div\n              initial={{ x: \"-100%\" }}\n              animate={{ x: 0 }}\n              exit={{ x: \"-100%\" }}\n              transition={{ type: \"spring\", damping: 30, stiffness: 300 }}\n              className=\"fixed left-0 top-0 z-50 h-full w-64 border-r bg-card  bg-[var(--card-bg)] p-6 shadow-2xl\"\n            >\n              <div className=\"flex items-center justify-between\">\n                <motion.h2\n                  initial={{ opacity: 0, x: -20 }}\n                  animate={{ opacity: 1, x: 0 }}\n                  transition={{ delay: 0.1 }}\n                  className=\"text-xl font-semibold\"\n                >\n                  Menu\n                </motion.h2>\n                <motion.button\n                  onClick={() => setIsOpen(false)}\n                  whileHover={{ rotate: 90, scale: 1.1 }}\n                  whileTap={{ scale: 0.9 }}\n                  className=\"text-[var(--foreground)]/60 hover:text-[var(--foreground)]\"\n                >\n                  <X className=\"h-5 w-5\" />\n                </motion.button>\n              </div>\n\n              <nav className=\"mt-8\">\n                <ul className=\"space-y-2\">\n                  {menuItems.map((item, index) => {\n                    const Icon = item.icon;\n                    return (\n                      <motion.li\n                        key={item.label}\n                        initial={{ opacity: 0, x: -20 }}\n                        animate={{ opacity: 1, x: 0 }}\n                        transition={{ delay: 0.1 + index * 0.05 }}\n                      >\n                        <motion.button\n                          className=\"flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium hover:bg-accent/10\"\n                          whileHover={{ x: 4 }}\n                          whileTap={{ scale: 0.98 }}\n                        >\n                          <Icon className=\"h-5 w-5\" />\n                          {item.label}\n                        </motion.button>\n                      </motion.li>\n                    );\n                  })}\n                </ul>\n              </nav>\n            </motion.div>\n          </>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/animated-sidebar-shadcnui.tsx"
    }
  ]
}