{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "context-menu",
  "title": "Context Menu",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/context-menu/ContextMenu.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRoot data-uipkge data-slot=\"context-menu\" v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/context-menu/ContextMenu.vue"
    },
    {
      "path": "packages/registry-vue/components/context-menu/ContextMenuCheckboxItem.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Check } from 'lucide-vue-next'\nimport { ContextMenuCheckboxItem, ContextMenuItemIndicator, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    data-uipkge\n    data-slot=\"context-menu-checkbox-item\"\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\\'size-\\'])]:size-4',\n        props.class\n      )\n    \"\n  >\n    <span class=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <slot name=\"indicator-icon\">\n          <Check class=\"size-4\" aria-hidden=\"true\" />\n        </slot>\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/context-menu/ContextMenuCheckboxItem.vue"
    },
    {
      "path": "packages/registry-vue/components/context-menu/ContextMenuContent.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuContentEmits, ContextMenuContentProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ContextMenuContent, ContextMenuPortal, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      data-uipkge\n      data-slot=\"context-menu-content\"\n      v-bind=\"{ ...$attrs, ...forwarded }\"\n      :class=\"\n        cn(\n          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=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 z-50 max-h-(--reka-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/context-menu/ContextMenuContent.vue"
    },
    {
      "path": "packages/registry-vue/components/context-menu/ContextMenuGroup.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuGroupProps } from 'reka-ui'\nimport { ContextMenuGroup } from 'reka-ui'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup data-uipkge data-slot=\"context-menu-group\" v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/context-menu/ContextMenuGroup.vue"
    },
    {
      "path": "packages/registry-vue/components/context-menu/ContextMenuItem.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuItemEmits, ContextMenuItemProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ContextMenuItem, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<\n    ContextMenuItemProps & {\n      class?: HTMLAttributes['class']\n      inset?: boolean\n      variant?: 'default' | 'destructive'\n    }\n  >(),\n  {\n    variant: 'default',\n  },\n)\nconst emits = defineEmits<ContextMenuItemEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuItem\n    data-uipkge\n    data-slot=\"context-menu-item\"\n    :data-inset=\"inset ? '' : undefined\"\n    :data-variant=\"variant\"\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\\'text-\\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\\'size-\\'])]:size-4',\n        props.class\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/context-menu/ContextMenuItem.vue"
    },
    {
      "path": "packages/registry-vue/components/context-menu/ContextMenuLabel.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuLabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ContextMenuLabel } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n\n<template>\n  <ContextMenuLabel\n    data-uipkge\n    data-slot=\"context-menu-label\"\n    :data-inset=\"inset ? '' : undefined\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/context-menu/ContextMenuLabel.vue"
    },
    {
      "path": "packages/registry-vue/components/context-menu/ContextMenuPortal.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuPortalProps } from 'reka-ui'\nimport { ContextMenuPortal } from 'reka-ui'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal data-uipkge data-slot=\"context-menu-portal\" v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/context-menu/ContextMenuPortal.vue"
    },
    {
      "path": "packages/registry-vue/components/context-menu/ContextMenuRadioGroup.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from 'reka-ui'\nimport { ContextMenuRadioGroup, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuRadioGroup data-uipkge data-slot=\"context-menu-radio-group\" v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/context-menu/ContextMenuRadioGroup.vue"
    },
    {
      "path": "packages/registry-vue/components/context-menu/ContextMenuRadioItem.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Circle } from 'lucide-vue-next'\nimport { ContextMenuItemIndicator, ContextMenuRadioItem, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    data-uipkge\n    data-slot=\"context-menu-radio-item\"\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\\'size-\\'])]:size-4',\n        props.class\n      )\n    \"\n  >\n    <span class=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <slot name=\"indicator-icon\">\n          <Circle class=\"size-2 fill-current\" />\n        </slot>\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/context-menu/ContextMenuRadioItem.vue"
    },
    {
      "path": "packages/registry-vue/components/context-menu/ContextMenuSeparator.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuSeparatorProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ContextMenuSeparator } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n\n<template>\n  <ContextMenuSeparator\n    data-uipkge\n    data-slot=\"context-menu-separator\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('bg-border -mx-1 my-1 h-px', props.class)\"\n  />\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/context-menu/ContextMenuSeparator.vue"
    },
    {
      "path": "packages/registry-vue/components/context-menu/ContextMenuShortcut.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <span\n    data-uipkge\n    data-slot=\"context-menu-shortcut\"\n    :class=\"cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)\"\n  >\n    <slot />\n  </span>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/context-menu/ContextMenuShortcut.vue"
    },
    {
      "path": "packages/registry-vue/components/context-menu/ContextMenuSub.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuSubEmits, ContextMenuSubProps } from 'reka-ui'\nimport { ContextMenuSub, useForwardPropsEmits } from 'reka-ui'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ContextMenuSub data-uipkge data-slot=\"context-menu-sub\" v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/context-menu/ContextMenuSub.vue"
    },
    {
      "path": "packages/registry-vue/components/context-menu/ContextMenuSubContent.vue",
      "content": "<script setup lang=\"ts\">\nimport type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ContextMenuSubContent, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ContextMenuSubContent\n    data-uipkge\n    data-slot=\"context-menu-sub-content\"\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=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 z-50 min-w-[8rem] origin-(--reka-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/context-menu/ContextMenuSubContent.vue"
    },
    {
      "path": "packages/registry-vue/components/context-menu/ContextMenuSubTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuSubTriggerProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { ContextMenuSubTrigger, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    data-uipkge\n    data-slot=\"context-menu-sub-trigger\"\n    :data-inset=\"inset ? '' : undefined\"\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\\'size-\\'])]:size-4',\n        props.class\n      )\n    \"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto\" />\n  </ContextMenuSubTrigger>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/context-menu/ContextMenuSubTrigger.vue"
    },
    {
      "path": "packages/registry-vue/components/context-menu/ContextMenuTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ContextMenuTriggerProps } from 'reka-ui'\nimport { ContextMenuTrigger, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <ContextMenuTrigger data-uipkge data-slot=\"context-menu-trigger\" v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/context-menu/ContextMenuTrigger.vue"
    },
    {
      "path": "packages/registry-vue/components/context-menu/index.ts",
      "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/context-menu/index.ts"
    }
  ],
  "dependencies": [
    "@vueuse/core",
    "lucide-vue-next",
    "reka-ui"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Right-click menu — same primitives as Dropdown Menu but triggered by `contextmenu` events. Drop on any element you want to attach row actions, file-system style operations, or copy/paste menus to.",
  "categories": [
    "overlay"
  ]
}