{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-navbar",
  "title": "Floating Navbar",
  "description": "Floating navigation bar that hides on scroll down and reveals on scroll up.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/floating-navbar/floating-navbar.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/** Props for {@link FloatingNavbar}. */\nexport type FloatingNavbarProps = React.ComponentPropsWithoutRef<\"nav\">;\n\nfunction usePrefersReducedMotion(): boolean {\n  const [reduced, setReduced] = React.useState(false);\n\n  React.useEffect(() => {\n    if (\n      typeof window === \"undefined\" ||\n      typeof window.matchMedia !== \"function\"\n    ) {\n      return;\n    }\n\n    const query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    const onChange = (): void => {\n      setReduced(query.matches);\n    };\n\n    onChange();\n    query.addEventListener(\"change\", onChange);\n\n    return () => {\n      query.removeEventListener(\"change\", onChange);\n    };\n  }, []);\n\n  return reduced;\n}\n\nfunction useScrollVisibility(reduced: boolean): boolean {\n  const [visible, setVisible] = React.useState(true);\n  const lastScrollY = React.useRef(0);\n\n  React.useEffect(() => {\n    if (reduced || typeof window === \"undefined\") {\n      return;\n    }\n\n    const onScroll = (): void => {\n      const current = window.scrollY;\n      setVisible(current < lastScrollY.current || current < 16);\n      lastScrollY.current = current;\n    };\n\n    window.addEventListener(\"scroll\", onScroll, { passive: true });\n\n    return () => {\n      window.removeEventListener(\"scroll\", onScroll);\n    };\n  }, [reduced]);\n\n  return reduced ? true : visible;\n}\n\n/**\n * Floating navigation bar that hides on scroll down and reveals on scroll up.\n *\n * Respects `prefers-reduced-motion`: the bar stays visible.\n *\n * @example\n * ```tsx\n * <FloatingNavbar>\n *   <a href=\"#home\">Home</a>\n * </FloatingNavbar>\n * ```\n */\nexport const FloatingNavbar = ({\n  children,\n  className,\n  ref,\n  ...props\n}: FloatingNavbarProps & { ref?: React.Ref<HTMLElement> }) => {\n  const reduced = usePrefersReducedMotion();\n  const visible = useScrollVisibility(reduced);\n\n  return (\n    <nav\n      className={cn(\n        \"fixed inset-x-0 top-4 z-50 mx-auto flex w-fit items-center gap-4 rounded-full border bg-card/70 px-6 py-2 shadow-lg backdrop-blur transition-transform duration-300\",\n        visible ? \"\" : \"-translate-y-[150%]\",\n        className,\n      )}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </nav>\n  );\n};\nFloatingNavbar.displayName = \"FloatingNavbar\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}