{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "context-menu",
  "dependencies": [
    "@base-ui/react"
  ],
  "files": [
    {
      "path": "registry/default/ui/context-menu.tsx",
      "content": "\"use client\";\n\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\";\nimport { ChevronRightIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport const ContextMenu: typeof ContextMenuPrimitive.Root =\n  ContextMenuPrimitive.Root;\n\nexport const ContextMenuPortal: typeof ContextMenuPrimitive.Portal =\n  ContextMenuPrimitive.Portal;\n\nexport function ContextMenuTrigger({\n  className,\n  children,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.Trigger\n      className={className}\n      data-slot=\"context-menu-trigger\"\n      {...props}\n    >\n      {children}\n    </ContextMenuPrimitive.Trigger>\n  );\n}\n\nexport function ContextMenuPopup({\n  children,\n  className,\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset,\n  side = \"bottom\",\n  anchor,\n  portalProps,\n  ...props\n}: ContextMenuPrimitive.Popup.Props & {\n  align?: ContextMenuPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: ContextMenuPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: ContextMenuPrimitive.Positioner.Props[\"alignOffset\"];\n  side?: ContextMenuPrimitive.Positioner.Props[\"side\"];\n  anchor?: ContextMenuPrimitive.Positioner.Props[\"anchor\"];\n  portalProps?: ContextMenuPrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <ContextMenuPortal {...portalProps}>\n      <ContextMenuPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50\"\n        data-slot=\"context-menu-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          className={cn(\n            \"relative flex not-[class*='w-']:min-w-32 origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] focus:outline-none dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n          data-slot=\"context-menu-popup\"\n          {...props}\n        >\n          <div className=\"max-h-(--available-height) w-full overflow-y-auto p-1\">\n            {children}\n          </div>\n        </ContextMenuPrimitive.Popup>\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPortal>\n  );\n}\n\nexport function ContextMenuGroup(\n  props: ContextMenuPrimitive.Group.Props,\n): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  );\n}\n\nexport function ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.Item\n      className={cn(\n        \"flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\",\n        className,\n      )}\n      data-inset={inset}\n      data-slot=\"context-menu-item\"\n      data-variant={variant}\n      {...props}\n    />\n  );\n}\n\nexport function ContextMenuLinkItem({\n  className,\n  inset,\n  variant = \"default\",\n  closeOnClick = true,\n  ...props\n}: ContextMenuPrimitive.LinkItem.Props & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.LinkItem\n      className={cn(\n        \"flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\",\n        className,\n      )}\n      closeOnClick={closeOnClick}\n      data-inset={inset}\n      data-slot=\"context-menu-link-item\"\n      data-variant={variant}\n      {...props}\n    />\n  );\n}\n\nexport function ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  variant = \"default\",\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  variant?: \"default\" | \"switch\";\n}): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      checked={checked}\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default items-center gap-2 rounded-sm py-1 ps-2 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        variant === \"switch\"\n          ? \"grid-cols-[1fr_auto] gap-4 pe-1.5\"\n          : \"grid-cols-[.75rem_1fr] pe-4\",\n        className,\n      )}\n      data-slot=\"context-menu-checkbox-item\"\n      {...props}\n    >\n      {variant === \"switch\" ? (\n        <>\n          <span className=\"col-start-1\">{children}</span>\n          <ContextMenuPrimitive.CheckboxItemIndicator\n            className=\"inset-shadow-[0_1px_--theme(--color-black/4%)] inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]\"\n            keepMounted\n          >\n            <span className=\"pointer-events-none block aspect-square h-full in-[[data-slot=context-menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=context-menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=context-menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=context-menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]\" />\n          </ContextMenuPrimitive.CheckboxItemIndicator>\n        </>\n      ) : (\n        <>\n          <ContextMenuPrimitive.CheckboxItemIndicator className=\"col-start-1 -ms-0.5\">\n            <svg\n              aria-hidden=\"true\"\n              fill=\"none\"\n              height=\"24\"\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"2\"\n              viewBox=\"0 0 24 24\"\n              width=\"24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n            </svg>\n          </ContextMenuPrimitive.CheckboxItemIndicator>\n          <span className=\"col-start-2\">{children}</span>\n        </>\n      )}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function ContextMenuRadioGroup(\n  props: ContextMenuPrimitive.RadioGroup.Props,\n): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nexport function ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[.75rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"context-menu-radio-item\"\n      {...props}\n    >\n      <ContextMenuPrimitive.RadioItemIndicator className=\"col-start-1 -ms-0.5\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </ContextMenuPrimitive.RadioItemIndicator>\n      <span className=\"col-start-2\">{children}</span>\n    </ContextMenuPrimitive.RadioItem>\n  );\n}\n\nexport function ContextMenuGroupLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs data-inset:ps-9 sm:data-inset:ps-8\",\n        className,\n      )}\n      data-inset={inset}\n      data-slot=\"context-menu-label\"\n      {...props}\n    />\n  );\n}\n\nexport function ContextMenuSeparator({\n  className,\n  ...props\n}: ContextMenuPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border\", className)}\n      data-slot=\"context-menu-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n  return (\n    <kbd\n      className={cn(\n        \"ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest\",\n        className,\n      )}\n      data-slot=\"context-menu-shortcut\"\n      {...props}\n    />\n  );\n}\n\nexport function ContextMenuSub(\n  props: ContextMenuPrimitive.SubmenuRoot.Props,\n): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  );\n}\n\nexport function ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      className={cn(\n        \"flex min-h-8 items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-popup-open:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-popup-open:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>svg:not(:last-child)]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n        className,\n      )}\n      data-inset={inset}\n      data-slot=\"context-menu-sub-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ms-auto -me-0.5 opacity-80\" />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  );\n}\n\nexport function ContextMenuSubPopup({\n  className,\n  sideOffset = 0,\n  alignOffset,\n  align = \"start\",\n  ...props\n}: ContextMenuPrimitive.Popup.Props & {\n  align?: ContextMenuPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: ContextMenuPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: ContextMenuPrimitive.Positioner.Props[\"alignOffset\"];\n}): React.ReactElement {\n  const defaultAlignOffset = align !== \"center\" ? -5 : undefined;\n\n  return (\n    <ContextMenuPopup\n      align={align}\n      alignOffset={alignOffset ?? defaultAlignOffset}\n      className={className}\n      data-slot=\"context-menu-sub-content\"\n      side=\"inline-end\"\n      sideOffset={sideOffset}\n      {...props}\n    />\n  );\n}\n\nexport { ContextMenuPrimitive };\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "light": {
      "destructive-foreground": "var(--color-red-700)"
    },
    "dark": {
      "destructive-foreground": "var(--color-red-400)"
    }
  },
  "type": "registry:ui"
}