{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "context-menu",
  "title": "Context Menu",
  "author": "Matthew Blode",
  "description": "A menu that appears on right-click, providing contextual actions.",
  "dependencies": ["@base-ui/react"],
  "files": [
    {
      "path": "ui/context-menu.tsx",
      "content": "\"use client\";\n\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\";\nimport { CheckIcon, ChevronRightIcon } from \"blode-icons-react\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst ContextMenu = ({ ...props }: ContextMenuPrimitive.Root.Props) => (\n  <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n);\n\nconst ContextMenuPortal = ({ ...props }: ContextMenuPrimitive.Portal.Props) => (\n  <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n);\n\nconst ContextMenuTrigger = ({ className, ...props }: ContextMenuPrimitive.Trigger.Props) => (\n  <ContextMenuPrimitive.Trigger\n    className={cn(\"select-none\", className)}\n    data-slot=\"context-menu-trigger\"\n    {...props}\n  />\n);\n\nconst ContextMenuContent = ({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  children,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<ContextMenuPrimitive.Positioner.Props, \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\">) => (\n  <ContextMenuPrimitive.Portal>\n    <ContextMenuPrimitive.Positioner\n      align={align}\n      alignOffset={alignOffset}\n      className=\"isolate z-50 outline-none\"\n      side={side}\n      sideOffset={sideOffset}\n    >\n      <ContextMenuPrimitive.Popup\n        className={cn(\n          \"cn-menu-target data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 min-w-36 origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-popover outline-none ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in\",\n          className,\n        )}\n        data-slot=\"context-menu-content\"\n        {...props}\n      >\n        <div className=\"scroll-fade max-h-(--available-height) overflow-x-hidden overflow-y-auto p-1\">\n          {children}\n        </div>\n      </ContextMenuPrimitive.Popup>\n    </ContextMenuPrimitive.Positioner>\n  </ContextMenuPrimitive.Portal>\n);\n\nconst ContextMenuGroup = ({ ...props }: ContextMenuPrimitive.Group.Props) => (\n  <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n);\n\nconst ContextMenuLabel = ({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) => (\n  <ContextMenuPrimitive.GroupLabel\n    className={cn(\n      \"px-1.5 py-1 font-medium text-muted-foreground text-xs data-inset:pl-7\",\n      className,\n    )}\n    data-inset={inset}\n    data-slot=\"context-menu-label\"\n    {...props}\n  />\n);\n\nconst ContextMenuItem = ({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) => (\n  <ContextMenuPrimitive.Item\n    className={cn(\n      \"group/context-menu-item relative flex cursor-default select-none items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-inset:pl-7 data-[variant=destructive]:text-destructive data-disabled:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive\",\n      className,\n    )}\n    data-inset={inset}\n    data-slot=\"context-menu-item\"\n    data-variant={variant}\n    {...props}\n  />\n);\n\nconst ContextMenuSub = ({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) => (\n  <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n);\n\nconst ContextMenuSubTrigger = ({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) => (\n  <ContextMenuPrimitive.SubmenuTrigger\n    className={cn(\n      \"flex cursor-default select-none items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-popup-open:bg-accent data-inset:pl-7 data-popup-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n      className,\n    )}\n    data-inset={inset}\n    data-slot=\"context-menu-sub-trigger\"\n    {...props}\n  >\n    {children}\n    <ChevronRightIcon className=\"cn-rtl-flip ml-auto\" />\n  </ContextMenuPrimitive.SubmenuTrigger>\n);\n\nconst ContextMenuSubContent = ({ ...props }: ComponentProps<typeof ContextMenuContent>) => (\n  <ContextMenuContent\n    className=\"shadow-lg\"\n    data-slot=\"context-menu-sub-content\"\n    side=\"right\"\n    {...props}\n  />\n);\n\nconst ContextMenuCheckboxItem = ({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean;\n}) => (\n  <ContextMenuPrimitive.CheckboxItem\n    checked={checked}\n    className={cn(\n      \"relative flex cursor-default select-none items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-inset:pl-7 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n      className,\n    )}\n    data-inset={inset}\n    data-slot=\"context-menu-checkbox-item\"\n    {...props}\n  >\n    <span className=\"pointer-events-none absolute right-2\">\n      <ContextMenuPrimitive.CheckboxItemIndicator>\n        <CheckIcon />\n      </ContextMenuPrimitive.CheckboxItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.CheckboxItem>\n);\n\nconst ContextMenuRadioGroup = ({ ...props }: ContextMenuPrimitive.RadioGroup.Props) => (\n  <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />\n);\n\nconst ContextMenuRadioItem = ({\n  className,\n  children,\n  inset,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n}) => (\n  <ContextMenuPrimitive.RadioItem\n    className={cn(\n      \"relative flex cursor-default select-none items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-inset:pl-7 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n      className,\n    )}\n    data-inset={inset}\n    data-slot=\"context-menu-radio-item\"\n    {...props}\n  >\n    <span className=\"pointer-events-none absolute right-2\">\n      <ContextMenuPrimitive.RadioItemIndicator>\n        <CheckIcon />\n      </ContextMenuPrimitive.RadioItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.RadioItem>\n);\n\nconst ContextMenuSeparator = ({ className, ...props }: ContextMenuPrimitive.Separator.Props) => (\n  <ContextMenuPrimitive.Separator\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    data-slot=\"context-menu-separator\"\n    {...props}\n  />\n);\n\nconst ContextMenuShortcut = ({ className, ...props }: ComponentProps<\"span\">) => (\n  <span\n    className={cn(\n      \"ml-auto text-muted-foreground text-xs tracking-widest group-focus/context-menu-item:text-accent-foreground\",\n      className,\n    )}\n    data-slot=\"context-menu-shortcut\"\n    {...props}\n  />\n);\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n};\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}