{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "context-menu",
  "type": "registry:item",
  "title": "Context Menu",
  "description": "A menu component triggered by right-click or long press.",
  "files": [
    {
      "path": "registry/brook/ui/context-menu/context-menu.tsx",
      "content": "\"use client\";\n\nimport { ContextMenu } from \"@base-ui/react/context-menu\";\nimport { Check, ChevronRight, Circle } from \"lucide-react\";\nimport type React from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport styles from \"./context-menu.module.css\";\n\nfunction ContextMenuRoot({ ...props }: ContextMenu.Root.Props) {\n  return <ContextMenu.Root {...props} />;\n}\n\nfunction ContextMenuTrigger({ className, ...props }: ContextMenu.Trigger.Props) {\n  return <ContextMenu.Trigger className={cn(styles.trigger, className)} data-slot=\"contextmenu-trigger\" {...props} />;\n}\n\nconst ContextMenuPortal = ContextMenu.Portal;\n\nfunction ContextMenuBackdrop({ className, ...props }: ContextMenu.Backdrop.Props) {\n  return (\n    <ContextMenu.Backdrop className={cn(styles.backdrop, className)} data-slot=\"contextmenu-backdrop\" {...props} />\n  );\n}\n\nfunction ContextMenuPositioner({ className, ...props }: ContextMenu.Positioner.Props) {\n  return (\n    <ContextMenu.Positioner\n      className={cn(styles.positioner, className)}\n      data-slot=\"contextmenu-positioner\"\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuPopup({ className, ...props }: ContextMenu.Popup.Props) {\n  return <ContextMenu.Popup className={cn(styles.popup, className)} data-slot=\"contextmenu-popup\" {...props} />;\n}\n\nfunction ContextMenuArrow({ className, ...props }: ContextMenu.Arrow.Props) {\n  return <ContextMenu.Arrow className={cn(styles.arrow, className)} data-slot=\"contextmenu-arrow\" {...props} />;\n}\n\ninterface ContextMenuItemProps extends ContextMenu.Item.Props {\n  icon?: ReactNode;\n  inset?: boolean;\n  className?: string;\n  children?: ReactNode;\n  variant?: \"default\" | \"destructive\";\n}\n\nfunction ContextMenuItem({\n  className,\n  icon,\n  children,\n  inset = false,\n  variant = \"default\",\n  ...props\n}: ContextMenuItemProps) {\n  return (\n    <ContextMenu.Item\n      className={cn(styles.item, inset && styles.inset, className)}\n      data-slot=\"contextmenu-item\"\n      data-variant={variant === \"destructive\" ? \"destructive\" : undefined}\n      {...props}\n    >\n      {icon && <span className={styles.icon}>{icon}</span>}\n      {children}\n    </ContextMenu.Item>\n  );\n}\n\nfunction ContextMenuCheckboxItem({ className, children, ...props }: ContextMenu.CheckboxItem.Props) {\n  return (\n    <ContextMenu.CheckboxItem\n      className={cn(styles.checkboxItem, className)}\n      data-slot=\"contextmenu-checkboxitem\"\n      {...props}\n    >\n      <span className={styles.itemIndicator}>\n        <Check size={16} />\n      </span>\n      {children}\n    </ContextMenu.CheckboxItem>\n  );\n}\n\nfunction ContextMenuRadioItem({ className, children, ...props }: ContextMenu.RadioItem.Props) {\n  return (\n    <ContextMenu.RadioItem className={cn(styles.radioItem, className)} data-slot=\"contextmenu-radioitem\" {...props}>\n      <span className={styles.itemIndicator}>\n        <Circle fill=\"currentColor\" size={8} />\n      </span>\n      {children}\n    </ContextMenu.RadioItem>\n  );\n}\n\nfunction ContextMenuRadioGroup({ className, ...props }: ContextMenu.RadioGroup.Props) {\n  return <ContextMenu.RadioGroup className={cn(className)} {...props} />;\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset = false,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> & { inset?: boolean }) {\n  return <div className={cn(styles.label, inset && styles.inset, className)} {...props} />;\n}\n\nfunction ContextMenuSeparator({ className, ...props }: ContextMenu.Separator.Props) {\n  return (\n    <div className={styles.seperatorWrapper}>\n      <ContextMenu.Separator className={cn(styles.separator, className)} {...props} />\n    </div>\n  );\n}\n\nfunction ContextMenuSubmenuRoot({ ...props }: ContextMenu.SubmenuRoot.Props) {\n  return <ContextMenu.SubmenuRoot {...props} />;\n}\n\nfunction ContextMenuSubmenuTrigger({\n  className,\n  inset = false,\n  children,\n  ...props\n}: ContextMenu.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenu.SubmenuTrigger\n      className={cn(styles.submenuTrigger, inset && styles.inset, className)}\n      data-slot=\"contextmenu-submenutrigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRight className={styles.submenuIcon} size={16} />\n    </ContextMenu.SubmenuTrigger>\n  );\n}\n\nfunction ContextMenuGroup({ className, ...props }: ContextMenu.Group.Props) {\n  return <ContextMenu.Group className={cn(styles.group, className)} data-slot=\"contextmenu-group\" {...props} />;\n}\n\nfunction ContextMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n  return <span className={cn(styles.shortcut, className)} {...props} />;\n}\n\nfunction ContextMenuSpacer() {\n  return <div style={{ height: \"4px\", width: \"100%\" }} />;\n}\n\nexport {\n  ContextMenuRoot as ContextMenu,\n  ContextMenuArrow,\n  ContextMenuBackdrop,\n  ContextMenuCheckboxItem,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuPopup,\n  ContextMenuPortal,\n  ContextMenuPositioner,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSpacer,\n  ContextMenuSubmenuRoot,\n  ContextMenuSubmenuTrigger,\n  ContextMenuTrigger,\n};\n",
      "type": "registry:file",
      "target": "~/components/ui/context-menu/context-menu.tsx"
    },
    {
      "path": "registry/brook/ui/context-menu/context-menu.module.css",
      "content": ".trigger {\n  outline: none;\n  user-select: none;\n}\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 140;\n  background-color: rgb(0 0 0 / 0.8);\n  opacity: 0;\n  transition: opacity 150ms ease;\n\n  &[data-open] {\n    opacity: 1;\n  }\n}\n\n.positioner {\n  position: absolute;\n  z-index: 150;\n  outline: none;\n}\n\n.popup {\n  box-sizing: border-box;\n  min-width: 140px;\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  @media (max-width: 640px) {\n    padding: 0.375rem;\n    max-width: calc(100vw - 2rem);\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.arrow {\n  fill: var(--background);\n  stroke: var(--border);\n  stroke-width: 1px;\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  &::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    & > .shortcut {\n      color: var(--secondary-foreground);\n    }\n\n    & > .icon,\n    & .icon {\n      color: var(--secondary-foreground);\n      opacity: 1;\n    }\n  }\n\n  &[data-variant=\"destructive\"]:hover {\n    color: var(--destructive);\n\n    & .icon {\n      color: var(--destructive);\n    }\n  }\n\n  @media (max-width: 640px) {\n    padding: 0.625rem 0.75rem;\n    font-size: 0.9375rem;\n    gap: 0.75rem;\n    min-height: 2.75rem;\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.inset {\n  padding-left: 2rem;\n}\n\n.checkboxItem,\n.radioItem {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.375rem 0.5rem;\n  padding-left: 2rem;\n  font-size: 0.875rem;\n  border-radius: calc(var(--radius) - 2px);\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  &:focus-visible {\n    outline: 2px solid var(--ring);\n    outline-offset: 2px;\n  }\n\n  &:hover,\n  &[data-highlighted] {\n    background: var(--muted);\n    color: var(--accent-foreground);\n  }\n\n  &[data-disabled] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  @media (max-width: 640px) {\n    padding: 0.625rem 0.75rem;\n    padding-left: 2.25rem;\n    font-size: 0.9375rem;\n    min-height: 2.75rem;\n  }\n}\n\n.itemIndicator {\n  position: absolute;\n  left: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 1rem;\n  width: 1rem;\n\n  @media (max-width: 640px) {\n    left: 0.75rem;\n    height: 1.125rem;\n    width: 1.125rem;\n  }\n}\n\n.label {\n  padding: 0.375rem 0.5rem;\n  padding-top: 0.75rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--muted-foreground);\n  text-transform: uppercase;\n  letter-spacing: 0.025em;\n\n  @media (max-width: 640px) {\n    padding: 0.625rem 0.75rem;\n    padding-top: 0.875rem;\n    font-size: 0.8125rem;\n  }\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  &:focus::before {\n    background-color: var(--accent);\n  }\n\n  &:focus,\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:hover {\n    & .submenuIcon,\n    & > svg {\n      color: var(--secondary-foreground);\n    }\n  }\n\n  @media (max-width: 640px) {\n    padding: 0.625rem 0.75rem;\n    font-size: 0.9375rem;\n    min-height: 2.75rem;\n  }\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  @media (max-width: 640px) {\n    height: 1.125rem;\n    width: 1.125rem;\n  }\n}\n\n.submenuTrigger > svg {\n  color: var(--muted-foreground);\n}\n\n.group {\n  overflow: hidden;\n}\n\n.shortcut {\n  margin-left: auto;\n  margin-right: 4px;\n  font-size: 0.75rem;\n  color: var(--muted-foreground);\n  letter-spacing: 0.025em;\n  opacity: 0.6;\n\n  @media (max-width: 640px) {\n    display: none;\n  }\n}\n",
      "type": "registry:file",
      "target": "~/components/ui/context-menu/context-menu.module.css"
    }
  ]
}