{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "luma-bar",
  "type": "registry:ui",
  "title": "Luma Bar",
  "description": "A sleek navigation bar with Luma-inspired design and interactions.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/ruixenui/luma-bar.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport { Home, Search, Bell, User, Settings, Bookmark } from \"lucide-react\";\n\ninterface NavItem {\n  id: number;\n  icon: React.ReactNode;\n  label: string;\n}\n\nconst items: NavItem[] = [\n  { id: 0, icon: <Home size={24} />, label: \"Home\" },\n  { id: 1, icon: <Search size={24} />, label: \"Search\" },\n  { id: 2, icon: <Bell size={24} />, label: \"Alerts\" },\n  { id: 3, icon: <User size={24} />, label: \"Profile\" },\n  { id: 4, icon: <Bookmark size={24} />, label: \"Saved\" },\n  { id: 5, icon: <Settings size={24} />, label: \"Settings\" },\n];\n\nconst LumaBar = () => {\n  const [active, setActive] = useState(0);\n\n  return (\n    <div className=\"fixed bottom-6 left-1/2 -translate-x-1/2 z-50\">\n      <div className=\"relative flex items-center justify-center gap-6 bg-white/20 dark:bg-black/20 backdrop-blur-2xl rounded-full px-6 py-3 shadow-xl border border-gray-200/50 dark:border-gray-700/50 overflow-hidden\">\n        {/* Active Indicator Glow */}\n        <motion.div\n          layoutId=\"active-indicator\"\n          className=\"absolute w-16 h-16 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full blur-2xl -z-10\"\n          animate={{\n            left: `calc(${active * (100 / items.length)}% + ${100 / items.length / 2}%)`,\n            translateX: \"-50%\",\n          }}\n          transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n        />\n\n        {items.map((item, index) => {\n          const isActive = index === active;\n          return (\n            <motion.div\n              key={item.id}\n              className=\"relative flex flex-col items-center group\"\n            >\n              {/* Button */}\n              <motion.button\n                onClick={() => setActive(index)}\n                whileHover={{ scale: 1.2 }}\n                animate={{ scale: isActive ? 1.4 : 1 }}\n                className=\"flex items-center justify-center w-14 h-14 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 relative z-10\"\n              >\n                {item.icon}\n              </motion.button>\n\n              {/* Tooltip */}\n              <span className=\"absolute bottom-full mb-2 px-2 py-1 text-xs rounded-md bg-gray-500 text-white dark:bg-gray-200 dark:text-black opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap\">\n                {item.label}\n              </span>\n            </motion.div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default LumaBar;\n",
      "type": "registry:ui",
      "target": "components/ruixen/luma-bar.tsx"
    }
  ]
}