{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-nav",
  "type": "registry:ui",
  "title": "Floating Nav",
  "description": "Pinned bottom/top capsule navigation bar.",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/floating-nav.tsx",
      "content": "import * as React from 'react'\nimport { motion } from 'motion/react'\nimport { cn } from '@/lib/utils'\n\nexport interface FloatingNavProps extends React.HTMLAttributes<HTMLDivElement> {\n  activeTab?: string\n  defaultTab?: string\n  onTabChange?: (tab: string) => void\n  tabs?: { id: string; label: string; icon?: React.ReactNode }[]\n  variant?: 'yellow' | 'orange' | 'mint' | 'violet' | 'pink' | 'sky' | 'black'\n  position?: 'bottom' | 'top' | 'static'\n}\n\nconst variantFills = {\n  yellow: 'bg-rk-primary text-rk-ink focus-visible:ring-rk-primary',\n  orange: 'bg-rk-secondary text-rk-ink focus-visible:ring-rk-secondary',\n  mint: 'bg-rk-success text-rk-ink focus-visible:ring-rk-success',\n  violet: 'bg-rk-accent text-rk-ink focus-visible:ring-rk-accent',\n  pink: 'bg-rk-pink text-rk-ink focus-visible:ring-rk-pink',\n  sky: 'bg-rk-sky text-rk-ink focus-visible:ring-rk-sky',\n  black: 'bg-white text-rk-ink focus-visible:ring-white',\n}\n\nconst positionClasses = {\n  bottom: 'fixed bottom-6 left-1/2 -translate-x-1/2 z-50',\n  top: 'fixed top-6 left-1/2 -translate-x-1/2 z-50',\n  static: 'relative z-10',\n}\n\nexport function FloatingNav({\n  className,\n  activeTab: controlledActiveTab,\n  defaultTab = 'home',\n  onTabChange,\n  variant = 'yellow',\n  position = 'static',\n  tabs = [\n    { id: 'home', label: 'Home' },\n    { id: 'components', label: 'Components' },\n    { id: 'tokens', label: 'Tokens' },\n    { id: 'docs', label: 'Docs' },\n  ],\n  ...props\n}: FloatingNavProps) {\n  const [internalTab, setInternalTab] = React.useState(defaultTab)\n  const currentTab = controlledActiveTab ?? internalTab\n  const instanceId = React.useId()\n\n  const handleTabClick = (id: string) => {\n    if (controlledActiveTab === undefined) {\n      setInternalTab(id)\n    }\n    onTabChange?.(id)\n  }\n\n  return (\n    <div\n      role=\"tablist\"\n      aria-label=\"Floating navigation\"\n      className={cn(\n        'inline-flex items-center gap-1.5 p-2 rounded-full bg-rk-ink text-rk-canvas rk-border rk-shadow-lg transition-all duration-200 select-none',\n        positionClasses[position],\n        className\n      )}\n      {...props}\n    >\n      {tabs.map((tab) => {\n        const isActive = currentTab === tab.id\n        return (\n          <button\n            key={tab.id}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={isActive}\n            aria-label={tab.label}\n            onClick={() => handleTabClick(tab.id)}\n            className={cn(\n              'relative flex items-center gap-2 px-5 py-2 rounded-full font-extrabold text-xs tracking-wide transition-colors cursor-pointer select-none z-10',\n              'focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 focus-visible:ring-offset-rk-ink',\n              isActive ? 'text-rk-ink font-black' : 'text-white/80 hover:text-white'\n            )}\n          >\n            {isActive && (\n              <motion.div\n                layoutId={`floatingNavActive-${instanceId}`}\n                transition={{ type: 'spring', stiffness: 500, damping: 30 }}\n                className={cn(\n                  'absolute inset-0 rounded-full rk-border-sm rk-shadow-sm -z-10',\n                  variantFills[variant]\n                )}\n              />\n            )}\n            {tab.icon}\n            <span>{tab.label}</span>\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/ui/floating-nav.tsx"
    }
  ]
}