{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-toast",
  "title": "Navigation Toast",
  "description": "Toast overlay that shows navigation hints on first load",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "use-mobile"
  ],
  "files": [
    {
      "path": "components/ui/slide-cn/navigation-toast.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\nimport { useDeck } from \"@/components/ui/slide-cn/deck\";\nimport { useIsMobile } from \"@/hooks/use-mobile\";\n\ntype NavigationToastProps = {\n\tduration?: number;\n\tdesktopMessage?: string;\n\tmobileMessage?: string;\n\tclassName?: string;\n};\n\nexport function NavigationToast({\n\tduration = 3000,\n\tdesktopMessage = \"Use arrow keys to navigate\",\n\tmobileMessage = \"Swipe left or right to navigate\",\n\tclassName,\n}: NavigationToastProps) {\n\tconst [visible, setVisible] = React.useState(true);\n\tconst isMobile = useIsMobile();\n\tconst deck = useDeck();\n\tconst initialIndex = React.useRef(deck.index);\n\n\t// Dismiss on navigation\n\tReact.useEffect(() => {\n\t\tif (deck.index !== initialIndex.current) {\n\t\t\tsetVisible(false);\n\t\t}\n\t}, [deck.index]);\n\n\t// Auto-dismiss after duration\n\tReact.useEffect(() => {\n\t\tconst timer = setTimeout(() => setVisible(false), duration);\n\t\treturn () => clearTimeout(timer);\n\t}, [duration]);\n\n\treturn (\n\t\t<AnimatePresence>\n\t\t\t{visible && (\n\t\t\t\t<motion.div\n\t\t\t\t\tinitial={{ opacity: 0, y: 20 }}\n\t\t\t\t\tanimate={{ opacity: 1, y: 0 }}\n\t\t\t\t\texit={{ opacity: 0, y: 10 }}\n\t\t\t\t\ttransition={{ duration: 0.3, ease: \"easeOut\" }}\n\t\t\t\t\tonClick={() => setVisible(false)}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\t\t\"absolute bottom-20 left-1/2 -translate-x-1/2 z-50\",\n\t\t\t\t\t\t\"flex items-center gap-3 px-5 py-3 rounded-full\",\n\t\t\t\t\t\t\"bg-foreground/10 backdrop-blur-xl border border-foreground/10\",\n\t\t\t\t\t\t\"text-sm font-medium text-foreground/80\",\n\t\t\t\t\t\t\"shadow-lg\",\n\t\t\t\t\t\tclassName\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{isMobile ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<SwipeIcon />\n\t\t\t\t\t\t\t<span>{mobileMessage}</span>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<span>{desktopMessage}</span>\n\t\t\t\t\t\t\t<div className=\"flex items-center gap-1.5\">\n\t\t\t\t\t\t\t\t<KeyCap>&#8592;</KeyCap>\n\t\t\t\t\t\t\t\t<KeyCap>&#8594;</KeyCap>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</motion.div>\n\t\t\t)}\n\t\t</AnimatePresence>\n\t);\n}\n\nfunction KeyCap({ children }: { children: React.ReactNode }) {\n\treturn (\n\t\t<span className=\"inline-flex items-center justify-center w-7 h-7 rounded-md bg-foreground/10 border border-foreground/15 text-xs font-mono shadow-sm\">\n\t\t\t{children}\n\t\t</span>\n\t);\n}\n\nfunction SwipeIcon() {\n\treturn (\n\t\t<svg\n\t\t\twidth=\"24\"\n\t\t\theight=\"24\"\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t\tclassName=\"opacity-70\"\n\t\t>\n\t\t\t<path d=\"M5 12h14\" />\n\t\t\t<path d=\"M2 12l3-3M2 12l3 3\" />\n\t\t\t<path d=\"M22 12l-3-3M22 12l-3 3\" />\n\t\t</svg>\n\t);\n}\n",
      "type": "registry:component",
      "target": "components/ui/slide-cn/navigation-toast.tsx"
    }
  ],
  "type": "registry:component"
}