{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "top-nav",
  "type": "registry:ui",
  "title": "Top Nav",
  "description": "Composable top navigation surface for brand, primary links, and actions.",
  "dependencies": [
    "class-variance-authority",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://zeron-ui.vercel.app/r/surfaces.json",
    "https://zeron-ui.vercel.app/r/utils.json",
    "https://zeron-ui.vercel.app/r/icon-context.json",
    "https://zeron-ui.vercel.app/r/nav-item.json",
    "https://zeron-ui.vercel.app/r/popover.json",
    "https://zeron-ui.vercel.app/r/surface-context.json",
    "https://zeron-ui.vercel.app/r/surface-classes.json"
  ],
  "files": [
    {
      "path": "packages/ui/src/components/top-nav.tsx",
      "content": "\"use client\";\nimport { forwardRef, type ComponentPropsWithoutRef, type ReactNode, } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@lib/utils\";\nimport { useIcon } from \"@lib/icon-context\";\nimport { useSurface } from \"@lib/surface-context\";\nimport { resolveSurface, surfaceClasses } from \"@lib/surface-classes\";\nimport { NavItemTrailing, NavItemTrigger, type NavItemTriggerProps, } from \"@ui/nav-item\";\nimport { Popover, PopoverContent, PopoverTrigger, type PopoverContentProps, type PopoverProps, } from \"@ui/popover\";\nconst topNavVariants = cva(\"grid min-h-control-md min-w-0 items-center gap-3 px-3\", {\n    variants: {\n        variant: {\n            default: \"\",\n            floating: \"m-2 border border-border\",\n        },\n        navigationAlign: {\n            left: \"grid-cols-[auto_minmax(0,1fr)_auto] [&>[data-slot=top-nav-navigation]]:justify-start\",\n            center: \"grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] [&>[data-slot=top-nav-navigation]]:justify-center\",\n            right: \"grid-cols-[auto_minmax(0,1fr)_auto] [&>[data-slot=top-nav-navigation]]:justify-end\",\n        },\n    },\n    defaultVariants: { variant: \"default\", navigationAlign: \"center\" },\n});\nexport interface TopNavProps extends ComponentPropsWithoutRef<\"div\">, VariantProps<typeof topNavVariants> {\n}\nexport type TopNavBrandProps = ComponentPropsWithoutRef<\"div\">;\nexport type TopNavNavigationAlign = \"left\" | \"center\" | \"right\";\nexport type TopNavNavigationProps = ComponentPropsWithoutRef<\"div\">;\nexport type TopNavActionsProps = ComponentPropsWithoutRef<\"div\">;\nexport type TopNavItemMenuProps = PopoverProps;\nexport type TopNavItemMenuContentProps = PopoverContentProps;\nexport interface TopNavItemMenuTriggerProps extends Omit<NavItemTriggerProps, \"href\" | \"render\" | \"type\"> {\n    /** Replaces the default chevron. Pass null to hide the suffix. */\n    suffix?: ReactNode;\n    type?: ComponentPropsWithoutRef<\"button\">[\"type\"];\n}\nconst TopNav = forwardRef<HTMLDivElement, TopNavProps>(({ variant, navigationAlign, className, ...props }, ref) => {\n    const floatingSurface = resolveSurface(useSurface(), \"raised\");\n    return (<div ref={ref} data-slot=\"top-nav\" data-variant={variant ?? \"default\"} data-navigation-align={navigationAlign ?? \"center\"} className={cn(topNavVariants({ variant, navigationAlign }), variant === \"floating\" && [\n            \"rounded-xl\",\n            surfaceClasses(floatingSurface, \"raised\"),\n        ], className)} {...props}/>);\n});\nTopNav.displayName = \"TopNav\";\nconst TopNavBrand = forwardRef<HTMLDivElement, TopNavBrandProps>(({ className, ...props }, ref) => (<div ref={ref} data-slot=\"top-nav-brand\" className={cn(\"flex shrink-0 items-center gap-2 px-3\", className)} {...props}/>));\nTopNavBrand.displayName = \"TopNavBrand\";\nconst TopNavNavigation = forwardRef<HTMLDivElement, TopNavNavigationProps>(({ className, ...props }, ref) => (<div ref={ref} data-slot=\"top-nav-navigation\" className={cn(\"flex min-w-0 self-stretch items-center\", className)} {...props}/>));\nTopNavNavigation.displayName = \"TopNavNavigation\";\nconst TopNavActions = forwardRef<HTMLDivElement, TopNavActionsProps>(({ className, ...props }, ref) => (<div ref={ref} data-slot=\"top-nav-actions\" className={cn(\"ml-auto flex shrink-0 items-center gap-1 px-3\", className)} {...props}/>));\nTopNavActions.displayName = \"TopNavActions\";\nfunction TopNavItemMenu(props: TopNavItemMenuProps) {\n    return <Popover {...props}/>;\n}\nTopNavItemMenu.displayName = \"TopNavItemMenu\";\nconst TopNavItemMenuTrigger = forwardRef<HTMLButtonElement, TopNavItemMenuTriggerProps>(({ children, className, suffix, type = \"button\", ...props }, forwardedRef) => {\n    const ChevronDown = useIcon(\"chevron-down\");\n    return (<PopoverTrigger ref={forwardedRef} render={<NavItemTrigger render={<button type={type}/>} aria-current={undefined} className={cn(\"group/top-nav-menu-trigger flex-none gap-1 data-[popup-open]:text-fg-default [&>[data-slot=nav-item-content]]:flex-none\", className)} {...props}>\n            {children}\n            {suffix !== null && (<NavItemTrailing className=\"ml-0\">\n                {suffix ?? (<ChevronDown aria-hidden=\"true\" size={14} strokeWidth={1.5} className=\"transition-transform duration-fast group-data-[popup-open]/top-nav-menu-trigger:rotate-180 motion-reduce:transition-none\"/>)}\n              </NavItemTrailing>)}\n          </NavItemTrigger>}/>);\n});\nTopNavItemMenuTrigger.displayName = \"TopNavItemMenuTrigger\";\nconst TopNavItemMenuContent = forwardRef<HTMLDivElement, TopNavItemMenuContentProps>(({ align = \"start\", className, side = \"bottom\", sideOffset = 4, ...props }, ref) => (<PopoverContent ref={ref} align={align} side={side} sideOffset={sideOffset} className={cn(\"min-w-48 p-1\", className)} {...props}/>));\nTopNavItemMenuContent.displayName = \"TopNavItemMenuContent\";\nexport { TopNav, TopNavBrand, TopNavNavigation, TopNavActions, TopNavItemMenu, TopNavItemMenuTrigger, TopNavItemMenuContent, topNavVariants, };\n",
      "type": "registry:ui",
      "target": "components/ui/top-nav.tsx"
    }
  ]
}