{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu",
  "type": "registry:ui",
  "title": "Dropdown Menu",
  "description": "Animated Dropdown Menu Reveals a menu of options or actions when activated by a button.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": [
    "motion",
    "lucide-react",
    "@radix-ui/react-dropdown-menu",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "type": "registry:ui",
      "path": "components/ui/dropdown-menu.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';\nimport { motion, AnimatePresence, Variants } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\nconst dropdownVariants: Variants = {\n  hidden: {\n    opacity: 0,\n    scale: 0.5,\n    rotateX: 40,\n    y: 20,\n  },\n  visible: {\n    opacity: 1,\n    scale: 1,\n    y: 0,\n    rotateX: 0,\n    transition: {\n      type: 'spring' as const,\n      stiffness: 260,\n      damping: 15,\n    },\n  },\n  exit: {\n    opacity: 0,\n    scale: 0.8,\n    rotateX: 10,\n    y: 10,\n    transition: {\n      duration: 0.2,\n    },\n  },\n};\n\nconst itemVariants: Variants = {\n  hidden: {\n    opacity: 0,\n    x: -20,\n  },\n  visible: (i: number) => ({\n    opacity: 1,\n    x: 0,\n    transition: {\n      delay: i * 0.05,\n      duration: 0.2,\n    },\n  }),\n  exit: {\n    opacity: 0,\n    x: -20,\n    transition: {\n      duration: 0.1,\n    },\n  },\n};\n\nconst useMobile = () => {\n  const [isMobile, setIsMobile] = useState(false);\n\n  useEffect(() => {\n    const checkIfMobile = () => {\n      setIsMobile(\n        window.innerWidth < 768 ||\n          /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(\n            navigator.userAgent,\n          ),\n      );\n    };\n\n    checkIfMobile();\n    window.addEventListener('resize', checkIfMobile);\n\n    return () => {\n      window.removeEventListener('resize', checkIfMobile);\n    };\n  }, []);\n\n  return isMobile;\n};\n\nconst DropdownMenuContext = React.createContext<{ animate: boolean }>({\n  animate: true,\n});\n\nfunction DropdownMenu({\n  animate = true,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root> & {\n  animate?: boolean;\n}) {\n  return (\n    <DropdownMenuContext.Provider value={{ animate }}>\n      <DropdownMenuPrimitive.Root data-slot='dropdown-menu' {...props} />\n    </DropdownMenuContext.Provider>\n  );\n}\n\nfunction DropdownMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  const { animate } = React.useContext(DropdownMenuContext);\n\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot='dropdown-menu-trigger'\n      className={cn(\n        'inline-flex items-center justify-center rounded-lg text-sm font-medium transition-all duration-200',\n        'hover:shadow-lg',\n        className,\n      )}\n      asChild\n      {...props}\n    >\n      <motion.div\n        whileHover={animate ? { scale: 1.02 } : undefined}\n        whileTap={animate ? { scale: 0.98 } : undefined}\n        transition={\n          animate ? { type: 'spring', stiffness: 400, damping: 25 } : undefined\n        }\n        className='flex items-center gap-2 cursor-pointer'\n        style={{ touchAction: 'manipulation' }}\n      >\n        {children}\n      </motion.div>\n    </DropdownMenuPrimitive.Trigger>\n  );\n}\n\ninterface DropdownMenuContentProps extends React.ComponentPropsWithoutRef<\n  typeof DropdownMenuPrimitive.Content\n> {\n  className?: string;\n  sideOffset?: number;\n  children?: React.ReactNode;\n  maxHeight?: string | number;\n}\n\nfunction DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  maxHeight = '16rem',\n  children,\n  ...props\n}: DropdownMenuContentProps) {\n  const { animate } = React.useContext(DropdownMenuContext);\n\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot='dropdown-menu-content'\n        sideOffset={sideOffset}\n        className='z-50'\n        asChild\n        {...props}\n      >\n        <motion.div\n          variants={animate ? dropdownVariants : undefined}\n          initial={animate ? 'hidden' : undefined}\n          animate={animate ? 'visible' : undefined}\n          exit={animate ? 'exit' : undefined}\n          className={cn(\n            'w-72 rounded-xl border shadow-xl overflow-hidden perspective-midrange transform-3d',\n            'bg-[#ffffff] border-neutral-900/10',\n            'dark:bg-[#262626] dark:border-neutral-50/10',\n            className,\n          )}\n          style={{\n            transformOrigin:\n              'var(--radix-dropdown-menu-content-transform-origin)',\n          }}\n        >\n          <div\n            className='relative z-20 overflow-y-auto scrollbar-visible'\n            style={{\n              maxHeight:\n                typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,\n              scrollbarWidth: 'thin',\n              scrollbarColor: 'rgba(155, 155, 155, 0.5) transparent',\n            }}\n          >\n            <style jsx global>{`\n              .scrollbar-visible::-webkit-scrollbar {\n                width: 6px;\n                display: block;\n              }\n              .scrollbar-visible::-webkit-scrollbar-track {\n                background: transparent;\n              }\n              .scrollbar-visible::-webkit-scrollbar-thumb {\n                background-color: rgba(155, 155, 155, 0.5);\n                border-radius: 20px;\n              }\n              .scrollbar-visible::-webkit-scrollbar-thumb:hover {\n                background-color: rgba(155, 155, 155, 0.7);\n              }\n            `}</style>\n            <div className='p-2'>\n              {React.Children.map(children, (child, index) =>\n                animate ? (\n                  <motion.div\n                    key={index}\n                    custom={index}\n                    variants={itemVariants}\n                    initial='hidden'\n                    animate='visible'\n                    exit='exit'\n                  >\n                    {child}\n                  </motion.div>\n                ) : (\n                  <div key={index}>{child}</div>\n                ),\n              )}\n            </div>\n          </div>\n        </motion.div>\n      </DropdownMenuPrimitive.Content>\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n  className?: string;\n}) {\n  const [isHovered, setIsHovered] = useState(false);\n  const isMobile = useMobile();\n  const { animate } = React.useContext(DropdownMenuContext);\n\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot='dropdown-menu-item'\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        'relative flex cursor-pointer items-center gap-3 rounded-lg p-2 text-sm outline-hidden select-none overflow-hidden',\n        'transition-all duration-200 ease-out',\n        'focus:outline-hidden focus:bg-transparent',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        'data-inset:pl-8',\n        'text-neutral-900 dark:text-neutral-50',\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      onMouseEnter={() => !isMobile && setIsHovered(true)}\n      onMouseLeave={() => !isMobile && setIsHovered(false)}\n      style={{ touchAction: 'manipulation' }}\n      asChild\n      {...props}\n    >\n      <motion.div\n        className='relative w-full'\n        initial={animate ? { opacity: 0, x: -20 } : undefined}\n        animate={animate ? { opacity: 1, x: 0 } : undefined}\n      >\n        <AnimatePresence>\n          {!isMobile && isHovered && (\n            <motion.div\n              layoutId={animate ? 'hoverBackground' : undefined}\n              initial={animate ? { opacity: 0 } : undefined}\n              animate={\n                animate\n                  ? {\n                      opacity: 1,\n                      scale: 1.05,\n                      transition: {\n                        type: 'spring',\n                        stiffness: 260,\n                        damping: 15,\n                      },\n                    }\n                  : { opacity: 1 }\n              }\n              exit={animate ? { opacity: 0 } : undefined}\n              className={cn(\n                'absolute inset-0 rounded-lg',\n                variant === 'destructive'\n                  ? 'bg-red-500/10 dark:bg-red-500/20'\n                  : 'bg-[#f5f5f5] dark:bg-[#404040]',\n              )}\n            />\n          )}\n        </AnimatePresence>\n\n        <div\n          className={cn(\n            'relative z-10 w-full flex items-center gap-3',\n            variant === 'destructive' && 'text-red-600 dark:text-red-400',\n          )}\n        >\n          {React.Children.map(children, (child, index) => {\n            if (\n              React.isValidElement(child) &&\n              (child.type === 'svg' ||\n                (child.props &&\n                  typeof child.props === 'object' &&\n                  'className' in child.props &&\n                  typeof child.props.className === 'string' &&\n                  child.props.className.includes('lucide')))\n            ) {\n              return (\n                <motion.div\n                  key={index}\n                  animate={\n                    animate\n                      ? {\n                          scale: !isMobile && isHovered ? 1.1 : 1,\n                          rotate: !isMobile && isHovered ? 5 : 0,\n                        }\n                      : undefined\n                  }\n                  transition={\n                    animate ? { type: 'spring', stiffness: 500 } : undefined\n                  }\n                >\n                  {child}\n                </motion.div>\n              );\n            }\n\n            if (typeof child === 'string') {\n              return (\n                <motion.span\n                  key={index}\n                  animate={\n                    animate\n                      ? {\n                          y: !isMobile && isHovered ? -1 : 0,\n                          x: !isMobile && isHovered ? 1 : 0,\n                        }\n                      : undefined\n                  }\n                  transition={\n                    animate ? { type: 'spring', stiffness: 500 } : undefined\n                  }\n                  className='font-medium flex-1'\n                >\n                  {child}\n                </motion.span>\n              );\n            }\n\n            return child;\n          })}\n        </div>\n      </motion.div>\n    </DropdownMenuPrimitive.Item>\n  );\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n  className?: string;\n}) {\n  const [isHovered, setIsHovered] = useState(false);\n  const isMobile = useMobile();\n  const { animate } = React.useContext(DropdownMenuContext);\n\n  const handleSelect = (e: Event) => {\n    e.preventDefault();\n    setTimeout(() => {\n      const event = new KeyboardEvent('keydown', { key: 'Escape' });\n      document.dispatchEvent(event);\n    }, 150);\n    if (props.onSelect) props.onSelect(e);\n  };\n\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot='dropdown-menu-checkbox-item'\n      className={cn(\n        'relative flex cursor-pointer items-center gap-3 rounded-lg py-2 pr-3 pl-8 text-sm outline-hidden select-none overflow-hidden',\n        'transition-all duration-200 ease-out',\n        'focus:outline-hidden focus:bg-transparent',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        'text-neutral-900 dark:text-neutral-50',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n        className,\n      )}\n      checked={checked}\n      onMouseEnter={() => !isMobile && setIsHovered(true)}\n      onMouseLeave={() => !isMobile && setIsHovered(false)}\n      onSelect={handleSelect}\n      style={{ touchAction: 'manipulation' }}\n      asChild\n      {...props}\n    >\n      <motion.div className='relative w-full'>\n        <AnimatePresence>\n          {!isMobile && isHovered && (\n            <motion.div\n              layoutId={animate ? 'checkboxHoverBackground' : undefined}\n              initial={animate ? { opacity: 0 } : undefined}\n              animate={\n                animate\n                  ? {\n                      opacity: 1,\n                      scale: 1.05,\n                      transition: {\n                        type: 'spring',\n                        stiffness: 260,\n                        damping: 15,\n                      },\n                    }\n                  : { opacity: 1 }\n              }\n              exit={animate ? { opacity: 0 } : undefined}\n              className='absolute inset-0 rounded-lg bg-[#f5f5f5] dark:bg-[#404040]'\n            />\n          )}\n        </AnimatePresence>\n\n        <span className='pointer-events-none absolute left-2 flex size-4 items-center justify-center'>\n          <DropdownMenuPrimitive.ItemIndicator>\n            <motion.div\n              initial={animate ? { scale: 0 } : undefined}\n              animate={animate ? { scale: 1 } : undefined}\n              transition={\n                animate\n                  ? { type: 'spring', stiffness: 400, damping: 25 }\n                  : undefined\n              }\n            >\n              <CheckIcon className='size-4' />\n            </motion.div>\n          </DropdownMenuPrimitive.ItemIndicator>\n        </span>\n\n        <motion.div\n          animate={\n            animate\n              ? {\n                  y: !isMobile && isHovered ? -1 : 0,\n                  x: !isMobile && isHovered ? 1 : 0,\n                }\n              : undefined\n          }\n          transition={animate ? { type: 'spring', stiffness: 500 } : undefined}\n          className='relative z-10'\n        >\n          {children}\n        </motion.div>\n      </motion.div>\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot='dropdown-menu-radio-group'\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {\n  className?: string;\n}) {\n  const [isHovered, setIsHovered] = useState(false);\n  const isMobile = useMobile();\n  const { animate } = React.useContext(DropdownMenuContext);\n\n  const handleSelect = (e: Event) => {\n    e.preventDefault();\n    setTimeout(() => {\n      const event = new KeyboardEvent('keydown', { key: 'Escape' });\n      document.dispatchEvent(event);\n    }, 150);\n    if (props.onSelect) props.onSelect(e);\n  };\n\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot='dropdown-menu-radio-item'\n      className={cn(\n        'relative flex cursor-pointer items-center gap-3 rounded-lg py-2 pr-3 pl-8 text-sm outline-hidden select-none overflow-hidden',\n        'transition-all duration-200 ease-out',\n        'focus:outline-hidden focus:bg-transparent',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        'text-neutral-900 dark:text-neutral-50',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-2.5',\n        className,\n      )}\n      onMouseEnter={() => !isMobile && setIsHovered(true)}\n      onMouseLeave={() => !isMobile && setIsHovered(false)}\n      onSelect={handleSelect}\n      style={{ touchAction: 'manipulation' }}\n      asChild\n      {...props}\n    >\n      <motion.div className='relative w-full'>\n        <AnimatePresence>\n          {!isMobile && isHovered && (\n            <motion.div\n              layoutId={animate ? 'radioHoverBackground' : undefined}\n              initial={animate ? { opacity: 0 } : undefined}\n              animate={\n                animate\n                  ? {\n                      opacity: 1,\n                      scale: 1.05,\n                      transition: {\n                        type: 'spring',\n                        stiffness: 260,\n                        damping: 15,\n                      },\n                    }\n                  : { opacity: 1 }\n              }\n              exit={animate ? { opacity: 0 } : undefined}\n              className='absolute inset-0 rounded-lg bg-[#f5f5f5] dark:bg-[#404040]'\n            />\n          )}\n        </AnimatePresence>\n\n        <span className='pointer-events-none absolute left-2 flex size-4 items-center justify-center'>\n          <DropdownMenuPrimitive.ItemIndicator>\n            <motion.div\n              initial={animate ? { scale: 0 } : undefined}\n              animate={animate ? { scale: 1 } : undefined}\n              transition={\n                animate\n                  ? { type: 'spring', stiffness: 400, damping: 25 }\n                  : undefined\n              }\n            >\n              <CircleIcon className='size-2 fill-current' />\n            </motion.div>\n          </DropdownMenuPrimitive.ItemIndicator>\n        </span>\n\n        <motion.div\n          animate={\n            animate\n              ? {\n                  y: !isMobile && isHovered ? -1 : 0,\n                  x: !isMobile && isHovered ? 1 : 0,\n                }\n              : undefined\n          }\n          transition={animate ? { type: 'spring', stiffness: 500 } : undefined}\n          className='relative z-10'\n        >\n          {children}\n        </motion.div>\n      </motion.div>\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n  className?: string;\n}) {\n  return (\n    <div className='p-2 sticky top-0 z-20'>\n      <DropdownMenuPrimitive.Label\n        data-slot='dropdown-menu-label'\n        data-inset={inset}\n        className={cn(\n          'px-3 py-2 text-sm font-bold text-neutral-900 dark:text-neutral-50',\n          'data-inset:pl-8',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator> & {\n  className?: string;\n}) {\n  const { animate } = React.useContext(DropdownMenuContext);\n\n  return (\n    <motion.div\n      initial={animate ? { scaleX: 0, opacity: 0 } : undefined}\n      animate={\n        animate\n          ? {\n              scaleX: 1,\n              opacity: 1,\n              transition: {\n                delay: 0.1,\n                type: 'spring',\n                stiffness: 400,\n                damping: 25,\n              },\n            }\n          : undefined\n      }\n      className='flex justify-center py-1'\n    >\n      <DropdownMenuPrimitive.Separator\n        data-slot='dropdown-menu-separator'\n        className={cn(\n          'my-1 h-px w-full bg-neutral-900/10 dark:bg-white/10',\n          className,\n        )}\n        {...props}\n      />\n    </motion.div>\n  );\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot='dropdown-menu-shortcut'\n      className={cn(\n        'ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot='dropdown-menu-sub' {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n  className?: string;\n}) {\n  const [isHovered, setIsHovered] = useState(false);\n  const isMobile = useMobile();\n  const { animate } = React.useContext(DropdownMenuContext);\n\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot='dropdown-menu-sub-trigger'\n      data-inset={inset}\n      className={cn(\n        'relative flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm outline-hidden select-none overflow-hidden',\n        'transition-all duration-200 ease-out',\n        'focus:outline-hidden',\n        'text-neutral-900 dark:text-neutral-50',\n        'data-inset:pl-8',\n        'data-[state=open]:bg-[#f5f5f5] dark:data-[state=open]:bg-[#404040]',\n        !isMobile && isHovered && 'bg-[#f5f5f5] dark:bg-[#404040]',\n        className,\n      )}\n      onMouseEnter={() => !isMobile && setIsHovered(true)}\n      onMouseLeave={() => !isMobile && setIsHovered(false)}\n      style={{ touchAction: 'manipulation' }}\n      {...props}\n    >\n      <div className='w-full flex items-center gap-3'>\n        <motion.div\n          animate={\n            animate\n              ? {\n                  y: !isMobile && isHovered ? -1 : 0,\n                  x: !isMobile && isHovered ? 1 : 0,\n                }\n              : undefined\n          }\n          transition={animate ? { type: 'spring', stiffness: 500 } : undefined}\n          className='flex-1'\n        >\n          {children}\n        </motion.div>\n        <motion.div\n          animate={\n            animate\n              ? {\n                  rotate: !isMobile && isHovered ? 90 : 0,\n                  scale: !isMobile && isHovered ? 1.1 : 1,\n                }\n              : undefined\n          }\n          transition={animate ? { type: 'spring', stiffness: 500 } : undefined}\n        >\n          <ChevronRightIcon className='ml-auto size-4' />\n        </motion.div>\n      </div>\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\ninterface DropdownMenuSubContentProps extends React.ComponentPropsWithoutRef<\n  typeof DropdownMenuPrimitive.SubContent\n> {\n  className?: string;\n  children?: React.ReactNode;\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  children,\n  ...props\n}: DropdownMenuSubContentProps) {\n  const { animate } = React.useContext(DropdownMenuContext);\n\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot='dropdown-menu-sub-content'\n      className='z-50'\n      asChild\n      {...props}\n    >\n      <motion.div\n        variants={animate ? dropdownVariants : undefined}\n        initial={animate ? 'hidden' : undefined}\n        animate={animate ? 'visible' : undefined}\n        exit={animate ? 'exit' : undefined}\n        className={cn(\n          'min-w-32 rounded-xl border shadow-xl overflow-hidden perspective-midrange transform-3d',\n          'bg-[#ffffff] border-neutral-900/10',\n          'dark:bg-[#262626] dark:border-neutral-50/10',\n          className,\n        )}\n        style={{\n          transformOrigin:\n            'var(--radix-dropdown-menu-content-transform-origin)',\n        }}\n      >\n        <div className='p-1 w-full relative z-20'>\n          {React.Children.map(children, (child, index) =>\n            animate ? (\n              <motion.div\n                key={index}\n                custom={index}\n                variants={itemVariants}\n                initial='hidden'\n                animate='visible'\n                exit='exit'\n              >\n                {child}\n              </motion.div>\n            ) : (\n              <div key={index}>{child}</div>\n            ),\n          )}\n        </div>\n      </motion.div>\n    </DropdownMenuPrimitive.SubContent>\n  );\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot='dropdown-menu-group' {...props} />\n  );\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot='dropdown-menu-portal' {...props} />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n"
    },
    {
      "type": "registry:lib",
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}"
    }
  ]
}