{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu",
  "type": "registry:item",
  "title": "Dropdown Menu",
  "description": "A dropdown menu component.",
  "files": [
    {
      "path": "registry/brook/ui/dropdown-menu/dropdown-menu.tsx",
      "content": "\"use client\";\n\nimport { Menu } from \"@base-ui/react/menu\";\nimport { ChevronRight } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport styles from \"./dropdown-menu.module.css\";\n\nfunction DropdownMenuRoot({ ...props }: Menu.Root.Props) {\n  return <Menu.Root {...props} />;\n}\n\nfunction DropdownMenuTrigger({ className, ...props }: Menu.Trigger.Props) {\n  return <Menu.Trigger {...props} className={cn(styles.trigger, className)} data-slot=\"menu-trigger\" />;\n}\n\nconst DropdownMenuPortal = Menu.Portal;\n\nfunction DropdownMenuPositioner({ className, ...props }: Menu.Positioner.Props) {\n  return (\n    <Menu.Positioner className={cn(styles.positioner, className)} data-slot=\"menu-positioner\" side=\"top\" {...props} />\n  );\n}\n\nfunction DropdownMenuPopup({ className, ...props }: Menu.Popup.Props) {\n  return <Menu.Popup className={cn(styles.popup, className)} data-slot=\"menu-popup\" {...props} />;\n}\n\ninterface DropdownMenuItemProps extends Menu.Item.Props {\n  icon?: ReactNode;\n  className?: string;\n  children?: ReactNode;\n  variant?: \"default\" | \"destructive\";\n}\n\nfunction DropdownMenuItem({ className, icon, children, variant = \"default\", ...props }: DropdownMenuItemProps) {\n  return (\n    <Menu.Item\n      className={cn(styles.item, className)}\n      data-slot=\"menu-item\"\n      data-variant={variant === \"destructive\" ? \"destructive\" : undefined}\n      {...props}\n    >\n      {icon && <span className={styles.icon}>{icon}</span>}\n      {children}\n    </Menu.Item>\n  );\n}\n\nfunction DropdownMenuSeparator({ className, ...props }: Menu.Separator.Props) {\n  return (\n    <div className={styles.seperatorWrapper} data-slot=\"menu-separator-wrapper\">\n      <Menu.Separator className={cn(styles.separator, className)} data-slot=\"menu-separator\" {...props} />\n    </div>\n  );\n}\n\nfunction DropdownMenuArrow({ className, ...props }: Menu.Arrow.Props) {\n  return <Menu.Arrow className={cn(styles.arrow, className)} data-slot=\"menu-arrow\" {...props} />;\n}\n\nfunction DropdownMenuSubmenuRoot({ ...props }: Menu.SubmenuRoot.Props) {\n  return <Menu.SubmenuRoot {...props} />;\n}\n\nfunction DropdownMenuSubmenuTrigger({ className, children, ...props }: Menu.SubmenuTrigger.Props) {\n  return (\n    <Menu.SubmenuTrigger className={cn(styles.submenuTrigger, className)} data-slot=\"menu-submenutrigger\" {...props}>\n      {children}\n      <ChevronRight className={styles.submenuIcon} size={16} />\n    </Menu.SubmenuTrigger>\n  );\n}\n\nfunction DropdownMenuRadioGroup({ className, ...props }: Menu.RadioGroup.Props) {\n  return <Menu.RadioGroup className={className} data-slot=\"menu-radiogroup\" {...props} />;\n}\n\ninterface DropdownMenuRadioItemProps extends Menu.RadioItem.Props {\n  className?: string;\n  children?: ReactNode;\n}\n\nfunction DropdownMenuRadioItem({ className, children, ...props }: DropdownMenuRadioItemProps) {\n  return (\n    <Menu.RadioItem className={cn(styles.item, className)} data-slot=\"menu-radioitem\" {...props}>\n      {children}\n    </Menu.RadioItem>\n  );\n}\n\nfunction DropdownMenuRadioItemIndicator({ className, ...props }: Menu.RadioItemIndicator.Props) {\n  return (\n    <Menu.RadioItemIndicator\n      className={cn(styles.radioIndicator, className)}\n      data-slot=\"menu-radioindicator\"\n      {...props}\n    />\n  );\n}\n\ninterface DropdownMenuCheckboxItemProps extends Menu.CheckboxItem.Props {\n  className?: string;\n  children?: ReactNode;\n}\n\nfunction DropdownMenuCheckboxItem({ className, children, ...props }: DropdownMenuCheckboxItemProps) {\n  return (\n    <Menu.CheckboxItem className={cn(styles.checkboxItem, className)} data-slot=\"menu-checkboxitem\" {...props}>\n      {children}\n    </Menu.CheckboxItem>\n  );\n}\n\nfunction DropdownMenuCheckboxItemIndicator({ className, ...props }: Menu.CheckboxItemIndicator.Props) {\n  return (\n    <Menu.CheckboxItemIndicator\n      className={cn(styles.checkboxIndicator, className)}\n      data-slot=\"menu-checkboxindicator\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuGroup({ className, ...props }: Menu.Group.Props) {\n  return <Menu.Group className={cn(styles.group, className)} data-slot=\"menu-group\" {...props} />;\n}\n\nfunction DropdownMenuGroupLabel({ className, ...props }: Menu.GroupLabel.Props) {\n  return <Menu.GroupLabel className={cn(styles.groupLabel, className)} data-slot=\"menu-grouplabel\" {...props} />;\n}\n\nfunction DropdownMenuSpacer() {\n  return <div style={{ height: \"4px\", width: \"100%\" }} />;\n}\n\nexport {\n  DropdownMenuRoot as DropdownMenu,\n  DropdownMenuArrow,\n  DropdownMenuCheckboxItem,\n  DropdownMenuCheckboxItemIndicator,\n  DropdownMenuGroup,\n  DropdownMenuGroupLabel,\n  DropdownMenuItem,\n  DropdownMenuPopup,\n  DropdownMenuPortal,\n  DropdownMenuPositioner,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuRadioItemIndicator,\n  DropdownMenuSeparator,\n  DropdownMenuSpacer,\n  DropdownMenuSubmenuRoot,\n  DropdownMenuSubmenuTrigger,\n  DropdownMenuTrigger,\n};\n",
      "type": "registry:file",
      "target": "~/components/ui/dropdown-menu/dropdown-menu.tsx"
    },
    {
      "path": "registry/brook/ui/dropdown-menu/dropdown-menu.module.css",
      "content": ".root {\n  display: inline-block;\n}\n\n.trigger {\n  &:focus-visible {\n    outline: 2px solid var(--ring);\n    outline-offset: 2px;\n  }\n\n  &[data-popup-open] {\n    background-color: var(--muted);\n    color: var(--foreground);\n  }\n\n  @media (hover: hover) {\n    &[data-popup-open]:hover {\n      background-color: var(--muted);\n      color: var(--foreground);\n    }\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n}\n\n.positioner {\n  z-index: 150;\n  position: absolute;\n  left: 0;\n}\n\n.popup {\n  min-width: 170px;\n  background-color: var(--popover);\n  border: none;\n  border-radius: var(--radius);\n  display: flex;\n  flex-direction: column;\n  box-shadow:\n    0 0 0 0.5px oklch(from var(--border) l c h / 0.8),\n    var(--shadow-border-stack);\n  transform-origin: \"top center\";\n  transition:\n    transform 250ms var(--ease-out-expo),\n    opacity 250ms var(--ease-out-expo);\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n\n.seperatorWrapper {\n  padding: 5px 0;\n}\n\n.separator {\n  height: 1px;\n  border-bottom: 0.5px solid oklch(from var(--border) l c h / 0.8);\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding-inline: 8px 6px;\n  font-weight: 400;\n  height: 32px;\n  font-size: 0.875rem;\n  line-height: 1.2;\n  color: var(--foreground);\n  cursor: pointer;\n  justify-content: flex-start;\n  margin: 0rem;\n  position: relative;\n  isolation: isolate;\n\n  &:not(:has(.icon)) {\n    padding-left: 12px;\n  }\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 0 4px;\n    border-radius: calc(var(--radius) - 4px);\n    background-color: transparent;\n    z-index: -1;\n  }\n\n  &[data-popup-open]::before,\n  &[data-highlighted]::before,\n  &:hover::before,\n  &:focus::before {\n    background-color: var(--accent);\n  }\n\n  &:focus,\n  &:focus-visible {\n    outline: none;\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n\n    &:hover {\n      background: transparent;\n    }\n  }\n\n  &:hover {\n    & > .icon,\n    & .icon {\n      color: var(--secondary-foreground);\n      opacity: 1;\n    }\n  }\n\n  &[data-variant=\"destructive\"]:hover,\n  &[data-variant=\"destructive\"][data-highlighted] {\n    color: var(--destructive);\n\n    & .icon {\n      color: var(--destructive);\n    }\n  }\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--muted-foreground);\n  margin-left: 4px;\n}\n\n.submenuTrigger {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding-inline: 8px 6px;\n  font-weight: 400;\n  height: 32px;\n  font-size: 0.875rem;\n  line-height: 1.2;\n  color: var(--foreground);\n  cursor: pointer;\n  justify-content: flex-start;\n  margin: 0rem;\n  position: relative;\n  isolation: isolate;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 0 4px;\n    border-radius: calc(var(--radius) - 4px);\n    background-color: transparent;\n    z-index: -1;\n  }\n\n  &[data-popup-open]::before,\n  &[data-highlighted]::before,\n  &:hover::before {\n    background-color: oklch(from var(--accent) l c h / 0.7);\n  }\n\n  &:focus,\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:hover {\n    & .submenuIcon {\n      color: var(--secondary-foreground);\n    }\n  }\n}\n\n.arrow {\n  fill: var(--background);\n  stroke: var(--border);\n  stroke-width: 1px;\n}\n\n.submenuIcon {\n  margin-left: auto;\n  height: 1rem;\n  width: 1rem;\n  color: var(--muted-foreground);\n  opacity: 0.6;\n}\n\n.radioIndicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--foreground);\n  margin-left: auto;\n  flex-shrink: 0;\n}\n\n.checkboxItem {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: 0 12px;\n  font-weight: 400;\n  height: 32px;\n  font-size: 0.875rem;\n  line-height: 1.2;\n  color: var(--foreground);\n  cursor: pointer;\n  margin: 0rem;\n  position: relative;\n  isolation: isolate;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 0 4px;\n    border-radius: calc(var(--radius) - 4px);\n    background-color: transparent;\n    z-index: -1;\n  }\n\n  &[data-popup-open]::before,\n  &[data-highlighted]::before,\n  &:hover::before,\n  &:focus::before {\n    background-color: var(--accent);\n  }\n\n  &:focus,\n  &:focus-visible {\n    outline: none;\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n\n    &:hover {\n      background: transparent;\n    }\n  }\n}\n\n.checkboxIndicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--foreground);\n  margin-left: auto;\n  flex-shrink: 0;\n}\n\n.group {\n  display: flex;\n  flex-direction: column;\n}\n\n.groupLabel {\n  cursor: default;\n  user-select: none;\n  padding: 0.5rem 12px;\n  font-size: 0.75rem;\n  font-weight: 500;\n  line-height: 1rem;\n  color: var(--muted-foreground);\n  text-transform: uppercase;\n  letter-spacing: 0.025em;\n}\n",
      "type": "registry:file",
      "target": "~/components/ui/dropdown-menu/dropdown-menu.module.css"
    }
  ]
}