{
  "name": "resizable-navbar",
  "type": "registry:ui",
  "files": [
    {
      "path": "components/ui/resizable-navbar.tsx",
      "content": "\"use client\";\nimport { cn } from \"@/lib/utils\";\nimport { IconMenu2, IconX } from \"@tabler/icons-react\";\nimport {\n  motion,\n  AnimatePresence,\n  useScroll,\n  useMotionValueEvent,\n} from \"motion/react\";\n\nimport React, { useRef, useState } from \"react\";\n\n\ninterface NavbarProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\ninterface NavBodyProps {\n  children: React.ReactNode;\n  className?: string;\n  visible?: boolean;\n}\n\ninterface NavItemsProps {\n  items: {\n    name: string;\n    link: string;\n  }[];\n  className?: string;\n  onItemClick?: () => void;\n}\n\ninterface MobileNavProps {\n  children: React.ReactNode;\n  className?: string;\n  visible?: boolean;\n}\n\ninterface MobileNavHeaderProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\ninterface MobileNavMenuProps {\n  children: React.ReactNode;\n  className?: string;\n  isOpen: boolean;\n  onClose: () => void;\n}\n\nexport const Navbar = ({ children, className }: NavbarProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const { scrollY } = useScroll({\n    target: ref,\n    offset: [\"start start\", \"end start\"],\n  });\n  const [visible, setVisible] = useState<boolean>(false);\n\n  useMotionValueEvent(scrollY, \"change\", (latest) => {\n    if (latest > 100) {\n      setVisible(true);\n    } else {\n      setVisible(false);\n    }\n  });\n\n  return (\n    <motion.div\n      ref={ref}\n      // IMPORTANT: Change this to class of `fixed` if you want the navbar to be fixed\n      className={cn(\"sticky inset-x-0 top-20 z-40 w-full\", className)}\n    >\n      {React.Children.map(children, (child) =>\n        React.isValidElement(child)\n          ? React.cloneElement(\n              child as React.ReactElement<{ visible?: boolean }>,\n              { visible },\n            )\n          : child,\n      )}\n    </motion.div>\n  );\n};\n\nexport const NavBody = ({ children, className, visible }: NavBodyProps) => {\n  return (\n    <motion.div\n      animate={{\n        backdropFilter: visible ? \"blur(10px)\" : \"none\",\n        boxShadow: visible\n          ? \"0 0 24px rgba(34, 42, 53, 0.06), 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(34, 42, 53, 0.04), 0 0 4px rgba(34, 42, 53, 0.08), 0 16px 68px rgba(47, 48, 55, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1) inset\"\n          : \"none\",\n        width: visible ? \"40%\" : \"100%\",\n        y: visible ? 20 : 0,\n      }}\n      transition={{\n        type: \"spring\",\n        stiffness: 200,\n        damping: 50,\n      }}\n      style={{\n        minWidth: \"800px\",\n      }}\n      className={cn(\n        \"relative z-[60] mx-auto hidden w-full max-w-7xl flex-row items-center justify-between self-start rounded-full bg-transparent px-4 py-2 lg:flex dark:bg-transparent\",\n        visible && \"bg-white/80 dark:bg-neutral-950/80\",\n        className,\n      )}\n    >\n      {children}\n    </motion.div>\n  );\n};\n\nexport const NavItems = ({ items, className, onItemClick }: NavItemsProps) => {\n  const [hovered, setHovered] = useState<number | null>(null);\n\n  return (\n    <motion.div\n      onMouseLeave={() => setHovered(null)}\n      className={cn(\n        \"absolute inset-0 hidden flex-1 flex-row items-center justify-center space-x-2 text-sm font-medium text-zinc-600 transition duration-200 hover:text-zinc-800 lg:flex lg:space-x-2\",\n        className,\n      )}\n    >\n      {items.map((item, idx) => (\n        <a\n          onMouseEnter={() => setHovered(idx)}\n          onClick={onItemClick}\n          className=\"relative px-4 py-2 text-neutral-600 dark:text-neutral-300\"\n          key={`link-${idx}`}\n          href={item.link}\n        >\n          {hovered === idx && (\n            <motion.div\n              layoutId=\"hovered\"\n              className=\"absolute inset-0 h-full w-full rounded-full bg-gray-100 dark:bg-neutral-800\"\n            />\n          )}\n          <span className=\"relative z-20\">{item.name}</span>\n        </a>\n      ))}\n    </motion.div>\n  );\n};\n\nexport const MobileNav = ({ children, className, visible }: MobileNavProps) => {\n  return (\n    <motion.div\n      animate={{\n        backdropFilter: visible ? \"blur(10px)\" : \"none\",\n        boxShadow: visible\n          ? \"0 0 24px rgba(34, 42, 53, 0.06), 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(34, 42, 53, 0.04), 0 0 4px rgba(34, 42, 53, 0.08), 0 16px 68px rgba(47, 48, 55, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1) inset\"\n          : \"none\",\n        width: visible ? \"90%\" : \"100%\",\n        paddingRight: visible ? \"12px\" : \"0px\",\n        paddingLeft: visible ? \"12px\" : \"0px\",\n        borderRadius: visible ? \"4px\" : \"2rem\",\n        y: visible ? 20 : 0,\n      }}\n      transition={{\n        type: \"spring\",\n        stiffness: 200,\n        damping: 50,\n      }}\n      className={cn(\n        \"relative z-50 mx-auto flex w-full max-w-[calc(100vw-2rem)] flex-col items-center justify-between bg-transparent px-0 py-2 lg:hidden\",\n        visible && \"bg-white/80 dark:bg-neutral-950/80\",\n        className,\n      )}\n    >\n      {children}\n    </motion.div>\n  );\n};\n\nexport const MobileNavHeader = ({\n  children,\n  className,\n}: MobileNavHeaderProps) => {\n  return (\n    <div\n      className={cn(\n        \"flex w-full flex-row items-center justify-between\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport const MobileNavMenu = ({\n  children,\n  className,\n  isOpen,\n  onClose,\n}: MobileNavMenuProps) => {\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <motion.div\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          className={cn(\n            \"absolute inset-x-0 top-16 z-50 flex w-full flex-col items-start justify-start gap-4 rounded-lg bg-white px-4 py-8 shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset] dark:bg-neutral-950\",\n            className,\n          )}\n        >\n          {children}\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n};\n\nexport const MobileNavToggle = ({\n  isOpen,\n  onClick,\n}: {\n  isOpen: boolean;\n  onClick: () => void;\n}) => {\n  return isOpen ? (\n    <IconX className=\"text-black dark:text-white\" onClick={onClick} />\n  ) : (\n    <IconMenu2 className=\"text-black dark:text-white\" onClick={onClick} />\n  );\n};\n\nexport const NavbarLogo = () => {\n  return (\n    <a\n      href=\"#\"\n      className=\"relative z-20 mr-4 flex items-center space-x-2 px-2 py-1 text-sm font-normal text-black\"\n    >\n      <img\n        src=\"https://assets.aceternity.com/logo-dark.png\"\n        alt=\"logo\"\n        width={30}\n        height={30}\n      />\n      <span className=\"font-medium text-black dark:text-white\">Startup</span>\n    </a>\n  );\n};\n\nexport const NavbarButton = ({\n  href,\n  as: Tag = \"a\",\n  children,\n  className,\n  variant = \"primary\",\n  ...props\n}: {\n  href?: string;\n  as?: React.ElementType;\n  children: React.ReactNode;\n  className?: string;\n  variant?: \"primary\" | \"secondary\" | \"dark\" | \"gradient\";\n} & (\n  | React.ComponentPropsWithoutRef<\"a\">\n  | React.ComponentPropsWithoutRef<\"button\">\n)) => {\n  const baseStyles =\n    \"px-4 py-2 rounded-md bg-white button bg-white text-black text-sm font-bold relative cursor-pointer hover:-translate-y-0.5 transition duration-200 inline-block text-center\";\n\n  const variantStyles = {\n    primary:\n      \"shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]\",\n    secondary: \"bg-transparent shadow-none dark:text-white\",\n    dark: \"bg-black text-white shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]\",\n    gradient:\n      \"bg-gradient-to-b from-blue-500 to-blue-700 text-white shadow-[0px_2px_0px_0px_rgba(255,255,255,0.3)_inset]\",\n  };\n\n  return (\n    <Tag\n      href={href || undefined}\n      className={cn(baseStyles, variantStyles[variant], className)}\n      {...props}\n    >\n      {children}\n    </Tag>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/resizable-navbar.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Resizable Navbar"
}