{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-motion-navigation-menu",
  "title": "Motion Navigation Menu Demo",
  "description": "Centered navigation menu with a single morphing container and direction-aware spring transitions.",
  "registryDependencies": [
    "@unlumen-ui/motion-navigation-menu"
  ],
  "files": [
    {
      "path": "registry/demo/components/unlumen/motion-navigation-menu/index.tsx",
      "content": "\"use client\";\n\nimport {\n  ArrowUpRight,\n  BookOpen,\n  Building2,\n  ChartNoAxesColumn,\n  type LucideIcon,\n  Rocket,\n  Sparkles,\n  Users,\n} from \"lucide-react\";\n\nimport {\n  MotionNavigationMenu,\n  MotionNavigationMenuContent,\n  MotionNavigationMenuItem,\n  MotionNavigationMenuLink,\n  MotionNavigationMenuList,\n  MotionNavigationMenuTrigger,\n} from \"@/components/unlumen-ui/motion-navigation-menu\";\n\ninterface MotionNavigationMenuDemoProps {\n  viewport?: boolean;\n  springBounce?: number;\n  springStiffness?: number;\n  springDamping?: number;\n}\n\nconst PRODUCTS = [\n  { title: \"Analytics\", desc: \"Live funnels, cohorts, and retention.\" },\n  { title: \"Automation\", desc: \"Trigger workflows from events.\" },\n  { title: \"Insights\", desc: \"AI recommendations for next steps.\" },\n  { title: \"Reports\", desc: \"Share snapshots with stakeholders.\" },\n];\n\nconst SOLUTIONS: { title: string; desc: string; icon: LucideIcon }[] = [\n  {\n    title: \"Startups\",\n    desc: \"Launch dashboards without building infra.\",\n    icon: Rocket,\n  },\n  {\n    title: \"Agencies\",\n    desc: \"Manage every client workspace from one view.\",\n    icon: Users,\n  },\n  {\n    title: \"Enterprise\",\n    desc: \"SAML, audit logs, SLAs, and permissions.\",\n    icon: Building2,\n  },\n];\n\nconst RESOURCES = [\n  { title: \"Documentation\", desc: \"Guides and API reference.\" },\n  { title: \"Changelog\", desc: \"What shipped this month.\" },\n  { title: \"Blog\", desc: \"Engineering and product notes.\" },\n];\n\nconst highlightClassName = \"dark:bg-accent bg-foreground/[0.06] rounded-lg\";\n\nexport function MotionNavigationMenuDemo({\n  viewport,\n  springBounce,\n  springStiffness,\n  springDamping,\n}: MotionNavigationMenuDemoProps) {\n  return (\n    <div className=\"flex min-h-full w-full items-center justify-center px-6\">\n      <MotionNavigationMenu\n        viewport={viewport}\n        viewportClassName=\"bg-surface border-none! rounded-xl shadow-none ring-0\"\n        springBounce={springBounce}\n        springStiffness={springStiffness}\n        springDamping={springDamping}\n      >\n        <MotionNavigationMenuList>\n          <MotionNavigationMenuItem value=\"products\">\n            <MotionNavigationMenuTrigger>Products</MotionNavigationMenuTrigger>\n            <MotionNavigationMenuContent\n              highlightClassName={highlightClassName}\n            >\n              <div className=\"grid w-[500px] grid-cols-[1fr_1.25fr] gap-2\">\n                <MotionNavigationMenuLink\n                  href=\"#\"\n                  className=\"bg-background/70 rounded-lg min-h-44 justify-between p-4\"\n                >\n                  <span className=\"bg-background flex size-9 items-center justify-center rounded-lg border\">\n                    <ChartNoAxesColumn className=\"size-4\" />\n                  </span>\n                  <span className=\"space-y-1\">\n                    <span className=\"block text-sm font-medium\">\n                      Command center\n                    </span>\n                    <span className=\"text-muted-foreground block text-xs\">\n                      Monitor product growth, workflow health, and team output.\n                    </span>\n                  </span>\n                </MotionNavigationMenuLink>\n                <div className=\"grid grid-cols-2 gap-0.5\">\n                  {PRODUCTS.map((product) => (\n                    <MotionNavigationMenuLink key={product.title} href=\"#\">\n                      <span className=\"flex items-center justify-between gap-2 text-sm font-medium\">\n                        {product.title}\n                        <ArrowUpRight className=\"size-3\" />\n                      </span>\n                      <span className=\"text-muted-foreground text-xs\">\n                        {product.desc}\n                      </span>\n                    </MotionNavigationMenuLink>\n                  ))}\n                </div>\n              </div>\n            </MotionNavigationMenuContent>\n          </MotionNavigationMenuItem>\n\n          <MotionNavigationMenuItem value=\"solutions\">\n            <MotionNavigationMenuTrigger>Solutions</MotionNavigationMenuTrigger>\n            <MotionNavigationMenuContent\n              highlightClassName={highlightClassName}\n            >\n              <div className=\"w-[380px] space-y-1\">\n                <div className=\"text-muted-foreground px-2 py-2 text-xs font-medium\">\n                  Built for teams\n                </div>\n                {SOLUTIONS.map((solution) => (\n                  <MotionNavigationMenuLink\n                    key={solution.title}\n                    href=\"#\"\n                    className=\"grid grid-cols-[auto_1fr_auto] items-center gap-3\"\n                  >\n                    <span className=\"bg-transparent flex size-8 items-center justify-center rounded-lg\">\n                      <solution.icon className=\"size-4.5 text-foreground\" />\n                    </span>\n                    <span className=\"space-y-0.5\">\n                      <span className=\"block text-sm font-medium\">\n                        For {solution.title.toLowerCase()}\n                      </span>\n                      <span className=\"text-muted-foreground block text-xs\">\n                        {solution.desc}\n                      </span>\n                    </span>\n                    <span className=\" text-foreground rounded-lg  px-1.5 py-0.5 text-xs\">\n                      View\n                    </span>\n                  </MotionNavigationMenuLink>\n                ))}\n              </div>\n            </MotionNavigationMenuContent>\n          </MotionNavigationMenuItem>\n\n          <MotionNavigationMenuItem value=\"resources\">\n            <MotionNavigationMenuTrigger>Resources</MotionNavigationMenuTrigger>\n            <MotionNavigationMenuContent\n              highlightClassName={highlightClassName}\n            >\n              <div className=\"grid w-[460px] grid-cols-2 gap-2\">\n                <div className=\"space-y-0.5\">\n                  {RESOURCES.map((resource) => (\n                    <MotionNavigationMenuLink key={resource.title} href=\"#\">\n                      <span className=\"flex items-center gap-2 text-sm font-medium\">\n                        <BookOpen className=\"size-3.5\" />\n                        {resource.title}\n                      </span>\n                      <span className=\"text-muted-foreground text-xs\">\n                        {resource.desc}\n                      </span>\n                    </MotionNavigationMenuLink>\n                  ))}\n                </div>\n                <MotionNavigationMenuLink\n                  href=\"#\"\n                  className=\"bg-background/70 min-h-44 justify-between p-4\"\n                >\n                  <span className=\"flex items-center gap-2 text-sm font-medium\">\n                    <Sparkles className=\"size-4\" />\n                    New release\n                  </span>\n                  <span className=\"text-muted-foreground text-xs\">\n                    Explore the latest workflow templates and API improvements.\n                  </span>\n                  <span className=\"text-xs font-medium\">Read changelog</span>\n                </MotionNavigationMenuLink>\n              </div>\n            </MotionNavigationMenuContent>\n          </MotionNavigationMenuItem>\n\n          <MotionNavigationMenuItem>\n            <MotionNavigationMenuLink\n              href=\"#\"\n              className=\"flex h-9 items-center px-4 py-2 text-sm font-medium\"\n            >\n              Pricing\n            </MotionNavigationMenuLink>\n          </MotionNavigationMenuItem>\n        </MotionNavigationMenuList>\n      </MotionNavigationMenu>\n    </div>\n  );\n}\n\nexport default MotionNavigationMenuDemo;\n",
      "type": "registry:example"
    }
  ],
  "meta": {
    "demoProps": {
      "MotionNavigationMenuDemo": {}
    }
  },
  "type": "registry:example"
}